Last active
February 6, 2016 12:41
-
-
Save ernesmb/be05f8808cd369a82759 to your computer and use it in GitHub Desktop.
MarkerCluster with CartoDB
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> | |
| <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css"/> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css"/> | |
| <!--[if lte IE 8]> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" /> | |
| <link rel="stylesheet" href="http://asset.geosprocket.com/leaflet/cluster/MarkerCluster.Default.ie.css" /> | |
| <![endif]--> | |
| <style type="text/css"> | |
| body { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| html, body, #map { | |
| height: 100%; | |
| } | |
| .marker-cluster-small { | |
| background-color: rgba(181, 226, 140, 0.6); | |
| } | |
| .marker-cluster-small div { | |
| background-color: rgba(110, 204, 57, 0.6); | |
| } | |
| .marker-cluster-medium { | |
| background-color: rgba(241, 211, 87, 0.6); | |
| } | |
| .marker-cluster-medium div { | |
| background-color: rgba(240, 194, 12, 0.6); | |
| } | |
| .marker-cluster-large { | |
| background-color: rgba(253, 156, 115, 0.6); | |
| } | |
| .marker-cluster-large div { | |
| background-color: rgba(241, 128, 23, 0.6); | |
| } | |
| .marker-cluster { | |
| background-clip: padding-box; | |
| border-radius: 20px; | |
| } | |
| .marker-cluster div { | |
| width: 30px; | |
| height: 30px; | |
| margin-left: 5px; | |
| margin-top: 5px; | |
| text-align: center; | |
| border-radius: 15px; | |
| font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif; | |
| } | |
| .marker-cluster span { | |
| line-height: 30px; | |
| } | |
| </style> | |
| <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js"></script> | |
| <body> | |
| <div id="map"></div> | |
| <script> | |
| // Base layer | |
| var baseLayer = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', { | |
| attribution:'Stamen and CartoDB attribution' | |
| }); | |
| // MarkerCluster layer and options | |
| var markers = L.markerClusterGroup({ | |
| showCoverageOnHover:false, | |
| spiderfyOnMaxZoom:true, | |
| spiderLegPolylineOptions:{ | |
| weight:1, color:'#999', opacity:0.5 | |
| }, | |
| zoomToBoundsOnClick:true, | |
| removeOutsideVisibleBounds:true | |
| }); | |
| // CartoDB SQL API Call | |
| $.getJSON("https://ernestomb.cartodb.com/api/v2/sql?format=GeoJSON&q=SELECT * FROM ne_10m_populated_places_simple_7_copy", function(data) { | |
| var geojson = L.geoJson(data, { | |
| onEachFeature: function (feature, layer) { | |
| // Add a popup or any other layer-related action | |
| layer.bindPopup("<h2>" + feature.properties.name + "</h2><hr><p>Population: " + feature.properties.pop_max + "</p>"); | |
| } | |
| }); | |
| markers.addLayer(geojson); | |
| // Build the map | |
| var map = L.map('map', {maxZoom: 9}).fitBounds(markers.getBounds()); | |
| baseLayer.addTo(map); | |
| markers.addTo(map); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment