Download presentation
Presentation is loading. Please wait.
1
Beginners Guide: Embed GIS Maps Tutorial and Walkthrough w/Examples
How to Add GIS Maps to Your Webpages
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
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
With Maps, Indicate… Distances Boundaries Borders Specific Locations
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
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
About maps
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 The html, or what connects it all together The instructions of what to show, where
8
How it Works GIS Server HTML MAP in Page
9
Your First (very Basic) Map
Let’s Make a Map Your First (very Basic) Map
10
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
Generate the Map
12
Start with the Subject of the Map
GIS Map Server Flight Information Regions (FIR) WGS-84 Status Language Proficiency Requirements (LPR) Many more: PBN, ATS Route, SAR, SRR, ATM, SCAN, 5LNC, SAAFA, AOP, SUAS, Doc7910 Start at (This tutorial applies to those maps labeled "needs Flash")
13
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…
14
Step 1: Select Map (need Flash)
In this example, choose AIM transition Click on map labelled "need Flash ICAO AIS AIM"
15
Step 2: View Map and Copy URL
From the browser, verify the URL is Right Mouse Click and Copy URL (
16
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=" </body>
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
Results: Congratulations!
It is your first embedded GIS Map! We will customize it now…
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 should open a full map Remove unnecessary spaces or line returns Have someone check your work
20
Customize Basic Map
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
Toggle the Scroll Bar To disable vertical scroll bar, add Scrolling="no" <head> My First Embedded Map<p><p> </head> <body> <iframe frameborder="0" scrolling="no" src=" </body>
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=
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
Size of Map – Graphic view
width="640" height="480"
26
Check Your Custom Map HTML Code Resulting Map
<head> My First Embedded Map<p> <p> </head> <body> <iframe frameborder="0" width="640"height="480"src=" </body> <head> My First Embedded Map<p> <p> </head> <body> <iframe frameborder="0" width="640"height="480"src=" </body>
27
Set map Starting position
Emphasize Particular Regions, Member States, etc. Set map Starting position
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
Center and Scale or level
Position Map Starting Point Center and Scale or level
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
Decrease the Scale (demo)
32
Zoom Singapore with Scale Setting
<head> My First Embedded Map <p> </head> <body> <iframe frameborder="0" width="640"height="480"src=" center= , &scale= "</iframe> </body>
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
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
Center Coordinates by State
Choose map subject (lpr, fir, aop, wgs-84, etc.) Example: src=" Find center coordinates in the spreadsheet Use figures in Longwebmer and Latwebmer Example 1: Mexico as the CENTER point <iframe…...center= , "> </iframe> Note: The first coordinate above is a “negative”
36
Center Coordinates by FIR
Use src=" Find center coordinates in the spreadsheet Use column contents in LongUTM and LatUTM Example 1: FIR Mexico <iframe…...center = , "> </iframe> Note: The first coordinate above is a “negative” <iframe frameborder="0" width="100%" height="600" src=" , &scale= "></iframe>
37
Example: Center FIR Mexico
38
Position / Zoom by aerodrome
39
Position and Zoom by Aerodrome
We have two types of Aerodrome coordinates AOP Jeppesen Use src=" Add longitude and latitude from spreadsheets available on line See the examples that follow…
40
Aerodrome – AOP 1540 Use src="http://gis.icao.int/aop?
Find center coordinates in the spreadsheet Use column contents in LongWeb and LatWeb Example 1: Mexico Acapulco (MMAA) <iframe…...center = , "> </iframe> Note: The first coordinate above is a “negative” See screen shot next page
41
Example: Center Aerodrome MMAA
<iframe width="100%" height="100%" src=" , &scale=55000"</iframe>
42
Aerodrome - Jeppesen Use src="http://gis.icao.int/aop?
Find center coordinates in the spreadsheet Use column contents in LongWeb and LatWeb Example 1: Mexico "Benito Juarez" (MMMX) <iframe…...center = , "> </iframe> Note: The first coordinate above is a “negative” src=" <iframe frameborder="0" width="100%" height="600" src=" , &scale=55000"></iframe>
43
Example: Center Aerodrome MMMX
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=" &scale=550000"></iframe>
45
Map Start using "Extent" (rectangular area)
Position Map Starting Point Map Start using "Extent" (rectangular area)
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 <iframe frameborder="0" width="100%" height="600" src="
47
Extent Coordinates… X max, Y max X min, Y min
48
Position using Extent: FIR SE Asia
<iframe frameborder="0" width="100%" height="600" src=" <iframe frameborder="0" width="100%" height="600" src="
49
Position Map: Custom Extent
Find extent coordinates using Extent Helper 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
ArcGIS Extent Helper Application
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 ">" <iframe frameborder="0" width="480" height="270" src="
52
General Examples
53
LPR Singapore <iframe frameborder="0" width="480" height="270" src=" LPR Singapore <iframe frameborder="0" scrolling="no" width="480" height="270" src=" &scale=550000"></iframe>
54
FIR Singapore: Change Map/Scale
<iframe frameborder="0" width="480" height="270" src=" </iframe> Notes: same "center" as previous but lower "scale" FIR singapore <iframe frameborder="0" scrolling="no" width="480" height="270" src=" center= , &scale=550000"></iframe>
55
LPR Andorra: Change Center Point
<iframe frameborder="0" scrolling="no"width="480"height="270"src=" <iframe frameborder="0" scrolling="no" width="480" height="270" src=" center= , &scale=550000"></iframe>
56
WGS-84 Estonia: Change Map/Center
<iframe frameborder="0" width="640"height="520"src=" <iframe frameborder="0" scrolling="no" width="640" height="520" src=" center= , &scale= "></iframe>
57
Embed Maps in Sharepoint
Quick Start Embed Maps in Sharepoint
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
Contacts GLasnier@icao.int (GIS) MMorawski@icao.int (GIS Assistant)
(Tutorial)
60
end
Similar presentations
