Leaflet Canvas

by aidankirrane

HTML

<link rel="stylesheet" href="http://frommelt.fr/leaflet-0.8-dev/leaflet.css">
<script src="http://frommelt.fr/leaflet-0.8-dev/leaflet.js"></script>
<script src="http://frommelt.fr/leaflet-0.8-dev/rhone.js"></script>
<div id="map-region"></div>

CSS

#map-region {
    height: 400px;
    width: 600px;
}

JavaScript

var map = L.map('map-region').setView([45.8, 4.7], 8);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

var canvas = L.canvas();
prev_zoom_level = map.getZoom();

map.on('zoomend', function(popupopen) {
    if (map.getZoom() > prev_zoom_level) {
        //zoom in
        if (map.getZoom() > 9 && prev_zoom_level == 9) {
            //afficher commune
            map.addLayer(communeLayer);
            //masquer departement
            departementLayer.bringToFront();
            departementLayer.setStyle({
                fillOpacity: 0
            });
        }
    }
    else {
        //zoom out
        if (map.getZoom() < 10 && prev_zoom_level == 10) {
            //afficher departement
            departementLayer.setStyle({
                fillOpacity: 0.6
            });
            departementLayer.bringToFront();
            map.addLayer(departementLayer);
            //masquer commune
            map.removeLayer(communeLayer);
        }
    }
    prev_zoom_level = map.getZoom();
});

var departementLayer = L.geoJson(departement_collection, {
    onEachFeature: function(feature, layer) {
        var layerColor = '#'+Math.floor(Math.random()*16777215).toString(16);;
        layer.setStyle({
            color: '#000000',
            weight: 3,
            fillColor: layerColor,
            fillOpacity: 0.6
        });
    },
    renderer: canvas
}).addTo(map);

var communeLayer = L.geoJson(commune_collection, {
    onEachFeature: function(feature, layer) {
        var layerColor = '#'+Math.floor(Math.random()*16777215).toString(16);;
        layer.setStyle({
            color: '#FFFFFF',
            weight: 1,
            fillColor: layerColor,
            fillOpacity: 0.6
        });
    },
    renderer: canvas
});