Skip to content

Instantly share code, notes, and snippets.

@pere

pere/index.html

Created July 4, 2012 12:15
Show Gist options
  • Save pere/3047025 to your computer and use it in GitHub Desktop.
Save pere/3047025 to your computer and use it in GitHub Desktop.
Download ZIP
d3.js path circles in leaflet.js
Raw
index.html
<!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">
path
{
fill: #E02A2A;
stroke: #fff;
}
</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/BC9A493B41014CAABB98F0471D759707/997/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]
});
var svg = d3.select(map.getPanes().overlayPane).append("svg"),
g = svg.append("g");
d3.json("taxa_json.json", function(collection) {
var bounds = d3.geo.bounds(collection),
path = d3.geo.path().projection(project).pointRadius(function (d) {return d.properties.count/50});
console.warn(path)
var feature = g.selectAll("path")
.data(collection.features)
.enter().append("path");
map.on("viewreset", reset);
reset();
// Reposition the SVG to cover the features.
function reset() {
console.warn(bounds)
var bottomLeft = project(bounds[0]),
topRight = project(bounds[1]);
svg .attr("width", topRight[0] - bottomLeft[0])
.attr("height", bottomLeft[1] - topRight[1])
.style("margin-left", bottomLeft[0] + "px")
.style("margin-top", topRight[1] + "px").attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");
g .attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");
feature.attr("d", path)
}
// Use Leaflet to implement a D3 geographic projection.
function project(x) {
var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
return [point.x, point.y];
}
})
</script>
</body>
</html>
Raw
leaflet.css
/* 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);
}
Display the source blob
Display the rendered blob
Raw
taxa_json.json
{"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