D3 Examples - dots on a map - Velo'v

xxxxxxxxxx
 
<!doctype html>
<html>
​
<head>
  <title>Many many many Points with D3 and leaflet</title>
  <meta charset="utf-8">
​
  <style>
    body {
      font-size: 12px;
    }
    
    text {
      fill: white;
    }
    
    svg {
      position: relative;
    }
    
    path {
      fill: blue; //color of dots representing stations
      fill-opacity: 1;
    }
    
    path:hover {
      fill: brown;
      fill-opacity: .7;
    }
    
    #map {
      position: absolute;
      height: 100%;
      width: 100%;
      background-color: #333;
    }
    div.tooltip {
        color: #222;
        background-color: white;
        padding: .5em;
        text-shadow: #f5f5f5 0 1px 0;
        border-radius: 2px;
        opacity: 1;
        position: absolute;
    }  
   </style>
​
</head>
​
<body>
  <div id="map"></div>
 
    <svg xmlns="https://www.w3.org/2000/svg" width="100px" height="100px" />
  </div>
​
  <link 
        rel="stylesheet" 
        href="https://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" 
  />
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.min.js"></script>
​
  <script>
   //loading GeoJson file using D3
    d3.json("stations.json", function(error, stations) {
       if (error) throw error;
          
      var geoData = stations;
      //  console.log(stations);
      var cscale = d3.scaleLinear().domain([1, 3]).range(["#ff0000", "#ff6a00", "#ffd800", "#b6ff00", "#00ffff", "#0094ff"]); //"#00FF00","#FFA500"
      //Initializing Leaflet map and setting the view
      var leafletMap = L.map('map').setView([45.7531152, 4.827906], 12);
      
      //add choice base tiles - background map of Lyon
      L.tileLayer('https://{s}.tile.stamen.com/toner-lite/{z}/{x}/{y}.png').addTo(leafletMap);
      
      
​
            //adds an SVG element to Leaflet’s overlay pane
      var svg = d3.select(leafletMap.getPanes().overlayPane).append("svg");
      
      //On crée une variable pour une infobulle
    //on l'attache au body pcq c'est là qu'est la carte et les données
    var tooltip = d3.select('body').append('div')
            .attr('class', 'hidden tooltip');  
      
      //G element added to translate the SVG elements so that the top-left corner of the SVG, ⟨0,0⟩, corresponds to Leaflet’s layer origin
      var g = svg.append("g").attr("class", "leaflet-zoom-hide");
      
      // Use Leaflet to implement a D3 geometric transformation.
      function projectPoint(x, y) {
        var point = leafletMap.latLngToLayerPoint(new L.LatLng(y, x));
        this.stream.point(point.x, point.y);
      }
            //Create a d3.geo.path to convert GeoJson to SVG
      var transform = d3.geoTransform({point: projectPoint});
      var path = d3.geoPath().projection(transform);
      leafletMap.on('moveend', mapmove);
​
      redrawSubset(geoData.features)
​
      function redrawSubset(subset) {
        path.pointRadius(3); // * size of dots);
​
        //D3 mechanism for fitting SVG to the layer
        var bounds = path.bounds(stations);
        var topLeft = bounds[0];
        var bottomRight = bounds[1];
​
​
        svg.attr("width", bottomRight[0] - topLeft[0])
          .attr("height", bottomRight[1] - topLeft[1])
          .style("left", topLeft[0] + "px")
          .style("top", topLeft[1] + "px");
​
​
        g.attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");
​
  //      var start = new Date();
​
                //Create path elements for each of the features
        var features = g.selectAll("path")
          .data(stations.features)
            .enter().append("path")
          features.attr("d", path).attr("class", "points");
            features.style("fill-opacity", function(d) {
                    var value = d.properties.idstation;          
           //console.log(d.properties.idstation.length);
            if (d.group) {
            return (d.group * 0.1) + 0.2
          } 
            
        })
          //infobulle
            // Quand la souris passe au-dessus d'une région
             .on('mousemove', function(d) {
                console.log(d) // Check element to show: .properties.nom AND .properties.value         
                var mouse = d3.mouse(svg.node()).map(function(d) {
                // console.log(d)
                  return parseInt(d); 
                });
                tooltip.classed('hidden', false)
                  // modification du CSS
                  .attr('style', 'left:' + (mouse[0] + 15) + 'px; top:' + (mouse[1] - 35) + 'px')
                  // Ajout des infos sur la stations basées sur le fichier geoJson
                  .html('Numéro de station : <span style="font-weight:bold;">'+d.properties.idstation + '</span><br/>Bornes : <span style="font-weight:bold;">'+ d.properties.BORNES +'</span><br/>Station : <span style="font-weight:bold;">'+d.properties.nom +'</span><br/>Commune : <span style="font-weight:bold;">'+ d.properties.commune);
              })
              .on('mouseout', function() {
                tooltip.classed('hidden', true);
            });
        
​
            }
​
      function mapmove(e) {
        //remove all points
        d3.selectAll(".points").remove();
        redrawSubset(geoData.features);
      }
    })      
  </script>
</body>
​
</html>
    