JSFiddle - React, Tailwind, and code Playground

Leaflet select control test

by nathansnider

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css">
<div id="map" style="width:500px; height:500px"></div>

JavaScript

////////////////////////////////////////////////////////////////////////////////////////////
//setting up the map//
////////////////////////////////////////////////////////////////////////////////////////////

var map = new L.Map('map').setView([-13, -54], 3);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

////////////////////////////////////////////////////////////////////////////////////////////
//adding the data//
////////////////////////////////////////////////////////////////////////////////////////////

var pts = {
    "type": "FeatureCollection",
        "features": [{
        "type": "Feature",
            "properties": {
            "name" : "Marker 1"
        },
            "geometry": {
            "type": "Point",
                "coordinates": [-46.132, -19.209]
        }
    }, {
        "type": "Feature",
            "properties": {
            "name" : "Marker 2"
        },
            "geometry": {
            "type": "Point",
                "coordinates": [-45.435, -21.542]
        }
    }, {
        "type": "Feature",
            "properties": {
            "name" : "Marker 3"
        },
            "geometry": {
            "type": "Point",
                "coordinates": [-42.87, -20.761]
        }
    }]
};

var geoPts = L.geoJson(pts, {
    onEachFeature: function (feature, layer)
    {
        layer.bindPopup(feature.properties.name);
    }
}).addTo(map);
map.fitBounds(geoPts.getBounds());

////////////////////////////////////////////////////////////////////////////////////////////
//creating the selector control//
////////////////////////////////////////////////////////////////////////////////////////////

//create Leaflet control for selector
var selector = L.control({
    position: 'topright'
});

//create select element (with id, so it can be populated later)
selector.onAdd = function (map) {
    var div =...