//views/paris.jade
html
head
    link(rel='stylesheet', href="#{url}/stylesheets/leaflet.css")
    #map(style='height: 100%;')
    style.
      .info {
          padding: 6px 8px;
          font: 14px/16px Arial, Helvetica, sans-serif;
          background: white;
          background: rgba(255,255,255,0.8);
          box-shadow: 0 0 15px rgba(0,0,0,0.2);
          border-radius: 5px;
      }
      .info h4 {
          margin: 0 0 5px;
          color: #777;
      }
      .legend {
          text-align: left;
          line-height: 18px;
          color: #555;
      }
      .legend i {
          width: 18px;
          height: 18px;
          float: left;
          margin-right: 8px;
          opacity: 0.7;
      }
body
    script(src="#{url}/javascripts/leaflet.js")
    script.
        var zones = !{JSON.stringify(zones)};
        var gradient = !{JSON.stringify(gradient)};
        var latlon = { lat : { max : 0, min : 90 }, lon : { max : 0, min : 90 } };

        zones.features.forEach(
            function(feature) { 
                feature.geometry.coordinates.forEach(
                    function(polygon) { 
                    polygon.forEach(
                    function(point) {
                        latlon.lat.max = (latlon.lat.max > point[1]) ? latlon.lat.max : point[1];
                        latlon.lon.max = (latlon.lon.max > point[0]) ? latlon.lon.max : point[0];
                        latlon.lat.min = (latlon.lat.min < point[1]) ? latlon.lat.min : point[1];
                        latlon.lon.min = (latlon.lon.min < point[0]) ? latlon.lon.min : point[0];
                    });
                });
        });
        var center = [latlon.lat.min + (latlon.lat.max - latlon.lat.min)/2, latlon.lon.min + (latlon.lon.max - latlon.lon.min)/2];
        var zoom = 15;
        var map = L.map("map").setView(center, zoom);

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '<a href="#{url}/moteur.js">Code source moteur (GPL)</a> [<a href="https://seb.lautre.net/git/section/apps/tree/master/maps">complet</a>]<br>Découpage par bureau 2017: <a href="https://opendata.paris.fr/explore/dataset/secteurs-des-bureaux-de-vote/export/?location=12,48.8589,2.33346&basemap=jawg.streets">Mairie de Paris</a><br>Données électorales: <a href="#{url}/elections.db">Section PCF Paris 12</a> (SQLite, 26Mo)<br>&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

        var info = L.control();

        info.onAdd = function (map) {
            this._div = L.DomUtil.create('div', 'info');
            this.update();
            return this._div;
        };

        function makePopup(f) {
            var texte = "<p><b><u>Bureau " + f.properties.num_bv + " :</u></b>";
            for (var hsla in gradient) {
                if (gradient[hsla].intitule) { 
                    texte += '<br>' + gradient[hsla].intitule + " : ";
                    if (gradient[hsla].type === '%') {
                        texte += (gradient[hsla][f.id] * 100).toFixed(2) + '%';
                    }
                    else {
                        texte += (gradient[hsla][f.id]).toFixed(0);
                    }
                }
            }
            return texte + "</p>";
        };

        info.update = function (props) {
            this._div.innerHTML = '<h4>' + gradient.titre + '</h4>';
            if (props) {
                this._div.innerHTML += '<b><u>Bureau ' + props.num_bv + '</u></b>';
                for (var hsla in gradient) {
                    if (hsla != 'titre') {
                        if (gradient[hsla].intitule) { 
                            this._div.innerHTML += '<br>' + gradient[hsla].intitule + " : ";
                            if (gradient[hsla].type === '%') {
                                this._div.innerHTML += (gradient[hsla][props.num_bv] * 100).toFixed(2) + '%';
                            }
                            else {
                                this._div.innerHTML += (gradient[hsla][props.num_bv]).toFixed(0);
                            }
                        }
                    }
                }
            }
            else {
                this._div.innerHTML += 'Passe le curseur sur une zone pour le détail';
            }
        };

        info.addTo(map);
        
        var colormodel = { 
            hue : { min : 0, max : 350, default : 0 },
            saturation : { min : 25, max : 100, default : 100 },
            lightness : { min : 65, max : 25, default : 50 },
            alpha : { min : 50, max : 95, default : 70 }
        };
        
        function style(feature) {
            function get_gradient (component) {
                if (!gradient[component]) {
                    return colormodel[component].default;
                }
                else {
                    var pente = (colormodel[component].max - colormodel[component].min)/(gradient[component].max - gradient[component].min);
                    var origine = colormodel[component].min - (pente * gradient[component].min);
                    var y = origine + (pente * gradient[component][feature.id]);
                    return y.toFixed(0);
                }
            }
            return {
                fillColor: "hsla(" + get_gradient('hue') + "," + get_gradient('saturation') + '%,' + get_gradient('lightness') + '%,' + get_gradient('alpha') / 100 + ")",
                color : this.fillColor,
                opacity : 1,
                fillOpacity : 1
            };
        };
        
        var geojson;
        
        function highlightFeature(e) {
            var layer = e.target;
            layer.setStyle({
                weight: 5,
                color: '#666',
                dashArray: '',
                fillOpacity: 0.7
            });
            if (!L.Browser.ie && !L.Browser.opera) {
                layer.bringToFront();
            }
            info.update(layer.feature.properties);
        }

        function resetHighlight(e) {
            geojson.resetStyle(e.target);
            info.update();
        }

        function onEachFeature(feature, layer) {
            layer.on({
                mouseover: highlightFeature,
                mouseout: resetHighlight,
                click: function () { info.update(layer.feature.properties); }
            });
        }

        geojson = L.geoJson(zones, {
            style : style,
            onEachFeature: onEachFeature
        }).addTo(map);