Add an icon to the map
Add an icon to the map from an external URL and use it in a symbol layer.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Add an icon to the map</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><script src="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.js"></script><link href="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.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> <script>goongjs.accessToken = '8qzxZAuxcsctSlmOszInchP1A5GrmRBHJwCBCjO6';var map = new goongjs.Map({container: 'map',style: 'https://tiles.goong.io/assets/goong_map_web.json'}); 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','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}});});});</script> </body></html>