29 april 2015page 1 beginners guide: embed gis maps tutorial and walkthrough w/examples how to add...

April 18, 2023

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

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

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

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

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

ABOUT MAPSABOUT MAPS

April 18, 2023

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

How it WorksHow it Works

April 18, 2023

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

April 18, 2023

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

GENERATE THE MAPGENERATE THE MAP

April 18, 2023

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

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

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

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

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

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

Results: Congratulations!Results: Congratulations!

It is your first embedded GIS Map!

We will customize it now…

April 18, 2023

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

CUSTOMIZE BASIC MAPCUSTOMIZE BASIC MAP

April 18, 2023

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

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

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

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

Size of Map – Graphic viewSize of Map – Graphic view

height="480"

width="640"

April 18, 2023

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

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

April 18, 2023

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

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

April 18, 2023

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

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

April 18, 2023

Zoom Singapore with Scale SettingZoom Singapore with Scale Setting

scale=2000000scale=550000

April 18, 2023

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

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

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

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>

April 18, 2023

Example: Center FIR MexicoExample: Center FIR Mexico

April 18, 2023

POSITION / ZOOM BY AERODROMEPOSITION / ZOOM BY AERODROME

April 18, 2023

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

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

April 18, 2023

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

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>

April 18, 2023

Example: Center Aerodrome MMMXExample: Center Aerodrome MMMX

April 18, 2023

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

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

Position Map Starting Point

April 18, 2023

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

Extent Coordinates…Extent Coordinates…

X min, Y min

X max, Y max

April 18, 2023

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

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

ArcGIS Extent Helper ApplicationArcGIS Extent Helper Application

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

April 18, 2023

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

GENERAL EXAMPLESGENERAL EXAMPLES

April 18, 2023

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

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

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

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

EMBED MAPS IN SHAREPOINTEMBED MAPS IN SHAREPOINTQuick Start

April 18, 2023

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

ContactsContacts

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

April 18, 2023

ENDEND

29 april 2015page 1 beginners guide: embed gis maps tutorial and walkthrough w/examples how to add...

Documents

page slide

map http

maps slide

embedded map slide

map view map examples

basic map

maps maps

map position