Created
November 20, 2014 16:37
-
-
Save thomasdegry/889fc96a592602c94a57 to your computer and use it in GitHub Desktop.
Mapbox cluster geojson
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>Markercluster with Mapbox marker data</title> | |
| <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
| <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' /> | |
| <style> | |
| body { margin:0; padding:0; } | |
| #map { position:absolute; top:0; bottom:0; width:100%; } | |
| </style> | |
| </head> | |
| <body> | |
| <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' /> | |
| <link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' /> | |
| <div id='map'></div> | |
| <script> | |
| L.mapbox.accessToken = 'pk.eyJ1IjoiZGVhdGhtYXNrIiwiYSI6ImJVQkh5RW8ifQ.jJPSoad9XbgqaU_oUVBj2Q'; | |
| // Here we don't use the second argument to map, since that would automatically | |
| // load in non-clustered markers from the layer. Instead we add just the | |
| // backing tileLayer, and then use the featureLayer only for its data. | |
| var geojson = [ | |
| { | |
| "type": "Feature", | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [-77.03238901390978,38.913188059745586] | |
| }, | |
| "properties": { | |
| "title": "Mapbox DC", | |
| "description": "1714 14th St NW, Washington DC", | |
| "marker-color": "#fc4353", | |
| "marker-size": "large", | |
| "marker-symbol": "monument" | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [-122.414, 37.776] | |
| }, | |
| "properties": { | |
| "title": "Mapbox SF", | |
| "description": "155 9th St, San Francisco", | |
| "marker-color": "#fc4353", | |
| "marker-size": "large", | |
| "marker-symbol": "harbor" | |
| } | |
| } | |
| ]; | |
| var map = L.mapbox.map('map') | |
| .setView([40.73, -74.011], 13); | |
| // Since featureLayer is an asynchronous method, we use the `.on('ready'` | |
| // call to only use its marker data once we know it is actually loaded. | |
| L.mapbox.featureLayer('examples.map-h61e8o8e').on('ready', function(e) { | |
| // The clusterGroup gets each marker in the group added to it | |
| // once loaded, and then is added to the map | |
| var markers = new L.MarkerClusterGroup(); | |
| var geojson = [ | |
| { | |
| "type": "Feature", | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [-77.03238901390978,38.913188059745586] | |
| }, | |
| "properties": { | |
| "title": "Mapbox DC", | |
| "description": "1714 14th St NW, Washington DC", | |
| "marker-color": "#fc4353", | |
| "marker-size": "large", | |
| "marker-symbol": "monument" | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [-122.414, 37.776] | |
| }, | |
| "properties": { | |
| "title": "Mapbox SF", | |
| "description": "155 9th St, San Francisco", | |
| "marker-color": "#fc4353", | |
| "marker-size": "large", | |
| "marker-symbol": "harbor" | |
| } | |
| } | |
| ]; | |
| var geoJsonLayer = L.geoJson(geojson); | |
| markers.addLayer(geoJsonLayer); | |
| map.addLayer(markers); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment