Add image on mouseover of map in maplibre GL

Question

I was trying to add an image on mouseover on the map. I'm using Mapbox MapLibre GL. Here's what I did till now.

var map = new maplibregl.Map({
      container: 'map',
      style: 'assets/data/basic/style.json',
      antialias: true,
      center: [-0.42, 8.22],
      zoom: 0,
      attributionControl: false,
      maxBounds: [[-171.87, -83.65], [188.31, 83.55]]
    });

    map.on('load', function () {

      map.addSource('earthquakes', {
        'type': 'geojson',
        'data': 'assets/data/earthquakes.geojson'
      });

      map.addLayer({
        'id': 'earthquakes-heat',
        'type': 'heatmap',
        'source': 'earthquakes',
        'maxzoom': 9,
        'paint': {
          // Increase the heatmap weight based on frequency and property magnitude
          'heatmap-weight': [
            'interpolate',
            ['linear'],
            ['get', 'mag'],
            0,
            0,
            6,
            1
          ],
          // Increase the heatmap color weight weight by zoom level
          // heatmap-intensity is a multiplier on top of heatmap-weight
          'heatmap-intensity': [
            'interpolate',
            ['linear'],
            ['zoom'],
            0,
            1,
            9,
            3
          ],
          // Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
          // Begin color ramp at 0-stop with a 0-transparancy color
          // to create a blur-like effect.
          'heatmap-color': [
            'interpolate',
            ['linear'],
            ['heatmap-density'],
            0,
            'rgba(33,102,172,0)',
            0.2,
            'rgb(226,41,68)',
            0.4,
            'rgb(226,41,68)',
            0.6,
            'rgb(226,41,68)',
            0.8,
            'rgb(226,41,68)',
            1,
            'rgb(226,41,68)'
          ],
          // Adjust the heatmap radius by zoom level
          'heatmap-radius': [
            'interpolate',
            ['linear'],
            ['zoom'],
            0,
            2,
            9,
            20
          ],
          // Transition from heatmap to circle layer by zoom level
          'heatmap-opacity': [
            'interpolate',
            ['linear'],
            ['zoom'],
            7,
            1,
            9,
            0
          ]
        }
      }
      );

      map.addLayer({
        'id': 'earthquakes-point',
        'type': 'circle',
        'source': 'earthquakes',
        'minzoom': 7,
        'paint': {
          // Size circle radius by earthquake magnitude and zoom level
          'circle-radius': [
            'interpolate',
            ['linear'],
            ['zoom'],
            7,
            ['interpolate', ['linear'],
              ['get', 'mag'], 1, 1, 6, 4
            ],
            16,
            ['interpolate', ['linear'],
              ['get', 'mag'], 1, 5, 6, 50
            ]
          ],
          // Color circle by earthquake magnitude
          'circle-color': [
            'interpolate',
            ['linear'],
            ['get', 'mag'],
            1,
            'rgba(33,102,172,0)',
            2,
            'rgb(103,169,207)',
            3,
            'rgb(209,229,240)',
            4,
            'rgb(253,219,199)',
            5,
            'rgb(239,138,98)',
            6,
            'rgb(178,24,43)'
          ],
          'circle-stroke-color': 'white',
          'circle-stroke-width': 1,
          // Transition from heatmap to circle layer by zoom level
          'circle-opacity': [
            'interpolate',
            ['linear'],
            ['zoom'],
            7,
            0,
            8,
            1
          ]
        }
      }
      );
      map.on('mousemove', function (e) {
        // debugger
        var coor = e.lngLat.wrap()
        var ord = []
        ord[0] = coor["lat"]
        ord[1] = coor["lng"]
        map.loadImage(
          'https://docs.mapbox.com/mapbox-gl-js/assets/cat.png',
          (error, image) => {
            if (error) throw error;

            // Add the image to the map style.
            map.addImage('cat', image);

            // Add a data source containing one point feature.
            map.addSource('point', {
              'type': 'geojson',
              'data': {
                'type': 'FeatureCollection',
                'features': [
                  {
                    'type': 'Feature',
                    'geometry': {
                      'type': 'Point',
                      'coordinates': ord
                    }
                  }
                ]
              }
            });

            // Add a layer to use the image to represent the data.
            map.addLayer({
              'id': 'points',
              'type': 'symbol',
              'source': 'point', // reference the data source
              'layout': {
                'icon-image': 'cat', // reference the image
                'icon-size': 0.25
              }
            });
          }
        );
      });
    });

When I tried to add this code it is showing the error,

Error: An image with this name already exists.

and

Uncaught (in promise) Error: Could not load image because of There is already a source with this ID. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported.

It would be really helpful if someone could help me how to add the image from local.

score 0 · Answer 1 · answered Aug 19 '21 at 01:03

Your problem is that every time the mouse moves, you're doing these three things:

adding an image
adding a source
adding a layer

You should move most of that stuff outside the map.on('mousemove', ...) handler.

When the map loads, you won't have a particular coordinate to add in your GeoJSON source, but you can create a blank source like this:

map.addSource('point', {
              'type': 'geojson',
              'data': {
                'type': 'FeatureCollection',
                'features': [
                  
                ]
              }
            });

Then, inside the mouse handler you just need to set the data, like this:

map.getSource('point').setData({
    'type': 'geojson',
    'data': {
    'type': 'FeatureCollection',
    'features': [
        {
        'type': 'Feature',
        'geometry': {
            'type': 'Point',
            'coordinates': ord
        }
        }
    ]
    }
});

Add image on mouseover of map in maplibre GL

1 Answers1