beginners guide embed gis maps tutorial and walkthrough w examples n.
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

  • 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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
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

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

Right Mouse Click and Copy URL (

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>




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…

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


My First Embedded Map<p><p>



<iframeframeborder="0" scrolling="no"



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"


<iframeframeborder="0" src=…

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



check your custom map
Check Your Custom Map


Resulting Map


My First Embedded Map<p>







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



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="
  • Find center coordinates in the spreadsheet
    • Use figures in Longwebmerand Latwebmer
  • Example 1: Mexico as the CENTER point

<iframe…,2776929.6055451858"> </iframe>

          • Note: The first coordinate above is a “negative”
center coordinates by fir
Center Coordinates by FIR
  • Use src="
  • Find center coordinates in the spreadsheet
    • Use column contents in LongUTMandLatUTM
    • Example 1: FIR Mexico

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

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

<iframeframeborder="0" width="100%" height="600" src="


position and zoom by aerodrome
Position and Zoom by Aerodrome
  • We have two types of Aerodrome coordinates
    • AOP - 1540
    • Jeppesen
  • Use src="
  • Add longitude and latitude from spreadsheets available on line
  • See the examples that follow…
aerodrome aop 1540
Aerodrome – AOP 1540
  • Use src="
  • Find center coordinates in the spreadsheet
    • Use column contents in LongWebandLatWeb
    • Example 1: Mexico Acapulco (MMAA)

<iframe… =-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="


aerodrome jeppesen
Aerodrome - Jeppesen
  • Use src="
  • Find center coordinates in the spreadsheet
    • Use column contents in LongWebandLatWeb
    • Example 1: Mexico "Benito Juarez" (MMMX)

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

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

<iframeframeborder="0" width="100%" height="600" src="


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=",150475.31134858


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=",-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=",-129000,14206000,2733000"></iframe>

position map custom extent
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
arcgis extent helper application
ArcGIS Extent Helper Application

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=",150475.31134858&scale=550000"></iframe>
fir singapore change map scale
FIR Singapore: Change Map/Scale
  • <iframeframeborder="0" width="480" height="270" src=",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=",5243533.60025160&scale=550000"></iframe>
wgs 84 estonia change map center
WGS-84 Estonia: Change Map/Center
  • <iframeframeborder="0" width="640"height="520"src=",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
  • (GIS Assistant)