JSFiddle - React, Tailwind, and code Playground

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>

CSS

/*adjust position of zoom control to show up as middle rather than top*/
.leaflet-control-zoom {
	top: 180px;
	}

JavaScript

//quick attempt to position zoom control on middle right, for this stackoverflow question:
//http://stackoverflow.com/questions/33614912
//
//better answers from others:
//http://plnkr.co/edit/Yg8phGDcCBS1IlGgpKa2?p=preview
//http://jsfiddle.net/ve2huzxw/8/

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

//create map with zoomControl option set to false
var map = new L.Map('map', {zoomControl: false}).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);

//create Leaflet control with a selector (just an example here)
var selector = L.control({
    position: 'topright'
});

//empty select element to be populated later
selector.onAdd = function (map) {
    var div = L.DomUtil.create('div', 'select');
    div.innerHTML = '<select id="sta_select"><option>(select station)</option></select>';
    return div;
};
selector.addTo(map);

//if you have other controls, add zoom control last to avoid undesirable appearances
var zControl = L.control.zoom({
    position: 'topright'
}).addTo(map);


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

var rbmc = {
    "type": "FeatureCollection",
        "crs": {
        "type": "name",
            "properties": {
            "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
        }
    },
        "features": [{
        "type": "Feature",
            "properties": {
            "ESTACAO": "96111",
                "MUNICIPIO": "Rio Parana&#237;ba",
                "SG_RBMC": "MGRP"
        },
            "geometry": {
            "type": "Point",
                "coordinates":...