Beginners Guide: Embed GIS Maps Tutorial and Walkthrough w/Examples

April 21, 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


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


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!


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


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…


ABOUT MAPSABOUT MAPS


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


How it WorksHow it Works


YOUR FIRST (VERY BASIC) MAPYOUR FIRST (VERY BASIC) MAPLet’s Make a Map


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!!


GENERATE THE MAPGENERATE THE MAP


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")


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…


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


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/


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>


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


Results: Congratulations!Results: Congratulations!

It is your first embedded GIS Map!

We will customize it now…


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


CUSTOMIZE BASIC MAPCUSTOMIZE BASIC MAP


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…


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>


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…


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


Size of Map – Graphic viewSize of Map – Graphic view

height="480"

width="640"


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


SET MAP STARTING POSITIONSET MAP STARTING POSITIONEmphasize Particular Regions, Member States, etc.


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…


CENTER AND SCALE OR LEVELCENTER AND SCALE OR LEVELPosition Map Starting Point


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


Decrease the Scale (demo)Decrease the Scale (demo)


Zoom Singapore with Scale SettingZoom Singapore with Scale Setting

scale=2000000scale=550000


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


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…


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”


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>


<iframe frameborder="0" width="100%" height="600" src="http://gis.icao.int/firmsd?center=-11397743.7580,2614106.8183&scale=5500000"></iframe>


Example: Center FIR MexicoExample: Center FIR Mexico


POSITION / ZOOM BY AERODROMEPOSITION / ZOOM BY AERODROME


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…


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>


– See screen shot next page


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>


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>


<iframe frameborder="0" width="100%" height="600" src="http://gis.icao.int/aop?center=-11028634.39000000,2206387.19625111&scale=55000"></iframe>


Example: Center Aerodrome MMMXExample: Center Aerodrome MMMX


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>


MAP START USING "EXTENT" MAP START USING "EXTENT" (RECTANGULAR AREA)(RECTANGULAR AREA)

Position Map Starting Point


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>


Extent Coordinates…Extent Coordinates…

X min, Y min

X max, Y max


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>


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


ArcGIS Extent Helper ApplicationArcGIS Extent Helper Application

http://resources.arcgis.com/en/help/flex-viewer/helpers/FlexViewer_ExtentHelper.html


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 ">"


GENERAL EXAMPLESGENERAL EXAMPLES


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>


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"


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>


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>


EMBED MAPS IN SHAREPOINTEMBED MAPS IN SHAREPOINTQuick Start


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


ContactsContacts

• [email protected] (GIS)• [email protected] (GIS Assistant)• [email protected] (Tutorial)


ENDEND

Date post:	10-Jan-2016
Category:	Documents
Upload:	ojal
View:	61 times
Download:	2 times

Beginners Guide: Embed GIS Maps Tutorial and Walkthrough w/Examples

Documents