Skip to content

Instantly share code, notes, and snippets.

@larsvers

larsvers/.block

Last active November 3, 2016 21:59
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 larsvers/d5017c96cd210e368b1aef4a3354ea93 to your computer and use it in GitHub Desktop.
Save larsvers/d5017c96cd210e368b1aef4a3354ea93 to your computer and use it in GitHub Desktop.
Download ZIP
mapbox satellite circles
Raw
.block
license: mit
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>mapboxgl</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://d3js.org/d3.v4.js"></script>
<script src='https://api.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.css' rel='stylesheet' />
<link rel="stylesheet" href="mapboxgl.css">
<style>
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
var style = {};
style.outdoor = 'mapbox://styles/larsvers/civ13lwyh01lc2hpbgr74oyus';
style.satellite = 'mapbox://styles/larsvers/civ2tags1000k2iodkxhum370';
mapboxgl.accessToken = 'pk.eyJ1IjoibGFyc3ZlcnMiLCJhIjoiY2l2MTAxY2pjMDA0aTJ6dDVudXIyeTBrayJ9.-zz4eMd83tjFyz4OITkZFw';
var map = new mapboxgl.Map({
container: 'map',
style: style.satellite,
center: [-0.12, 51.51],
zoom: 4,
pitch: 50
});
map.on('load', function() {
map.addSource("point", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-0.1278, 51.5074]
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [8.4037, 49.0069]
}
}]
}
});
map.addLayer({
"id": "point-colour",
"type": "circle",
"source": "point",
"paint": {
"circle-radius": 40,
"circle-color": "#f00",
"circle-blur": 0,
"circle-opacity": 0.5,
"circle-pitch-scale": "viewport"
}
});
map.addLayer({
"id": "point-white",
"type": "circle",
"source": "point",
"paint": {
"circle-radius": 30,
"circle-color": "#fff",
"circle-blur": 0.4,
"circle-opacity": 1
}
});
map.addControl(new mapboxgl.NavigationControl());
}); // map.on('load')
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment