Last active
July 12, 2016 19:19
-
-
Save joshuahouston/fa03efe33577dc3decf4e9e947dee05d to your computer and use it in GitHub Desktop.
Sitka Pokemon
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> | |
| <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.20.1/mapbox-gl.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.20.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> | |
| /* global mapboxgl */ | |
| 'use strict'; | |
| mapboxgl.accessToken = 'pk.eyJ1IjoidHJpc3RlbiIsImEiOiJiUzBYOEJzIn0.VyXs9qNWgTfABLzSI3YcrQ'; | |
| var bounds = [ | |
| [-135.46829, 57.009337], // sw | |
| [-135.1593, 57.15933] // ne | |
| ]; | |
| var map = new mapboxgl.Map({ | |
| container: 'map', | |
| style: 'mapbox://styles/mapbox/light-v9', | |
| center: [-135.33, 57.05], | |
| maxBounds: bounds, | |
| minZoom: 10, | |
| zoom: 14 | |
| }); | |
| map.addControl(new mapboxgl.Navigation({ | |
| position: 'top-left' | |
| })); | |
| var url = 'https://spreadsheets.google.com/feeds/list/1-Ugz_ygI1ftxqmIjFMBZ3krrmUU6jp9adXe7wQEGuSM/od6/public/basic?alt=json'; | |
| mapboxgl.util.getJSON(url, function(err, data) { | |
| // From the requested source we'll need to do a bit of | |
| // data processing to get it into a format for our needs. | |
| // The finished output looks like GeoJSON | |
| var geojson = { | |
| type: 'FeatureCollection', | |
| features: [] | |
| }; | |
| data.feed.entry.forEach(function(d) { | |
| var lng, lat; | |
| // Add coordinates fields you want based on `d.content` | |
| geojson.features.push({ | |
| type: 'Feature', | |
| properties: { | |
| title: d.title.$t | |
| }, | |
| geometry: { | |
| type: 'Point', | |
| coordinates: [lng, lat] | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment