Mapbox-gl-js: Create a draggable image bug

Created on 30 Nov 2019 · 2Comments · Source: mapbox/mapbox-gl-js

The image disappears when I drag the point,How to solve this problem？
When I want to drag the point, the image follows。

The following code

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>mapbox</title>


    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />

    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<pre id='coordinates' class='coordinates'></pre>
<script>
mapboxgl.accessToken = "<your access token here>";
var coordinates = document.getElementById("coordinates");
var map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/streets-v11",
  center: [0, 0],
  zoom: 2
});
var canvas = map.getCanvasContainer();

var geojson = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [0, 0]
      }
    }
  ]
};

var geojson1 = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [5, 3]
      }
    }
  ]
};
function onMove(e) {
  var coords = e.lngLat;
  // Set a UI indicator for dragging.
  canvas.style.cursor = "grabbing";
  // Update the Point feature in `geojson` coordinates
  // and call setData to the source layer `point` on it.
  geojson.features[0].geometry.coordinates = [coords.lng, coords.lat];
  map.getSource("point").setData(geojson);
  geojson1.features[0].geometry.coordinates = [coords.lng+5, coords.lat+3];
  map.getSource("point1").setData(geojson1);

}
function onUp(e) {
  var coords = e.lngLat;
  // Print the coordinates of where the point had
  // finished being dragged to on the map.
  coordinates.style.display = "block";
  coordinates.innerHTML =
    "Longitude: " + coords.lng + "<br />Latitude: " + coords.lat;
  canvas.style.cursor = "";
  // Unbind mouse/touch events
  map.off("mousemove", onMove);
  map.off("touchmove", onMove);
}
map.on("load", function() {
map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png', function(error, image) {
        if (error) throw error;
        map.addImage('cat', image);
        map.addLayer({
            "id": "point1",
            "type": "symbol",
            "source": {
                "type": "geojson",
                "data": geojson1
            },
            "layout": {
                "icon-image": "cat",
                "icon-size": map.getZoom()/10
            }
        });
        console.log(map.getZoom())
    });
  // Add a single point to the map
  map.addSource("point", {
    type: "geojson",
    data: geojson
  });
  map.addLayer({
    id: "point",
    type: "circle",
    source: "point",
    paint: {
      "circle-radius": 10,
      "circle-color": "#3887be"
    }
  });
  // When the cursor enters a feature in the point layer, prepare for dragging.
  map.on("mouseenter", "point", function() {
    map.setPaintProperty("point", "circle-color", "#3bb2d0");
    canvas.style.cursor = "move";
  });

  map.on("mouseleave", "point", function() {
    map.setPaintProperty("point", "circle-color", "#3887be");
    canvas.style.cursor = "";
  });

  map.on("mousedown", "point", function(e) {
    // Prevent the default map drag behavior.
    e.preventDefault();

    canvas.style.cursor = "grab";

    map.on("mousemove", onMove);
    map.once("mouseup", onUp);
  });

  map.on("touchstart", "point", function(e) {
    if (e.points.length !== 1) return;

    // Prevent the default map drag behavior.
    e.preventDefault();

    map.on("touchmove", onMove);
    map.once("touchend", onUp);
  });
});
</script>
</body>
</html>

Source

359126613

Most helpful comment

This issue is caused by icon collision detection:

When the icon is set to a new position, collision detection kicks in and hides the icon because new data is set. It then fades in the icon over the course of a 300 milliseconds because it is more important than other icons.

You can solve this problem in two ways:

Either add "icon-allow-overlap": true to the cat icon as a layout property. This allows the cat icon to overlap other icons so the icon won't be hidden in case of collisions. Other icons, however, typically don't have that setting so they will fade out and make space for the cat icon.
Alternatively, you can also change the map's global fadeDuration property to 0. This completely disables fading so that labels will pop in and out instantly.

kkaefer on 2 Dec 2019

🚀1 ❤1 🎉1 👍1

All 2 comments

This issue is caused by icon collision detection:

You can solve this problem in two ways:

Either add "icon-allow-overlap": true to the cat icon as a layout property. This allows the cat icon to overlap other icons so the icon won't be hidden in case of collisions. Other icons, however, typically don't have that setting so they will fade out and make space for the cat icon.
Alternatively, you can also change the map's global fadeDuration property to 0. This completely disables fading so that labels will pop in and out instantly.

kkaefer on 2 Dec 2019

🚀1 ❤1 🎉1 👍1

This issue is caused by icon collision detection:

When the icon is set to a new position, collision detection kicks in and hides the icon because new data is set. It then fades in the icon over the course of a 300 milliseconds because it is more important than other icons.

You can solve this problem in two ways:

Either add "icon-allow-overlap": true to the cat icon as a layout property. This allows the cat icon to overlap other icons so the icon won't be hidden in case of collisions. Other icons, however, typically don't have that setting so they will fade out and make space for the cat icon.

Alternatively, you can also change the map's global fadeDuration property to 0. This completely disables fading so that labels will pop in and out instantly.

thanks very much

359126613 on 3 Dec 2019

Was this page helpful?

0 / 5 - 0 ratings