JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://leafletjs.com/dist/leaflet.js"></script>
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div id="map"></div>
CSS
#map {
width: 800px;
height: 500px;
}
JavaScript
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([39.75621, -104.99404], 20);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var geojsonFeature = {
"type": "Feature",
"properties": {
"name": "Coors Field",
"amenity": "Baseball Stadium",
"popupContent": "This is where the Rockies play!"
},
"geometry": {
"type": "Point",
"coordinates": [-104.99404, 39.75621]
}
};
L.geoJson(geojsonFeature).addTo(map);
var myLayer = L.geoJson().addTo(map);
myLayer.addData(geojsonFeature);
var myLines = [{
"type": "LineString",
"coordinates": [
[-100, 40],
[-105, 45],
[-110, 55]
]
}, {
"type": "LineString",
"coordinates": [
[-105, 40],
[-110, 45],
[-115, 55]
]
}];
var myStyle = {
"color": "#ff7800",
"weight": 5,
"opacity": 0.65
};
L.geoJson(myLines, {
style: myStyle
}).addTo(map);
var states = [{
"type": "Feature",
"properties": {
"party": "Republican"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-104.05, 48.99],
[-97.22, 48.98],
[-96.58, 45.94],
[-104.03, 45.94],
[-104.05, 48.99]
]
]
}
}, {
"type": "Feature",
"properties": {
"party": "Democrat"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-109.05, 41.00],
[-102.06, 40.99],
[-102.03, 36.99],
[-109.04, 36.99],
[-109.05, 41.00]
]
]
}
}];
L.geoJson(states, {
style: function (feature) {
switch...