Geographic Information Systems Asked by arpanmangal on November 30, 2020
I want to highlight a road segment on a Leaflet Map. I have the coordinates of the end point of the road segment, so could plot it as a linestring. But the problem is how can I get the width of the road segment, so as to highlight it completely?
Is there some Leaflet function / library which can make this kind of queries?
One way could be to use this approximate method from Obtaining shape or width of road in GeoJSON format?, but is there a better method? Also this method won’t work with zoom-in / zoom-out, since the width should change with zoom-in / zoom-out, but hard-coding width of different types of road will not give this effect.
Instead of creating a new line to show the selected feature, you can create a highlight style to use when you click on the line (Select it), the style controls the width of the original line and the highlight width.
Here is some working code, I also have a link to a GeoJSON line file, save it as text and place in the same folder as your html file, it should run. (http://www.gistechsolutions.com/leaflet/DEMO/Buffer/istate.json) or rename the var url to your GeoJSON file. Note my on.click sets the roads back to the original style before it draws the highlight style, if you don't do this it will keep the old one selected.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style>
#map {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var url = "istate.json"; // http://www.gistechsolutions.com/leaflet/DEMO/Buffer/istate.json
var map = L.map('map').setView([43, -75], 7);
var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
// Used to show each road
var myStyle = {
"color": "black",
"weight": 5, //symbol width of line
"opacity": 0.65
};
var highlight = {
"color": "yellow",
"weight": 5,
"opacity": 1
};
function forEachFeature(feature, layer) {
layer.on('click', function (e) {
road.setStyle(myStyle);
layer.setStyle(highlight);
})
}
//////////////////////////
//Define Road Layer
var road = L.geoJson(null, {
onEachFeature: forEachFeature,
style: myStyle
});
// Add GeoJSON to road layer
$.getJSON(url, function(data) {
road.addData(data);
});
//Add road layer to map
road.addTo(map);
</script>
</body>
</html>
Answered by Bill Chappell on November 30, 2020
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP