Skip to content

Instantly share code, notes, and snippets.

@malwoodsantoro

malwoodsantoro/index.html

Last active March 4, 2022 05:27
Show Gist options
  • Save malwoodsantoro/8fd46a72e12c8c556a75d0b9f0af1669 to your computer and use it in GitHub Desktop.
Save malwoodsantoro/8fd46a72e12c8c556a75d0b9f0af1669 to your computer and use it in GitHub Desktop.
Download ZIP
Pass 'sdf:true' to addImage()
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/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>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location
center: [-74.50, 40], // starting position
zoom: 2 // starting zoom
});
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, {sdf: true});
map.addLayer({
"id": "cat-points",
"type": "symbol",
"source": {
type: 'geojson',
data: './regions-points.geojson'
},
"layout": {
"icon-image": "cat",
"icon-size": 0.1,
},
"paint": {
"icon-color": {
property: "region",
type: "categorical",
stops: [
['Oceania', "#51bbd6"],
['South America', "#77deff"],
['North America', "#ee986f"],
['Australia', "#3751ff"],
['Africa', "#ff7da8"],
['Europe', "#bdffbb"],
['Asia', "#c48aff"],
['Antartica', "#ffcb7e"]
]
}
}
});
});
});
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
regions-points.geojson
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment