Search code examples
javascripthtmlmapsopenlayers

How to use file.csv to Openlayers


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)
}

Yellow alerts are coming from another function CSV RESULTS


Solution

  • 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);