Beginners Guide Embed GIS Maps Tutorial and Walkthrough
Beginners Guide: Embed GIS Maps Tutorial and Walkthrough w/Examples How to Add GIS Maps to Your Webpages 11/2/2020 Page 1
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 Share. Point Contacts 11/2/2020 Page 2
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! 11/2/2020 Page 3
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 11/2/2020 Page 4
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… 11/2/2020 Page 5
ABOUT MAPS 11/2/2020 Page 6
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 11/2/2020 Page 7
How it Works GIS Server MAP in Page HTML 11/2/2020 Page 8
Let’s Make a Map YOUR FIRST (VERY BASIC) MAP 11/2/2020 Page 9
First, Create and Save a Web Page • Start Notepad or text editor • Create basic HMTL – (copy code below) <head>My First Embedded Map</head><p><p> <body <iframe src="url will be here"</iframe> </body> – Save the file – Name it using double quotes • "myfirstmap. html" – Hint: Remember where you saved it!! 11/2/2020 Page 10
GENERATE THE MAP 11/2/2020 Page 11
Start with the Subject of the Map Subject GIS Map Server Flight Information Regions (FIR) http: //gis. icao. int/FIRMSD WGS-84 Status http: //gis. icao. int/wgs 84 Language Proficiency Requirements (LPR) http: //gis. icao. int/icaolpr Many more: PBN, ATS Route, SAR, SRR, ATM, SCAN, 5 LNC, SAAFA, AOP, SUAS, Doc 7910 Start at http: //gis. icao. int/. . . (This tutorial applies to those maps labeled "needs Flash") 11/2/2020 Page 12
Locate GIS URL • Browse http: //gis. icao. int to choose subject – 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… 11/2/2020 Page 13
Step 1: Select Map (need Flash) In this example, choose AIM transition Click on map labelled "need Flash ICAO AIS AIM" 11/2/2020 Page 14
Step 2: View Map and Copy URL From the browser, verify the URL is http: //gis. icao. int/aisaim/ Right Mouse Click and Copy URL (http: //gis. icao. int/aisaim) 11/2/2020 Page 15
Step 3: Paste URL into <body> • Note that the URL is surrounded with double quotes <head>My First Embedded Map</head><p><p> <body> <iframe src="http: //gis. icao. int/aisaim/"</iframe> </body> 11/2/2020 Page 16
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 11/2/2020 Page 17
Results: Congratulations! It is your first embedded GIS Map! We will customize it now… 11/2/2020 Page 18
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 • Remove unnecessary spaces or line returns • Have someone check your work 11/2/2020 Page 19
CUSTOMIZE BASIC MAP 11/2/2020 Page 20
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… 11/2/2020 Page 21
Toggle the Scroll Bar • To disable vertical scroll bar, add Scrolling="no" <head> My First Embedded Map<p><p> </head> <body> <iframeborder="0" scrolling="no" src="http: //gis. icao. int/aisaim/"</iframe> </body> 11/2/2020 Page 22
Add/Remove Frame Border • There is a small border around the map, by default, which you can remove by adding frameborder="0" Example: <iframeborder="0" src=http: //gis. icao. int/aisaim… 11/2/2020 Page 23
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 11/2/2020 Page 24
Size of Map – Graphic view width="640" height="480" 11/2/2020 Page 25
Check Your Custom Map HTML Code Resulting Map <head> My First Embedded Map<p> </head> <body> <iframeborder="0" width="640"height="480"src="http: //gis. icao. int/aisaim/"</iframe> </body> 11/2/2020 Page 26
Emphasize Particular Regions, Member States, etc. SET MAP STARTING POSITION 11/2/2020 Page 27
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… 11/2/2020 Page 28
Position Map Starting Point CENTER AND SCALE OR LEVEL 11/2/2020 Page 29
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 11/2/2020 Page 30
Decrease the Scale (demo) 11/2/2020 Page 31
Zoom Singapore with Scale Setting scale=550000 11/2/2020 scale=2000000 Page 32
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 11/2/2020 Page 33
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… 11/2/2020 Page 34
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. xls x – Use figures in Longwebmer and Latwebmer • Example 1: Mexico as the CENTER point <iframe…. . . center=-11433849. 06000000, 2776929. 6055451858"> </iframe> » Note: The first coordinate above is a “negative” 11/2/2020 Page 35
Center Coordinates by FIR • Use src="http: //gis. icao. int/FIRMSD? • Find center coordinates in the spreadsheet – http: //gis. icao. int/anpdownload/ICAOFIRall. xlsx – Use column contents in Long. UTM and Lat. UTM – Example 1: FIR Mexico <iframe…. . . center =-11397743. 7580, 2614106. 8183"> </iframe> » Note: The first coordinate above is a “negative” <iframeborder="0" width="100%" height="600" src="http: //gis. icao. int/firmsd? center=11397743. 7580, 2614106. 8183&scale=5500000"></iframe> 11/2/2020 Page 36
Example: Center FIR Mexico 11/2/2020 Page 37
POSITION / ZOOM BY AERODROME 11/2/2020 Page 38
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… 11/2/2020 Page 39
Aerodrome – AOP 1540 • Use src="http: //gis. icao. int/aop? • Find center coordinates in the spreadsheet – http: //gis. icao. int/anpdownload/ICAOAOPall. EX. xls – Use column contents in Long. Web and Lat. Web – Example 1: Mexico Acapulco (MMAA) <iframe…. . . center =-11104553. 35260000000, 1892579. 90270000000"> </iframe> » Note: The first coordinate above is a “negative” – See screen shot next page 11/2/2020 Page 40
Example: Center Aerodrome MMAA <iframe width="100%" height="100%" src="http: //gis. icao. int/aop? center=11104553. 35260000000, 1892579. 90270000000&scale=55000"</iframe> 11/2/2020 Page 41
Aerodrome - Jeppesen • Use src="http: //gis. icao. int/aop? • Find center coordinates in the spreadsheet – http: //gis. icao. int/anpdownload/ICAOAERODROMEall. xlsx – Use column contents in Long. Web and Lat. Web – Example 1: Mexico "Benito Juarez" (MMMX) <iframe…. . . center =-11028634. 39000000, 2206387. 19625111"> </iframe> » Note: The first coordinate above is a “negative” <iframeborder="0" width="100%" height="600" src="http: //gis. icao. int/aop? center=11028634. 39000000, 2206387. 19625111&scale=55000"></iframe> 11/2/2020 Page 42
Example: Center Aerodrome MMMX 11/2/2020 Page 43
Add Coordinates and Scale to Page • Add a "? " following the URL • center=coordinate 1, coordinate 2 no spaces • Add "&", then scale=number and close quote • Example for LPR in Singapore <iframeborder="0" scrolling="no" width="480" height="270" src="http: //gis. icao. int/icaolpr/index. html? center=11555859. 55335120, 150475. 31134858 &scale=550000"></iframe> 11/2/2020 Page 44
Position Map Starting Point MAP START USING "EXTENT" (RECTANGULAR AREA) 11/2/2020 Page 45
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 <iframeborder="0" width="100%" height="600" src="http: //gis. icao. int/firmsd/index. html? extent=9965000, 129000, 14206000, 2733000"></iframe> 11/2/2020 Page 46
Extent Coordinates… X max, Y max X min, Y min 11/2/2020 Page 47
Position using Extent: FIR SE Asia <iframeborder="0" width="100%" height="600" src="http: //gis. icao. int/firmsd/index. html? extent=9965000, -129000, 14206000, 2733000"></iframe> 11/2/2020 Page 48
Position Map: Custom Extent • Find extent coordinates using Extent Helper – http: //resources. arcgis. com/en/help/flexviewer/helpers/Flex. Viewer_Extent. Helper. 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 11/2/2020 Page 49
Arc. GIS Extent Helper Application http: //resources. arcgis. com/en/help/flex-viewer/helpers/Flex. Viewer_Extent. Helper. html 11/2/2020 Page 50
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 ">" 11/2/2020 Page 51
GENERAL EXAMPLES 11/2/2020 Page 52
LPR Singapore • <iframeborder="0" width="480" height="270" src="http: //gis. icao. int/icaol pr/index. html? center=1155 5859. 55335120, 150475. 311 34858&scale=550000"></ifr ame> 11/2/2020 Page 53
FIR Singapore: Change Map/Scale • <iframeborder="0" width="480" height="270" src="http: //gis. icao. int/FIR MSD/? center=11555859. 55 335120, 150475. 31134858& scale=550000"> </iframe> Notes: same "center" as previous but lower "scale" 11/2/2020 Page 54
LPR Andorra: Change Center Point • <iframeborder="0" scrolling="no"width="480"h eight="270"src="http: //gis. i cao. int/icaolpr/index. html? center=175526. 27348838, 5 243533. 60025160&scale=5 50000"></iframe> 11/2/2020 Page 55
WGS-84 Estonia: Change Map/Center • <iframeborder="0" width="640"height="520"sr c="http: //gis. icao. int/wgs 84 /? center=2841625. 6043973 4, 8112483. 53193974&scale =8500000"></iframe> 11/2/2020 Page 56
Quick Start EMBED MAPS IN SHAREPOINT 11/2/2020 Page 57
Steps for Maps in Share. Point 2010 • In Share. Point, 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 Share. Point page editor, select "edit HTML" to paste HTML to create map in CEWP • Save and Publish Page 11/2/2020 Page 58
Contacts • GLasnier@icao. int (GIS) • MMorawski@icao. int (GIS Assistant) • KHorst@icao. int (Tutorial) 11/2/2020 Page 59
END 11/2/2020 Page 60
- Slides: 60
