Geoapplications development http://rgeo.wikience.org Higher School - PowerPoint PPT Presentation

Geoapplications development http://rgeo.wikience.org Higher School of Economics, Moscow, www.cs.hse.ru

2 Digital Maps: companies • Google Maps • Yandex Maps • Yahoo Maps – closed in 2015 • MapQuest • Bing Maps (Microsoft) • MANY NEW : TomTom, Mapbox , … Google for “blue marble”

3 Digital Maps Community projects: • OpenStreetMap (OSM) – satellite imagery is usually the base layer • Wikimapia – Google Maps are the base layer • Google Map Maker • Яндекс.Народная карта OpenStreetMap: - Created by volunteers around the world - Cartography data are free - Data license: Open Database License (ODbL) Drawbacks: standardization, correctness

4 Web Frameworks for 3D Geospatial Data Visualization • cesium.js https://cesiumjs.org/ • WebWorldWind http://webworldwind.org/

5 Leaflet an open-source JavaScript library for mobile-friendly interactive maps http://leafletjs.com/

6 Add base layer window.onload = function() { // Choose center and zoom level var options = { center : [ 41.8369 , - 87.6847 ], // Chicago zoom : 5 } // Instantiate map on specified DOM element var map_object = new L.Map ( 'map' , options ); // Choose the style you like L.tileLayer ( 'http://{s}.tile.thunderforest.com/pioneer/{z}/{x}/{y}.png' ). addTo ( map_object ); //L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png').addTo(map_object); //L.tileLayer('http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png').addTo(map_object); //L.tileLayer('http://{s}.tile.thunderforest.com/transport- dark/{z}/{x}/{y}.png').addTo(map_object); //L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png').addTo(map_object); }

7 Tile services: 70 examples http://leaflet-extras.github.io/leaflet-providers/preview/

8 Leaflet plugins We are going to add some interactivity to our map http://leafletjs.com/plugins.html#edit-geometries

9 Vector features drawing Leaflet.Draw https://github.com/Leaflet/Leaflet.draw/tree/leaflet-master You will need: • leaflet.draw.css • leaflet.draw.js • images folder Add lines to the respective sections: < link rel="stylesheet" href="leaflet.draw.css" /> < script src="leaflet.draw.js" ></ script >

10 Vector features drawing: controls Add controls polyline : { metric : false }, // Draw features circle : { var drawnItems = new L.FeatureGroup(); shapeOptions : { map_object.addLayer(drawnItems); color : '#662d91‘ } } }, edit : { // Initialise the FeatureGroup featureGroup : drawnItems // to store editable layers } var drawControl = new L.Control.Draw({ }); draw : { map_object.addControl(drawControl); position : 'topleft' , polygon : { map_object.on( 'draw:created' , function (e) { title : 'Draw a polygon!' , var type = e.layerType, allowIntersection : false , layer = e.layer; drawError : { color : '#b00b00' , if (type === 'marker' ) { timeout : 1000 layer.bindPopup( 'A popup!' ); }, } shapeOptions : { color : '#bada55' drawnItems.addLayer(layer); }, }); showArea : true },

11 Vector features dragging Drag support: https://github.com/w8r/Leaflet.draw.drag <script src= "Leaflet.draw.drag.js" ></script> That’s it ☺ Enjoy dragging

12 Terraformer “ A thing that does stuff to your data so you can map gooder. ” http://terraformer.io/

13 WKT from Leaflet feature <script src= "terraformer.min.js" ></script> <script src= "terraformer-wkt-parser.js" ></script> … var updateFunction = function ( layer ) { var geojson = layer.toGeoJSON (); var wkt = Terraformer.WKT.convert ( geojson.geometry ); console.log ( wkt ); if ( layer instanceof L.Polygon ){ // TODO } } … map_object.on ( 'draw:edited' , function ( e ) { var layers = e.layers ; layers.eachLayer (function ( layer ) { updateFunction ( layer ); }); }); + MODIFY map_object.on('draw:created',

14 jsts Port of JTS https://github.com/bjornharrtell/jsts Demo http://bjornharrtell.github.io/jsts/

15 Read GeoJSON var reader = new jsts . io . GeoJSONParser (); //read your geometries var geoms = reader . read ( geojson ); //grab the first one var multipolygon = geoms [ 0 ]; //union with all the others for (var x = 1 ; x < geoms . length ; x ++){ multipolygon = multipolygon . union ( geoms [ x ]); }

16 Readings Nathan Yau, Visualize This: The FlowingData Guide to Design, 1. Programming in Java Advanced Visualization and Statistics, Floating Imaging, http://www2.hs- data, Willey Publishing, 2011. fulda.de/caelabor/inhalte/java/j3d/j3d_ seminar/19/JAI%20Guide%20von%20 Sun/Analysis.doc.html 2. Feature Tutorial, http://docs.geotools.org/latest/usergui de/tutorial/feature/csv2shp.html 3. Shapefile Plugin, http://docs.geotools.org/stable/usergui de/library/data/shape.html 4. Flowing Data, http://flowingdata.com