JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<div id="map" style="width: 600px; height: 400px"></div>
CSS
img {
width: 100px;
height: 100px;
display: block;
}
JavaScript
var data = [{
"coordinates": [21.616456, 63.095089],
"properties": {
"name": "Jonas",
"location": "Vasa",
"color": "#0F5",
"image": "http://i.imgur.com/HFbKFNs.jpg",
}
}, {
"coordinates": [-0.127758, 51.507351],
"properties": {
"name": "Gabe",
"location": "London",
"color": "#F50",
"image": "http://i.imgur.com/3woDux6.jpg",
}
}, {
"coordinates": [4.895168, 52.370216],
"properties": {
"name": "Mark",
"location": "Amsterdam",
"color": "#5AF",
"image": "http://i.imgur.com/NHW3d6L.jpg",
}
}];
var geojson = function(features) {
return {
"type": "FeatureCollection",
"features": features.map(function (feature) {
return {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": feature.coordinates
},
"properties": feature.properties
}
})
}
};
var map = L.map('map').setView([32, 35], 2);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var defaultColor = "#F49";
geojsonLayer = L.geoJson(geojson(data), {
style: function(feature) {
return {
fillColor: feature.properties.color || defaultColor
}
},
pointToLayer: function(feature, latlng) {
return new L.CircleMarker(latlng, {
radius: 8,
fillOpacity: 0.85,
color: 'black'
});
},
onEachFeature: function (feature, layer) {
layer.bindPopup(
marked(Mustache.render(
"## Data point information\n" +
"**{{name}}** is in {{location}}" +
"",
feature.properties
))
);
}
});
map.addLayer(geojsonLayer);