//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><br>Découpage par bureau 2014: <a href="https://www.data.gouv.fr/fr/datasets/zones-de-rattachement-des-bureaux-de-vote-en-2014-prs/">Mairie de Paris</a><br>Données électorales: <a href="#{url}/elections.db">Section PCF Paris 12</a> (SQLite, 12Mo)<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);