Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IconLayer (Autopacking) Icons losing definition when Zooming out #2745

Closed
Lowhearth opened this Issue Mar 4, 2019 · 3 comments

Comments

Projects
None yet
2 participants
@Lowhearth
Copy link

Lowhearth commented Mar 4, 2019

First of all I'd like to say thanks for this amazing library.

Using IconLayer with autopacking, the icon correctly diminishes in size when Zooming out but loses significant definition (Feels like its not using the MIPMAP filtering for minification).
This behavior is not shown when I previously pack the exact same image on a sprite, and use the prepacked atlas IconLayer configuration.
For diminishing the size of the icon I'm using a linear function that reduces the iconSize prop when zoom changes (working fine with prepacked atlas)

I've tried to follow the SourceCode of the IconLayerManager to find the root cause but had no luck.

Thanks in advance!

@Lowhearth Lowhearth added the bug label Mar 4, 2019

@xintongxia xintongxia self-assigned this Mar 4, 2019

@xintongxia

This comment has been minimized.

Copy link
Contributor

xintongxia commented Mar 6, 2019

@Lowhearth

  1. What prop you are using to control the size of icon?
    In IconLayer, there is a prop sizeScale and accessor getSize, which can manipulate the size of icon. Is this what you are using?

As I tried to correlate the size and zoom level, I couldn't reproduce your issue.

  1. What height and width you are used in getIcon callback? The height and width are the size we used to pack the iconAtlas in IconManager.

  2. Could you provide a small .gif to demonstrate the issue?

@Lowhearth

This comment has been minimized.

Copy link
Author

Lowhearth commented Mar 12, 2019

@xintongxia

Sorry for the delayed response, I've got all you need :

grab-landing-page

For better resolution: https://i.ibb.co/DfMbB3n/issuedem.gif

import { render } from "react-dom";
import { StaticMap } from "react-map-gl";
import DeckGL, { IconLayer } from "deck.gl";

import IconClusterLayer from "./icon-cluster-layer";

const MAPBOX_TOKEN =""
const iconImage =
  "https://cors-anywhere.herokuapp.com/http://www.naturephotographysimplified.com/wp-content/uploads/2014/12/Nature-Photography-Simplified-Elements-of-Design-Diagonal-Line-On-Ground.jpg?x92028";
const DATA = [
  {
    coordinates: [28.96, 13.66033],
    name: "Al Zarnkh",
    class: "LL5",
    mass: "700",
    year: 2001
  }
];

export const INITIAL_VIEW_STATE = {
  longitude: -35,
  latitude: 36.7,
  zoom: 1.8,
  maxZoom: 20,
  pitch: 0,
  bearing: 0
};


export class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      x: 0,
      y: 0,
      hoveredItems: null,
      expanded: false,
      zoom: INITIAL_VIEW_STATE.zoom
    };
  }
  _renderLayers() {
    const { data = DATA, viewState } = this.props;
    const { zoom } = this.state;
    const layerProps = {
      data,
      pickable: true,
      wrapLongitude: true,
      getPosition: d => d.coordinates,
      getIcon: d => ({
        url: iconImage,
        width: 300,
        height: 200,
        anchorY: 0,
        mask: false
      }),
      sizeScale: 60,
      getSize: d => zoom,
      onClick: this._onClick
    };

    const layer = new IconLayer({
      ...layerProps,
      id: "icon",
      updateTriggers: {
        getSize: zoom
      }
    });

    return [layer];
  }
  onViewStateChange({ viewState }) {
    this.setState({ zoom: viewState.zoom });
  }
  render() {
    const { viewState, controller = true, baseMap = true } = this.props;

    return (
      <DeckGL
        layers={this._renderLayers()}
        initialViewState={INITIAL_VIEW_STATE}
        viewState={viewState}
        controller={controller}
        onViewStateChange={this.onViewStateChange.bind(this)}
      >
        {baseMap && (
          <StaticMap
            reuseMaps
            mapStyle="mapbox://styles/mapbox/dark-v9"
            preventStyleDiffing={true}
            mapboxApiAccessToken={MAPBOX_TOKEN}
          />
        )}

        {this._renderhoveredItems}
      </DeckGL>
    );
  }
}

export function renderToDOM(container) {
  render(<App />, container);
}
    "deck.gl": "^6.4.5",
    "rbush": "^2.0.1",
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
    "react-map-gl": "^3.3.0"

This behaviour is not shown when I display the same image with a prepacked Atlas (using same dimensions).
I've also tried with different images with the same result.

Thanks for your time.

@Lowhearth

This comment has been minimized.

Copy link
Author

Lowhearth commented Mar 21, 2019

@xintongxia Thanks.

@Lowhearth Lowhearth closed this Mar 21, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.