|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"/> |
|
<script src="http://d3js.org/d3.v3.min.js"></script> |
|
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"> </script> |
|
|
|
<style> |
|
|
|
#map { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
.hidden { |
|
display: none; |
|
} |
|
div.tooltip { |
|
color: #222; |
|
background-color: #fff; |
|
padding: .5em; |
|
text-shadow: #f5f5f5 0 1px 0; |
|
border-radius: 2px; |
|
opacity: 0.9; |
|
position: absolute; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<div id="map"> |
|
<script> |
|
//fond de carte center lyon |
|
var map = L.map('map').setView([45.750000, 4.850000], 13); |
|
L.tileLayer('http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', |
|
{attribution: 'Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' |
|
}).addTo(map); |
|
var svg = d3.select(map.getPanes().overlayPane).append("svg"); |
|
var g = svg.append("g").attr("class", "leaflet-zoom-hide"); |
|
var tooltip = d3.select('body').append('div') |
|
.attr('class', 'hidden tooltip'); |
|
|
|
|
|
//cree les point station + charge info box |
|
d3.json("stations.json", function(error, collection2) { |
|
if (error) throw error; |
|
var transform2 = d3.geo.transform({point: projectPoint2}), |
|
//path2=d3.geo.path().projection(transform2); |
|
//path2=d3.geo.path().projection(transform2).pointRadius(5); |
|
path2=d3.geo.path().projection(transform2).pointRadius( |
|
function(d){return (d.properties.bike_stands/ 3).toString();}); |
|
var feature2 = g.selectAll("path") |
|
.data(collection2.features) |
|
.enter() |
|
.append("path") |
|
.style("fill", "#ff0505") |
|
.style({'stroke' : 'green', 'stroke-width': function(d) |
|
{return (d.properties.available_bikes/3).toString();} |
|
}) |
|
/*.style({'stroke-dasharray': function(d) { |
|
return d.properties.bike_stands.toString();} function(d) { |
|
return d.properties.available_bikes.toString();}})*/ |
|
// |
|
.classed("stationsVelo", true) |
|
.attr("id", function(d) { |
|
return "id_" + d.properties.number; |
|
}) |
|
.attr("nb_stands", function(d) { |
|
return "id_" + d.properties.bike_stands; |
|
}) |
|
.on('mousemove', function(d) { |
|
var mouse = d3.mouse(svg.node()).map(function(d) { |
|
return parseInt(d);}); |
|
tooltip.classed('hidden', false) |
|
.attr('style', 'left:' + (mouse[0] - 300) + 'px; top:' + (mouse[1] - 300) + 'px') |
|
.html("Station : " +d.properties.name + "<br>Nombre de place : " +"<br> -Total: "+ d.properties.bike_stands + "<br> -Libre: " + d.properties.available_bike_stands+"<br>Vélo disponible : "+d.properties.available_bikes); |
|
}) |
|
.on('mouseout', function() {tooltip.classed('hidden', true);}) |
|
; |
|
|
|
map.on("viewreset", update); |
|
update(); |
|
|
|
/**/ |
|
|
|
// Reposition the SVG to cover the features. |
|
function update() { |
|
var bounds2 = path2.bounds(collection2), |
|
topLeft2 = bounds2[0], |
|
bottomRight2 = bounds2[1]; |
|
svg .attr("width", bottomRight2[0] - topLeft2[0]) |
|
.attr("height", bottomRight2[1] - topLeft2[1]) |
|
.style("left", topLeft2[0] + "px") |
|
.style("top", topLeft2[1] + "px"); |
|
g.attr("transform", "translate(" + (-topLeft2[0]) + "," + (-topLeft2[1]) + ")"); |
|
feature2.attr("d", path2); |
|
|
|
} |
|
// Use Leaflet to implement a D3 geometric transformation. |
|
function projectPoint2(x, y) { |
|
var point = map.latLngToLayerPoint(new L.LatLng(y, x)); |
|
this.stream.point(point.x, point.y);2 |
|
} |
|
}); |
|
|
|
|
|
/**/ |
|
</script> |
|
</body> |
|
</html> |
|
|
