carte_bureaux_lyon.js

$( document ).ready(function() {

    $.ajaxSetup({
        async: false
    });

    var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/578c9ac0054b437cb5a9e36f5aed5bea/{styleId}/256/{z}/{x}/{y}.png',
        cloudmadeAttribution = 'Map data © 2012 OpenStreetMap contributors, Imagery © 2011 CloudMade';

    var minimal   = L.tileLayer(cloudmadeUrl, {styleId: 22677, attribution: cloudmadeAttribution}),
        fresh     = L.tileLayer(cloudmadeUrl, {styleId: 997,   attribution: cloudmadeAttribution});


    var map = L.map('map', {
        center: new L.LatLng(45.7597, 4.8422),
        zoom: 12,
        layers: [minimal, fresh]
    });
    
    var groupesLayer = new L.GeoJSON();
    $.getJSON("/data/2013-06-11-bureaux_lyon/lyon.groupes.json", function(data) {
        groupesLayer = new L.GeoJSON(data, {
            style: function(feature) {
                return {fillColor: feature.properties.couleurs,
                        color: "#000000",
                        fillOpacity: 0.7,
                        opacity: 0.7,
                        weight: 1};
            }, 
            onEachFeature: onEachFeature}).addTo(map);
    });

    var arrLayer = new L.GeoJSON();
    $.getJSON("/data/2013-06-11-bureaux_lyon/lyon.arr.json", function(data) {
        arrLayer = new L.GeoJSON(data, {
            style: {fillOpacity: 0,
                    opacity: 1,
                    color: "#000000",
                    weight: 3}
        }).addTo(map);
    });

    var baseMaps = {
        "OSM minimal": minimal,
        "OSM": fresh,
        "Google Satellite": new L.Google()
    };

    var overlayMaps = {
        "Arrondissements": arrLayer,
        "Groupes": groupesLayer
    };

    L.control.layers(baseMaps, overlayMaps, {collapsed: false, autoZIndex: false}).addTo(map);
    L.control.scale({imperial: false}).addTo(map);

    var fullScreen = new L.Control.FullScreen(); 
    map.addControl(fullScreen);

    $("#slider").slider({
        value: 70,
        slide: function(e, ui) {
            groupesLayer.setStyle({fillOpacity: ui.value / 100, opacity: ui.value / 100});
        }
    });


    function highlightFeature(e) {
        var layer = e.target;

        layer.setStyle({
            weight: 3,
            color: '#FFF',
            opacity: 1
        });

        if (!L.Browser.ie && !L.Browser.opera) {
            layer.bringToFront();
        }

        info.update(layer.feature.properties);
    }

    function resetHighlight(e) {
        groupesLayer.setStyle({
            color: "#000",
            weight: 1,
            opacity: $("#slider").slider("value") / 100
        });
        info.update();
    }

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


    var info = L.control();

    info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info legende'); // create a div with a class "info"
        this.update();
        return this._div;
    };

    // method that we will use to update the control based on feature properties passed
    info.update = function (props) {
        this._div.innerHTML = '<h4>Bureau de vote</h4>' +  (props ?
                                                            '<p>' + props.nombureau + '</p>' + 
                                                            '<p><b>Groupe ' + props.groupes + '</b></p>' +
                                                            '<table>' + 
                                                            '<tr><td><em>Inscrits</em></td><td>'  + props.inscrits + '</td></tr>' +
                                                            '<tr><td><em>Abstention</em></td><td class="alignright">'  + props.abst + '%</td></tr>' +
                                                            '<tr><td><em>Blancs et nuls</em></td><td class="alignright">'  + props.blancs + '%</td></tr>' +
                                                            '<tr><td></td><td></td></tr>' +
                                                            '<tr><td><em>Sarkozy</em></td><td class="alignright">'  + props.sarkozy + '%</td></tr>' +
                                                            '<tr><td><em>Hollande</em></td><td class="alignright">'  + props.hollande + '%</td></tr>' +
                                                            '<tr><td><em>Le Pen</em></td><td class="alignright">'  + props.lepen + '%</td></tr>' +
                                                            '<tr><td><em>Mélenchon</em></td><td class="alignright">'  + props.melenchon + '%</td></tr>' +
                                                            '<tr><td><em>Bayrou</em></td><td class="alignright">'  + props.bayrou + '%</td></tr>' +
                                                            '<tr><td><em>Joly</em></td><td class="alignright">'  + props.joly + '%</td></tr>' +
                                                            '<tr><td><em>Dupont-Aignan</em></td><td class="alignright">'  + props.dupontaignan + '%</td></tr>' +
                                                            '<tr><td><em>Poutou</em></td><td class="alignright">'  + props.poutou + '%</td></tr>' +
                                                            '<tr><td><em>Arthaud</em></td><td class="alignright">'  + props.arthaud + '%</td></tr>' +
                                                            '<tr><td><em>Cheminade</em></td><td class="alignright">'  + props.cheminade + '%</td></tr>' +
                                                            '</table>'                 
                                                            : 'Survolez un bureau');
    };

    info.addTo(map);

});