Skip to content

Instantly share code, notes, and snippets.

@maptastik
Last active August 29, 2015 14:23
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save maptastik/cf96858d1ea0d2cd09eb to your computer and use it in GitHub Desktop.
My First mapbox-gl.js map

My first mapbox-gl.js map!

This is a really simple map. I just added added a GeoJSON layer depicting the boundary for Franklin County, Kentucky. I have to admit, I had to take a couple days break between my first attempt to add the county boundary and this successful one. It took running across this example from bwyss on GitHub. For some reason, looking at his project it finally clicked about how to add a feature, particularly of the GeoJSON variety, using this new library. I'm not sure that it's actually different from what is in the docmentation at Mapbox, but I had my 'Ah ha!' moment with the aforementioned example. Coming from LeafletJS/MapboxJS, mapbox-gl.js has a bit of a learning curve. There's so much styling that can be done with this new library that isn't possible when using pre-rendered tiles. It's exciting, but also means thinking differently about what I'm doing when I'm adding data to a webmap. Next steps are to add some markers and those sweet, smooth transitions when clicking between locations.

Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>My first mapbox-gl.js map</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.8.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.8.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.eyJ1IjoibWFwdGFzdGlrIiwiYSI6IjNPMkREV1kifQ.2KGPFZD0QaGfvYzXYotTXQ';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'https://www.mapbox.com/mapbox-gl-styles/styles/outdoors-v7.json',
center: [38.200905, -84.873284],
zoom: 9
});
map.on('style.load', function() {
map.addSource("countyBounds", {
"type": "geojson",
"data": "franklin_line.geojson"
});
map.addLayer({
"id": "county-bounds-line",
"type": "line",
"source": "countyBounds",
"interactive": true,
"paint": {
"line-color": "red"
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment