-
-
Save tb0yd/3a6cbc619c06a347d18f73cbb9cc373d to your computer and use it in GitHub Desktop.
Swap baselayer with a persistent data layer on top
This file contains hidden or 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> | |
| <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.15.0/mapbox-gl.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.css' rel='stylesheet' /> | |
| <script src='//d3js.org/d3.v3.min.js' charset='utf-8'></script> | |
| </head> | |
| <body> | |
| <style> | |
| body { margin:0; padding:0; } | |
| .map { position:absolute; top:0; bottom:0; width:100%; } | |
| .menu { | |
| position:absolute; | |
| z-index:1; | |
| top:10px; | |
| right:10px; | |
| border-radius:3px; | |
| width:120px; | |
| } | |
| .menu button { | |
| font:13px/20px 'Helvetica Neue', sans-serif; | |
| background:#3887be; | |
| color:#fff; | |
| display:block; | |
| width:100%; | |
| margin:0; | |
| padding:0; | |
| padding:10px; | |
| border:none; | |
| border-bottom:1px solid rgba(0,0,0,0.25); | |
| cursor:pointer; | |
| } | |
| .menu button:first-child { | |
| border-radius:3px 3px 0 0; | |
| } | |
| .menu button:last-child { | |
| border-radius:0 0 3px 3px; | |
| border:none; | |
| } | |
| .menu button.active, | |
| .menu button:hover { | |
| background-color:#52a1d8; | |
| } | |
| </style> | |
| <nav id='menu' class='menu'></nav> | |
| <div id='map' class='map'></div> | |
| <script> | |
| mapboxgl.accessToken = 'pk.eyJ1IjoidHJpc3RlbiIsImEiOiJiUzBYOEJzIn0.VyXs9qNWgTfABLzSI3YcrQ'; | |
| var map = new mapboxgl.Map({ | |
| container: 'map', | |
| style: 'mapbox://styles/mapbox/streets-v8', | |
| center: [-71.08171463012695, | |
| 42.384288781067205], | |
| zoom: 13 | |
| }); | |
| var baseLayers = [{ | |
| label: 'Streets', | |
| id: 'streets-v8' | |
| }, { | |
| label: 'Light', | |
| id: 'light-v8' | |
| }, { | |
| label: 'Dark', | |
| id: 'dark-v8' | |
| }]; | |
| var menu = document.getElementById('menu'); | |
| var geojson = { | |
| "type": "FeatureCollection", | |
| "features": [ | |
| { | |
| "type": "Feature", | |
| "properties": {}, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -71.08171463012695, | |
| 42.384288781067205 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": {}, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -71.07622146606445, | |
| 42.37110061256945 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": {}, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -71.05236053466797, | |
| 42.39176929913866 | |
| ] | |
| } | |
| } | |
| ] | |
| }; | |
| function addDataLayer() { | |
| map.addSource('listings', { | |
| 'type': 'geojson', | |
| 'data': geojson | |
| }); | |
| map.addLayer({ | |
| 'id': 'listing-markers', | |
| 'type': 'symbol', | |
| 'source': 'listings', | |
| "layout": { | |
| "icon-image": "harbor-15", | |
| "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"], | |
| "text-offset": [0, 0.6], | |
| "text-anchor": "top" | |
| } | |
| }); | |
| } | |
| map.on('style.load', function () { | |
| // Triggered when `setStyle` is called. | |
| if (geojson) addDataLayer(); | |
| }); | |
| map.on('load', function () { | |
| baseLayers.forEach(function(l) { | |
| var button = document.createElement('button'); | |
| button.textContent = l.label; | |
| button.addEventListener('click', function() { | |
| map.setStyle('mapbox://styles/mapbox/' + l.id); | |
| }); | |
| menu.appendChild(button); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment