-
-
Save ZJONSSON/3087431 to your computer and use it in GitHub Desktop.
testing circles in Leaflet.js (working)
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> | |
| <title>Testing d3.js in Leaflet.js</title> | |
| <link rel="stylesheet" href="leaflet.css"></link> | |
| <script src="http://mbostock.github.com/d3/d3.v2.js?2.8.1"></script> | |
| <script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script> | |
| <style type="text/css"> | |
| svg , g | |
| { | |
| border: solid 3px red; | |
| stroke-width: 1.5px; | |
| } | |
| circle { | |
| fill: steelblue; | |
| fill-opacity: .8; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map" style="width: 600px; height: 600px;position:relative"></div> | |
| <script type="text/javascript"> | |
| var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/3eb45b95929d472d8fe4a2a5dafbd314/998/256/{z}/{x}/{y}.png', | |
| cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade', | |
| cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}); | |
| var map = new L.Map('map', { | |
| center: new L.LatLng( 47.0176,2.3427,6), | |
| zoom: 5, | |
| layers: [cloudmade] | |
| }); | |
| /* Initialize the SVG layer */ | |
| map._initPathRoot() | |
| /* We simply pick up the SVG from the map object */ | |
| var svg = d3.select("#map").select("svg"), | |
| g = svg.append("g"); | |
| d3.json("taxa_json.json", function(collection) { | |
| /* Add a LatLng object to each item in the dataset */ | |
| collection.features.forEach(function(d) { | |
| d.LatLng = new L.LatLng(d.geometry.coordinates[1],d.geometry.coordinates[0]) | |
| }) | |
| var feature = g.selectAll("circle") | |
| .data(collection.features) | |
| .enter().append("circle").attr("r", function (d) { return d.properties.count/20 }); | |
| function update() { | |
| feature.attr("cx",function(d) { return map.latLngToLayerPoint(d.LatLng).x}) | |
| feature.attr("cy",function(d) { return map.latLngToLayerPoint(d.LatLng).y}) | |
| feature.attr("r",function(d) { return d.properties.count/1400*Math.pow(2,map.getZoom())}) | |
| } | |
| map.on("viewreset", update); | |
| update(); | |
| }) | |
| </script> | |
| </body> | |
| </html> |
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
| /* required styles */ | |
| .leaflet-map-pane, | |
| .leaflet-tile, | |
| .leaflet-marker-icon, | |
| .leaflet-marker-shadow, | |
| .leaflet-tile-pane, | |
| .leaflet-overlay-pane, | |
| .leaflet-shadow-pane, | |
| .leaflet-marker-pane, | |
| .leaflet-popup-pane, | |
| .leaflet-overlay-pane svg, | |
| .leaflet-zoom-box, | |
| .leaflet-image-layer { /* TODO optimize classes */ | |
| position: absolute; | |
| } | |
| .leaflet-container { | |
| overflow: hidden; | |
| } | |
| .leaflet-tile-pane { | |
| -webkit-transform: translate3d(0,0,0); | |
| } | |
| .leaflet-tile, | |
| .leaflet-marker-icon, | |
| .leaflet-marker-shadow { | |
| -moz-user-select: none; | |
| -webkit-user-select: none; | |
| user-select: none; | |
| } | |
| .leaflet-marker-icon, | |
| .leaflet-marker-shadow { | |
| display: block; | |
| } | |
| .leaflet-clickable { | |
| cursor: pointer; | |
| // stroke: red; | |
| } | |
| .leaflet-container img { | |
| max-width: auto; | |
| } | |
| .leaflet-tile-pane { z-index: 2; } | |
| .leaflet-overlay-pane { z-index: 3; } | |
| .leaflet-shadow-pane { z-index: 4; } | |
| .leaflet-marker-pane { z-index: 5; } | |
| .leaflet-popup-pane { z-index: 6; } | |
| .leaflet-zoom-box { | |
| width: 0; | |
| height: 0; | |
| } | |
| .leaflet-tile { | |
| visibility: hidden; | |
| } | |
| .leaflet-tile-loaded { | |
| visibility: inherit; | |
| } | |
| a.leaflet-active { | |
| outline: 2px solid orange; | |
| } | |
| /* Leaflet controls */ | |
| .leaflet-control { | |
| position: relative; | |
| z-index: 7; | |
| } | |
| .leaflet-top, | |
| .leaflet-bottom { | |
| position: absolute; | |
| } | |
| .leaflet-top { | |
| top: 0; | |
| } | |
| .leaflet-right { | |
| right: 0; | |
| } | |
| .leaflet-bottom { | |
| bottom: 0; | |
| } | |
| .leaflet-left { | |
| left: 0; | |
| } | |
| .leaflet-control { | |
| float: left; | |
| clear: both; | |
| } | |
| .leaflet-right .leaflet-control { | |
| float: right; | |
| } | |
| .leaflet-top .leaflet-control { | |
| margin-top: 10px; | |
| } | |
| .leaflet-bottom .leaflet-control { | |
| margin-bottom: 10px; | |
| } | |
| .leaflet-left .leaflet-control { | |
| margin-left: 10px; | |
| } | |
| .leaflet-right .leaflet-control { | |
| margin-right: 10px; | |
| } | |
| .leaflet-control-zoom { | |
| padding: 5px; | |
| background: rgba(0, 0, 0, 0.25); | |
| -moz-border-radius: 7px; | |
| -webkit-border-radius: 7px; | |
| border-radius: 7px; | |
| } | |
| .leaflet-control-zoom a { | |
| display: block; | |
| width: 19px; | |
| height: 19px; | |
| background-position: 50% 50%; | |
| background-repeat: no-repeat; | |
| background-color: rgba(255, 255, 255, 0.75); | |
| -moz-border-radius: 4px; | |
| -webkit-border-radius: 4px; | |
| border-radius: 4px; | |
| } | |
| .leaflet-control-zoom a:hover { | |
| background-color: #fff; | |
| } | |
| .leaflet-big-buttons .leaflet-control-zoom a { | |
| width: 27px; | |
| height: 27px; | |
| } | |
| .leaflet-control-zoom-in { | |
| background-image: url(images/zoom-in.png); | |
| margin-bottom: 5px; | |
| } | |
| .leaflet-control-zoom-out { | |
| background-image: url(images/zoom-out.png); | |
| } | |
| .leaflet-container .leaflet-control-attribution { | |
| margin: 0; | |
| padding: 0 5px; | |
| font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; | |
| color: #333; | |
| background-color: rgba(255, 255, 255, 0.7); | |
| -moz-box-shadow: 0 0 7px #ccc; | |
| -webkit-box-shadow: 0 0 7px #ccc; | |
| box-shadow: 0 0 7px #ccc; | |
| } | |
| /* Fade animations */ | |
| .leaflet-fade-anim .leaflet-tile { | |
| opacity: 0; | |
| -webkit-transition: opacity 0.2s linear; | |
| -moz-transition: opacity 0.2s linear; | |
| -o-transition: opacity 0.2s linear; | |
| transition: opacity 0.2s linear; | |
| } | |
| .leaflet-fade-anim .leaflet-tile-loaded { | |
| opacity: 1; | |
| } | |
| .leaflet-fade-anim .leaflet-popup { | |
| opacity: 0; | |
| -webkit-transition: opacity 0.2s linear; | |
| -moz-transition: opacity 0.2s linear; | |
| -o-transition: opacity 0.2s linear; | |
| transition: opacity 0.2s linear; | |
| } | |
| .leaflet-fade-anim .leaflet-map-pane .leaflet-popup { | |
| opacity: 1; | |
| } | |
| .leaflet-zoom-anim .leaflet-tile { | |
| -webkit-transition: none; | |
| -moz-transition: none; | |
| -o-transition: none; | |
| transition: none; | |
| } | |
| .leaflet-zoom-anim .leaflet-objects-pane { | |
| visibility: hidden; | |
| } | |
| /* Popup layout */ | |
| .leaflet-popup { | |
| position: absolute; | |
| text-align: center; | |
| -webkit-transform: translate3d(0,0,0); | |
| } | |
| .leaflet-popup-content-wrapper { | |
| padding: 1px; | |
| text-align: left; | |
| } | |
| .leaflet-popup-content { | |
| margin: 19px; | |
| } | |
| .leaflet-popup-tip-container { | |
| margin: 0 auto; | |
| width: 40px; | |
| height: 16px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .leaflet-popup-tip { | |
| width: 15px; | |
| height: 15px; | |
| padding: 1px; | |
| margin: -8px auto 0; | |
| -moz-transform: rotate(45deg); | |
| -webkit-transform: rotate(45deg); | |
| -ms-transform: rotate(45deg); | |
| -o-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| } | |
| .leaflet-popup-close-button { | |
| position: absolute; | |
| top: 9px; | |
| right: 9px; | |
| width: 10px; | |
| height: 10px; | |
| overflow: hidden; | |
| } | |
| .leaflet-popup-content p { | |
| margin: 18px 0; | |
| } | |
| /* Visual appearance */ | |
| .leaflet-container { | |
| background: #ddd; | |
| } | |
| .leaflet-container a { | |
| color: #0078A8; | |
| } | |
| .leaflet-zoom-box { | |
| border: 2px dotted #05f; | |
| background: white; | |
| opacity: 0.5; | |
| } | |
| .leaflet-popup-content-wrapper, .leaflet-popup-tip { | |
| background: white; | |
| box-shadow: 0 1px 10px #888; | |
| -moz-box-shadow: 0 1px 10px #888; | |
| -webkit-box-shadow: 0 1px 14px #999; | |
| } | |
| .leaflet-popup-content-wrapper { | |
| -moz-border-radius: 20px; | |
| -webkit-border-radius: 20px; | |
| border-radius: 20px; | |
| } | |
| .leaflet-popup-content { | |
| font: 12px/1.4 "Helvetica Neue", Arial, Helvetica, sans-serif; | |
| } | |
| .leaflet-popup-close-button { | |
| background: white url(images/popup-close.png); | |
| } |
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
| {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[6,49]},"properties":{"count":486}},{"type":"Feature","geometry":{"type":"Point","coordinates":[6,47]},"properties":{"count":457}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-1,45]},"properties":{"count":448}},{"type":"Feature","geometry":{"type":"Point","coordinates":[7,48]},"properties":{"count":415}},{"type":"Feature","geometry":{"type":"Point","coordinates":[2,49]},"properties":{"count":407}},{"type":"Feature","geometry":{"type":"Point","coordinates":[7,49]},"properties":{"count":388}},{"type":"Feature","geometry":{"type":"Point","coordinates":[6,48]},"properties":{"count":355}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1,49]},"properties":{"count":319}},{"type":"Feature","geometry":{"type":"Point","coordinates":[6,46]},"properties":{"count":317}},{"type":"Feature","geometry":{"type":"Point","coordinates":[2,50]},"properties":{"count":309}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-1,46]},"properties":{"count":304}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-1,49]},"properties":{"count":303}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-1,47]},"properties":{"count":300}},{"type":"Feature","geometry":{"type":"Point","coordinates":[3,50]},"properties":{"count":299}},{"type":"Feature","geometry":{"type":"Point","coordinates":[6,45]},"properties":{"count":292}},{"type":"Feature","geometry":{"type":"Point","coordinates":[3,49]},"properties":{"count":291}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-1,48]},"properties":{"count":278}},{"type":"Feature","geometry":{"type":"Point","coordinates":[3,46]},"properties":{"count":276}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-2,47]},"properties":{"count":271}},{"type":"Feature","geometry":{"type":"Point","coordinates":[3,47]},"properties":{"count":270}},{"type":"Feature","geometry":{"type":"Point","coordinates":[4,44]},"properties":{"count":263}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1,47]},"properties":{"count":255}},{"type":"Feature","geometry":{"type":"Point","coordinates":[2,47]},"properties":{"count":252}},{"type":"Feature","geometry":{"type":"Point","coordinates":[5,49]},"properties":{"count":244}},{"type":"Feature","geometry":{"type":"Point","coordinates":[4,45]},"properties":{"count":241}},{"type":"Feature","geometry":{"type":"Point","coordinates":[4,47]},"properties":{"count":238}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0,45]},"properties":{"count":237}},{"type":"Feature","geometry":{"type":"Point","coordinates":[3,48]},"properties":{"count":233}},{"type":"Feature","geometry":{"type":"Point","coordinates":[3,44]},"properties":{"count":228}},{"type":"Feature","geometry":{"type":"Point","coordinates":[5,46]},"properties":{"count":227}},{"type":"Feature","geometry":{"type":"Point","coordinates":[2,44]},"properties":{"count":224}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3,48]},"properties":{"count":224}},{"type":"Feature","geometry":{"type":"Point","coordinates":[4,48]},"properties":{"count":217}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1,46]},"properties":{"count":214}},{"type":"Feature","geometry":{"type":"Point","coordinates":[6,44]},"properties":{"count":209}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0,47]},"properties":{"count":204}},{"type":"Feature","geometry":{"type":"Point","coordinates":[4,46]},"properties":{"count":203}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1,45]},"properties":{"count":202}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1,44]},"properties":{"count":198}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1,48]},"properties":{"count":197}},{"type":"Feature","geometry":{"type":"Point","coordinates":[5,44]},"properties":{"count":196}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-2,49]},"properties":{"count":195}},{"type":"Feature","geometry":{"type":"Point","coordinates":[2,46]},"properties":{"count":190}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-2,48]},"properties":{"count":190}},{"type":"Feature","geometry":{"type":"Point","coordinates":[2,48]},"properties":{"count":189}},{"type":"Feature","geometry":{"type":"Point","coordinates":[4,49]},"properties":{"count":185}},{"type":"Feature","geometry":{"type":"Point","coordinates":[3,43]},"properties":{"count":184}},{"type":"Feature","geometry":{"type":"Point","coordinates":[8,49]},"properties":{"count":181}},{"type":"Feature","geometry":{"type":"Point","coordinates":[4,43]},"properties":{"count":180}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-1,43]},"properties":{"count":179}},{"type":"Feature","geometry":{"type":"Point","coordinates":[2,45]},"properties":{"count":179}},{"type":"Feature","geometry":{"type":"Point","coordinates":[2,43]},"properties":{"count":174}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0,49]},"properties":{"count":172}},{"type":"Feature","geometry":{"type":"Point","coordinates":[3,45]},"properties":{"count":168}},{"type":"Feature","geometry":{"type":"Point","coordinates":[2,51]},"properties":{"count":168}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1,50]},"properties":{"count":167}},{"type":"Feature","geometry":{"type":"Point","coordinates":[4,50]},"properties":{"count":167}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0,44]},"properties":{"count":166}},{"type":"Feature","geometry":{"type":"Point","coordinates":[5,45]},"properties":{"count":163}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0,48]},"properties":{"count":153}},{"type":"Feature","geometry":{"type":"Point","coordinates":[7,47]},"properties":{"count":145}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4,48]},"properties":{"count":142}},{"type":"Feature","geometry":{"type":"Point","coordinates":[7,44]},"properties":{"count":139}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0,46]},"properties":{"count":137}},{"type":"Feature","geometry":{"type":"Point","coordinates":[6,43]},"properties":{"count":129}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-1,44]},"properties":{"count":125}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0,43]},"properties":{"count":112}},{"type":"Feature","geometry":{"type":"Point","coordinates":[7,45]},"properties":{"count":95}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3,49]},"properties":{"count":92}},{"type":"Feature","geometry":{"type":"Point","coordinates":[5,50]},"properties":{"count":90}},{"type":"Feature","geometry":{"type":"Point","coordinates":[5,47]},"properties":{"count":88}},{"type":"Feature","geometry":{"type":"Point","coordinates":[3,51]},"properties":{"count":87}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-5,48]},"properties":{"count":80}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1,43]},"properties":{"count":77}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4,49]},"properties":{"count":74}},{"type":"Feature","geometry":{"type":"Point","coordinates":[5,48]},"properties":{"count":67}},{"type":"Feature","geometry":{"type":"Point","coordinates":[8,48]},"properties":{"count":57}},{"type":"Feature","geometry":{"type":"Point","coordinates":[7,46]},"properties":{"count":57}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-5,49]},"properties":{"count":57}},{"type":"Feature","geometry":{"type":"Point","coordinates":[5,43]},"properties":{"count":52}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-2,43]},"properties":{"count":52}},{"type":"Feature","geometry":{"type":"Point","coordinates":[3,42]},"properties":{"count":45}},{"type":"Feature","geometry":{"type":"Point","coordinates":[7,43]},"properties":{"count":29}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3,47]},"properties":{"count":29}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0,50]},"properties":{"count":26}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-2,46]},"properties":{"count":22}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-2,50]},"properties":{"count":21}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-1,50]},"properties":{"count":8}},{"type":"Feature","geometry":{"type":"Point","coordinates":[6,50]},"properties":{"count":4}},{"type":"Feature","geometry":{"type":"Point","coordinates":[2,42]},"properties":{"count":4}}]} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I lightly updated your code to see what it does, here are the updates (gist does not have pull requests): https://gist.github.com/monfera/11100987/revisions
Probably the CSS isn't compatible as I only see circles.
You can use the bl.ocks viewer to see: http://bl.ocks.org/11100987