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

Lowhearth opened this Issue Mar 4, 2019 · 3 comments


None yet
2 participants
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


This comment has been minimized.

Copy link

xintongxia commented Mar 6, 2019


  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?


This comment has been minimized.

Copy link

Lowhearth commented Mar 12, 2019


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


For better resolution:

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

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

const MAPBOX_TOKEN =""
const iconImage =
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) {

    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 = {
      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({
      id: "icon",
      updateTriggers: {
        getSize: zoom

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

    return (
        {baseMap && (


export function renderToDOM(container) {
  render(<App />, container);
    "": "^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.


This comment has been minimized.

Copy link

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.