Extending the Functionality of the Client

Transcription

1 Stefanakis, E., Web Mapping and Geospatial Web Services. CreateSpace Independent Publ. [In English], pp.168. Get a copy from Amazon Chapter 5 Extending the Functionality of the Client Emmanuel Stefanakis

2 Introduction JavaScripts programming language of the Web embedded into HTML enrich functionality JVM GET CLIENT HTTP/HTML SERVER Java Virtual Machine PUT 2

3 Google Maps API Allows Google Maps (content+functionality) and user data being integrated into web-based applications viewed by any user, regardless of the client s/w 3

4 Google Maps API API Application Programming Interface a source code based specification used as an interface by software components to communicate with each other 4

5 Google Maps API API Application Programming Interface Server data and functionality can be integrated into the client application JavaScript Library System (Client) System / Service (Server) 5

6 Google Maps API Google Maps API created by Google (JavaScript Library) to facilitate developers integrating Google Maps (and functionality) into their web sites with their own data It is a free service for limited use currently does not contain ads, Google reserves the right to display ads in the future 6

7 Google Maps API Lets you embed Google Maps in web pages with JavaScript Provides a number of utilities for manipulating maps adding content to the map through a variety of services 7

8 Google Maps API The full Google Maps can be embedded on an external web site Choose the API version Currently v3 ( Creating the map interface involves adding the Google JavaScript code to the web page, and using JavaScript functions to add points/objects to the map 8

9 Extend the Client-side (Intro Web Mapping) JavaScripts Java Virtual Machine GET CLIENT HTTP SERVER Google Server PUT { unb.htm } JavaScript functions part of GMaps API html (unb.htm) < p> UNIVERSITY OF NEW BRUNSWICK< /p> <javascript= get_google_map > <javascript= zoom_buttons > <javascript= pan_buttons > <javascript= mouse_xy >

10 Google Maps API Example Java Virtual Machine GET CLIENT HTTP SERVER Google Server PUT { gmapi_example.htm } html (gmapi_example.htm) 10

11 Google Maps API Example Client browser 11

12 12

13 Google Developers 13

14 Bing Maps API Interactive SDK του Bing Maps API 14

15 OpenLayers 15

16 OpenLayers What is it? a pure JavaScript library for displaying map data in most modern web browsers with no server-side dependencies it implements a JavaScript API for building rich web-based geographic applications similar to the Google Maps and MSN Virtual Earth APIs it is Open and Free Software OSGeo Project 16

17 OpenLayers Two basic concepts Map stores information about the default projection, extents, units, and so on of the map Layer stores information about how OpenLayers should request data and display it inside the Map, data is displayed via Layer s 17

18 OpenLayers Crafting HTML OpenLayers supports putting a map at almost any HTML element on your page include a script tag for the OpenLayers library to the HTML page 18

19 OpenLayers Map Constructor to create the viewer, you must first create a map ID of an HTML element 19

20 OpenLayers Layer Constructor next step to creating a viewer is to add a layer to the Map ID of the map OpenLayers supports many different data sources, from WMS to Yahoo!Maps to WorldWind. In this example, the WMS layer is used. The WMS layer is an example provided by MetaCarta. 20

21 OpenLayers View parameters to display the map, you must add the map and set a center and zoom level (e.g., zoomtomaxextent function) 21

22 OpenLayers Example 22

23 OpenLayers Base and Overlay Layers A layer can be defined as an overlay layer So that it can be displayed at the same time as other layers make the image transparent make the layer an overlay layer 23

24 OpenLayers Base layer Overlay layer 24

25 OpenLayers request=getmap&version=1.1.1& srs=epsg:4269&bbox=-72,45.35,-71.85,45.5& width=800&height=600& style=&format=image/png& layers=nhn:hydrography,nrn:roadnetwork,nrwn:track Example 25

26 OpenLayers Example 26

27 OpenLayers Examples 27

28 OpenLayers Examples 28

29 OpenLayers Examples 29

30 OpenLayers Examples 30

31 OpenLayers Examples 31

32 OpenLayers Examples 32

33 Heraklion SDI -- Web Client 33

34 The Viewer (thin mapping client) Heraklion SDI -- Web Client 34

35 Heraklion SDI -- Web Client 35

36 Heraklion SDI -- Web Client 36

37 Heraklion SDI -- Web Client Web Map Service (WMS) GetFeatureInfo request dhmoi_irakliou.getfullrequeststring({ REQUEST: "GetFeatureInfo", EXCEPTIONS: "application/vnd.ogc.se_xml", BBOX: dhmoi_irakliou.map.getextent().tobbox(), X: e.xy.x, Y: e.xy.y, INFO_FORMAT: "text/html", FONT: "c:/ms4w/fontlist/times.ttf", ENCODING: "ISO ", QUERY_LAYERS: dhmoi_irakliou.params.layers, WIDTH: dhmoi_irakliou.map.size.w, HEIGHT: dhmoi_irakliou.map.size.h}); 37

38 Heraklion SDI -- Mashups Base Map: Google Satellite Layers: Municipalities, Road Network, Buildings 38

39 Heraklion SDI -- Mashups Base Map: Google Map Layers: Municipalities, Road Network 39

40 Heraklion SDI -- Mashups Base Map: Orthophoto Map Layers: Municipalities, Towns, Road Network 40

41 Integrated CEOS European Data Server Heraklion SDI -- Mashups Base Map: ICEDS (WMS) Layers: Geology, Urban areas, Towns, Lakes 41

42 Roman and Byzantine Empires 42

43 Antikythera Mechanism 43

44 Early Housing in Fredericton 44

45 Grand Lake Meadows 45

46 City of Fredericton 46

47 City of Fredericton 47

48 References Mitchell, T., Web Mapping. O Reilly:USA. OSGeo Open Source Geospatial Foundation, Stefanakis, E., and Prastacos, P., Development of an Open Source Based Spatial Data Infrastructure. Applied GIS Journal, ISSN , Vol. 4, No. 4, pp Stefanakis, E., Map Mashups and APIs in Education. In: Peterson, M. (Ed.). Online Maps with APIs and Map Services. Springer. 48