-
-
Save brunob/3765635 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="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css"></link> | |
| <script src="http://mbostock.github.com/d3/d3.v2.js?2.8.1"></script> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.4/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
| {"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