tools:rat-map [NetModule Router Wiki]

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>

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: "&copy; <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>

User Tools

Site Tools

Page Tools