beginners guide embed gis maps tutorial and walkthrough w examples n.
Download
Skip this Video
Download Presentation
Beginners Guide: Embed GIS Maps Tutorial and Walkthrough w/Examples

Loading in 2 Seconds...

play fullscreen
1 / 60

Beginners Guide: Embed GIS Maps Tutorial and Walkthrough w/Examples - PowerPoint PPT Presentation


  • 119 Views
  • Uploaded on

Beginners Guide: Embed GIS Maps Tutorial and Walkthrough w/Examples. How to Add GIS Maps to Your Webpages. 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Beginners Guide: Embed GIS Maps Tutorial and Walkthrough w/Examples' - ifeoma-young


Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
beginners guide embed gis maps tutorial and walkthrough w examples

Beginners Guide:Embed GIS Maps Tutorialand Walkthrough w/Examples

How to Add GIS Maps to Your Webpages

agenda
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
why maps
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!
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 information
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…
four ingredients to your map
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
first create and save a web page
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 <iframesrc="url will be here"</iframe> </body>

    • Save the file
    • Name it using double quotes
      • "myfirstmap.html"
    • Hint: Remember where you saved it!!
locate gis url
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…
step 1 select map need flash
Step 1: Select Map (need Flash)

In this example, choose AIM transition

Click on map labelled "need Flash ICAO AIS AIM"

step 2 view map and copy url
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)

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>

<iframesrc="http://gis.icao.int/aisaim/"</iframe>

</body>

step 4 save and check the results
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
results congratulations
Results: Congratulations!

It is your first embedded GIS Map!

We will customize it now…

troubleshoot
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
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 bar
Toggle the Scroll Bar
  • To disable vertical scroll bar, add Scrolling="no"

<head>

My First Embedded Map<p><p>

</head>

<body>

<iframeframeborder="0" scrolling="no"

src="http://gis.icao.int/aisaim/"</iframe>

</body>

add remove frame border
Add/Remove Frame Border
  • There is a small border around the map, by default, which you can remove by adding frameborder="0"

Example:

<iframeframeborder="0" src=http://gis.icao.int/aisaim…

change the map size
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
size of map graphic view
Size of Map – Graphic view

width="640"

height="480"

check your custom map
Check Your Custom Map

HTML Code

Resulting Map

<head>

My First Embedded Map<p>

<p>

</head>

<body>

<iframeframeborder="0"

width="640"height="480"src="http://gis.icao.int/aisaim/"</iframe>

</body>

position the starting map options
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…
position the map center scale level
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
zoom singapore with scale setting
Zoom Singapore with Scale Setting

scale=550000

scale=2000000

zoom using level
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
now center the map by state
Now, Center the Map By "State"
  • Previous examples
    • Berlin as centerpoint
    • 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 state
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.xlsx
    • Use figures in Longwebmerand 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 fir
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 LongUTMandLatUTM
    • Example 1: FIR Mexico

<iframe…...center =-11397743.7580,2614106.8183"> </iframe>

          • Note: The first coordinate above is a “negative”

<iframeframeborder="0" width="100%" height="600" src="http://gis.icao.int/firmsd?center=-

11397743.7580,2614106.8183&scale=5500000"></iframe>

position and zoom by aerodrome
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…
aerodrome aop 1540
Aerodrome – 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 LongWebandLatWeb
    • 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
example center aerodrome mmaa
Example: Center Aerodrome MMAA

<iframe width="100%" height="100%" src="http://gis.icao.int/aop?center=-

11104553.35260000000,1892579.90270000000&scale=55000"</iframe>

aerodrome jeppesen
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 LongWebandLatWeb
    • Example 1: Mexico "Benito Juarez" (MMMX)

<iframe…...center =-11028634.39000000,2206387.19625111"> </iframe>

          • Note: The first coordinate above is a “negative”

<iframeframeborder="0" width="100%" height="600" src="http://gis.icao.int/aop?center=-

11028634.39000000,2206387.19625111&scale=55000"></iframe>

add coordinates and scale to page
Add Coordinates and Scale to Page
  • Add a "?" following the URL
  • center=coordinate1,coordinate2 no spaces
  • Add "&", then scale=numberand close quote
  • Example for LPR in Singapore

<iframeframeborder="0" scrolling="no" width="480" height="270" src="http://gis.icao.int/icaolpr/index.html?center=11555859.55335120,150475.31134858

&scale=550000"></iframe>

position map extent
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

<iframeframeborder="0" width="100%" height="600" src="http://gis.icao.int/firmsd/index.html?extent=9965000,-129000,14206000,2733000"></iframe>

extent coordinates
Extent Coordinates…

X max, Y max

X min, Y min

position using extent fir se asia
Position using Extent: FIR SE Asia

<iframeframeborder="0" width="100%" height="600" src="http://gis.icao.int/firmsd/index.html?extent=9965000,-129000,14206000,2733000"></iframe>

position map custom extent
Position 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 application
ArcGIS 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 ">"
lpr singapore
LPR Singapore
  • <iframeframeborder="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 scale
FIR Singapore: Change Map/Scale
  • <iframeframeborder="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 point
LPR Andorra: Change Center Point
  • <iframeframeborder="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 center
WGS-84 Estonia: Change Map/Center
  • <iframeframeborder="0" width="640"height="520"src="http://gis.icao.int/wgs84/?center=2841625.60439734,8112483.53193974&scale=8500000"></iframe>
steps for maps in sharepoint 2010
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
contacts
Contacts
  • GLasnier@icao.int(GIS)
  • MMorawski@icao.int (GIS Assistant)
  • KHorst@icao.int(Tutorial)