Last active
July 27, 2017 19:06
-
-
Save wuz/3f10c9004d7427192640f4d757939c39 to your computer and use it in GitHub Desktop.
Adding Load Function
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
mapboxgl.accessToken = 'pk.eyJ1IjoiYnlmcm9zdC1hcnRpY2xlcyIsImEiOiJjajVsZ3NwZGczMWNtMnFyeTR2cHRnajZ4In0.HOjYrueiLWlhLfhsDCa7wQ'; // Replace with your token | |
var map = new mapboxgl.Map({ | |
container: 'map', //this is the id of the container you want your map in | |
style: 'mapbox://styles/mapbox/light-v9', // this controls the style of the map. Want to see more? Try changing 'light' to 'simple'. | |
minZoom: 2 // We want our map to start out pretty zoomed in to start. | |
}); | |
map.on('load', function() { //On map load, we want to do some stuff | |
map.addLayer({ //here we are adding a layer containing the tileset we just uploaded | |
'id': 'countries',//this is the name of our layer, which we will need later | |
'source': { | |
'type': 'vector', | |
'url': 'mapbox://' // <--- Add the Map ID you copied here | |
}, | |
'source-layer': '', // <--- Add the source layer name you copied here | |
'type': 'fill', | |
'paint': { | |
'fill-color': '#52489C', //this is the color you want your tileset to have (I used a nice purple color) | |
'fill-outline-color': '#F2F2F2' //this helps us distinguish individual countries a bit better by giving them an outline | |
} | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment