JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://leafletjs.com/examples/us-states.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css">
<script src="cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<div id="map"></div>
<input type="text" id="statename" value="Alaska">
<input type="button" id="btn" value="Set Color" />
CSS
#map {
width: 800px;
height: 500px;
}
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
.legend {
text-align: left;
line-height: 18px;
color: #555;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
JavaScript
$(document).ready(function() {
init_map();
init_geojson();
$("#btn").on('click', function() {
var stateName = $('#statename').val();
console.log(stateName);
init_geojson(stateName);
});
});
var map, geojson, sn;
function init_map() {
map = L.map('map').setView([37.8, -96], 4);
L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', {
attribution: 'Map data © 2011 OpenStreetMap contributors, Imagery © 2012 CloudMade',
key: 'BC9A493B41014CAABB98F0471D759707'
}).addTo(map);
geojson = L.geoJson(statesData, {
style: style
//onEachFeature: onEachFeature,
}).addTo(map);
}
function init_geojson(n) {
console.log(geojson.options);
map.removeLayer(geojson);
if (n != "") {
sn = n;
console.log(sn);
geojson = L.geoJson(statesData, {
style: style
}).addTo(map);
}
}
function style(feature) {
console.log(sn);
if (sn == feature.properties.name) {
return {
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.3,
fillColor: '#ff0000'
};
} else {
return {
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.3,
fillColor: '#666666'
};
}
}