I am using leaflet and mapbox and I use the function to print the id nuber on the screen when hovering over the line in the map.
geojson = L.geoJson(lines, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
this.update();
return this._div;
};
info.update = function (props) {
this._div.innerHTML = '<h4><b>Links<b></h4>' + (props ?
'<b>Link' + props.id + '</b><br />'
: 'Hover over a link');
};
info.addTo(map);
The way I draw the line is by the following geoJSON file
var lines = {
"type": "FeatureCollection",
"features": [{
"type": "LineString",
"coordinates": [
[103.85, 1.28992],
[103.89, 1.294],
[103.83, 1.216]
],
"properties": { "id": "1" }
}, {
"type": "LineString",
"properties": { "id": "2" },
"coordinates": [
[103.5, 1.292],
[103.9, 1.4],
[103.3, 1.21]
]
}, {
"type": "LineString",
"properties": { "id": "3" },
"coordinates": [
[103.6, 1.291],
[103.6, 1.39],
[103.3, 1.29]
]
}]
};
but when i hover over the line it shows "undefined" instead of showing the id.Any help is appreciated
via Josh