Add an icon to the map

Add an icon to the map from an external URL and use it in a symbol layer. See the example: https://docs.mapbox.com//mapbox-gl-js/example/add-image/

by jscastro76

HTML

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

<div id="map"></div>

CSS

body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }

JavaScript

mapboxgl.accessToken = 'PASTE HERE YOUR TOKEN';
		var map = new mapboxgl.Map({
		  container: 'map',
		  style: 'mapbox://styles/mapbox/streets-v11'
		});
		let fHover = null;
		map.on('load', function() {
		  map.loadImage(
		    'https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png',
		    function(error, image) {
		      if (error) throw error;
		      map.addImage('cat', image);
		      map.addSource('point', {
		        'type': 'geojson',
		        'generateId': true,
		        'data': {
		          'type': 'FeatureCollection',
		          'features': [{
		            'type': 'Feature',
		            'geometry': {
		              'type': 'Point',
		              'coordinates': [0, 0]
		            }
		          }]
		        }
		      });
		      map.addLayer({
		        'id': 'points',
		        'type': 'symbol',
		        'source': 'point',
		        'layout': {
		          'icon-image': 'cat',
		          'icon-size': 0.25,
		        },
		        'paint': {
		          'icon-opacity': [
		            'case',
		            ['boolean', ['feature-state', 'hover'], false],
		            1,
		            0.3
		          ]
		        }
		      });
		    }
		  );

		  map.on('mousemove', 'points', function(e) {
		    if (e.features[0]) {
		      mouseover(e.features[0]);
		    } else {
		      mouseout();
		    }

		  });

		  map.on('mouseout', 'points', function(e) {
		    mouseout();
		  });

		  function mouseover(feature) {
		    fHover = feature;
		    map.getCanvasContainer().style.cursor = 'pointer';

		    map.setFeatureState({
		      source: 'point',
		      id: fHover.id
		    }, {
		      hover: true
		    });
		  }

		  function mouseout() {
		    if (!fHover) return;
		    map.getCanvasContainer().style.cursor = 'default';
		    map.setFeatureState({
		      source: 'point',
		      id: fHover.id
		    }, {
		      hover: false
		    });
		    fHover = null;

		  }
		});