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

Digital Maps: companies

2

• Google Maps
• Yandex Maps
• Yahoo Maps – closed in 2015
• MapQuest
• Bing Maps (Microsoft)
• MANY NEW: TomTom, Mapbox, …

Google for “blue marble”

Digital Maps

3

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

Web Frameworks for 3D Geospatial Data Visualization

4

• cesium.js https://cesiumjs.org/
• WebWorldWind http://webworldwind.org/

Leaflet

5

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

Add base layer

6

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

Tile services: 70 examples

7

http://leaflet-extras.github.io/leaflet-providers/preview/

Leaflet plugins

8

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

Vector features drawing

9

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>

Vector features drawing: controls

10

Add controls

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

Vector features dragging

11

Drag support: https://github.com/w8r/Leaflet.draw.drag

<script src="Leaflet.draw.drag.js"></script>

That’s it ☺ Enjoy dragging

Terraformer

12

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

WKT from Leaflet feature

13

<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',

jsts

14

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

Read GeoJSON

15

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

Readings

16

• 1. Programming in Java Advanced

Imaging, http://www2.hs- 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

Nathan Yau, Visualize This: The FlowingData Guide to Design, Visualization and Statistics, Floating data, Willey Publishing, 2011.