HOW TO CONVERT LATTITUDE AND LONGITUDE
HOW TO CONVERT LATTITUDE AND LONGITUDE
(OP)
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('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
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[i].latitude), parseFloat(jsonData[i].longitude)]
},
"properties": {
"auction_date": jsonData[i].auction_date,
"lat": jsonData[i].latitude,
"lon": jsonData[i].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('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
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[i].latitude), parseFloat(jsonData[i].longitude)]
},
"properties": {
"auction_date": jsonData[i].auction_date,
"lat": jsonData[i].latitude,
"lon": jsonData[i].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>