I have written down a small code to modify geojson feature style on runtime using leaflet. you can try it on jsFiddle or use the following code test locally.
I hope it will help.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Coloring Geojson Features</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
<style>
#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;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://leafletjs.com/dist/leaflet.js"></script>
<script type="text/javascript" src="http://leafletjs.com/examples/us-states.js"></script>
<script type="text/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'
};
}
}
</script>
<input type="text" id="statename" value="Alaska">
<input type="button" id="btn" value="Set Color"/>
</body>
</html>
It seems one solution is to prevent this dragging issue upfront, at the document level, rather than retroactively treat the symptom and push focus back to the Leaflet map element/object using javascript..
It finally occurred to me to google "javascript firefox disable image drag", and that lead me to a generic solution over at SO.
If you're looking for a raw javascript solution, plant this little gatekeeper somewhere near the top of your initializing code:
document.ondragstart = function() { return false; };
Or alternatively, if you prefer a JQuery solution, use this:
$(document).on("dragstart", function() {
return false;
});
With respect to my plugin, I added the override as the first line of code.
It works beautifully, and it didn't seem to break any other functionality. However I'm unclear why this is necessary for Firefox while the other browsers are unaffected by it.
Best Answer
Simply add
background-size: 20px 20px;in.leaflet-control-layers-toggleCSS.Updated jsfiddle: https://jsfiddle.net/v95h1kx4/5/