Skip to content

Instantly share code, notes, and snippets.

@yukinarit
Last active November 23, 2022 11:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yukinarit/7b4e43fe5a9df0cf33cfc31e0969a6b5 to your computer and use it in GitHub Desktop.
Save yukinarit/7b4e43fe5a9df0cf33cfc31e0969a6b5 to your computer and use it in GitHub Desktop.
Load party parrot gif file on mapgox-gl-js
<html>
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = '<TOKEN>';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v12', // style URL
zoom: 1,
center: [139.763906, 35.6811649] // starting position
});
map.on('load', () => {
map.loadImage('partyparrot.gif',
(e, image) => {
if (e) throw e;
map.addImage('parrot', image);
map.addSource('point', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [139.763906, 35.6811649]
}}]
}});
map.addLayer({ 'id': 'points', 'type': 'symbol', 'source': 'point', 'layout': { 'icon-image': 'parrot', 'icon-size': 0.25 } });
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment