Presentation is loading. Please wait.

Presentation is loading. Please wait.

29 April 2015Page 1 Beginners Guide: Embed GIS Maps Tutorial and Walkthrough w/Examples How to Add GIS Maps to Your Webpages.

Similar presentations

Presentation on theme: "29 April 2015Page 1 Beginners Guide: Embed GIS Maps Tutorial and Walkthrough w/Examples How to Add GIS Maps to Your Webpages."— Presentation transcript:

1 29 April 2015Page 1 Beginners Guide: Embed GIS Maps Tutorial and Walkthrough w/Examples How to Add GIS Maps to Your Webpages

2 29 April 2015Page 2 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

3 29 April 2015Page 3 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!

4 29 April 2015Page 4 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

5 29 April 2015Page 5 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…

6 29 April 2015Page 6 ABOUT MAPS

7 29 April 2015Page 7 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

8 29 April 2015Page 8 How it Works GIS Server HTML MAP in Page

9 29 April 2015Page 9 YOUR FIRST (VERY BASIC) MAP Let’s Make a Map

10 29 April 2015Page 10 First, Create and Save a Web Page Start Notepad or text editor Create basic HMTL – (copy code below) My First Embedded Map – Save the file – Name it using double quotes "myfirstmap.html" – Hint: Remember where you saved it!!

11 29 April 2015Page 11 GENERATE THE MAP

12 29 April 2015Page 12 Start with the Subject of the Map SubjectGIS Map Server Flight Information Regions (FIR) WGS-84 Status Language Proficiency Requirements (LPR) Many more: PBN, ATS Route, SAR, SRR, ATM, SCAN, 5LNC, SAAFA, AOP, SUAS, Doc7910 Start at (This tutorial applies to those maps labeled "needs Flash")

13 29 April 2015Page 13 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…

14 29 April 2015Page 14 Step 1: Select Map (need Flash) Click on map labelled "need Flash ICAO AIS AIM" In this example, choose AIM transition

15 29 April 2015Page 15 Step 2: View Map and Copy URL Right Mouse Click and Copy URL ( From the browser, verify the URL is

16 29 April 2015Page 16 Step 3: Paste URL into Step 3: Paste URL into Note that the URL is surrounded with double quotes My First Embedded Map

17 29 April 2015Page 17 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

18 29 April 2015Page 18 Results: Congratulations! It is your first embedded GIS Map! We will customize it now…

19 29 April 2015Page 19 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 – should open a full map Remove unnecessary spaces or line returns Have someone check your work

20 29 April 2015Page 20 CUSTOMIZE BASIC MAP

21 29 April 2015Page 21 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…

22 29 April 2015Page 22 Toggle the Scroll Bar To disable vertical scroll bar, add Scrolling="no" My First Embedded Map

Ads by Google