Skip to content

Instantly share code, notes, and snippets.

@brunob
Forked from ZJONSSON/index.html
Created September 22, 2012 09:20
Show Gist options
  • Save brunob/3765635 to your computer and use it in GitHub Desktop.
Save brunob/3765635 to your computer and use it in GitHub Desktop.
testing circles in Leaflet.js (working)
<!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 &copy; 2011 OpenStreetMap contributors, Imagery &copy; 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>
Display the source blob
Display the rendered blob
Raw
{"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