Le portail francophone de la géomatique

map.fitBounds(commune.getBounds())

// Valeurs par défaut
var defaultColor = "#9bbd33";
var defaultFillOpacity = 0.3;
var hightlightColor = "silver";

// Définition des icones de makers
var communeIcon = L.divIcon({
    className: 'communeIcon',
    iconSize:     [26, 32], // size of the icon
    iconAnchor:   [13, 32], // point of the icon which will correspond to marker's location
    popupAnchor:  [0, -32] // point from which the popup should open relative to the iconAnchor
});

var pointIcon = L.divIcon({
    className: 'pointIcon',
    iconSize:     [28, 37], // size of the icon
    iconAnchor:   [13, 32], // point of the icon which will correspond to marker's location
    popupAnchor:  [0, -32] // point from which the popup should open relative to the iconAnchor
});

var communes = [];
var communesGeojson = new L.FeatureGroup();

var map = {
    map: L.map('map').setView([{{ territory.communeReference.latitude }}, {{ territory.communeReference.longitude }}], 13),
    setFrameIndex: function() {
        $('.frame-body').html($('#indexTemplate').html());
    },
    communeMarkerClick: function(event, commune) {
        event.target.closePopup();
        // On teste si map.activeCommune est définie
        if (map.activeCommune != null) {
            // Si oui on désactive l'activeCommune actuelle
            map.unsetActiveCommune();
        }
         // Activation de la commune
         map.setActiveCommune(commune);
    },
    setActiveCommune: function(commune)
    {
        //On défini la commune active
        this.activeCommune = commune;
        // Zoome et recentre la carte sur la commune
        this.map.fitBounds(commune.bounds);
        // Modification des options du layer
        commune.geoJSON.setStyle({
            fillOpacity: 0,
            weight: 2
        });
        // On masque le marqueur de la commune
        $(commune.marker._icon).hide();
        // On ajoute les points d'arrêts à la carte
        commune.markers.addTo(this.map);
        // Ajout du nom de la commune dans la Frame
        $('.frame-body').html("<h2 title=\"Nom de la commune\">" + commune.nom + " <small title=\"Nombre de points d'arrêts\">(" + commune.nbr_points + ")</small></h2><div class=\"point-detail\"></div>");

    },
    unsetActiveCommune: function () {
        // Modification des options du layer
        this.activeCommune.geoJSON.setStyle({
           fillOpacity: defaultFillOpacity,
           weight: 0
        });
        // On supprime les points d'arrêts de la carte
        this.activeCommune.markers.removeFrom(this.map);
        // On affiche le marker de la commune
        $(this.activeCommune.marker._icon).show();
        // On supprime la référence activeCommune
        this.activeCommune = null;
    }
};

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map.map);

{% for commune in territory.communes %}

    var commune_{{ commune.codeCommune }} = {
        id: {{ commune.codeCommune }},
        nom: '{{ commune.nom }}',
        nbr_points : {{ commune.pointsarret|length }},
        visible: true,
        active : false
    };

    communeIcon.options.html = commune_{{ commune.codeCommune }}.nbr_points;

    // On affiche les limites de chaque communes
    var link = "{{ asset('cartographie/') ~ commune.codeDepartement.id ~ '/' ~ commune.codeCommune ~ '.geojson' }}";

    $.getJSON( link, function(data){

        commune_{{ commune.codeCommune }}.geoJSON = L.geoJson( data, {
            fillColor: defaultColor,
            color: "#5b5b5b",
            dashArray: "10 15",
            weight: 0,
            fillOpacity: defaultFillOpacity
            } )

         .on('mouseover', function(event){
            if (commune_{{ commune.codeCommune }}.active == false ) {
                event.target
                    .setStyle({
                        fillColor: hightlightColor
                    })
                    .openPopup();
            }
         })
         .on('mouseout', function(event){
            event.target
                .setStyle({
                    fillColor: defaultColor
                })
                .closePopup();
         })
         .on('click', function(event){
            map.communeMarkerClick(event, commune_{{ commune.codeCommune }});
         })
         .bindPopup('<h2>{{ commune.nom }}</h2>', {
             closeButton: false,
             className: "communePopup"
         })
         .addTo(communesGeojson);
        commune_{{ commune.codeCommune }}.bounds = commune_{{ commune.codeCommune }}.geoJSON.getBounds();
    });

    // On affiche le marqueur de la commune courante
    commune_{{ commune.codeCommune }}.marker = L.marker([{{ commune.latitude }}, {{ commune.longitude }}], {icon: communeIcon})
                                    .on('click', function(event){
                                        map.communeMarkerClick(event, commune_{{ commune.codeCommune }})
                                    })
                                    .addTo(map.map);

    // On ajoute la commune courante à la couche des communes
    communes.push(commune_{{ commune.codeCommune }});

    commune_{{ commune.codeCommune }}.markers = new L.LayerGroup();

    // On affiche les points d'arrêt de la commune
    {% for point in commune.pointsArret %}

        var marker_{{ point.id }} = {
            id: {{ point.id }},
            nom: "{{ point.nom }}",
            adresse: {% if point.adresse1 is empty %}false{% else %}"{{ point.adresse1 }}"{% endif %},
            directions: {% if point.direction is empty %}false{% else %}"{% for direction in point.direction %}{% if direction is not empty %}<li>{{ direction }}</li>{% endif %}{% endfor %}"{% endif %},
            asAbribus: {% if point.asAbribus %}"{{ asset('bundles/main/imgs/pictos-amenagements/abribus.png') }}"{% else %}false{% endif %},
            asBanc: {% if point.asBanc %}"{{ asset('bundles/main/imgs/pictos-amenagements/banc.png') }}"{% else %}false{% endif %},
            asParcvelo: {% if point.asParcvelo %}"{{ asset('bundles/main/imgs/pictos-amenagements/parc-velo.png') }}"{% else %}false{% endif %},
            latitude: {{ point.latitude }},
            longitude: {{ point.longitude }}
        };

        marker_{{ point.id }}.geo = L.marker([{{ point.latitude }}, {{ point.longitude }}],
            {icon: pointIcon}).addTo(commune_{{ commune.codeCommune }}.markers)
            .bindPopup('{{ point.nom }}', {
                closeButton: false,
                className: 'pointPopup'
            })
            .on('mouseover', function(event){
                event.target.openPopup();
            })
             .on('click', function(event){
                 // On affiche les données du point
                 var html;
                 html = "<h3 title=\"Nom du point d'arrêt\">"+ marker_{{ point.id }}.nom +"</h3>";
                 if ( marker_{{ point.id }}.adresse != false ) {
                    html += "<h4 class=\"address\">Adresse</h4>";
                    html += "<p>"+ marker_{{ point.id }}.adresse +"</p>";
                 }

                 if ( marker_{{ point.id }}.directions != false ) {
                    html += "<h4 class=\"direction\">Directions</h4>";
                    html += "<ul>"+ marker_{{ point.id }}.directions +"</ul>";
                 }

                 if (
                    marker_{{ point.id }}.asAbribus ||
                    marker_{{ point.id }}.asBanc ||
                    marker_{{ point.id }}.asParcvelo ) {
                    html += "<h4 class=\"amenagement\">Aménagements</h4><p>";

                    if ( marker_{{ point.id }}.asAbribus ) {
                        html += "<img src=\""+ marker_{{ point.id }}.asAbribus +"\" alt=\"Rezopouce Picto Abribus\" title=\"Présence d'un abribus\" />&nbsp;"
                    }
                    if ( marker_{{ point.id }}.asBanc ) {
                        html += "<img src=\""+ marker_{{ point.id }}.asBanc +"\" alt=\"Rezopouce Picto Banc\" title=\"Présence d'un banc\" />&nbsp;"
                    }
                    if ( marker_{{ point.id }}.asParcvelo ) {
                        html += "<img src=\""+ marker_{{ point.id }}.asParcvelo +"\" alt=\"Rezopouce Picto Parc-vélos\" title=\"Présence d'un parc-vélos\" />&nbsp;"
                    }

// Désactive une commune
                     html +="</p>";
                 }

                 html += "<h4 class=\"geoloc\">Géolocalisation</h4>";
                 html += "<p>Lat : "+ {{ point.latitude }} + " | Long : " + {{ point.longitude }} +"</p>";

                 // Affichage du point
                 $('.frame-body .point-detail').html(html);
             });
    {% endfor %}

{% endfor %}

// On affiche le calque des communes
communesGeojson.addTo(map.map);

map.map.fitBounds(communesGeojson.getBounds());

map.map.on('click', function(){
    map.unsetActiveCommune();

    $('.frame-body').html($('#indexTemplate').html());
});

$(document).ready(function(){
    map.setFrameIndex();
})