1. 29 April 2015Page 1 Beginners Guide: Embed GIS Maps Tutorial and Walkthrough w/Examples How to Add GIS Maps to Your Webpages

2. 29 April 2015Page 2 Agenda Why Use Maps Four Ingredients to a Map Generate Your First Map Embed Your Map in a Web Page Customize Your Map Position the Center of your Map View Map Examples Use Maps in SharePoint Contacts

3. 29 April 2015Page 3 Why Maps Maps are better visually to show global, regional, geographic information Maps give a quick visual of complex data Maps are more appropriate for locations, distances, routes, and boundaries Maps are easy and fun!

4. 29 April 2015Page 4 With Maps, Indicate… Distances – Example: How far is it between Brazil and West Africa? Boundaries Borders Specific Locations – airports – weather stations Status – Compliance to regulations – Progress toward goals

5. 29 April 2015Page 5 Maps of ICAO-related Information Flight Information Regions (FIR) Search and Rescue (SAR) Language Proficiency (LPR) WGS-84 Status Performance Based Navigation (PBN) Aerodromes Many more…

6. 29 April 2015Page 6 ABOUT MAPS

7. 29 April 2015Page 7 Four Ingredients to Your Map The web browser, or how you view the map – Internet Explorer, Chrome, Firefox, Mozilla, etc. The applet or what "holds" the map – Adobe Flash, or Java The geoserver, or what creates the map – http://gis.icao.int The html, or what connects it all together – The instructions of what to show, where

8. 29 April 2015Page 8 How it Works GIS Server HTML MAP in Page

9. 29 April 2015Page 9 YOUR FIRST (VERY BASIC) MAP Let’s Make a Map

10. 29 April 2015Page 10 First, Create and Save a Web Page Start Notepad or text editor Create basic HMTL – (copy code below) My First Embedded Map – Save the file – Name it using double quotes "myfirstmap.html" – Hint: Remember where you saved it!!

11. 29 April 2015Page 11 GENERATE THE MAP

12. 29 April 2015Page 12 Start with the Subject of the Map SubjectGIS Map Server Flight Information Regions (FIR)http://gis.icao.int/FIRMSD WGS-84 Statushttp://gis.icao.int/wgs84 Language Proficiency Requirements (LPR) http://gis.icao.int/icaolpr Many more: PBN, ATS Route, SAR, SRR, ATM, SCAN, 5LNC, SAAFA, AOP, SUAS, Doc7910 Start at http://gis.icao.int/... (This tutorial applies to those maps labeled "needs Flash")http://gis.icao.int/

13. 29 April 2015Page 13 Locate GIS URL Browse http://gis.icao.int to choose subjecthttp://gis.icao.int – Use the GIS Services Selector (dropdown) – Choose a map with "Needs Flash" as label – Follow link to map – Copy the URL Highlight and right-mouse click, "copy" Example with AIS-AIM Map – View walkthrough in next slides…

14. 29 April 2015Page 14 Step 1: Select Map (need Flash) Click on map labelled "need Flash ICAO AIS AIM" In this example, choose AIM transition

15. 29 April 2015Page 15 Step 2: View Map and Copy URL Right Mouse Click and Copy URL (http://gis.icao.int/aisaim) From the browser, verify the URL is http://gis.icao.int/aisaim/

16. 29 April 2015Page 16 Step 3: Paste URL into Step 3: Paste URL into Note that the URL is surrounded with double quotes My First Embedded Map

17. 29 April 2015Page 17 Step 4: Save and Check the Results In Notepad, choose File, Save File – Remember where you save it! Change to your desktop Double-click File "mymap.html" to Open with your browser

18. 29 April 2015Page 18 Results: Congratulations! It is your first embedded GIS Map! We will customize it now…

19. 29 April 2015Page 19 Troubleshoot Check that you have all brackets ( ) Confirm that all open tags have close tags Be sure to have quotation marks (" ") Sometimes "smart quotes" (curly quotes) can be a problem so change to "straight quotes" Verify correct URL in browser – http://gis.icao.int/aisaism should open a full map http://gis.icao.int/aisaism Remove unnecessary spaces or line returns Have someone check your work

20. 29 April 2015Page 20 CUSTOMIZE BASIC MAP

21. 29 April 2015Page 21 Your First Embedded Map is OK… Your first map was … – A bit small – Difficult to read – Legend is missing or too big, covering map – Impossible to control zoom and positioning So let’s customize it! – Start simple…

22. 29 April 2015Page 22 Toggle the Scroll Bar To disable vertical scroll bar, add Scrolling="no" My First Embedded Map <iframe frameborder="0" scrolling="no" src="http://gis.icao.int/aisaim/"

23. 29 April 2015Page 23 Add/Remove Frame Border There is a small border around the map, by default, which you can remove by adding frameborder="0" Example: <iframe frameborder="0" src=http://gis.icao.int/aisaim…

24. 29 April 2015Page 24 Change the Map Size Map Size is from two properties (in pixels) – Width and Height Use width and height numbers….or… – Example: width="640" height="480" Use width and height percentage – Example: width="50%"height="50%" Experiment to see what is most appropriate for your map and the users screen resolution

25. 29 April 2015Page 25 Size of Map – Graphic view height="480" width="640"

26. 29 April 2015Page 26 Check Your Custom Map HTML Code My First Embedded Map <iframe frameborder="0" width="640"height="480"src="http://gis.icao.int/aisaim/" Resulting Map

27. 29 April 2015Page 27 SET MAP STARTING POSITION Emphasize Particular Regions, Member States, etc.

28. 29 April 2015Page 28 Position the Starting Map Options Focus the map center on a particular place… Position the map with – Center and scale (zoom) or – Extent (four boundaries) Find the coordinates we prepared: – By State – By Flight Information Region (FIR) – By Aerodrome Or find your own…more on this later…

29. 29 April 2015Page 29 CENTER AND SCALE OR LEVEL Position Map Starting Point

30. 29 April 2015Page 30 Position the Map: Center, Scale/Level Center and Scale settings work together The Center coordinates = center point of map Scale and Level indicates "zoom" level – Think "altitude" from which you view map Adjust center and scale or level to create map with the view you want. See explanation and examples next slides

31. 29 April 2015Page 31 Decrease the Scale (demo)

32. 29 April 2015Page 32 Zoom Singapore with Scale Setting scale=2000000scale=550000

33. 29 April 2015Page 33 Zoom using Level Level (like scale) works with Center= Zoom out by decreasing Level Zoom in by increasing Level – Example: Level=19 is "urban city neighborhood" Experiment for best options for you

34. 29 April 2015Page 34 Now, Center the Map By "State" Previous examples – Berlin as center point – Singapore as center point What is the center point of your map? – Global is default – ICAO Member State, FIR, or Aerodrome? Now you know what it means to center the map, we need the coordinates to do it…

35. 29 April 2015Page 35 Center Coordinates by State Choose map subject (lpr, fir, aop, wgs-84, etc.) – Example: src="http://gis.icao.int/ICAOLPR?... Find center coordinates in the spreadsheet – http://gis.icao.int/anpdownload/ICAOSTATEall.xlsx http://gis.icao.int/anpdownload/ICAOSTATEall.xlsx – Use figures in Longwebmer and Latwebmer Example 1: Mexico as the CENTER point » Note: The first coordinate above is a “negative”

36. 29 April 2015Page 36 Center Coordinates by FIR Use src="http://gis.icao.int/FIRMSD? Find center coordinates in the spreadsheet – http://gis.icao.int/anpdownload/ICAOFIRall.xlsx http://gis.icao.int/anpdownload/ICAOFIRall.xlsx – Use column contents in LongUTM and LatUTM – Example 1: FIR Mexico » Note: The first coordinate above is a “negative” <iframe frameborder="0" width="100%" height="600" src="http://gis.icao.int/firmsd?center=- 11397743.7580,2614106.8183&scale=5500000">

37. 29 April 2015Page 37 Example: Center FIR Mexico

38. 29 April 2015Page 38 POSITION / ZOOM BY AERODROME

39. 29 April 2015Page 39 Position and Zoom by Aerodrome We have two types of Aerodrome coordinates – AOP - 1540 – Jeppesen Use src="http://gis.icao.int/aop?... Add longitude and latitude from spreadsheets available on line See the examples that follow…

40. 29 April 2015Page 40 Aerodrome – AOP 1540 Use src="http://gis.icao.int/aop? Find center coordinates in the spreadsheet – http://gis.icao.int/anpdownload/ICAOAOPallEX.xls http://gis.icao.int/anpdownload/ICAOAOPallEX.xls – Use column contents in LongWeb and LatWeb – Example 1: Mexico Acapulco (MMAA) » Note: The first coordinate above is a “negative” – See screen shot next page

41. 29 April 2015Page 41 Example: Center Aerodrome MMAA <iframe width="100%" height="100%" src="http://gis.icao.int/aop?center=- 11104553.35260000000,1892579.90270000000&scale=55000"

42. 29 April 2015Page 42 Aerodrome - Jeppesen Use src="http://gis.icao.int/aop? Find center coordinates in the spreadsheet – http://gis.icao.int/anpdownload/ICAOAERODROMEall.xlsx http://gis.icao.int/anpdownload/ICAOAERODROMEall.xlsx – Use column contents in LongWeb and LatWeb – Example 1: Mexico "Benito Juarez" (MMMX) » Note: The first coordinate above is a “negative” <iframe frameborder="0" width="100%" height="600" src="http://gis.icao.int/aop?center=- 11028634.39000000,2206387.19625111&scale=55000">

43. 29 April 2015Page 43 Example: Center Aerodrome MMMX

44. 29 April 2015Page 44 Add Coordinates and Scale to Page Add a "?" following the URL center=coordinate1,coordinate2 no spaces Add "&", then scale=number and close quote Example for LPR in Singapore <iframe frameborder="0" scrolling="no" width="480" height="270" src="http://gis.icao.int/icaolpr/index.html?center=11555859.55335120,150475.31134858 &scale=550000">

45. 29 April 2015Page 45 MAP START USING "EXTENT" (RECTANGULAR AREA) Position Map Starting Point

46. 29 April 2015Page 46 Position Map: Extent The second way to set the initial view or position of a map is to use extent Extent uses four coordinates: » X axis min, » Y axis min, » X axis max, » Y axis max – Example: SE Asia Region

47. 29 April 2015Page 47 Extent Coordinates… X min, Y min X max, Y max

48. 29 April 2015Page 48 Position using Extent: FIR SE Asia

49. 29 April 2015Page 49 Position Map: Custom Extent Find extent coordinates using Extent Helper – http://resources.arcgis.com/en/help/flex- viewer/helpers/FlexViewer_ExtentHelper.html http://resources.arcgis.com/en/help/flex- viewer/helpers/FlexViewer_ExtentHelper.html Locate your map center point and zoom in or out to the 'altitude' you wish Check the extent coordinates at the top Use them in the html for the SRC tag – Remove spaces, add commas for correct syntax Screen shot next page

50. 29 April 2015Page 50 ArcGIS Extent Helper Application http://resources.arcgis.com/en/help/flex-viewer/helpers/FlexViewer_ExtentHelper.html

51. 29 April 2015Page 51 Common Problems so far… Missing quotes around SRC tag Extra quotes within SRC tag Missing a "?" following the URL Missing or extra digits or space in coordinates Missing "&" between coordinate and scale= Scale number is too low – too zoomed in Missing or extra double quote before close SRC tag closing bracket ">"

52. 29 April 2015Page 52 GENERAL EXAMPLES

53. 29 April 2015Page 53 LPR Singapore

54. 29 April 2015Page 54 FIR Singapore: Change Map/Scale Notes: same "center" as previous but lower "scale"

55. 29 April 2015Page 55 LPR Andorra: Change Center Point

56. 29 April 2015Page 56 WGS-84 Estonia: Change Map/Center

57. 29 April 2015Page 57 EMBED MAPS IN SHAREPOINT Quick Start

58. 29 April 2015Page 58 Steps for Maps in SharePoint 2010 In SharePoint, create New Page – Choose best layout for your content Add Content Editor Web Part (CEWP) Create map using instructions from this guide – NOTE: Pay attention to width and height settings In SharePoint page editor, select "edit HTML" to paste HTML to create map in CEWP Save and Publish Page

59. 29 April 2015Page 59 Contacts GLasnier@icao.int (GIS) GLasnier@icao.int MMorawski@icao.int (GIS Assistant) MMorawski@icao.int KHorst@icao.int (Tutorial) KHorst@icao.int

60. 29 April 2015Page 60 END