Weiter mit der Feinstaubkarte

feucht

http://pjgueno.000webhostapp.com/rajko/

Die Feinstaubkarte des OK Lab Stuttgart habe ich weiterentwickelt, damit man die 4 Werte des Sensors einblenden kann:

PM10
PM2.5
Temperatur
Feuchtigkeit

Zudem habe ich versucht, den Code leichter zu machen. Nur 5 Libraries werden nun geladen:

Leaflet
Leaflet.Heat (für die Dichte-Heatmap)
Leaflet Realtime (für das automatische Updaten der Werte je 5 Minuten)
D3
D3-Hexbin

Es ist möglich, direkt auf der Karte ein Ort zu wählen und die Graphiken beim Klicken des Sensor-ID einzublenden.

Leider habe ich es nicht geschafft, Leaflet Heat zu modifizieren, damit sie nicht mehr die Dichte, sondern Mittelwerte der Sensor zeigt. Ich musste beim D3-Hexabin bleiben.

Natürlich bleibt das CSS viel zu verbessern. ich bin gar kein Front End Developer!

CSS

   html {
        font-size: 14px;
        font-size: 87.5%;
        }    
         
body{
        height: 100%;
        width: 100%;
        margin: 0;
        overflow: hidden;}



#map { 
        position:absolute;
        top:0px;
        left:0px;
        width: 100vw; 
        height: 100vh; 
        z-index: 0;
        }    
        
    
        #control{
        font-family: arial, sans-serif;
        color:black;
        font-size: 14px;
        position:absolute;
        top:10px;
        right:10px;
        width: 250px;
        height: 100%;
                background-color: rgba(238,238,238,0.6);

        }

        #boutons{  
        margin-bottom:15px;
        background:transparent;
        }
        
        #boutons2{ 
        margin-bottom:15px;
        background:transparent;
        }


        #boutons3{  
        margin-bottom:15px;
        background:transparent;
        }
        
        #boutons4{ 
        margin-bottom:15px;
        background:transparent;
        }

        button{

        background:#CECECE;
        border-style: solid;
        border-radius: 5px;
        border-color:#303030;
        width: 80px;
        height: 40px;
        cursor:pointer;
        outline: none;
        }

        select{
        background:rgba(255, 255, 255, 0.5);
        border: 0px;
        border-radius: 0px;
        }

        

        #results {
        background:transparent;
        margin-top:15px;
        margin-bottom:15px;
        max-height:200px;
        overflow-y: auto;
} 
          
#graphs {
        background:transparent;
        margin-top:15px;
        margin-bottom:15px;
        height:210px;
        overflow-y: auto;
        overflow-x: hidden;

} 

        .legend {
        font-family: arial, sans-serif;
        color:black;
        font-size: 12px; 
        position: fixed;
        left: 10px;
        bottom: 10px;
        height: 225px;
        width: 100px;
        z-index: 1000;
        background-color: rgba(238,238,238,0.6);
        }


#legendpm{visibility: visible}

#legendtemp{visibility: hidden}

#legendhumi{visibility: hidden}


#legend-inner-pm {
        position: fixed;
        left: 30px;
        bottom: 20px;
        z-index: 1001;
        pointer-events: none;
        height: 200px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        }

#legend-inner-pm .gradient {
        opacity: 0.8;
        width: 20px;
        background: -webkit-linear-gradient(bottom, #00796b 0%, #00796b 16%, #f9a825 32%, #e65100 48%, #dd2c00 72%, #dd2c00 80%, #8c0084 100%);
        background: linear-gradient(to top, #00796b 0%, #00796b 16%, #f9a825 32%, #e65100 48%, #dd2c00 72%, #dd2c00 80%, #8c0084 100%);
        position: relative;
        }

#legend-inner-pm .gradient .limit {
        height: 2px;
        width: 42px;
        background-color: #d50000;
        position: absolute;
        left: -10px;
        bottom: calc(40% - 1px);
        }

#legend-inner-pm .labels {
        width: 150px;
        position: relative;
        }

#legend-inner-pm .labels .label {
        position: absolute;
        -webkit-transform: translateY(50%);
        transform: translateY(50%);
        }

#legend-inner-pm .labels .label:before {
        content: '\2013   ';
        }

#legend-inner-pm .labels .label.limit {
        color: #d50000;
        }



#legend-inner-temp {
        position: fixed;
        left: 30px;
        bottom: 20px;
        z-index: 1001;
        pointer-events: none;
        height: 200px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        }

#legend-inner-temp .gradient {
        opacity: 0.8;
        width: 20px;
        background: -webkit-linear-gradient(bottom, #0022FE 0%, #FFFFFF 30%, #FF0000 100%);
        background: linear-gradient(to top, #0022FE 0%, #FFFFFF 30%, #FF0000 100%);
        position: relative;
        }

#legend-inner-temp .labels {
        width: 150px;
        position: relative;
        }

#legend-inner-temp .labels .label {
        position: absolute;
        -webkit-transform: translateY(50%);
        transform: translateY(50%);
        }

#legend-inner-temp .labels .label:before {
        content: '\2013   ';
        }
        

#legend-inner-humi {
        position: fixed;
        left: 30px;
        bottom: 20px;
        z-index: 1001;
        pointer-events: none;
        height: 200px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        }

#legend-inner-humi .gradient {
        opacity: 0.8;
        width: 20px;
        background: -webkit-linear-gradient(bottom, #FFFFFF 0%, #0000FF 100%);
        background: linear-gradient(to top, #FFFFFF 0%, #0000FF 100%);
        position: relative;
        }

#legend-inner-humi .labels {
        width: 150px;
        position: relative;
        }

#legend-inner-humi .labels .label {
        position: absolute;
        -webkit-transform: translateY(50%);
        transform: translateY(50%);
        }

#legend-inner-humi .labels .label:before {
        content: '\2013   ';
        }
        
table{
        font-family: arial, sans-serif;
		width: 100%;
		margin-right: 1rem;
        border: 1px solid #000;
		border-collapse: collapse;
        background:rgba(255, 255, 255, 1);
        }

td{
        background-color: #FFFFFF;
        height: 20px;
        text-align: right;
        padding-right: 5px;
        border-width: 0px 1px 0px 1px;
        border-style: solid;
        }

th{
        background-color: #FFFFFF;
        height: 20px;
        font-weight: bold;
        border: 1px solid #000;
        }

.leaflet-pane > svg .d3-overlay path{
             pointer-events: all;}

.d3-tip{
	font-family:monospace;
             font-size: 0.4rem;
	border-radius: 3px;
	background-color: $clr-blue-grey-900;
	color: $clr-grey-50;
	z-index:500;
	font-weight: 200;
             text-align: right;}

img.leaflet-tile{
             filter:  grayscale(85%) saturate(150%) hue-rotate(60deg) contrast(90%) brightness(110%);
            -webkit-filter:    grayscale(85%) saturate(150%) hue-rotate(60deg) contrast(90%) brightness(110%);      }      
      
        
        select{
            background:    #CECECE;
             border: 0px;
             border-radius: 0px;
            border-style: solid;
        border-radius: 5px;
        border-color:#303030;
        
         }
        
        select option {
                background:#CECECE;
            }
 

.idsens{
      cursor:pointer;
}

.hexbin-hexagon{
    cursor:pointer;
}

JAVASCRIPT

map.js

var map;
var tiles; 
var heatmap;
var hexagonheatmap;



map = L.map('map').setView([48.8, 9.2 ], 12);
        map.options.minZoom = 3;


var selector = "PM10";

var hmpoints;
var hmpm10;
var hmpm25;
var hmtemp;
var hmhumi;

var hmempty = [];

var hexahmtest = false;

window.onload =  function (){document.getElementById('PM10').style.backgroundColor = "#EE1010";};


//POUR LES PM

var geoJsonDataPM = L.realtime(function(success, error) {
        
        var dataGeojson = {"type":"FeatureCollection","features":[]};  
        
        fetch('https://api.luftdaten.info/static/v2/data.dust.min.json')
        .then(function(response) {
                    return response.json(); })
        .then(function(data) {
            data.forEach(function(item){
            var emptyFeature = {"type":"Feature","geometry":{"type":"Point","coordinates":[]},"properties":{"id":0,"PM10":"","PM25":""}};
            emptyFeature.geometry.coordinates[0] = item.location.longitude;
            emptyFeature.geometry.coordinates[1] = item.location.latitude;
            emptyFeature.properties.id = item.sensor.id;
            emptyFeature.properties.PM10 = item.sensordatavalues[0].value;
            emptyFeature.properties.PM25 = item.sensordatavalues[1].value;
            dataGeojson.features.push(emptyFeature);
            });
            console.log(dataGeojson);
            success(dataGeojson);
        })
        .catch(error);
    }, {
			     pointToLayer: function (feature, latlng) {
                        return L.circleMarker(latlng, {
                            radius:5,                    
                            color: '#FFFFFF',
                            weight: 1,
                            opacity: 0,
                            fillOpacity: 0})},
                            interval: 300000}).addTo(map);

        geoJsonDataPM.on('update', function(features) {
            console.log('Update Data PM');
            
            if(selector == "hmpoints") {   
                hmpoints = [];
                
            var dataKeys = Object.keys(features.features);
                
            dataKeys.forEach(function(item){
            var featureData = features.features[item];                 
            var datahm = [parseFloat(features.features[item].geometry.coordinates[1]),parseFloat(features.features[item].geometry.coordinates[0]),1];
                   
            hmpoints.push(datahm);   
                
            heatmap.setLatLngs(hmpoints).setOptions({maxZoom:13,max:1.0,gradient: {.4:"blue",.6:"cyan",.7:"lime",.8:"yellow",1:"red"}});    
                });    
                
            geoJsonDataPM.eachLayer(function (layer) {layer.setStyle({opacity: 0, fillOpacity: 0});});
                
                document.getElementById('legendtemp').style.visibility='hidden';
                document.getElementById('legendhumi').style.visibility='hidden';
                document.getElementById('legendpm').style.visibility='hidden';
                
                if(hexahmtest == true){
            
                var hmhexa = [];  
                hexagonheatmap.data(hmhexa);         
                hexagonheatmap._redraw();
            };
                
                
            };
                
//                
            if(selector == "hmPM10"||selector == "hmPM2.5" ) {   
                heatmap.setLatLngs(hmempty);         
                document.getElementById('legendtemp').style.visibility='hidden';
                document.getElementById('legendhumi').style.visibility='hidden';
                document.getElementById('legendpm').style.visibility='visible';    
                var hmhexa = [];      

                geoJsonDataPM.eachLayer(function (layer) { 
                var objecthexa ={"data":{"PM10": parseInt(layer.feature.properties.PM10), "PM25":parseInt( layer.feature.properties.PM25)}, "id":layer.feature.properties.id,"latitude":layer.feature.geometry.coordinates[1],"longitude":layer.feature.geometry.coordinates[0]}; 
                hmhexa.push(objecthexa);  
                });
                
                var options = {
                valueDomain: [20, 40, 60, 100, 500],
                colorRange: ['#00796B', '#F9A825', '#E65100', '#DD2C00', '#960084']	
                };
            
            if(selector == "hmPM10"){
                                 
                if(hexahmtest == false){
                    hexahmtest = true;
                    hexagonheatmap = L.hexbinLayer(options).addTo(map);
                    hexagonheatmap.data(hmhexa);
                }else{
                hexagonheatmap.initialize(options);
                hexagonheatmap.data(hmhexa);         
                hexagonheatmap._redraw();
                };
            };

            
            if(selector == "hmPM2.5"){
                
                if(hexahmtest == false){
                    hexahmtest = true;
                    hexagonheatmap = L.hexbinLayer(options).addTo(map);
                    hexagonheatmap.data(hmhexa);
                }else{
                hexagonheatmap.initialize(options);
                hexagonheatmap.data(hmhexa);         
                hexagonheatmap._redraw();
                };  
            };
                                
            geoJsonDataPM.eachLayer(function (layer) {layer.setStyle({opacity: 0, fillOpacity: 0});});            
            heatmap.setLatLngs(hmempty);         
            };
            
            
        if(selector == "PM10" || selector == "PM2.5"||selector == "points" ) {   
            document.getElementById('legendtemp').style.visibility='hidden';
            document.getElementById('legendhumi').style.visibility='hidden';
            document.getElementById('legendpm').style.visibility='visible';

           geoJsonDataPM.eachLayer(function (layer) {           
                if(selector == "PM10"){var valCol = layer.feature.properties.PM10;};
                if(selector == "PM2.5"){var valCol = layer.feature.properties.PM25;};
                if(selector == "points"){var valCol = "points";};    
                layer.setStyle({fillColor :colorpm(valCol),opacity: 1, fillOpacity: 1}); 
                
               layer.on('click', function(e) {
                   var htmlContent = "<table id='results'><tr><th class ='titre'>Sensor ID</th><th class = 'titre'>PM10 &micro;g/m&sup3;</th><th class ='titre'>PM2.5 &micro;g/m&sup3;</th></tr><tr><td class='idsens' onclick='showGraph("+layer.feature.properties.id+")'>"+layer.feature.properties.id+"</td><td class='val1'>"+parseInt(layer.feature.properties.PM10)+"</td><td class='val2'>"+parseInt(layer.feature.properties.PM25)+"</td></tr></table>";
                document.getElementById('results').innerHTML = htmlContent;
               });           
        });
            
            geoJsonDataPM.bringToFront();
            
            heatmap.setLatLngs(hmempty);
            geoJsonDataTemp.eachLayer(function (layer) {    
               layer.setStyle({opacity: 0, fillOpacity: 0})});


            if(hexahmtest == true){        
                var hmhexa = [];  
                hexagonheatmap.data(hmhexa);         
                hexagonheatmap._redraw();
            };
        };
    });


//POUR LES TEMP/HUMIs

var geoJsonDataTemp = L.realtime(function(success, error) {
        
                        var dataGeojson = {"type":"FeatureCollection","features":[]};  

        
        fetch('https://api.luftdaten.info/static/v2/data.temp.min.json')
        .then(function(response) {
                    return response.json(); })
        .then(function(data) {
            data.forEach(function(item){
            var emptyFeature = {"type":"Feature","geometry":{"type":"Point","coordinates":[]},"properties":{"id":0,"Temp":"","Humi":""}};
            emptyFeature.geometry.coordinates[0] = item.location.longitude;
            emptyFeature.geometry.coordinates[1] = item.location.latitude;
            emptyFeature.properties.id = item.sensor.id;
            emptyFeature.properties.Temp = item.sensordatavalues[1].value;
            emptyFeature.properties.Humi = item.sensordatavalues[0].value;
            dataGeojson.features.push(emptyFeature);
            });
            console.log(dataGeojson);
            success(dataGeojson);
        })
        .catch(error);
    }, {
			     pointToLayer: function (feature, latlng) {
                        return L.circleMarker(latlng, {
                            radius:5,                    
                            color: '#FFFFFF',
                            weight: 1,
                            opacity: 0,
                            fillOpacity: 0})},
                            interval: 300000}).addTo(map);


        geoJsonDataTemp.on('update', function(features) {
            console.log('Update Data Temp/humi');
            
//            ON PEUT RECUP LES DATA DIRECT DANS LES LAYERS ET NON DANS L'OBJECT FEATURES
                
            if(selector == "hmtemp" || selector == "hmhumi" ) {   
                
                 heatmap.setLatLngs(hmempty);         

                    
                var hmhexa = [];      
                var dataKeys = Object.keys(features.features);
            dataKeys.forEach(function(item){
            var featureData = features.features[item];
               var objecthexa ={"data":{"Temp": features.features[item].properties.Temp , "Humi": features.features[item].properties.Humi}, "id":features.features[item].properties.id, "latitude":features.features[item].geometry.coordinates[1],"longitude":features.features[item].geometry.coordinates[0]};
                                
            hmhexa.push(objecthexa);   
                });
                
            if(selector == "hmtemp"){                
                document.getElementById('legendtemp').style.visibility='visible';
                document.getElementById('legendhumi').style.visibility='hidden';
                document.getElementById('legendpm').style.visibility='hidden';
                
                    

                var options = {
                valueDomain: [-20, 0, 50],
                colorRange: ['#0022FE', '#FFFFFF', '#FF0000']	
            };
                
                
                 if(hexahmtest == false){
                    
                    hexahmtest = true;
                    
                    hexagonheatmap = L.hexbinLayer(options).addTo(map);
                    hexagonheatmap.data(hmhexa);
                }else{
                 hexagonheatmap.initialize(options);
                hexagonheatmap.data(hmhexa);         
                hexagonheatmap._redraw();
                      
                };
                
                };

            
            if(selector == "hmhumi"){
                
                 document.getElementById('legendtemp').style.visibility='hidden';
                        document.getElementById('legendhumi').style.visibility='visible';
                         document.getElementById('legendpm').style.visibility='hidden';
                
                   var options = {
                valueDomain: [0,100],
		      colorRange: ['#FFFFFF', '#0000FF']	
            };
                
                if(hexahmtest == false){
                    hexahmtest = true;
                    hexagonheatmap = L.hexbinLayer(options).addTo(map);
                    hexagonheatmap.data(hmhexa);
                }else{
                 hexagonheatmap.initialize(options);
                hexagonheatmap.data(hmhexa);         
                hexagonheatmap._redraw();         
                };
            };
                           
                             
              geoJsonDataTemp.eachLayer(function (layer) {    
               layer.setStyle({opacity: 0, fillOpacity: 0});
                  });              
            };

            
        if(selector == "temp" || selector == "humi") {   
           geoJsonDataTemp.eachLayer(function (layer) { 
                if(selector == "temp"){var valCol = layer.feature.properties.Temp;
                        layer.setStyle({fillColor :colortemp(valCol),opacity: 1, fillOpacity: 1});
                        document.getElementById('legendtemp').style.visibility='visible';
                        document.getElementById('legendhumi').style.visibility='hidden';
                        document.getElementById('legendpm').style.visibility='hidden';  
                                      };
               
                if(selector == "humi"){var valCol = layer.feature.properties.Humi;   
                        layer.setStyle({fillColor :colorhumi(valCol),opacity: 1, fillOpacity: 1});
                        document.getElementById('legendtemp').style.visibility='hidden';
                        document.getElementById('legendhumi').style.visibility='visible';
                        document.getElementById('legendpm').style.visibility='hidden';
                                      };
               
               
               layer.on('click', function(e) {
                   var htmlContent = "<table id='results'><tr><th class ='titre'>Sensor ID</th><th class = 'titre'>Temperatur &deg;</th><th class ='titre'>Humidity %</th></tr><tr><td class='idsens'>"+layer.feature.properties.id+"</td><td class='val1'>"+parseInt(layer.feature.properties.Temp)+"</td><td class='val2'>"+parseInt(layer.feature.properties.Humi)+"</td></tr></table>";

//                   VOIR SI POSSIBLE GRAPH POUR TEMP ET HUMI
                   
//                   <img src='https://api.luftdaten.info/grafana/render/dashboard-solo/db/single-sensor-view?panelId=1&amp;orgId=1&amp;width=300&amp;height=200&amp;tz=UTC%2B02%3A00&amp;var-node="+layer.feature.properties.id+"'><br><br><img src='https://api.luftdaten.info/grafana/render/dashboard-solo/db/single-sensor-view?orgId=1&amp;panelId=2&amp;width=300&amp;height=200&amp;tz=UTC%2B02%3A00&amp;var-node="+layer.feature.properties.id+"'>";
                 
                document.getElementById('results').innerHTML = htmlContent;   
               });         
        });
            
            geoJsonDataTemp.bringToFront();
            heatmap.setLatLngs(hmempty);
            geoJsonDataPM.eachLayer(function (layer) {    
            layer.setStyle({opacity: 0, fillOpacity: 0})});
            
               if(hexahmtest == true){
                var hmhexa = [];  
                hexagonheatmap.data(hmhexa);         
                hexagonheatmap._redraw();
            }; 
        }else{geoJsonDataTemp.bringToBack();};});


        tiles = L.tileLayer('https://{s}.tiles.madavi.de/{z}/{x}/{y}.png',{
				attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
				maxZoom: 18}).addTo(map);

    heatmap = L.heatLayer(hmempty, {radius: 25}).addTo(map);

map.on('zoomend', function() {
if(hexahmtest == true){hexagonheatmap._zoomChange();};    
});



function showGraph(sensor){
        console.log(sensor);
         var graph = "<img src='https://api.luftdaten.info/grafana/render/dashboard-solo/db/single-sensor-view?panelId=1&amp;orgId=1&amp;width=250&amp;height=200&amp;tz=UTC%2B02%3A00&amp;var-node="+sensor+"'><br><br><img src='https://api.luftdaten.info/grafana/render/dashboard-solo/db/single-sensor-view?orgId=1&amp;panelId=2&amp;width=250&amp;height=200&amp;tz=UTC%2B02%3A00&amp;var-node="+sensor+"'>";
    document.getElementById('graphs').innerHTML = graph;
};




function interpolColor(a, b, amount) { 
    var ah = parseInt(a.replace(/#/g, ''), 16),
        ar = ah >> 16, ag = ah >> 8 & 0xff, ab = ah & 0xff,
        bh = parseInt(b.replace(/#/g, ''), 16),
        br = bh >> 16, bg = bh >> 8 & 0xff, bb = bh & 0xff,
        rr = ar + amount * (br - ar),
        rg = ag + amount * (bg - ag),
        rb = ab + amount * (bb - ab);
    return '#' + ((1 << 24) + (rr << 16) + (rg << 8) + rb | 0).toString(16).slice(1);
};

function colorpm(val){   
    
    if(val == "points"){
        return "#000000";
        }else{        
      var col= parseInt(val);
        if(val>= 0 && val < 25){ return "#00796b";};
        if(val>= 25 && val < 50){
        var couleur = interpolColor('#00796b','#f9a825',(col-25)/25);
        return couleur;
        };
        if(val>= 50 && val < 75){
        var couleur = interpolColor('#f9a825','#e65100',(col-50)/25);
        return couleur;
        };
        if(val>= 75 && val < 100){
        var couleur = interpolColor('#e65100','#dd2c00',(col-75)/25);
        return couleur;
        };
        if(val>=100 && val < 500){
        var couleur = interpolColor('#dd2c00','#8c0084',(col-100)/400);
        return couleur;
        };
        if(val>=100 && val < 500){ return "#8c0084";};       
    };
};

function colortemp(val){         
      var col= parseInt(val);
        if(val< -20){ return "#0000FF";};
        if(val>= -20 && val < 0){
        var couleur = interpolColor('#0000FF','#FFFFFF',(col)/(20));
        return couleur;
        };
        if(val>= 0 && val < 50){
        var couleur = interpolColor('#FEFEFE','#FF0000',(col-50)/50);
        return couleur;
        };
        if(val>= 50 ){return "#FF0000";};     
};


function colorhumi(val){          
      var col= parseInt(val);
        if(val< 0){ return "#FFFFFF";};
        if(val>= 0 && val < 100){
        var couleur = interpolColor('#FFFFFF','#0000FF',(col-100)/100);
        return couleur;
        };
        if(val>= 100){return "#FFFFFF";};      
};
      
function reloadStyle(val){
    selector = val;  
    console.log(selector);
    document.getElementById('points').style.backgroundColor = "#CECECE";
    document.getElementById('PM10').style.backgroundColor = "#CECECE";
    document.getElementById('PM2.5').style.backgroundColor = "#CECECE";
    document.getElementById('hmpoints').style.backgroundColor = "#CECECE";
    document.getElementById('hmPM10').style.backgroundColor = "#CECECE";
    document.getElementById('hmPM2.5').style.backgroundColor = "#CECECE";
    document.getElementById('temp').style.backgroundColor = "#CECECE";
    document.getElementById('humi').style.backgroundColor = "#CECECE";
    document.getElementById('hmtemp').style.backgroundColor = "#CECECE";
    document.getElementById('hmhumi').style.backgroundColor = "#CECECE";
    document.getElementById(val).style.backgroundColor = "#EE1010";
    geoJsonDataPM.update();   
    geoJsonDataTemp.update();
    document.getElementById('graphs').innerHTML = "";
    document.getElementById('results').innerHTML = "";
};

function centerMap(val){
    var getOptions = window[val];
    map.setView(new L.LatLng(getOptions.coordinates[0], getOptions.coordinates[1]), getOptions.zoom);  
    if(hexahmtest == true){hexagonheatmap._zoomChange();};    
};

hexbin.js

L.HexbinLayer = L.Layer.extend({
	_undef (a) { return typeof a === 'undefined' },
	options: {
		radius: 25,
		opacity: 0.6,
		duration: 200,
		onmouseover: undefined,
		onmouseout: undefined,
        click: populateTable,
		lng: function (d) {
			return d.longitude
		},
		lat: function (d) {
			return d.latitude
		},
		value: function (d) {
            if (selector == "hmPM10"){return d3.mean(d, (o) => o.o.data.PM10)}
            if (selector == "hmPM2.5"){return d3.mean(d, (o) => o.o.data.PM25)} 
            if (selector == "hmtemp"){return d3.mean(d, (o) => o.o.data.Temp)} 
            if (selector == "hmhumi"){return d3.mean(d, (o) => o.o.data.Humi)} 
		}
	},

	initialize (options) {
		L.setOptions(this, options)
		this._data = []
		this._colorScale = d3.scaleLinear()
			.domain(this.options.valueDomain)
			.range(this.options.colorRange)
			.clamp(true)
	},

	onAdd (map) {
		this.map = map
		let _layer = this

		// SVG element
		this._svg = L.svg()
		map.addLayer(this._svg)
		this._rootGroup = d3.select(this._svg._rootGroup).classed('d3-overlay', true)
		this.selection = this._rootGroup

		// Init shift/scale invariance helper values
		this._pixelOrigin = map.getPixelOrigin()
		this._wgsOrigin = L.latLng([0, 0])
		this._wgsInitialShift = this.map.latLngToLayerPoint(this._wgsOrigin)
		this._zoom = this.map.getZoom()
		this._shift = L.point(0, 0)
		this._scale = 1

		// Create projection object
		this.projection = {
			latLngToLayerPoint: function (latLng, zoom) {
				zoom = _layer._undef(zoom) ? _layer._zoom : zoom
				let projectedPoint = _layer.map.project(L.latLng(latLng), zoom)._round()
				return projectedPoint._subtract(_layer._pixelOrigin)
			},
			layerPointToLatLng: function (point, zoom) {
				zoom = _layer._undef(zoom) ? _layer._zoom : zoom
				let projectedPoint = L.point(point).add(_layer._pixelOrigin)
				return _layer.map.unproject(projectedPoint, zoom)
			},
			unitsPerMeter: 256 * Math.pow(2, _layer._zoom) / 40075017,
			map: _layer.map,
			layer: _layer,
			scale: 1
		}
		this.projection._projectPoint = function (x, y) {
			let point = _layer.projection.latLngToLayerPoint(new L.LatLng(y, x))
			this.stream.point(point.x, point.y)
		}

		this.projection.pathFromGeojson = d3.geoPath().projection(d3.geoTransform({point: this.projection._projectPoint}))

		// Compatibility with v.1
		this.projection.latLngToLayerFloatPoint = this.projection.latLngToLayerPoint
		this.projection.getZoom = this.map.getZoom.bind(this.map)
		this.projection.getBounds = this.map.getBounds.bind(this.map)
		this.selection = this._rootGroup // ???

		// Initial draw
		this.draw()
	},

	onRemove (map) {
		if (this._container != null)
			this._container.remove()

		// Remove events
		map.off({'moveend': this._redraw}, this)

		this._container = null
		this._map = null

		// Explicitly will leave the data array alone in case the layer will be shown again
		// this._data = [];
	},

	addTo (map) {
		map.addLayer(this)
		return this
	},

	_disableLeafletRounding () {
		this._leaflet_round = L.Point.prototype._round
		L.Point.prototype._round = function () { return this }
	},

	_enableLeafletRounding () {
		L.Point.prototype._round = this._leaflet_round
	},

	draw () {
		this._disableLeafletRounding()
		this._redraw(this.selection, this.projection, this.map.getZoom())
		this._enableLeafletRounding()
	},
	getEvents: function () { return {zoomend: this._zoomChange} },
    
    
	_zoomChange: function () {
        
		let mapZoom = map.getZoom()
        let MapCenter = map.getCenter()
		this._disableLeafletRounding()
		let newZoom = this._undef(mapZoom) ? this.map._zoom : mapZoom        
		this._zoomDiff = newZoom - this._zoom
		this._scale = Math.pow(2, this._zoomDiff)
		this.projection.scale = this._scale
		this._shift = this.map.latLngToLayerPoint(this._wgsOrigin)
				._subtract(this._wgsInitialShift.multiplyBy(this._scale))
		let shift = ["translate(", this._shift.x, ",", this._shift.y, ") "]    
		let scale = ["scale(", this._scale, ",", this._scale,") "]
		this._rootGroup.attr("transform", shift.concat(scale).join(""))
		this.draw()
		this._enableLeafletRounding()
	},
	_redraw(selection, projection, zoom){
		// Generate the mapped version of the data
		let data = this._data.map( (d) => {
			let lng = this.options.lng(d)
			let lat = this.options.lat(d)

			let point = projection.latLngToLayerPoint([lat, lng])
			return { o: d, point: point }
		});
        
		// Select the hex group for the current zoom level. This has
		// the effect of recreating the group if the zoom level has changed
		let join = selection.selectAll('g.hexbin')
			.data([zoom], (d) => d)

        
		// enter
		join.enter().append('g')
			.attr('class', (d) => 'hexbin zoom-' + d)

		// exit
		join.exit().remove()

		// add the hexagons to the select
		this._createHexagons(join, data, projection)
        
	},

	_createHexagons(g, data, projection) {
		// Create the bins using the hexbin layout
        
		let hexbin = d3.hexbin()
			.radius(this.options.radius / projection.scale)
			.x( (d) => d.point.x )
			.y( (d) => d.point.y )
		let bins = hexbin(data)
        
//        console.log(bins)        
        
		// Join - Join the Hexagons to the data
		let join = g.selectAll('path.hexbin-hexagon')
			.data(bins)


		// Update - set the fill and opacity on a transition (opacity is re-applied in case the enter transition was cancelled)
		join.transition().duration(this.options.duration)
			.attr('fill', (d) => this._colorScale(this.options.value(d)))
			.attr('fill-opacity', this.options.opacity)
			.attr('stroke-opacity', this.options.opacity)

		// Enter - establish the path, the fill, and the initial opacity
		join.enter().append('path').attr('class', 'hexbin-hexagon')
			.attr('d', (d) => 'M' + d.x + ',' + d.y + hexbin.hexagon())
			.attr('fill', (d) => this._colorScale(this.options.value(d)))
			.attr('fill-opacity', 0.01)
			.attr('stroke-opacity', 0.01)
			.on('mouseover', this.options.mouseover)
			.on('mouseout', this.options.mouseout)
			.on('click', this.options.click)
			.transition().duration(this.options.duration)
				.attr('fill-opacity', this.options.opacity)
				.attr('stroke-opacity', this.options.opacity)

		// Exit
		join.exit().transition().duration(this.options.duration)
			.attr('fill-opacity', 0.01)
			.attr('stroke-opacity', 0.01)
			.remove()
	},
	data (data) {
		this._data = (data != null) ? data : []
		this.draw()
		return this
	}
});

L.hexbinLayer = function(options) {
	return new L.HexbinLayer(options);
};


function populateTable(data){
    
//     console.log(data);

    if(selector == "hmPM10"||selector == "hmPM2.5"){
    
    var debut = "<table id='results'><tr><th class ='titre'>Sensor ID</th><th class ='titre'>PM10 &micro;g/m&sup3;</th><th class ='titre'>PM2.5 &micro;g/m&sup3;</th></tr><tr><td class='idsens'>Mean</td><td class='val1'>";
        
    var tabsensor = "";
    var tabfin = "";
    var meanPM10;
    var meanPM25;
    
    data.forEach(function(element){
                
         stop += 1;
         var newline = "<tr><td class='idsens' onclick='showGraph("+element.o.id+")'>"+element.o.id+"</td><td class='val1'>"+element.o.data.PM10+"</td><td class='val2'>"+element.o.data.PM10+"</td></tr>";
         
         tabsensor += newline;     
    });
    
    meanPM10 = d3.mean(data, (o) => o.o.data.PM10);
    meanPM25 = d3.mean(data, (o) => o.o.data.PM25);

     tabfin = debut + parseInt(meanPM10) + "</td><td class='val2'>" + parseInt(meanPM25) + "</td></tr>" + tabsensor + "</table>";
        
    document.getElementById('results').innerHTML = tabfin;

   };
    
    if (selector == "hmtemp" || selector == "hmhumi" ){
        
        
       var debut = "<table id='results'><tr><th class ='titre'>Sensor ID</th><th class ='titre'>Temperatur &deg;</th><th class ='titre'>Humidity %</th></tr><tr><td class='idsens'>Mean</td><td class='val1'>";
        
    var tabsensor = "";
    var tabfin = "";
    var meanTemp;
    var meanHumi;
    
    data.forEach(function(element){
                
         stop += 1;
         var newline = "<tr><td class='idsens'>"+element.o.id+"</td><td class='val1'>"+parseInt(element.o.data.Temp)+"</td><td class='val2'>"+parseInt(element.o.data.Humi)+"</td></tr>";
         
         tabsensor += newline;        
    });
    
    meanTemp = d3.mean(data, (o) => o.o.data.Temp);
    meanHumi = d3.mean(data, (o) => o.o.data.Humi);

     tabfin = debut + parseInt(meanTemp) + "</td><td class='val2'>" + parseInt(meanHumi) + "</td></tr>" + tabsensor + "</table>";
        
    document.getElementById('results').innerHTML = tabfin;   
    };
};

position.js

var world = {"coordinates":[0,0],"zoom":"2"};
var europe = {"coordinates":[57.5,22],"zoom":"4"};
var chile = {"coordinates":[38,71],"zoom":"4"};
var usa = {"coordinates":[0,100],"zoom":"4"};
var finland = {"coordinates":[65,26],"zoom":"5"};
var thailand = {"coordinates":[15.4,101.3],"zoom":"5"};
var unitedkingdom = {"coordinates":[55,4],"zoom":"5"};
var deutschland = {"coordinates":[51.165,10.4553],"zoom":"6"};
var france = {"coordinates":[46.3167,2.5333],"zoom":"6"};
var germany = {"coordinates":[51.165,10.4553],"zoom":"6"};
var greece = {"coordinates":[39,22],"zoom":"6"};
var italy = {"coordinates":[42,12],"zoom":"6"};
var poland = {"coordinates":[52.1469,19.3781],"zoom":"6"};
var ukraine = {"coordinates":[49,32],"zoom":"6"};
var vietnam = {"coordinates":[16,107],"zoom":"6"};
var austria = {"coordinates":[47.6,13.7833],"zoom":"7"};
var bayern = {"coordinates":[48.949,11.395],"zoom":"7"};
var brandenburg = {"coordinates":[52.3622,13.0078],"zoom":"7"};
var bulgaria = {"coordinates":[42.65,25.4],"zoom":"7"};
var denmark = {"coordinates":[56,11],"zoom":"7"};
var hungary = {"coordinates":[47,20],"zoom":"7"};
var ireland = {"coordinates":[53.1333,8.1167],"zoom":"7"};
var nepal = {"coordinates":[28.25,83.9167],"zoom":"7"};
var oesterreich = {"coordinates":[47.6,13.7833],"zoom":"7"};
var romania = {"coordinates":[46,25],"zoom":"7"};
var serbia = {"coordinates":[44,21],"zoom":"7"};
var uae = {"coordinates":[24,54],"zoom":"7"};
var unitedarabemirates = {"coordinates":[24,54],"zoom":"7"};
var alsace = {"coordinates":[48.24905,7.52806],"zoom":"8"};
var badhomburg = {"coordinates":[50.2292,8.6105],"zoom":"8"};
var czechrepublic = {"coordinates":[49.8,15.5],"zoom":"8"};
var dominicanrepublic = {"coordinates":[19,70.6667],"zoom":"8"};
var mecklenburgvorpommern = {"coordinates":[53.6121,12.7002],"zoom":"8"};
var netherlands = {"coordinates":[51.6,5.5667],"zoom":"8"};
var niedersachsen = {"coordinates":[52.7562,9.3933],"zoom":"8"};
var nordrheinwestfalen = {"coordinates":[51.4783,7.555],"zoom":"8"};
var rheinlandpfalz = {"coordinates":[49.9131,7.4497],"zoom":"8"};
var sachsenanhalt = {"coordinates":[51.9713,11.4697],"zoom":"8"};
var schleswigholstein = {"coordinates":[54.47,9.5142],"zoom":"8"};
var schweiz = {"coordinates":[46.8,8.2333],"zoom":"8"};
var sicily = {"coordinates":[37.5667,14.2667],"zoom":"8"};
var suisse = {"coordinates":[46.8,8.2333],"zoom":"8"};
var thueringen = {"coordinates":[50.8614,11.0522],"zoom":"8"};
var brunei = {"coordinates":[4.6,114.7],"zoom":"9"};
var ruhrgebiet = {"coordinates":[51.5175,7.145],"zoom":"9"};
var sachsen = {"coordinates":[51.0493,13.7381],"zoom":"9"};
var dubai = {"coordinates":[25.2667,55.3],"zoom":"10"};
var london = {"coordinates":[51.5072,0.1275],"zoom":"10"};
var saarland = {"coordinates":[49.3833,6.8333],"zoom":"10"};
var santiago = {"coordinates":[33.46,70.6],"zoom":"10"};
var sofia = {"coordinates":[42.6972,23.3233],"zoom":"12"};
var aachen = {"coordinates":[50.777,6.0836],"zoom":"12"};
var aalen = {"coordinates":[48.8372,10.0936],"zoom":"12"};
var ahlen = {"coordinates":[51.7633,7.8911],"zoom":"12"};
var arnsberg = {"coordinates":[51.3967,8.0647],"zoom":"12"};
var aschaffenburg = {"coordinates":[49.9767,9.1477],"zoom":"12"};
var athens = {"coordinates":[37.9840,23.7278],"zoom":"12"};
var augsburg = {"coordinates":[48.3585,10.8944],"zoom":"12"};
var badkreuznach = {"coordinates":[49.8469,7.8669],"zoom":"12"};
var badoeynhausen = {"coordinates":[52.2,8.8],"zoom":"12"};
var badsalzuflen = {"coordinates":[52.0875,8.7506],"zoom":"12"};
var badenbaden = {"coordinates":[48.76194,8.2408],"zoom":"12"};
var badenwuerttemberg = {"coordinates":[48.53,9.05],"zoom":"12"};
var bamberg = {"coordinates":[49.8917,10.8917],"zoom":"12"};
var basel = {"coordinates":[47.5581,7.5877],"zoom":"12"};
var bayreuth = {"coordinates":[49.9481,11.5783],"zoom":"12"};
var belgium = {"coordinates":[50.8,4],"zoom":"12"};
var belgrade = {"coordinates":[44.8167,20.4667],"zoom":"12"};
var bergheim = {"coordinates":[50.9667,6.65],"zoom":"12"};
var bergischgladbach = {"coordinates":[50.9917,7.136],"zoom":"12"};
var berlin = {"coordinates":[52.5167,13.3833],"zoom":"12"};
var bern = {"coordinates":[46.948,7.4474],"zoom":"12"};
var biel = {"coordinates":[47.1368,7.2467],"zoom":"12"};
var bielefeld = {"coordinates":[52.0167,8.5167],"zoom":"12"};
var bocholt = {"coordinates":[51.8367,6.6108],"zoom":"12"};
var bochum = {"coordinates":[51.4825,7.2169],"zoom":"12"};
var boeblingen = {"coordinates":[48.6851,9.009],"zoom":"12"};
var boeblingen = {"coordinates":[48.6856,9.0153],"zoom":"12"};
var bologna = {"coordinates":[44.4939,11.3428],"zoom":"12"};
var bonn = {"coordinates":[50.734,7.0998],"zoom":"12"};
var bottrop = {"coordinates":[51.5247,6.9228],"zoom":"12"};
var brandenburganderhavel = {"coordinates":[52.4089,12.5631],"zoom":"12"};
var braunschweig = {"coordinates":[52.2692,10.5211],"zoom":"12"};
var bremen = {"coordinates":[53.0769,8.8089],"zoom":"12"};
var bremerhaven = {"coordinates":[53.5419,8.5780],"zoom":"12"};
var bristol = {"coordinates":[51.45,2.5833],"zoom":"12"};
var brussels = {"coordinates":[50.833333,4.4],"zoom":"12"};
var bucharest = {"coordinates":[44.4167,26.1],"zoom":"12"};
var budapest = {"coordinates":[47.5,19.05],"zoom":"12"};
var burgas = {"coordinates":[42.4953,27.4717],"zoom":"12"};
var castroprauxel = {"coordinates":[51.55,7.3167],"zoom":"12"};
var celle = {"coordinates":[52.6261,10.0806],"zoom":"12"};
var chemnitz = {"coordinates":[50.8322,12.9242],"zoom":"12"};
var cottbus = {"coordinates":[51.76056,14.3342],"zoom":"12"};
var cuxhaven = {"coordinates":[53.8617,8.6941],"zoom":"12"};
var darmstadt = {"coordinates":[49.8667,8.65],"zoom":"12"};
var delmenhorst = {"coordinates":[53.0497,8.6339],"zoom":"12"};
var dessaurosslau = {"coordinates":[51.8606,12.2469],"zoom":"12"};
var detmold = {"coordinates":[51.9333,8.8833],"zoom":"12"};
var dimitrovgrad = {"coordinates":[42.05,25.6],"zoom":"12"};
var dinslaken = {"coordinates":[51.5667,6.7333],"zoom":"12"};
var dormagen = {"coordinates":[51.0933,6.8419],"zoom":"12"};
var dorsten = {"coordinates":[51.6604,6.96465],"zoom":"12"};
var dortmund = {"coordinates":[51.5142,7.46389],"zoom":"12"};
var dresden = {"coordinates":[51.0517,13.7310],"zoom":"12"};
var dublin = {"coordinates":[53.3425,6.2658],"zoom":"12"};
var dueren = {"coordinates":[50.8,6.4833],"zoom":"12"};
var duesseldorf = {"coordinates":[51.2256,6.7828],"zoom":"12"};
var duisburg = {"coordinates":[51.4351,6.7627],"zoom":"12"};
var elmshorn = {"coordinates":[53.7547,9.6536],"zoom":"12"};
var emden = {"coordinates":[53.3669,7.2056],"zoom":"12"};
var erftstadt = {"coordinates":[50.8092,6.7758],"zoom":"12"};
var erfurt = {"coordinates":[50.9781,11.0292],"zoom":"12"};
var erlangen = {"coordinates":[49.5964,11.0043],"zoom":"12"};
var eschweiler = {"coordinates":[50.8208,6.2631],"zoom":"12"};
var essen = {"coordinates":[51.4581,7.0148],"zoom":"12"};
var esslingen = {"coordinates":[48.7406,9.3108],"zoom":"12"};
var euskirchen = {"coordinates":[50.6608,6.7858],"zoom":"12"};
var flensburg = {"coordinates":[54.7819,9.4367],"zoom":"12"};
var florence = {"coordinates":[43.7833,11.25],"zoom":"12"};
var frankenthal = {"coordinates":[49.5333,8.35],"zoom":"12"};
var frankfurt = {"coordinates":[50.1106,8.6822],"zoom":"12"};
var frankfurtoder = {"coordinates":[52.3417,14.5508],"zoom":"12"};
var frechen = {"coordinates":[50.9133,6.8139],"zoom":"12"};
var freiburg = {"coordinates":[47.9900,7.8200],"zoom":"12"};
var friedrichshafen = {"coordinates":[47.6542,9.4792],"zoom":"12"};
var fuerth = {"coordinates":[49.4783,10.9903],"zoom":"12"};
var fulda = {"coordinates":[50.552777777778,9.6775],"zoom":"12"};
var garbsen = {"coordinates":[52.4183,9.5981],"zoom":"12"};
var gelsenkirchen = {"coordinates":[51.5111,7.1006],"zoom":"12"};
var genf = {"coordinates":[46.2,6.15],"zoom":"12"};
var gera = {"coordinates":[50.8806,12.0833],"zoom":"12"};
var giessen = {"coordinates":[50.5872,8.6697],"zoom":"12"};
var gladbeck = {"coordinates":[51.573333333333,6.9925],"zoom":"12"};
var goeppingen = {"coordinates":[48.7025,9.6528],"zoom":"12"};
var goerlitz = {"coordinates":[51.1528,14.9872],"zoom":"12"};
var goettingen = {"coordinates":[51.5339,9.9356],"zoom":"12"};
var goslar = {"coordinates":[51.9072,10.43],"zoom":"12"};
var graz = {"coordinates":[47.0667,15.4333],"zoom":"12"};
var greifswald = {"coordinates":[54.096,13.3811],"zoom":"12"};
var greiz = {"coordinates":[50.6536,12.1884],"zoom":"12"};
var grenoble = {"coordinates":[45.2002,5.7222],"zoom":"12"};
var grevenbroich = {"coordinates":[51.0883,6.5875],"zoom":"12"};
var guetersloh = {"coordinates":[51.9,8.3833],"zoom":"12"};
var gummersbach = {"coordinates":[51.0269,7.5678],"zoom":"12"};
var hagen = {"coordinates":[51.3594,7.475],"zoom":"12"};
var halle = {"coordinates":[51.4828,11.97],"zoom":"12"};
var hamburg = {"coordinates":[53.5464,9.9841],"zoom":"12"};
var hameln = {"coordinates":[52.1031,9.36],"zoom":"12"};
var hamm = {"coordinates":[51.6811,7.817117],"zoom":"12"};
var hanau = {"coordinates":[50.1333,8.9167],"zoom":"12"};
var hannover = {"coordinates":[52.3744,9.7386],"zoom":"12"};
var hanoi = {"coordinates":[21.0333,105.85],"zoom":"12"};
var haskovo = {"coordinates":[41.9333,25.5667],"zoom":"12"};
var hattingen = {"coordinates":[51.4011,7.1848],"zoom":"12"};
var heidelberg = {"coordinates":[49.4122,8.71],"zoom":"12"};
var heidenheim = {"coordinates":[48.6761,10.1544],"zoom":"12"};
var heilbronn = {"coordinates":[49.1417,9.2222],"zoom":"12"};
var helsinki = {"coordinates":[60.1667,24.9333],"zoom":"12"};
var herford = {"coordinates":[52.1172,8.6761],"zoom":"12"};
var herne = {"coordinates":[51.5419,7.2239],"zoom":"12"};
var herten = {"coordinates":[51.6,7.1333],"zoom":"12"};
var hessen = {"coordinates":[50.5995,9.0249],"zoom":"12"};
var hilden = {"coordinates":[51.1714,6.9394],"zoom":"12"};
var hildesheim = {"coordinates":[52.15,9.95],"zoom":"12"};
var huerth = {"coordinates":[50.8694,6.8653],"zoom":"12"};
var ibbenbueren = {"coordinates":[52.2778,7.7167],"zoom":"12"};
var ingolstadt = {"coordinates":[48.7656,11.4244],"zoom":"12"};
var innsbruck = {"coordinates":[47.2672,11.3928],"zoom":"12"};
var iserlohn = {"coordinates":[51.3811,7.6956],"zoom":"12"};
var jena = {"coordinates":[50.9272,11.5864],"zoom":"12"};
var kaiserslautern = {"coordinates":[49.4447,7.7689],"zoom":"12"};
var kardzhali = {"coordinates":[41.65,25.3667],"zoom":"12"};
var karlsruhe = {"coordinates":[49.014,8.4043],"zoom":"12"};
var kassel = {"coordinates":[51.3167,9.5],"zoom":"12"};
var kathmandu = {"coordinates":[27.7,85.3167],"zoom":"12"};
var kempten = {"coordinates":[47.7333,10.3167],"zoom":"12"};
var kerpen = {"coordinates":[50.8719,6.6961],"zoom":"12"};
var kiel = {"coordinates":[54.3253,10.1406],"zoom":"12"};
var kiev = {"coordinates":[50.43,30.5233],"zoom":"12"};
var kleve = {"coordinates":[51.7875,6.1353],"zoom":"12"};
var koblenz = {"coordinates":[50.3567,7.5939],"zoom":"12"};
var koeln = {"coordinates":[50.9381,6.9569],"zoom":"12"};
var konstanz = {"coordinates":[47.6633,9.1753],"zoom":"12"};
var krefeld = {"coordinates":[51.3369,6.5642],"zoom":"12"};
var landshut = {"coordinates":[48.5372,12.1522],"zoom":"12"};
var langenfeld = {"coordinates":[51.1131,6.9522],"zoom":"12"};
var langenhagen = {"coordinates":[52.4394,9.74],"zoom":"12"};
var lausanne = {"coordinates":[46.5194,6.6345],"zoom":"12"};
var leipzig = {"coordinates":[51.3403,12.37475],"zoom":"12"};
var leverkusen = {"coordinates":[51.0333,6.9833],"zoom":"12"};
var lingen = {"coordinates":[52.5233,7.3172],"zoom":"12"};
var linz = {"coordinates":[48.3031,14.2906],"zoom":"12"};
var lippstadt = {"coordinates":[51.6667,8.35],"zoom":"12"};
var loerrach = {"coordinates":[47.6156,7.6614],"zoom":"12"};
var ludwigsburg = {"coordinates":[48.8975,9.1922],"zoom":"12"};
var ludwigshafen = {"coordinates":[49.4831,8.4478],"zoom":"12"};
var luebeck = {"coordinates":[53.8661,10.6839],"zoom":"12"};
var luedenscheid = {"coordinates":[51.2183,7.6297],"zoom":"12"};
var lueneburg = {"coordinates":[53.2525,10.4144],"zoom":"12"};
var luenen = {"coordinates":[51.6167,7.5167],"zoom":"12"};
var lugano = {"coordinates":[46.008,8.9557],"zoom":"12"};
var luzern = {"coordinates":[47.0521,8.3059],"zoom":"12"};
var lviv = {"coordinates":[49.83,24.0142],"zoom":"12"};
var magdeburg = {"coordinates":[52.1333,11.6167],"zoom":"12"};
var mainz = {"coordinates":[50,8.2711],"zoom":"12"};
var mannheim = {"coordinates":[49.4836,8.4631],"zoom":"12"};
var marburg = {"coordinates":[50.8075,8.7722],"zoom":"12"};
var marl = {"coordinates":[51.6539,7.0858],"zoom":"12"};
var meerbusch = {"coordinates":[51.2608,6.6778],"zoom":"12"};
var menden = {"coordinates":[51.4392,7.7953],"zoom":"12"};
var minden = {"coordinates":[52.2833,8.9167],"zoom":"12"};
var moenchengladbach = {"coordinates":[51.1911,6.4419],"zoom":"12"};
var moers = {"coordinates":[51.4517,6.6264],"zoom":"12"};
var montana = {"coordinates":[43.4125,23.225],"zoom":"12"};
var muelheimanderruhr = {"coordinates":[51.4331,6.8831],"zoom":"12"};
var muenchen = {"coordinates":[48.1400,11.5600],"zoom":"12"};
var muenster = {"coordinates":[51.9502,7.5911],"zoom":"12"};
var neuulm = {"coordinates":[48.3942,9.9989],"zoom":"12"};
var neubrandenburg = {"coordinates":[53.557,13.261],"zoom":"12"};
var neumuenster = {"coordinates":[54.0714,9.99],"zoom":"12"};
var neuss = {"coordinates":[51.1986,6.6914],"zoom":"12"};
var neustadtanderweinstrasse = {"coordinates":[49.35,8.15],"zoom":"12"};
var neuwied = {"coordinates":[50.4286,7.4614],"zoom":"12"};
var norderstedt = {"coordinates":[53.6956,9.9836],"zoom":"12"};
var nordhorn = {"coordinates":[52.4361,7.0706],"zoom":"12"};
var nuernberg = {"coordinates":[49.4556,11.0786],"zoom":"12"};
var oberhausen = {"coordinates":[51.4703,6.8522],"zoom":"12"};
var offenbach = {"coordinates":[50.0994,8.7708],"zoom":"12"};
var offenburg = {"coordinates":[48.4708,7.9408],"zoom":"12"};
var oldenburg = {"coordinates":[53.1439,8.2139],"zoom":"12"};
var osnabrueck = {"coordinates":[52.2789,8.0431],"zoom":"12"};
var paderborn = {"coordinates":[51.7231,8.7549],"zoom":"12"};
var palermo = {"coordinates":[38.1158,13.3614],"zoom":"12"};
var paris = {"coordinates":[48.8567,2.3517],"zoom":"12"};
var passau = {"coordinates":[48.5733,13.4569],"zoom":"12"};
var peine = {"coordinates":[52.3203,10.2336],"zoom":"12"};
var pernik = {"coordinates":[42.6,23.0333],"zoom":"12"};
var pforzheim = {"coordinates":[48.8911,8.6989],"zoom":"12"};
var plauen = {"coordinates":[50.495,12.1383],"zoom":"12"};
var pleven = {"coordinates":[43.42,24.62],"zoom":"12"};
var plovdiv = {"coordinates":[42.15,24.75],"zoom":"12"};
var portland = {"coordinates":[45.52,122.6819],"zoom":"12"};
var potsdam = {"coordinates":[52.3958,13.0614],"zoom":"12"};
var prague = {"coordinates":[50.0833,14.4167],"zoom":"12"};
var puertoplata = {"coordinates":[19.8030,70.6830],"zoom":"12"};
var pulheim = {"coordinates":[51,6.8],"zoom":"12"};
var rastatt = {"coordinates":[48.8569,8.2028],"zoom":"12"};
var ratingen = {"coordinates":[51.2956,6.8522],"zoom":"12"};
var ravensburg = {"coordinates":[47.7819,9.6136],"zoom":"12"};
var recklinghausen = {"coordinates":[51.6167,7.2],"zoom":"12"};
var regensburg = {"coordinates":[49.0167,12.0833],"zoom":"12"};
var remscheid = {"coordinates":[51.1783,7.1994],"zoom":"12"};
var reutlingen = {"coordinates":[48.4833,9.2167],"zoom":"12"};
var rheine = {"coordinates":[52.2833,7.4333],"zoom":"12"};
var rosenheim = {"coordinates":[47.8561,12.1289],"zoom":"12"};
var rostock = {"coordinates":[54.0833,12.1333],"zoom":"12"};
var ruesselsheim = {"coordinates":[49.995,8.4119],"zoom":"12"};
var ruse = {"coordinates":[43.8564,25.9706],"zoom":"12"};
var saarbruecken = {"coordinates":[49.2333,7],"zoom":"12"};
var salzburg = {"coordinates":[47.8,13.0333],"zoom":"12"};
var salzgitter = {"coordinates":[52.1533,10.4061],"zoom":"12"};
var sanktaugustin = {"coordinates":[50.77,7.1867],"zoom":"12"};
var santodomingo = {"coordinates":[18.4667,69.95],"zoom":"12"};
var schwaebisch_gmuend = {"coordinates":[48.8,9.8],"zoom":"12"};
var schweinfurt = {"coordinates":[50.045,10.2342],"zoom":"12"};
var schwerin = {"coordinates":[53.6333,11.4167],"zoom":"12"};
var siegen = {"coordinates":[50.87444,8.0244],"zoom":"12"};
var silistra = {"coordinates":[44.1167,27.2667],"zoom":"12"};
var sindelfingen = {"coordinates":[48.7133,9.003],"zoom":"12"};
var solingen = {"coordinates":[51.17139,7.0833],"zoom":"12"};
var speyer = {"coordinates":[49.3172,8.4342],"zoom":"12"};
var stgallen = {"coordinates":[47.4236,9.3775],"zoom":"12"};
var starazagora = {"coordinates":[42.42,25.63],"zoom":"12"};
var stolberg = {"coordinates":[50.7667,6.2333],"zoom":"12"};
var stralsund = {"coordinates":[54.3139,13.0897],"zoom":"12"};
var strasbourg = {"coordinates":[48.5836,7.74806],"zoom":"12"};
var stuttgart = {"coordinates":[48.8,9.2],"zoom":"12"};
var szeged = {"coordinates":[46.255,20.145],"zoom":"12"};
var taiwan = {"coordinates":[23.63,121.0532],"zoom":"12"};
var trier = {"coordinates":[49.7596,6.6439],"zoom":"12"};
var troisdorf = {"coordinates":[50.8161,7.1556],"zoom":"12"};
var tuebingen = {"coordinates":[48.52,9.0556],"zoom":"12"};
var turin = {"coordinates":[45.0667,7.7],"zoom":"12"};
var turku = {"coordinates":[60.45,22.2667],"zoom":"12"};
var ulm = {"coordinates":[48.4008,9.9872],"zoom":"12"};
var unna = {"coordinates":[51.5347,7.6889],"zoom":"12"};
var varna = {"coordinates":[43.2103,27.9097],"zoom":"12"};
var velbert = {"coordinates":[51.3333,7.05],"zoom":"12"};
var velikotarnovo = {"coordinates":[43.084,25.6556],"zoom":"12"};
var vidin = {"coordinates":[43.9911,22.8822],"zoom":"12"};
var viersen = {"coordinates":[51.2528,6.3933],"zoom":"12"};
var villingenschwenningen = {"coordinates":[48.0569,8.4917],"zoom":"12"};
var waiblingen = {"coordinates":[48.8303,9.3169],"zoom":"12"};
var weimar = {"coordinates":[50.9794,11.3297],"zoom":"12"};
var wesel = {"coordinates":[51.6586,6.6178],"zoom":"12"};
var wetzlar = {"coordinates":[50.5578,8.5044],"zoom":"12"};
var wien = {"coordinates":[48.2083,16.3731],"zoom":"12"};
var wiesbaden = {"coordinates":[50.0821,8.2414],"zoom":"12"};
var wilhelmshaven = {"coordinates":[53.5219,8.1075],"zoom":"12"};
var willich = {"coordinates":[51.2631,6.5492],"zoom":"12"};
var winterthur = {"coordinates":[47.5,8.75],"zoom":"12"};
var wismar = {"coordinates":[53.8882,11.462],"zoom":"12"};
var witten = {"coordinates":[51.4333,7.3333],"zoom":"12"};
var wolfenbuettel = {"coordinates":[52.1622,10.5369],"zoom":"12"};
var wolfsburg = {"coordinates":[52.4231,10.7872],"zoom":"12"};
var worms = {"coordinates":[49.633055555556,8.3608],"zoom":"12"};
var wroclaw = {"coordinates":[51.11,17.0322],"zoom":"12"};
var wuerzburg = {"coordinates":[49.7944,9.9294],"zoom":"12"};
var wuppertal = {"coordinates":[51.2592,7.2111],"zoom":"12"};
var zuerich = {"coordinates":[47.3717,8.5423],"zoom":"12"};
var zwickau = {"coordinates":[50.7189,12.4922],"zoom":"12"};

HTML

<!doctype html>
<html>
<head>
    <title>Feinstaub PJ</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet-src.js"></script>
    <script src="js/leaflet-realtime.js"></script>
    <script src="js/leaflet-heat.js"></script>

    <script src="data/positions.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-hexbin.v0.2.min.js"></script>
    <link rel="stylesheet" href="css/style.css" />
    
    
            <script src="hexbin.js"></script>

    
</head>
<body>
<div id="map"></div>

<script src="map.js"></script>

<div id='control'>    
<div id='boutons'>
<button class="selec" id="points" value="points" onclick="reloadStyle(this.value)">Standorte Sensoren</button> 
<button class="selec" id="PM10" value="PM10" onclick="reloadStyle(this.value)">Standorte PM10</button>
<button class="selec" id="PM2.5" value="PM2.5" onclick="reloadStyle(this.value)">Standorte PM2.5</button>
</div>
 <div id='boutons2'>
<button class="selec2" id="hmpoints" value="hmpoints" onclick="reloadStyle(this.value)">Dichte Sensoren</button> 
<button class="selec2" id="hmPM10" value="hmPM10" onclick="reloadStyle(this.value)">Heatmap PM10</button>
<button class="selec2" id="hmPM2.5" value="hmPM2.5" onclick="reloadStyle(this.value)"> Heatmap PM2.5</button>
</div>   
    
<div id='boutons3'>
<button class="selec3" id="temp" value="temp" onclick="reloadStyle(this.value)">Standorte Temp.</button> 
<button class="selec3" id="humi" value="humi" onclick="reloadStyle(this.value)">Standorte Feucht.</button>
</div>     
    
<div id='boutons4'>
<button class="selec4" id="hmtemp" value="hmtemp" onclick="reloadStyle(this.value)">Heatmap Temp.</button> 
<button class="selec4" id="hmhumi" value="hmhumi" onclick="reloadStyle(this.value)">Heatmap Feucht.</button>
</div>     
            
<select name="position" size="1" onchange="centerMap(this.value)">
<option value="" disabled selected>W&auml;hlen Sie einen Ort!</option>
<option value="europe">Europe</option>
<option value="deutschland">Deutschland</option>
<option value="germany">Germany</option>
<option value="badenwuerttemberg">Baden-Wu&uuml;ttemberg</option>
<option value="bayern">Bayern</option>
<option value="brandenburg">Brandenburg</option>
<option value="hessen">Hessen</option>
<option value="mecklenburgvorpommern">Mecklenburg-Vorpommern</option>
<option value="niedersachsen">Niedersachsen</option>
<option value="nordrheinwestfalen">Nordrheinwestfalen</option>
<option value="rheinlandpfalz">rheinlandpfalz</option>
<option value="saarland">Saarland</option>
<option value="sachsen">Sachsen</option>
<option value="sachsenanhalt">Sachsenanhalt</option>
<option value="schleswigholstein">Schleswig-Holstein</option>
<option value="thueringen">Th&uuml;ringen</option>
<option value="ruhrgebiet">Ruhrgebiet</option>
<option value="aachen">Aachen</option>
<option value="aalen">Aalen</option>
<option value="ahlen">Ahlen</option>
<option value="arnsberg">Arnsberg</option>
<option value="aschaffenburg">Aschaffenburg</option>
<option value="augsburg">Augsburg</option>
<option value="badhomburg">Badhomburg</option>
<option value="badkreuznach">Badkreuznach</option>
<option value="badoeynhausen">Badoeynhausen</option>
<option value="badsalzuflen">Badsalzuflen</option>
<option value="badenbaden">Badenbaden</option>
<option value="bamberg">Bamberg</option>
<option value="bayreuth">Bayreuth</option>
<option value="bergheim">Bergheim</option>
<option value="bergischgladbach">Bergischgladbach</option>
<option value="berlin">Berlin</option>
<option value="bielefeld">Bielefeld</option>
<option value="bocholt">Bocholt</option>
<option value="bochum">Bochum</option>
<option value="boeblingen">B&ouml;blingen</option>
<option value="boeblingen">B&ouml;blingen</option>
<option value="bonn">Bonn</option>
<option value="bottrop">Bottrop</option>
<option value="brandenburganderhavel">Brandenburganderhavel</option>
<option value="braunschweig">Braunschweig</option>
<option value="bremen">Bremen</option>
<option value="bremerhaven">Bremerhaven</option>
<option value="castroprauxel">Castroprauxel</option>
<option value="celle">Celle</option>
<option value="chemnitz">Chemnitz</option>
<option value="cottbus">Cottbus</option>
<option value="cuxhaven">Cuxhaven</option>
<option value="darmstadt">Darmstadt</option>
<option value="delmenhorst">Delmenhorst</option>
<option value="dessaurosslau">Dessaurosslau</option>
<option value="detmold">Detmold</option>
<option value="dinslaken">Dinslaken</option>
<option value="dormagen">Dormagen</option>
<option value="dorsten">Dorsten</option>
<option value="dortmund">Dortmund</option>
<option value="dresden">Dresden</option>
<option value="dueren">D&uuml;ren</option>
<option value="duesseldorf">D&uuml;sseldorf</option>
<option value="duisburg">Duisburg</option>
<option value="elmshorn">Elmshorn</option>
<option value="emden">Emden</option>
<option value="erftstadt">Erftstadt</option>
<option value="erfurt">Erfurt</option>
<option value="erlangen">Erlangen</option>
<option value="eschweiler">Eschweiler</option>
<option value="essen">Essen</option>
<option value="esslingen">Esslingen</option>
<option value="euskirchen">Euskirchen</option>
<option value="flensburg">Flensburg</option>
<option value="frankenthal">Frankenthal</option>
<option value="frankfurt">Frankfurt</option>
<option value="frankfurtoder">Frankfurtoder</option>
<option value="frechen">Frechen</option>
<option value="freiburg">Freiburg</option>
<option value="friedrichshafen">Friedrichshafen</option>
<option value="fuerth">F&uuml;rth</option>
<option value="fulda">Fulda</option>
<option value="garbsen">Garbsen</option>
<option value="gelsenkirchen">Gelsenkirchen</option>
<option value="gera">Gera</option>
<option value="giessen">Giessen</option>
<option value="gladbeck">Gladbeck</option>
<option value="goeppingen">G&ouml;ppingen</option>
<option value="goerlitz">G&ouml;rlitz</option>
<option value="goettingen">G&ouml;ttingen</option>
<option value="goslar">Goslar</option>
<option value="greifswald">Greifswald</option>
<option value="greiz">Greiz</option>
<option value="grevenbroich">Grevenbroich</option>
<option value="guetersloh">G&uuml;tersloh</option>
<option value="gummersbach">Gummersbach</option>
<option value="hagen">Hagen</option>
<option value="halle">Halle</option>
<option value="hamburg">Hamburg</option>
<option value="hameln">Hameln</option>
<option value="hamm">Hamm</option>
<option value="hanau">Hanau</option>
<option value="hannover">Hannover</option>
<option value="hattingen">Hattingen</option>
<option value="heidelberg">Heidelberg</option>
<option value="heidenheim">Heidenheim</option>
<option value="heilbronn">Heilbronn</option>
<option value="herford">Herford</option>
<option value="herne">Herne</option>
<option value="herten">Herten</option>
<option value="hilden">Hilden</option>
<option value="hildesheim">Hildesheim</option>
<option value="huerth">H&uuml;rth</option>
<option value="ibbenbueren">Ibbenb&uuml;ren</option>
<option value="ingolstadt">Ingolstadt</option>
<option value="iserlohn">Iserlohn</option>
<option value="jena">Jena</option>
<option value="kaiserslautern">Kaiserslautern</option>
<option value="karlsruhe">Karlsruhe</option>
<option value="kassel">Kassel</option>
<option value="kempten">Kempten</option>
<option value="kerpen">Kerpen</option>
<option value="kiel">Kiel</option>
<option value="kleve">Kleve</option>
<option value="koblenz">Koblenz</option>
<option value="koeln">K&ouml;ln</option>
<option value="konstanz">Konstanz</option>
<option value="krefeld">Krefeld</option>
<option value="landshut">Landshut</option>
<option value="langenfeld">Langenfeld</option>
<option value="langenhagen">Langenhagen</option>
<option value="leipzig">Leipzig</option>
<option value="leverkusen">Leverkusen</option>
<option value="lingen">Lingen</option>
<option value="lippstadt">Lippstadt</option>
<option value="loerrach">L&ouml;rrach</option>
<option value="ludwigsburg">Ludwigsburg</option>
<option value="ludwigshafen">Ludwigshafen</option>
<option value="luebeck">L&uuml;beck</option>
<option value="luedenscheid">L&uuml;denscheid</option>
<option value="lueneburg">L&uuml;neburg</option>
<option value="luenen">L&uuml;nen</option>
<option value="magdeburg">Magdeburg</option>
<option value="mainz">Mainz</option>
<option value="mannheim">Mannheim</option>
<option value="marburg">Marburg</option>
<option value="marl">Marl</option>
<option value="meerbusch">Meerbusch</option>
<option value="menden">Menden</option>
<option value="minden">Minden</option>
<option value="moenchengladbach">M&ouml;nchengladbach</option>
<option value="moers">Moers</option>
<option value="muelheimanderruhr">M&uuml;lheim an der Ruhr</option>
<option value="muenchen">M&uuml;nchen</option>
<option value="muenster">M&uuml;nster</option>
<option value="neuulm">Neuulm</option>
<option value="neubrandenburg">Neubrandenburg</option>
<option value="neumuenster">Neum&uuml;nster</option>
<option value="neuss">Neuss</option>
<option value="neustadtanderweinstrasse">Neustadt an der Weinstrasse</option>
<option value="neuwied">Neuwied</option>
<option value="norderstedt">Norderstedt</option>
<option value="nordhorn">Nordhorn</option>
<option value="nuernberg">N&uuml;rnberg</option>
<option value="oberhausen">Oberhausen</option>
<option value="offenbach">Offenbach</option>
<option value="offenburg">Offenburg</option>
<option value="oldenburg">Oldenburg</option>
<option value="osnabrueck">Osnabr&uuml;ck</option>
<option value="paderborn">Paderborn</option>
<option value="passau">Passau</option>
<option value="peine">Peine</option>
<option value="pforzheim">Pforzheim</option>
<option value="plauen">Plauen</option>
<option value="potsdam">Potsdam</option>
<option value="pulheim">Pulheim</option>
<option value="rastatt">Rastatt</option>
<option value="ratingen">Ratingen</option>
<option value="ravensburg">Ravensburg</option>
<option value="recklinghausen">Recklinghausen</option>
<option value="regensburg">Regensburg</option>
<option value="remscheid">Remscheid</option>
<option value="reutlingen">Reutlingen</option>
<option value="rheine">Rheine</option>
<option value="rosenheim">Rosenheim</option>
<option value="rostock">Rostock</option>
<option value="ruesselsheim">R&uuml;sselsheim</option>
<option value="saarbruecken">Saarbr&uuml;cken</option>
<option value="salzgitter">Salzgitter</option>
<option value="sanktaugustin">Sanktaugustin</option>
<option value="schwaebisch_gmuend">Schw&auml;bisch Gm&uuml;nd</option>
<option value="schweinfurt">Schweinfurt</option>
<option value="schwerin">Schwerin</option>
<option value="siegen">Siegen</option>
<option value="sindelfingen">Sindelfingen</option>
<option value="solingen">Solingen</option>
<option value="speyer">Speyer</option>
<option value="stolberg">Stolberg</option>
<option value="stralsund">Stralsund</option>
<option value="stuttgart">Stuttgart</option>
<option value="trier">Trier</option>
<option value="troisdorf">Troisdorf</option>
<option value="tuebingen">T&uuml;bingen</option>
<option value="ulm">Ulm</option>
<option value="unna">Unna</option>
<option value="velbert">Velbert</option>
<option value="viersen">Viersen</option>
<option value="villingenschwenningen">Villingen-Schwenningen</option>
<option value="waiblingen">Waiblingen</option>
<option value="weimar">Weimar</option>
<option value="wesel">Wesel</option>
<option value="wetzlar">Wetzlar</option>
<option value="wiesbaden">Wiesbaden</option>
<option value="wilhelmshaven">Wilhelmshaven</option>
<option value="willich">Willich</option>
<option value="wismar">Wismar</option>
<option value="witten">Witten</option>
<option value="wolfenbuettel">Wolfenb&uuml;ttel</option>
<option value="wolfsburg">Wolfsburg</option>
<option value="worms">Worms</option>
<option value="wuerzburg">Wuerzburg</option>
<option value="wuppertal">Wuppertal</option>
<option value="zwickau">Zwickau</option>
<option value="oesterreich">&Ouml;sterreich</option>
<option value="austria">Austria</option>
<option value="wien">Wien</option>
<option value="graz">Graz</option>
<option value="linz">Linz</option>
<option value="salzburg">Salzburg</option>
<option value="innsbruck">Innsbruck</option>
<option value="belgium">Belgium</option>
<option value="brussels">Brussels</option>
<option value="bulgaria">Bulgaria</option>
<option value="sofia">Sofia</option>
<option value="pernik">Pernik</option>
<option value="varna">Varna</option>
<option value="plovdiv">Plovdiv</option>
<option value="burgas">Burgas</option>
<option value="velikotarnovo">Velikotarnovo</option>
<option value="ruse">Ruse</option>
<option value="silistra">Silistra</option>
<option value="starazagora">Starazagora</option>
<option value="vidin">Vidin</option>
<option value="montana">Montana</option>
<option value="pleven">Pleven</option>
<option value="haskovo">Haskovo</option>
<option value="kardzhali">Kardzhali</option>
<option value="dimitrovgrad">Dimitrovgrad</option>
<option value="czechrepublic">Czech Republic</option>
<option value="prague">Prague</option>
<option value="denmark">Denmark</option>
<option value="finland">Finland</option>
<option value="helsinki">Helsinki</option>
<option value="turku">Turku</option>
<option value="france">France</option>
<option value="paris">Paris</option>
<option value="alsace">Alsace</option>
<option value="strasbourg">Strasbourg</option>
<option value="grenoble">Grenoble</option>
<option value="greece">Greece</option>
<option value="athens">Athens</option>
<option value="hungary">Hungary</option>
<option value="budapest">Budapest</option>
<option value="szeged">Szeged</option>
<option value="ireland">Ireland</option>
<option value="dublin">Dublin</option>
<option value="italy">Italy</option>
<option value="sicily">Sicily</option>
<option value="florence">Florence</option>
<option value="palermo">Palermo</option>
<option value="bologna">Bologna</option>
<option value="turin">Turin</option>
<option value="netherlands">Netherlands</option>
<option value="poland">Poland</option>
<option value="wroclaw">Wroclaw</option>
<option value="romania">Romania</option>
<option value="bucharest">Bucharest</option>
<option value="serbia">Serbia</option>
<option value="belgrade">Belgrade</option>
<option value="schweiz">Schweiz</option>
<option value="suisse">Suisse</option>
<option value="basel">Basel</option>
<option value="bern">Bern</option>
<option value="biel">Biel</option>
<option value="lausanne">Lausanne</option>
<option value="luzern">Luzern</option>
<option value="zuerich">Z&uuml;rich</option>
<option value="genf">Genf</option>
<option value="winterthur">Winterthur</option>
<option value="stgallen">Stgallen</option>
<option value="lugano">Lugano</option>
<option value="ukraine">Ukraine</option>
<option value="kiev">Kiev</option>
<option value="lviv">Lviv</option>
<option value="unitedkingdom">United Kingdom</option>
<option value="bristol">Bristol</option>
<option value="london">London</option>
<option value="chile">Chile</option>
<option value="santiago">Santiago</option>
<option value="dominicanrepublic">Dominicanrepublic</option>
<option value="santodomingo">Santodomingo</option>
<option value="puertoplata">Puerto Plata</option>
<option value="usa">USA</option>
<option value="portland">Portland</option>
<option value="brunei">Brunei</option>
<option value="nepal">Nepal</option>
<option value="kathmandu">Kathmandu</option>
<option value="taiwan">Taiwan</option>
<option value="thailand">Thailand</option>
<option value="unitedarabemirates">United Arab Emirates</option>
<option value="uae">UAE</option>
<option value="dubai">Dubai</option>
<option value="vietnam">Vietnam</option>
<option value="hanoi">Hanoi</option>
<option value="world">World</option>
</select>  
    
<div id="results"></div>

<div id="graphs"></div>


    
</div>    
    
<div class ="legend" id="legendpm">
<div id="legend-inner-pm">
<div class="gradient">
<div class="limit">
</div>
</div>
<div class="labels">
    <div class="label" style="bottom: 100%;"><b>500</b></div>
    <div class="label" style="bottom: 80%;"><b>100</b></div>
<div class="label" style="bottom: 60%;"><b>75</b></div>
<div class="label limit" style="bottom: 40%;"><b>50</b></div>
<div class="label" style="bottom: 20%;"><b>25</b></div>
<div class="label" style="bottom: 0%;"><b>0 &micro;g/m&sup3;</b></div>
</div>
</div>
</div>
      
<div class ="legend" id="legendtemp">
<div id="legend-inner-temp">
<div class="gradient">
<div class="limit">
</div>
</div>
<div class="labels">
<div class="label" style="bottom: 100%;"><b>50</b></div>
<div class="label" style="bottom: 65%;"><b>25</b></div>
<div class="label" style="bottom: 30%;"><b>0</b></div>
<div class="label" style="bottom: 0%;"><b>-20 &deg;</b></div>
</div>
</div>
</div>
    
<div class ="legend" id="legendhumi">
<div id="legend-inner-humi">
<div class="gradient">
<div class="limit">
</div>
</div>
<div class="labels">
    <div class="label" style="bottom: 100%;"><b>100</b></div>
    <div class="label" style="bottom: 80%;"><b>80</b></div>
<div class="label" style="bottom: 60%;"><b>60</b></div>
<div class="label " style="bottom: 40%;"><b>40</b></div>
<div class="label" style="bottom: 20%;"><b>20</b></div>
<div class="label" style="bottom: 0%;"><b>0 %</b></div>
</div>
</div>
</div>
    
</body>
</html>

Pierre-Jean Guéno

Weiter mit der Feinstaubkarte

Hinterlasse einen Kommentar Antwort abbrechen

Partager :

Ähnliche Beiträge

Hinterlasse einen Kommentar Antwort abbrechen