JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<div id="infopane">click on a marker</div>
<div id="map"></div>
CSS
#map {
height: 360px;
width: 49%;
}
#infopane {
width: 49%;
float: right;
border: 0.2px solid #c0c0c0;
}
h2 {
margin-top: 0.1em;
margin-left: 0.1em;
font-family: Arial, Helvetica, sans-serif;
}
JavaScript
// uses http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css
// uses http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js
var map = L.map("map").setView([51.52, 11], 8);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
}).addTo(map);
var loadGIST = function() {
$.ajax({
url: "https://gist.githubusercontent.com/anonymous/e54a23c4d5204d7ea8c1/raw/a9559d405c30630caccc4a59c26e20a2d44f3d6e/map.geojson",
/*jsonp: "callback",*/
dataType: "json",
success: function(data, status, xhr) {
jsonLayer.addData(data);
} // end success
});
};
var selectedFeature = null;
var styleForFeature = function(feat) {
// style for not selected features
sty = {
"color": "green",
"fillColor": "green",
weight: 5
}
if (feat.properties.delta_18_O == "yes") {
sty.color = "green";
} else {
sty.color = "blue";
sty.fillColor = "blue";
}
return sty;
}
//will be filled with data from ajax request
var jsonLayer = L.geoJson(null, {
onEachFeature: function(f, layer) {
layer.on('click', function(e) {
$("#infopane").html("<h2>" + e.target.feature.properties.name + "</h2>" + "Monitoring of Delta 18 O: " + e.target.feature.properties.delta_18_O + "<br>" + "Monitoring of dripwater: " + e.target.feature.properties.drip_water + "<br>");
selectedFeature = e.target.feature;
redrawLayerMarkers();
});
},
pointToLayer: function(feature, latlng) {
return new L.CircleMarker(latlng, {
radius: 7,
fillOpacity: 0.85
});
},
style: styleForFeature
})
.addTo(map);
//jsonLayer.addData(fc);
loadGIST();
var redrawLayerMarkers = function() {
jsonLayer.eachLayer(function(l) {
if (l.feature == selectedFeature) {
l.setStyle({
color: 'yellow',
weight: 7
})
}...