NetModule Router Wiki

User Tools

Site Tools

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision		Previous revision
tools:rat-map [2022/03/23 12:40] – created juraschektools:rat-map [2022/03/23 14:43] (current) – juraschek
Line 1: Line 1:
 Show uploaded csv in openstreetmap layer via javascript  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: "&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>
 +
 +

Page Tools

tools/rat-map.1648039234.txt.gz · Last modified: 2022/03/23 12:40 by juraschek