I have an file.csv inse a folder from a database. I want to show a Vector inside my map but idk how to reach that file. (trasnforming as a json, taking only latitude or longitude....). I tried taking coordinates from another function and using in my loadEvent but coordinates never changes.
This is the function what i use to list in a calendar i have (declared var latitude and var Longitude to try using in loadEvent)
var Latitude;
var Longitude;
function setListEvents(list,events){
var n = events.length;
var msg = "";
for(i=0;i<n;i++){
var Magnitude = events[i]['Magnitude'];
var Id = events[i]['id'];
var Folder = events[i]['Folder'];
var Date = events[i]['Date'];
var Time = events[i]['Time'];
var Depth = events[i]['Depth'];
var Latitude = events[i]['Latitude'];
var Longitude = events[i]['Longitude'];
//msg = msg+"<div>Magnitud: <font style='color:red;'>"+Magnitude+"</font></div>";
msg = msg+"<div id='"+Id+"' data-folder='"+Folder+"' class='card' onclick='loadEvent(this);'><div class='card-body'><h4 class='card-title' style='color: #ff0000;'>"+Magnitude;
msg = msg+"</h4><p style='margin-bottom: 0;'>Fecha: "+Date+" Hora: "+Time+"<br />Profundidad: "+Depth+"km<br />Ubicación: "+Latitude+"º"+Longitude+"º</p></div></div>";
}
//console.log(list);
//console.log(msg);
$( '#'+list ).html( msg );
console.log(Latitude,Longitude);
}
This is part of my code in loadEvent:
function loadEvent(e){
const circleStyle = new ol.style.Circle({
fill: new ol.style.Fill({
color:[245,49,5,10]
}),
radius:5,
})
const place = [Latitude,Longitude];
const point = new ol.geom.Point(place);
const newfeature = new ol.Feature({
labelPoint: point,
name: "prueba",
})
newfeature.setGeometryName('labelPoint');
var pointing = newfeature.getGeometry().getCoordinates();
console.log(pointing);
const newPoints = new ol.layer.Vector({
source : new ol.source.Vector({
features:[ new ol.Feature(pointing)]
/* url: "assets/map.geojson",
format: new ol.format.GeoJSON() */
}),
visible:true,
title: "New Points",
style : new ol.style.Style({
image: circleStyle
})
})
map.addLayer(newPoints)
}
You will need the Point coordinates in Longitude, Latitude order, then transformed to the view projection
const newPoints = new ol.layer.Vector({
source : new ol.source.Vector({
features: [new ol.Feature(
new ol.geom.Point(
ol.proj.fromLonLat([Longitude, Latitude], map.getView().getProjection())
}
)]
}),
visible: true,
title: "New Points",
style : new ol.style.Style({
image: circleStyle
})
});
map.addLayer(newPoints);