JSFiddle - React, Tailwind, and code Playground

basic states layer with popup

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">
<script src="http://leafletjs.com/examples/us-states.js"></script>
<div id='map'></div>

CSS

#map {
    position:absolute;
    top:0;
    bottom:0;
    width:100%;
}

JavaScript

var map = L.map('map').setView([42.505, -100], 3);

L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
subdomains: 'abcd',
maxZoom: 19
}).addTo(map);

function toAddPopup (feature, layer) {
        layer.bindPopup(feature.properties.density.toString());
        }

L.geoJson(statesData,{
        onEachFeature: toAddPopup
}).addTo(map);