Upper Lake Michigan MapBuilder Demo GLOS Mapping Workshop Traverse City, Michigan November 11, 2009

Size: px

Start display at page:

Download "Upper Lake Michigan MapBuilder Demo GLOS Mapping Workshop Traverse City, Michigan November 11, 2009"

Lauren Norton
6 years ago
Views:

1 Upper Lake Michigan MapBuilder Demo GLOS Mapping Workshop Traverse City, Michigan November 11, 2009 Background The purpose of this exercise is to build a web mapping site that integrates different sources/formats of spatial and observation data for part of Lake Michigan in order to support recreational boating. In comparison with the use of a desktop software client like Google Earth to integrate spatial data from distributed sources, this exercise utilizes a graphical user interface to a commercial web mapping application programming interface (Google Maps API) to develop a web mapping application placed on a server. Process Needs: Account on MapBuilder Text editor (Notepad, Wordpad, ) Account on Google Maps to obtain a GMaps API key File transfer protocol client software (Filezilla) A web server (HostGIS) to host a web page

2 Part 1: Mashup Introduction Go to MapBuilder ( and sign up for an account.

3 Click on New Map. Enter a new Map Name, Description, and Map Tags. Click on Create Map.

4 Navigate to your preferred extent of the map. Add a marker for a marina. For example, Duncan L. Clinch Marina 400 Boardman Ave Traverse City, MI (231) city.mi.us/parks_and_recreation/duncan_l._clinch_marina/ Include the address, city, and state in the Location Search & Quick Navigation box. Click Search. Type the marina name in the caption. Copy and paste the information for the marina described above in the Description box. Click Add.

5 Note that a marker has been added for the marina.

To add a marker for another marina, again include the address in the Location Search & Quick Navigation box. Click Search. Type the marina name in the caption.

6 To add a marker for another marina, again include the address in the Location Search & Quick Navigation box. Click Search. Type the marina name in the caption. Copy and paste the information for the marina described above in the Description box. Click Add. Elk River Marina 118 Bridge St. Elk Rapids, MI (231) Here are some websites with more info for Lake Michigan marinas and boat access: Great Lakes Harbors, Michigan Department of Natural Resources (list) _10884_18317,00.html Great Lakes Harbors, Michigan Department of Natural Resources (map) Michigan Recreational Boating Information System, Michigan Department of Natural Resources (Michigan) Great Lakes Marina Guides

7 Next, we need to get the map source code and create an html document to display the map. Click Source Code in the orange menu bar.

8 Copy and paste the code into Notepad and save as (YourLastName)TraverseBay.html

Paste the Google Maps API key into the code generated by MapBuilder (replace YOURGMAPKEY). Below is the key needed for the HostGIS server. You can obtain a Google Maps API key at http://code.google.

9 Paste the Google Maps API key into the code generated by MapBuilder (replace YOURGMAPKEY). Below is the key needed for the HostGIS server. You can obtain a Google Maps API key at ABQIAAAAVhF79OUvD_fJs7tpUuurCBSVjO2brJolJxk2HQesrdIKgONAhRR93RZxRi04Fx 2w364L9jmsxXzjcQ Use Filezilla (or another ftp client) to upload the MapBuilder code onto the HostGIS server. Use the parameters provided by the instructor in a separate document.

Here is a link to view the demo mashup from part 1 of this tutorial http://www.greatlakesmashups.net/harttraversebay1.

10 Here is a link to view the demo mashup from part 1 of this tutorial [Note: If at this point in the activity, your code does not work: 1) open the URL above, 2) view the source code; and 3) save it as a new html file on your local computer. In Internet Explorer you can view and save the source code by clicking on the View pull down menu, selecting Source near the bottom of the list, and then clicking on the File pull down menu and selecting Save As in the new window that pops up with the source code] ***END OF PART ONE ***

Part 2: Integrating KML and GeoRSS to your mashup Find the line in your HTML that looks something like this: map.setcenter(new GLatLng(39.707186656827, -94.5703125), 4, map.

11 Part 2: Integrating KML and GeoRSS to your mashup Find the line in your HTML that looks something like this: map.setcenter(new GLatLng( , ), 4, map.getmaptypes()[0]); This defines the latitude and longitude for the center of your map and the zoom level (a value of 1 would be the whole world and 19 would be zoomed to the level of a city block). Let's recenter the map on Alpena and zoom out a bit. Replace that line with this: map.setcenter(new GLatLng(44.8, -85.6), 9, map.getmaptypes()[0]);

12 Great Lakes Web Cams via KML Here is the code to add a KML file of Great Lakes Web Cams. To add this to your mashup, simply add the following lines directly after the map.setcenter line: var webcam = new GGeoXml(" map.addoverlay(webcam);

GLOS Observations via GeoRSS feed To query the latest observations from GLOS, go to the Get Latest Observations page at http://glos.us/getobs/index.php.

13 GLOS Observations via GeoRSS feed To query the latest observations from GLOS, go to the Get Latest Observations page at Here is the code to add a GeoRSS feed of observations from the GLOS to your mashup. To add this to your mashup, simply add the following lines directly after the map.setcenter line: var glosobs = new GGeoXml(" ype=all&units=english&time=&bbox=-84,44,-86,46"); map.addoverlay(glosobs); Here is a link to view the demo mashup from part 2 of this tutorial ***END PART 2 ***

14 Part 3: Adding a Web Mapping Service (WMS) to your mashup Google Maps API does not support WMS out of the box, but thanks to a handy script from UC Berkley we can add services in the right coordinate system fairly easily. In this example we will use a slightly modified version of the script from MASSGIS. We've already put a copy of the script on the web server, but you can also download it from If you download it, note that for this demo we commented out lines and 115, and depending on what WMS service you use you might need to comment them out as well. For now, let's go ahead using our script. Add the following line to your html, after the Google Maps Key line: <script src="wms-gs-1_1_1.js" type="text/javascript"></script> For this tutorial, we will add a NEXRAD radar layer from the Iowa Environmental Mesonet. The WMS service url is: Add the following lines to the HTML, directly after the lines added in the last part: var layer1 = new GWMSTileLayer(map, new GCopyrightCollection("NEXRAD"),1,17); layer1.baseurl=" layer1.layers="nexrad_base_reflect"; var mymaptypelayers=[g_satellite_map.gettilelayers()[0],layer1]; var mycustommaptype = new GMapType(myMapTypeLayers, G_NORMAL_MAP.getProjection(), "NEXRAD", G_SATELLITE_MAP); map.addmaptype(mycustommaptype); map.addcontrol(new GMapTypeControl()); map.setmaptype(mycustommaptype); This code creates a new layer in the mashup, called NEXRAD, from the layer in the WMS named nexrad_base_reflect. It then assigns this new layer to a control button, so we can turn it on and off. Save the file. When you reload the page, the WMS layer should appear under the KML layers:

15 Here is a link to view the demo mashup from part 3 of this tutorial ***END PART 3 ***

Lake Superior MapBuilder Demo Mapping Mashup Workshop Minnesota GIS/LIS Conference Duluth, Minnesota October 21, 2009

Lake Superior MapBuilder Demo Mapping Mashup Workshop Minnesota GIS/LIS Conference Duluth, Minnesota October 21, 2009 Background The purpose of this exercise is to build a web mapping site that integrates