29 april 2015page 1 beginners guide: embed gis maps tutorial and walkthrough w/examples how to add...
TRANSCRIPT
April 18, 2023 Page 1
Beginners Guide:Beginners Guide:Embed GIS Maps TutorialEmbed GIS Maps Tutorial
and Walkthrough w/Examplesand Walkthrough w/Examples
How to Add GIS Maps to Your Webpages
April 18, 2023 Page 2
AgendaAgenda
• 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
April 18, 2023 Page 3
Why MapsWhy 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!
April 18, 2023 Page 4
With Maps, Indicate…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
April 18, 2023 Page 5
Maps of ICAO-related InformationMaps 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…
April 18, 2023 Page 7
Four Ingredients to Your MapFour 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
April 18, 2023 Page 10
First, Create and Save a Web PageFirst, 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!!
April 18, 2023 Page 12
Start with the Subject of the MapStart 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/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")
April 18, 2023 Page 13
Locate GIS URLLocate 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…
April 18, 2023 Page 14
Step 1: Select Map (need Flash)Step 1: Select Map (need Flash)
Click on map labelled "need Flash ICAO AIS AIM"
In this example, choose AIM transition
April 18, 2023 Page 15
Step 2: View Map and Copy URLStep 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/
April 18, 2023 Page 16
Step 3: Paste URL into <body>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>
April 18, 2023 Page 17
Step 4: Save and Check the ResultsStep 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
April 18, 2023 Page 18
Results: Congratulations!Results: Congratulations!
It is your first embedded GIS Map!
We will customize it now…
April 18, 2023 Page 19
TroubleshootTroubleshoot
• 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
April 18, 2023 Page 21
Your First Embedded Map is OK…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…
April 18, 2023 Page 22
Toggle the Scroll BarToggle 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="http://gis.icao.int/aisaim/"</iframe></body>
April 18, 2023 Page 23
Add/Remove Frame BorderAdd/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…
April 18, 2023 Page 24
Change the Map SizeChange 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
April 18, 2023 Page 25
Size of Map – Graphic viewSize of Map – Graphic view
height="480"
width="640"
April 18, 2023 Page 26
Check Your Custom MapCheck Your Custom Map
HTML Code<head>My First Embedded Map<p><p></head><body><iframe frameborder="0" width="640"height="480"src="http://gis.icao.int/aisaim/"</iframe></body>
Resulting Map
April 18, 2023 Page 27
SET MAP STARTING POSITIONSET MAP STARTING POSITIONEmphasize Particular Regions, Member States, etc.
April 18, 2023 Page 28
Position the Starting Map OptionsPosition 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…
April 18, 2023 Page 29
CENTER AND SCALE OR LEVELCENTER AND SCALE OR LEVELPosition Map Starting Point
April 18, 2023 Page 30
Position the Map: Center, Scale/LevelPosition 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
April 18, 2023 Page 32
Zoom Singapore with Scale SettingZoom Singapore with Scale Setting
scale=2000000scale=550000
April 18, 2023 Page 33
Zoom using LevelZoom 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
April 18, 2023 Page 34
Now, Center the Map By "State"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…
April 18, 2023 Page 35
Center Coordinates by StateCenter 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– 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”
April 18, 2023 Page 36
Center Coordinates by FIRCenter 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 LongUTM and LatUTM
– Example 1: FIR Mexico<iframe…...center =-11397743.7580,2614106.8183"> </iframe>
» 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"></iframe>
April 18, 2023 Page 39
Position and Zoom by AerodromePosition 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…
April 18, 2023 Page 40
Aerodrome – AOP 1540Aerodrome – AOP 1540
• Use src="http://gis.icao.int/aop?• Find center coordinates in the spreadsheet– http://gis.icao.int/anpdownload/ICAOAOPallEX.xls– Use column contents in LongWeb and LatWeb
– 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
April 18, 2023 Page 41
Example: Center Aerodrome MMAAExample: Center Aerodrome MMAA
<iframe width="100%" height="100%" src="http://gis.icao.int/aop?center=-11104553.35260000000,1892579.90270000000&scale=55000"</iframe>
April 18, 2023 Page 42
Aerodrome - JeppesenAerodrome - 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 LongWeb and LatWeb
– Example 1: Mexico "Benito Juarez" (MMMX)<iframe…...center =-11028634.39000000,2206387.19625111"> </iframe>
» 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"></iframe>
April 18, 2023 Page 44
Add Coordinates and Scale to PageAdd 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"></iframe>
April 18, 2023 Page 45
MAP START USING "EXTENT" MAP START USING "EXTENT" (RECTANGULAR AREA)(RECTANGULAR AREA)
Position Map Starting Point
April 18, 2023 Page 46
Position Map: ExtentPosition 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="http://gis.icao.int/firmsd/index.html?extent=9965000,-129000,14206000,2733000"></iframe>
April 18, 2023 Page 48
Position using Extent: FIR SE AsiaPosition using Extent: FIR SE Asia
<iframe frameborder="0" width="100%" height="600" src="http://gis.icao.int/firmsd/index.html?extent=9965000,-129000,14206000,2733000"></iframe>
April 18, 2023 Page 49
Position Map: Custom ExtentPosition Map: Custom Extent
• Find extent coordinates using Extent Helper– 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
April 18, 2023 Page 50
ArcGIS Extent Helper ApplicationArcGIS Extent Helper Application
http://resources.arcgis.com/en/help/flex-viewer/helpers/FlexViewer_ExtentHelper.html
April 18, 2023 Page 51
Common Problems so far…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 ">"
April 18, 2023 Page 53
LPR SingaporeLPR Singapore
• <iframe frameborder="0" width="480" height="270" src="http://gis.icao.int/icaolpr/index.html?center=11555859.55335120,150475.31134858&scale=550000"></iframe>
April 18, 2023 Page 54
FIR Singapore: Change Map/ScaleFIR Singapore: Change Map/Scale
• <iframe frameborder="0" width="480" height="270" src="http://gis.icao.int/FIRMSD/?center=11555859.55335120,150475.31134858&scale=550000"></iframe>
Notes: same "center" as previous but lower "scale"
April 18, 2023 Page 55
LPR Andorra: Change Center PointLPR Andorra: Change Center Point
• <iframe frameborder="0" scrolling="no"width="480"height="270"src="http://gis.icao.int/icaolpr/index.html?center=175526.27348838,5243533.60025160&scale=550000"></iframe>
April 18, 2023 Page 56
WGS-84 Estonia: Change Map/CenterWGS-84 Estonia: Change Map/Center
• <iframe frameborder="0" width="640"height="520"src="http://gis.icao.int/wgs84/?center=2841625.60439734,8112483.53193974&scale=8500000"></iframe>
April 18, 2023 Page 58
Steps for Maps in SharePoint 2010Steps 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
April 18, 2023 Page 59
ContactsContacts
• [email protected] (GIS)• [email protected] (GIS Assistant)• [email protected] (Tutorial)