D3 Examples - carteParis

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
​
    <title>Responsive map</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  
</head>
​
<body>
  
  <div id="map"></div>
    
    <!-- include cartodb.js library -->
    <script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
  <script>
   var map = L.map('map1').setView([48.85841, 2.3488], 12);
    console.log(map);
 
var stamenToner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
    attribution: 'Map tiles by <a href="https://stamen.com">Stamen Design</a>, <a href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> - Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    subdomains: 'abcd',
    minZoom: 0,
    maxZoom: 20,
    ext: 'png'
});
 
map.addLayer(stamenToner);
 
/* L'attribut department provient du fichier JS et contient le geoJSON */
var gjLayer = L.geoJson(departement, {style: style}).addTo(map);
 console.log(gjLayer);
function style(feature) {
    return {
        weight: 4,
        opacity: 1,
        color: '#1f8dd6',
        dashArray: '8',
        fillOpacity: 0
    };
}
    var lat = gjLayer.getBounds().getSouth();
var lng = gjLayer.getBounds().getWest();
var limLat = gjLayer.getBounds().getNorth();
var limLng = gjLayer.getBounds().getEast();
while (lat  <= limLat) {
    // lat et lng sont inversées
    if (leafletPip.pointInLayer([lng, lat], gjLayer).length != 0) {
        L.marker([lat, lng]).addTo(map);
    }
    lng += 0.01;
    if (lng > limLng) {
        lat += 0.01;
        lng = gjLayer.getBounds().getWest();
    }
}
    
    
    $.ajax({
    url: 'https://maps.googleapis.com/maps/api/elevation/json?locations=' + lat + "," + lng + '&key=YOUR_API_KEY',
    type: 'GET',
    dataType: "json",
    header: {'Access-Control-Allow-Origin': 'https://maps.googleapis.com/'},
    crossDomain: true,
    idx: i,
    success: function (data) {
        if (data.status == 'OVER_QUERY_LIMIT') {
            // Trop de requêtes effectuées
        } else {
            // data.results[0].elevation contient l'élévation
        }
    },
    error:function (response) {          
        // response contient une erreur
    }
});
    
    function reformat(locations) {
    var data = [];
    locations.map(function (d){
        data.push({
            properties: {
                alt: +d.alt
            }, 
            type: "Feature", 
            geometry: {
                coordinates:[+d.lng, +d.lat], 
                type:"Point"
            }
        });
    });
    return data;
}
var geoData = { type: "FeatureCollection", features: reformat(/*locations.js*/locations) };
   var scale = d3.scale.linear()
    .domain([d3.min(locations, function(d) { return d.alt; }),
         d3.max(locations, function(d) { return d.alt; })])
    .range(["#5eb95e", "#dd514c"]);
    function hexbinStyle(hexagons) {
    hexagons
        .attr("stroke", "black")
        .attr("fill", function (d) {
            if (d[0][2].alt <= currentAltitude) {
                return "#1f8dd6";
            }
            var avg = d3.mean(d, function(d) {
                return +d[2].alt;
            })
            return scale(avg);
        });
}
 
var hexLayer = L.hexbinLayer(geoData, {
        style: hexbinStyle,
        //mouse: makePie
    }).addTo(map);
  </script>
</body>
​
    