Vector Web Mapping Past, Present and Future. Jing Wang MRF Geosystems Corporation

Size: px

Start display at page:

Download "Vector Web Mapping Past, Present and Future. Jing Wang MRF Geosystems Corporation"

Theodora Hudson
8 years ago
Views:

1 Vector Web Mapping Past, Present and Future Jing Wang MRF Geosystems Corporation Oct 27, 2014

2 Terms Raster and Vector [1] Cells and Pixel Geometrical primitives 2

3 Early 2000s From static to interactive web mapping Client-side applications Plug-ins, Java applets and ActiveX controls Data format SVG (Scalable Vector Graphics) introduced in 1999 a response to two proposals Precision Graphics Markup Language (PGML, developed from Adobe's PostScript) Vector Markup Language (VML) GML (Geography Markup Language) defined by the Open Geospatial Consortium (OGC) 3

4 Around 2005 Game Changer - Google Maps Browser as thin-client Image tiles + Overlays APIs (Application Interface) Web Mercator Projection KML (Keyhole Markup Language) [2] 4

5 The competition of Rich Internet Applications (RIA) Flash/Flex MXML Flash Player plug-in Silverlight (2007) XAML Silverlight plug-in JavaFX plug-in 5

6 Since 2009 HTML5 Native graphics APIs (ideal for map rendering) SVG,Canvas Hardware Access Geolocation, Device orientation Offline Storage HTML, Javascript, CSS 6

7 Google Maps Started to serve vector map via WebGL (2011) And officially pushed to desktop version (2013) ESRI..supporting HTML5 developers will continue to be aggressive (2011) GIS Cloud HTML5 Canvas Map Engine (2011) MRF [7] MRF HTML5 Map Server (2012) [5] [6] [3] [4] 7

8 Benefits of HTML5 Based Vector Mapping All advantages of vector format Interaction, style setting, hover event, printing Native browser support, No plug-ins Cross-platform support Desktop, smartphones, tablets Based on open standards easily mash up, different source data integration... 8

9 Thin/Thick Client Time Standards, Browser, Database, hardware development 2009 HTML5 Age Server CPU and Database Load Client/User 2005 Browser/Server Age CPU and Database Load 2000 Client/Server Age CPU and Database Load 9

10 Improve the Performance Choose Graphics APIs SVG Shape based Integration into the DOM (Document Object Model) Canvas Low level pixel control WebGL [8] 10

11 Improve the Performance Data Format GML <items> <Item> <name>geoalberta Geocaches</name> <description></description> <where></where> <position> <gml:point srsdimension="2" srsname=" /0/4326"> <gml:pos> , </gml:pos> </gml:point> </position> </Item> </items> GeoJSON (JavaScript Object Notation, JSON) { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ , ] }, "properties": { "name": GeoAlberta Geocaches } } 255 byte 129 byte Well-known text (WKT) Well-known binary (WKB) E.g. Geometry POINT( ) is represented as:

12 Improve the Performance Clustering and Simplify Points Line and Polygons 95K [2] 5K [9] 12

13 Improve the Performance Vector Tiles only get the data within current view multiple requests rather than single query utilize the browser cache [10] 13

14 Open-source JavaScript libraries Leaflet Mapnik OpenLayers Polymaps 14

15 Summary Progression of Vector Web Mapping The driving force Performance (User experience) by the vendors Limited / Pushed by hardware and software environment browsers, database development Contributed by Open source communities 15

16 Future <HTML>... <geomap>.. </geomap>... </HTML> 16

17 Proprietary vector techniques will stay for a while, but will fade away. Compare with other vector mapping approaches, HTML5 approach is the clear winner. However, HTML5 will continuously update as they receive feedback from different sources. Such as browser vendors, Open source communities. New standards, techniques will push vector mapping beyond it s border. Data format, dynamic style format, Local side cache 17

18 References [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] 18

19 Thank you! 19

Research on HTML5 in Web Development

Research on HTML5 in Web Development 1 Ch Rajesh, 2 K S V Krishna Srikanth 1 Department of IT, ANITS, Visakhapatnam 2 Department of IT, ANITS, Visakhapatnam Abstract HTML5 is everywhere these days. HTML5