L.Highlight demo

mmaciejkowalski/L.Highlight


// simple query, but look around - it matches
// also 'Piotrkowska' around the Łódź city!

var map1 = L.map('map1').setView([51.759306, 19.458585], 14);

L.tileLayer( {...} ).addTo(map1);

new L.Layer.Highlight().do({
    q: 'Piotrkowska, Łódź'
}).addTo(map1);
        

// advanced query, look around - it does
// not match 'Piotrkowska' around the Łódź city!

var map1 = L.map('map2').setView([51.759306, 19.458585], 14);

L.tileLayer( {...} ).addTo(map2);

new L.Layer.Highlight().do({
    street: 'Piotrkowska',
    city: 'Łódź'
}).addTo(map2);
            

// what about areas? Remember to change
// default StringLine filter to Polygon!

var map3 = L.map('map3').setView([51.779150, 19.444561], 14);

L.tileLayer( {...} ).addTo(map2);

new L.Layer.Highlight().do({
    q: 'Manufaktura, Łódź',
    filter: 'Polygon'
}).addTo(map3);
            

// highlighting parks should be always done in green, I think.

var map4 = L.map('map4').setView([51.753828, 19.442483], 14);

L.tileLayer( {...} ).addTo(map2);

new L.Layer.Highlight().do({
    q: 'Park Poniatowskiego, Łódź', 
    filter: 'Polygon'
}, {
    style: function(x) {
        return {color: '#0f0'}
    }
}).addTo(map4);
            

// so what about events?

var map5 = L.map('map5').setView([51.750264, 19.453295], 14);

L.tileLayer( {...} ).addTo(map2);

new L.Layer.Highlight().do({
    q: 'Politechnika, Łódź',
    filter: 'Polygon'
}, {
    style: function() {
        return { color: '#f00' };
    }, eventHandlers: { 
        click: function(area) {
            alert(area.sourceTarget.feature.properties.display_name);
        }
    }
}).addTo(map5);
            

// Have some fun, remove layers!

var map6 = L.map("map6").setView([51.750264, 19.453295], 11);

L.tileLayer( {...} ).addTo(map6);

let districts = [
	new L.Layer.Highlight().do({ q: 'Łódź Bałuty, Łódź', filter: "Polygon" }),
	new L.Layer.Highlight().do({ q: 'Łódź Widzew, Łódź', filter: "Polygon" }),
	new L.Layer.Highlight().do({ q: 'Łódź Górna, Łódź', filter: "Polygon" }),
	new L.Layer.Highlight().do({ q: 'Łódź Polesie, Łódź', filter: "Polygon" }),
	new L.Layer.Highlight().do({ q: 'Łódź Śródmieście, Łódź', filter: "Polygon" })
];

var i = 0;
setInterval(highlightNext, 1000);

function highlightNext() {
	districts[i].removeFrom(map6);
	i = (++i)%5;
	districts[i].addTo(map6);
}