Show uploaded csv in openstreetmap layer via javascript
<html>
<label for="file-input" id="file-input-label">Choose CSV File</label> <input type="file" id="file-input" accept="text/csv" /> <div id="mapdiv" style="width:800px; height:300px;"></div>
<script src=“/lib/scripts/OpenLayers.js”></script>
<script>
var markers = 0;
document.querySelector(“#file-input”).addEventListener('change', function() {
console.log("lets go"); // files that user has chosen var all_files = this.files; if(all_files.length == 0) { alert('Error : No file selected'); return; }
// first file selected by user var file = all_files[0];
var reader = new FileReader();
// file reading finished successfully reader.addEventListener('load', function(e) { var text = e.target.result; arr = text.split('\n'); for (i = 0; i < arr.length; i++) { arr[i] = arr[i].split(','); } console.log(arr); markers = arr;
// MAP STUFF STARTS HERE // Adapted from: harrywood.co.uk epsg4326 = new OpenLayers.Projection("EPSG:4326")
map = new OpenLayers.Map({ div: "mapdiv", displayProjection: epsg4326 // With this setting, lat and lon are displayed correctly in MousePosition and permanent anchor });
// map = new OpenLayers.Map("mapdiv"); map.addLayer(new OpenLayers.Layer.OSM()); map.addLayer(new OpenLayers.Layer.OSM("Wikimedia", ["https://maps.wikimedia.org/osm-intl/${z}/${x}/${y}.png"], { attribution: "© <a href='http://www.openstreetmap.org/'>OpenStreetMap</a> and contributors, under an <a href='http://www.openstreetmap.org/copyright' title='ODbL'>open license</a>. <a href='https://www.mediawiki.org/wiki/Maps'>Wikimedia's new style (beta)</a>", "tileOptions": { "crossOriginKeyword": null } }) ); // See https://wiki.openstreetmap.org/wiki/Tile_servers for other OSM-based layers
map.addControls([ new OpenLayers.Control.MousePosition(), new OpenLayers.Control.ScaleLine(), new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.Permalink({ anchor: true }) ]);
// Put your point-definitions here
projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator) var lonLat = new OpenLayers.LonLat(markers[0][15], markers[0][14]).transform(epsg4326, projectTo); var zoom = 12; if (!map.getCenter()) { map.setCenter(lonLat, zoom); }
var layerName = [markers[0][7]]; switch (markers[0][7]) { case 'LTE': color = "green"; break; case 'EDGE': color = "yellow"; break; default: color = "red"; } var styleArray = [new OpenLayers.StyleMap({ pointRadius: 3, fillColor: color, fillOpacity: 1 })]; var vectorLayer = [new OpenLayers.Layer.Vector(layerName[0], { styleMap: styleArray[0] })]; // First element defines first Layer
var j = 0; for (var i = 1; i < markers.length; i++) { if (!layerName.includes(markers[i][7])) { j++; layerName.push(markers[i][7]); // If new layer name found it is created switch (markers[i][7]) { case 'LTE': color = "green"; break; case 'EDGE': color = "yellow"; break; default: color = "red"; } styleArray.push(new OpenLayers.StyleMap({ pointRadius: 3, fillColor: color, fillOpacity: 1})); vectorLayer.push(new OpenLayers.Layer.Vector(layerName[j], { styleMap: styleArray[j] })); } }
//Loop through the markers array for (var i = 0; i < markers.length; i++) { var lon = markers[i][15]; var lat = markers[i][14]; var feature = new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(lon, lat).transform(epsg4326, projectTo), { description: "marker number " + i } // see http://dev.openlayers.org/docs/files/OpenLayers/Feature/Vector-js.html#OpenLayers.Feature.Vector.Constants for more options ); vectorLayer[layerName.indexOf(markers[i][7])].addFeatures(feature); }
for (var i = 0; i < layerName.length; i++) { map.addLayer(vectorLayer[i]); }
}); // read as text file reader.readAsText(file);
});
</script>
</html>