1 / 60

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

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

monita
Download Presentation

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

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Beginners Guide:Embed GIS Maps Tutorialand Walkthrough w/Examples How to Add GIS Maps to Your Webpages

  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. 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. 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. 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. About maps

  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 • http://gis.icao.int • The html, or what connects it all together • The instructions of what to show, where

  8. How it Works

  9. Let’s Make a Map Your First (very Basic) Map

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

  11. Generate the Map

  12. Start with the Subject of the Map

  13. 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…

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

  15. 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)

  16. 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>

  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. Results: Congratulations! It is your first embedded GIS Map! We will customize it now…

  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 • http://gis.icao.int/aisaism should open a full map • Remove unnecessary spaces or line returns • Have someone check your work

  20. Customize Basic Map

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

  23. 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…

  24. 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

  25. Size of Map – Graphic view width="640" height="480"

  26. 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>

  27. Emphasize Particular Regions, Member States, etc. Set map Starting position

  28. 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…

  29. Position Map Starting Point Center and Scale or level

  30. 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

  31. Decrease the Scale (demo)

  32. Zoom Singapore with Scale Setting scale=550000 scale=2000000

  33. 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

  34. 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…

  35. 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”

  36. 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>

  37. Example: Center FIR Mexico

  38. Position / Zoom by aerodrome

  39. 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…

  40. 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

  41. Example: Center Aerodrome MMAA <iframe width="100%" height="100%" src="http://gis.icao.int/aop?center=- 11104553.35260000000,1892579.90270000000&scale=55000"</iframe>

  42. 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>

  43. Example: Center Aerodrome MMMX

  44. 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>

  45. Position Map Starting Point Map Start using "Extent" (rectangular area)

  46. 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>

  47. Extent Coordinates… X max, Y max X min, Y min

  48. 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>

  49. 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

  50. ArcGIS Extent Helper Application http://resources.arcgis.com/en/help/flex-viewer/helpers/FlexViewer_ExtentHelper.html

More Related