Jenisha chauhan
IS-IT--Management
I would like to convert the latitude and longitude in coordinates string. because i convert json data to geoJson for show the marker on map using leafletjs .but the latitude , longitude was not convert into string and not display the markers on map. I here attached my code
<script>
var map = L.map('map',{ attributionControl: false}).setView([ 44.500000, -89.500000], 5);
const osm =L.tileLayer(' {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
//USING FOR JSON DATA
var api_url = 'data.js';
$.getJSON(api_url, function(jsonData)
{
var geojson = {
type: "FeatureCollection",
features: [],
};
for(i = 0; i < jsonData.length; i++)
{
geojson.features.push({
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [parseFloat(jsonData.latitude), parseFloat(jsonData.longitude)]
},
"properties": {
"auction_date": jsonData.auction_date,
"lat": jsonData.latitude,
"lon": jsonData.longitude
}
});
console.log(geojson);
});
}
const lightData = L.geoJSON(geojson, {
onEachFeature: function(featuress, layer) {
const popupContent =
'<h4 class = "text-primary">Street Light</h4>' +
'<div class="container"><table class="table-sm table-striped">' +
"<thead><tr><th>Properties</th><th>Value</th></tr></thead>" +
"<tbody><tr><td> Name </td><td>" +
featuress.auction_date +
"</td></tr>" +
"<tr><td>Coordinates </td><td>" +
featuress.geometry.coordinates +
"</td></tr>" +
"</table>";
layer.bindPopup(popupContent);
},
pointToLayer: function(feature, geojson) {
return L.marker(geojson, geojsonMarkerOptions);
},
});
const markers = L.markerClusterGroup().addLayer(lightData);
// marker clustering
map.addLayer(markers);
</script>
<script>
var map = L.map('map',{ attributionControl: false}).setView([ 44.500000, -89.500000], 5);
const osm =L.tileLayer(' {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
//USING FOR JSON DATA
var api_url = 'data.js';
$.getJSON(api_url, function(jsonData)
{
var geojson = {
type: "FeatureCollection",
features: [],
};
for(i = 0; i < jsonData.length; i++)
{
geojson.features.push({
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [parseFloat(jsonData.latitude), parseFloat(jsonData.longitude)]
},
"properties": {
"auction_date": jsonData.auction_date,
"lat": jsonData.latitude,
"lon": jsonData.longitude
}
});
console.log(geojson);
});
}
const lightData = L.geoJSON(geojson, {
onEachFeature: function(featuress, layer) {
const popupContent =
'<h4 class = "text-primary">Street Light</h4>' +
'<div class="container"><table class="table-sm table-striped">' +
"<thead><tr><th>Properties</th><th>Value</th></tr></thead>" +
"<tbody><tr><td> Name </td><td>" +
featuress.auction_date +
"</td></tr>" +
"<tr><td>Coordinates </td><td>" +
featuress.geometry.coordinates +
"</td></tr>" +
"</table>";
layer.bindPopup(popupContent);
},
pointToLayer: function(feature, geojson) {
return L.marker(geojson, geojsonMarkerOptions);
},
});
const markers = L.markerClusterGroup().addLayer(lightData);
// marker clustering
map.addLayer(markers);
</script>