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;
        }
        .box {
            background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
            border-radius: 6px;
            box-sizing: border-box;
            display: none;
            padding: 10px;
            display: block;
            color: white;
        }
​
        .box-title {
            width: 100%;
            font-weight: bold;
            font-size: 150%;
            border-bottom: 1px solid white;
        }
​
        .right-box {
            position: absolute;
            right: 15px;
            top: 15px;
            min-width: 300px;
        }
        </style>
​
    </head>
​
    <body>
        <div id="map"></div>
        <div id="rightbox" class="box right-box"><div class="box-title">Informations</div></br><span style="font-style:italic;">Survolez une station</span></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>
                var journey_data = {};
​
//loading file with journeys
d3.json("journeys.json", function(error, journeys){
    // console.log(journeys[1002]); // station d'origine
    // console.log(journeys[1001][0].station_in); // station de destination
    // console.log(journeys[1001][0].nb_journeys_vectorised); //nbre de trajets   
​
    //loading GeoJson file using D3
    d3.json("stations.json", function(error, stations) {
        // console.log(stations.features[1].properties.idstation); //id de station
        if (error) throw error;
        var coordonnees = {}; //création d'un objet
        //correspondance idstation et coordonnées 
        stations.features.forEach( function(station) {
            coordonnees[station.properties.idstation] = {X: station.properties.X, Y: station.properties.Y}
            // console.log(coordonnees) -- OK
        });
​
        // console.log(stations) -- OK
        console.log(coordonnees)
        //pour chaque station (stationOrig), regarde ds journeys les correspondantes 
​
        var geoData = stations;
        console.log(stations);
​
​
        //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);
​
        var trajets = L.layerGroup().addTo(leafletMap);
        //stations.features.forEach( function(stationOrig) {
        //  journeys[stationOrig.properties.idstation].forEach( function(stationDest) {
        //      //console.log(stationDest)
        //      var trips = [
        //          [stationOrig.properties.X,stationOrig.properties.Y],
        //          [coordonnees[stationDest.station_in].X, coordonnees[stationDest.station_in].Y]];
        //      console.log(trips);
        //      var polyline = L.polyline(trips, {color: 'black'}).addTo(leafletMap);                
        //      console.log("Adding polyline");
        //  }); // (stationDest)
        //}); // (stationOrig)
​
        //adds an SVG element to Leaflet’s overlay pane
        var svg = d3.select(leafletMap.getPanes().overlayPane).append("svg");
​
​
        //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);
        } // function projectPoint
​
        //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);
​
​
​
        var div = d3.select("#rightbox");
​
        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] + ")");
​
            //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.attr("pointer-events","visible");
            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
                } // if dgroup  
            })
                .on('mouseover', function(d) {
        //          console.log("mouseover");
                    trajets.clearLayers();
                    // 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); 
                    }); // mapfunction d
​
                    // Ajout des infos sur la stations basées sur le fichier geoJson
                    div.html('<div class="box-title">Informations</div></br>'+'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);
                            
                    journeys[d.properties.idstation].forEach( function(stationDest) {
                        //console.log(stationDest)
                        if(stationDest.station_in) {
                            var trips = [
                                [d.properties.Y, d.properties.X],
                                [coordonnees[stationDest.station_in].Y, coordonnees[stationDest.station_in].X]];
                            var polyline = L.polyline(trips, {color: 'black'}).addTo(trajets);
                            console.log("adding polyline");
                        }
                    }); // (stationDest)
                //  console.log("end");
                
                }) //mousemove function
              .on('mouseout', function() {
         
            }); // mouseout
        } //function redrawsubwet
​
        function mapmove(e) {
    //      console.log("mapmove");
            //remove all points
            d3.selectAll(".points").remove();
            redrawSubset(geoData.features);
        } // function mapmove
​
    }) //json2   
}); //json1
​
            </script>
    </body>
​
</html>
    