JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet-src.js"></script>
<link rel="stylesheet" href="http://labs.easyblog.it/maps/leaflet-search/src/leaflet-search.css">
<script src="http://labs.easyblog.it/maps/leaflet-search/src/leaflet-search.js"></script>
<div id="map"></div>
CSS
#map {
height: 500px;
}
JavaScript
var map = L.map("map").setView([-19, -44], 6);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var stations = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"STATION": "Rio Paranaíba",
"ST_CODE": "MGRP",
},
"geometry": {
"type": "Point",
"coordinates": [-46.132551833299999, -19.209860611100002]
}
}, {
"type": "Feature",
"properties": {
"STATION": "Varginha",
"ST_CODE": "MGV1",
},
"geometry": {
"type": "Point",
"coordinates": [-45.434993111099999, -21.5426228611]
}
}, {
"type": "Feature",
"properties": {
"STATION": "Viçosa",
"ST_CODE": "VICO",
},
"geometry": {
"type": "Point",
"coordinates": [-42.8699895, -20.761500555600001]
}
}, {
"type": "Feature",
"properties": {
"STATION": "Belo Horizonte",
"ST_CODE": "MGBH",
},
"geometry": {
"type": "Point",
"coordinates": [-43.924896972200003, -19.941900861099999]
}
}]
};
var myGeoJsonLayer = L.geoJson(stations).addTo(map);
/// Patch Leaflet-search plugin.
L.Control.Search.mergeOptions({
minLength: 0 // Show full list when no text is typed.
});
L.Control.Search.include({
_handleKeypress: function(e) {
switch (e.keyCode) {
case 27: //Esc
this.collapse();
break;
case 13: //Enter
if (this._countertips == 1)
this._handleArrowSelect(1);
this._handleSubmit(); //do search
break;
case 38: //Up
this._handleArrowSelect(-1);
break;
case 40: //Down
this._handleArrowSelect(1);
break;
case 37: //Left
case 39: //Right
case 16: //Shift
case 17: //Ctrl
//case 32://Space
break;
case 8: //backspace
case 46: //delete
...