Last active
November 27, 2018 11:45
-
-
Save planemad/5670e14b67e3eb82b707ba46c9d3010f to your computer and use it in GitHub Desktop.
OpenStreetMap GL Demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: gpl-3.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>OpenStreetMap Tiles in Mapbox GL</title> | |
<meta charset='utf-8'> | |
<!-- Mapbox GL --> | |
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script> | |
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' /> | |
<style> | |
html, | |
body { | |
height: 100%; | |
} | |
#map { | |
width: 100%; | |
height: 100%; | |
} | |
</style> | |
</head> | |
<body> | |
<div id='map'></div> | |
</body> | |
<script> | |
// Create a new Mapbox GL map: https://www.mapbox.com/mapbox-gl-js/api | |
var map = new mapboxgl.Map({ | |
container: 'map', | |
style: 'https://cdn.jsdelivr.net/gh/mapbox/mapbox-gl-styles/styles/empty-v8.json', | |
hash: true | |
}); | |
map.on('load', function () { | |
map.addLayer({ | |
'id': 'osm-tiles', | |
'type': 'raster', | |
'source': { | |
'type': 'raster', | |
// Add OSM tiles: https://wiki.openstreetmap.org/wiki/Tile_servers | |
'tiles': [ | |
'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png' | |
], | |
'tileSize': 256 | |
}, | |
'paint': { | |
// OPTIONAL: Fun transition from B&W to color while zooming in: https://www.mapbox.com/mapbox-gl-js/style-spec#layers-raster | |
'raster-saturation': { | |
stops: [[0, -1], [10, .1]] | |
} | |
} | |
}); | |
}); | |
</script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment