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

Transcription

1 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 different sources/formats of spatial and observation data for part of Lake Superior 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, Barker's Island Marina 250 Marina Drive Superior, WI (715) island marina.com/ Gas, Marina Ramp, Transient LAT = LONG = Include the address in the Location Search & Quick Navigation box. Click Search. Include a Caption. Paste the entire marina entry 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. Include a Caption. Paste the entire marina entry in the Description box. Click Add. Lakehead Boat Basin 1000 Minnesota Ave Duluth, MN (218) Gas, Transient LAT = LONG =

6 Here are some websites with more info for Lake Superior marinas _10884_18317,00.html Here are some websites with more info on Lake Superior boat access (Minnesota) (Wisconsin) (Michigan) Next, we need to get the map source code and create a html document to display the map. Click Source Code in the orange menu bar.

7 Copy and paste the code into Notepad and save as (YourLastName)LakeSuperior.html

8 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_fJs7tpUuurCBSVjO2brJolJxk2HQesrdIKgONAhRR93RZxRi04Fx2w364L9jmsxXzjcQ Use Filezilla (or another ftp client) to upload the MapBuilder code onto the HostGIS server. Use the parameters provided by the instructor.

9 Utilize a web browser to view the MapBuilder code. For example: ( ***END OF PART ONE ***

10 Part 2: Integrating KML and GeoRSS to your mashup Find the line in your HTML that look something like this: map.setcenter(new GLatLng( , ), 9, map.getmaptypes()[0]); This defines the center of your map and the zoom level (ie. The value '9'. A value of 1 would be the whole world). Let's recenter the map on Duluth and zoom out a bit. Replace that line with this: map.setcenter(new GLatLng(46.7, -92.0), 11, map.getmaptypes()[0]);

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

12 Code to add a GeoRSS feed of observations from the Great Lakes Observing System var glosobs = new GGeoXml(" st&units=english&format=georss&styled=true&bbox=-90.0%2c46.0%2c-93.0%2c48.0 "); map.addoverlay(glosobs); Here is a link to view the demo mashup from this tutorial ***END PART 2 *** 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.

13 1. 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> 2. For this tutorial, we will add a land cover layer from the Minnesota DNR. The WMS service url is: tcapabilities 3. Add the following lines to the HTML, directly after the lines added in the last part: var layer1 = new GWMSTileLayer(map, new GCopyrightCollection("Land Cover"),1,17); layer1.baseurl=" layer1.layers="l "; var mymaptypelayers=[g_satellite_map.gettilelayers()[0],layer1]; var mycustommaptype = new GMapType(myMapTypeLayers, G_NORMAL_MAP.getProjection(), "Land Cover", G_SATELLITE_MAP); map.addmaptype(mycustommaptype); map.addcontrol(new GMapTypeControl()); map.setmaptype(mycustommaptype); This code creates a new layer in the mashup, called Land Cover, from the layer in the WMS named L It then assigns this new layer to a control button, so we can turn it on and off. 4. Save the file. When you reload the page, the WMS layer should appear under the KML layers:

14