D3 Examples - placedispo

xxxxxxxxxx
 
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7/leaflet.css"/>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7/leaflet.min.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('https://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png',
                    {attribution: 'Tiles courtesy of <a href="https://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data &copy; <a href="https://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_bike_stands/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>
​
​
    