Last active
April 26, 2016 01:36
-
-
Save jgravois/a4a93d907f3aaf3f7340 to your computer and use it in GitHub Desktop.
locate, query
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
| license: Apache-2.0 |
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
| <html> | |
| <head> | |
| <meta charset=utf-8 /> | |
| <title>HTML5 geolocation + Esri Leaflet</title> | |
| <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
| <!-- Load Leaflet from CDN--> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet.css" /> | |
| <script src="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet.js"></script> | |
| <!-- Load Esri Leaflet from CDN --> | |
| <script src="https://cdn.jsdelivr.net/leaflet.esri/2.0.0-beta.7/esri-leaflet.js"></script> | |
| <style> | |
| body { margin:0; padding:0; } | |
| #map { position: absolute; top:0; bottom:0; right:0; left:0; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script> | |
| // html5 geolocation requires a secure connection | |
| if (window.location.protocol != "https:") { | |
| window.location.protocol = "https"; | |
| } | |
| var map = L.map('map').setView([34, -118], 10); | |
| L.esri.basemapLayer('DarkGray').addTo(map); | |
| // ask leaflet to use HTML5 to query the user location | |
| map.locate(); | |
| // listen for the result of that asynchronous method | |
| map.on('locationfound', function(evt) { | |
| // construct a query object | |
| var censusBlocks = L.esri.query({ | |
| url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/1' | |
| }); | |
| // pass it the user's current location | |
| censusBlocks.intersects(evt.latlng); | |
| // execute the spatial query | |
| censusBlocks.run(function(error, intersectingBlocks){ | |
| // add the GeoJson to the map | |
| var blockLayer = L.geoJson(intersectingBlocks).addTo(map); | |
| // and update the map extent | |
| map.fitBounds(blockLayer.getBounds()) | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment