CoML Mapper Help

For Project Liaisons

Area data preparation instruction

For CoML Web Master

There are only three files you need to modify. Note that the application structure has changed from the initial prototype so it is now much easier to maintain on your side.

The following instruction assumes we have the initial prototype already implemented on the CoML web.

Preparation

Please download the latest files (zipped as coml_mapper_v2.zip) from:

http://seamap.env.duke.edu/coml/coml_mapper_v2.zip

and unzip it into a temporary folder.

The latest version was posted at 07/13 12:30pm. Please make sure you got the latest one.

index.html

The zipped file includes index_with_gm.html. Open this file and your index.html. Please make a backup copy of index.html.

At the two locations listed below, replace the text in index.html with those in index_with_gm.html.

For your reference, a working sample is provided as index_with_gm.html. Note this file does not reflect the latest changes on index.html. The working sample is also accessed via Internet at
http://seamap.env.duke.edu/coml/index_with_gm.html

Around Line 25

<!-- The following five <script> are added by Ei -->
< script src = "http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA6ej6j3vg1qMeStfqKActXxSNXzSfXYPjjxETUpbwOh5jkBU9EBTUHelJeoap8YazTwv-ry7_E4J8_Q" type = "text/javascript" ></ script >
< script src = "scripts/common.js" ></ script >
< script src = "scripts/kmlparser.js" type = "text/javascript" ></ script >
< script src = "scripts/activities_map.js" type = "text/javascript" ></ script >
< script src = "scripts/front_page_parameters.js" type = "text/javascript" ></ script >
<!-- **** End Google Map scripts ************** -->

<!-- CoML Mapper Insertion Starts -->
<style type="text/css">
    v\:* {
      behavior:url(#default#VML);
    }
</style>



<link rel="stylesheet" type="text/css" href="http://seamap.env.duke.edu/coml/scripts/coml_mapper.css" />
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAA8G3w1P61hKa816nmaGbR6RTXTR8m2Ngp4PimBriNQJom4DXXHhRLauM1jxyW6kYl3S1nQ_2sOeIhmQ" type="text/javascript"></script>
<script src="http://seamap.env.duke.edu/coml/scripts/common.js"></script>
<script src="http://seamap.env.duke.edu/coml/scripts/prototype.js"></script>
<script src="http://seamap.env.duke.edu/coml/scripts/mapserver.js" type="text/javascript"></script>
<script src="http://seamap.env.duke.edu/coml/scripts/coml_mapper.js" type="text/javascript"></script>
<script src="http://seamap.env.duke.edu/coml/scripts/popup.js" type="text/javascript"></script>
<!-- CoML Mapper Insertion Ends -->

Around Line 190

< div id = "map" style = "width: 435px; height: 350px" ></ div >
  < div style = "display:block; height:110px;" >
      < strong >Activities on the map</ strong >& nbsp; & nbsp; < a href = "javascript:void(0);" onclick = "labels_on_off();" >< div id = "show_label" style = "display:inline" >Hide labels</ div ></ a >
    < div id = "legend" style = "text-align:left; padding-left:120px; height:90px; overflow:auto;" >
    </ div >
  </ div >
  < table >
  < tr >
    < td >< img src = "imgs/googleearth_mark.gif" width = "24" align = "absmiddle" >
    < a href = "projects_map/coml_projects_map.kmz" title = "Load project areas on Google Earth." >Launch in Google Earth</ a >& nbsp; 
    (Get < a href = "http://earth.google.com/" target = "GE" >Google Earth)</ a >
    & nbsp; |& nbsp; < a href = "project_map.html" target = "_blank" >View the map full size</ a ></ td >
    <!-- <td>&nbsp;&nbsp;&nbsp;</td>
    <td valign="middle"> 
      Get <a href="http://earth.google.com/" target="GE"><img src="imgs/googleearth.gif" with="100px" height="30px" border="0" alt="Get Google Earth from Google Earth home page" align="middle"></a>
    </td> -->
  </ tr >
  </ table >
<!-- ****************** Map End here *********************** -->

<!-- CoML Mapper Insertion Starts -->
	<div id="map" style="width: 435px; height: 350px"></div>
	<div id="legend_frame">
			<strong>Legend</strong>&nbsp;&nbsp;<a href="javascript:void(0);" onclick="CoML.labelsOnOff('show_label');"><div id="show_label" style="display:inline">Hide labels</div></a>&nbsp;&nbsp;<a href="project_map.html" target="map">View the map full size</a>
		<div id="legend">
			<table>
			<tr>
				<td valign="top">
					<table>
					<tbody id="legend_local">
						<tr><td colspan="4"><img src="http://seamap.env.duke.edu/coml/labels/local_proj.png"></td></tr>
					</tbody>
					</table></td>
				<td valign="top">
					<table>
					<tbody id="legend_global">
						<tr><td colspan="2"><img src="http://seamap.env.duke.edu/coml/labels/global_proj.png"></td></tr>
					</tbody>
					</table></td>
			</tr>
			</table>
		</div>
	</div>
	<hr width="66%" size="1" noshade>
<!-- CoML Mapper Insertion Ends -->

Notes:

Google Map API key for CoML web

ABQIAAAA6ej6j3vg1qMeStfqKActXxSNXzSfXYPjjxETUpbwOh5jkBU9EBTUHelJeoap8YazTwv-ry7_E4J8_Q

You may delete the following scripts from scripts sub folder. These are for the initial prototype and no longer in use.

• common.js
• kmlparser.js
• activities_map.js
• front_page_parameters.js

You may also delete PNG images for labels (*_label.png) in imgs sub folder.

project_map.html

1. Make a backup copy of the current project_map.html
2. Replace it with the new project_map.html (same file name)
3. Make sure the Google Map API key is correct (it should be OK unless I forgot to replace it).

A working sample is accessed at

http://seamap.env.duke.edu/coml/project_map.html

project_markers.kml

1. Copy the latest project_markers.kml into projects_map sub folder.

Notes:

• project_markers.kml may be updated later as the area data and description change. In such occasions, I will send you the latest file, so please replace the current one with the new one.

Map Structure

Solution Comparison

Components

CoML Project Activities Map consist of three components:

• Google Maps as a base map
• Activities area map fed by the OBIS-SEAMAP map engine
• Project name labels with the description written in KML

Area data

Area data are stored in the OBIS-SEAMAP web server as shapefiles. Area data are processed with the SEAMAP map engine (UMN Mapserver) into tile images, which are transferred to the browser and overlaid on Google Maps.

Project descriptions and its labels on the map are written in KML and stored in the CoML web server. The KML file is loaded into the browser and rendered on Google Maps.

Scripts

All scripts are written in Javascript and reside in the OBIS-SEAMAP web server. Pages on CoML (HTML files) import the scripts from the SEAMAP web server when they are loaded onto the browser. Therefore, program maintenance, debugging and updates are taken place on the SEAMAP side unless the HTML pages on CoML themselves are in question.

Folder structure

Everything is placed under /var/www/dev/services/coml/www.coml.org except shapefiles.

Virtual root:

The root folder /var/www/dev/services/coml/www.coml.org is mapped as http://seamap.env.duke.edu/coml.

This is because some project liaisons seem not to be able to access the 8888 site. From coding perspective, no longer need to copy the codes from the development site to the prodoction site.

CoML pages:

The following two HTML files are stored on the CoML web server.

SEAMAP files:

Mapfile: /var/www/dev/services/coml/www.coml.org/projects_map/coml.map

Shapefile: /data/shapefiles/coml

Label/description KML:

Local copy: M:\projects\coml_mapper\area_data\projects_markers.kml

Remote copy: /var/www/dev/services/coml/www.coml.org/projects_map/projects_markers.kml

Edit the local copy and copy it into the remote folder.

Other files:

Developer Notes

Label

If the label text is too long, make the font smaller, say 9pt.

Label KML

As browsers can't load KML from an external site with AJAX, projects_markers.kml must be on the CoML web server. It's supposed to be in projects_map sub folder.

For global projects for which there is no way to show area maps, a blank marker is placed at 0 lat/lon. Use http://seamap.env.duke.edu/prod/mapservice/googlemaps/skins/icons/blank.gif and set <coordinates> as

<coordinates>0,0,0</coordinates>

CoML Resources

Border lines of labels : #0063CE

Background of labels: #D8F1F0

Progress

	Color		Label	Desc	Area data Accepted	KML	Shapefile	Mapfile	Reviewed	Notes
ArcOD			Y	07/10	07/10	07/10	07/10	07/10		Russ gave me KML. Bodil responded on 7/16. He might turn in localized areas.
CAML			Y		07/12	07/13	07/13	07/13		PDF and David Smith sent line and polygon shapefiles.
CeDAMar			Y	07/10	07/09	07/10	07/10	07/10		Craig Smith gave me JPEG. Areas updated (7/17)
CenSeam	PT	AR	Y	07/11	07/11	07/12	07/12	07/12		Excel file including point data. Area data in 1184204327-4626.
ChEss			Y	06/22	06/22	06/22	06/22	06/22		Already exists
CMarZ			Y	07/09	07/09	07/18	07/09	07/09		Final data in CMarZ station data for CoML map.xls from Nancy 07/24/07 Eastern South Pacific: 1185295969-4568
COMARGE			Y	07/03	06/29	07/03	06/29	07/03		COMARGE.kml
CReefs			Y	07/11	07/11	07/11	07/11	07/11		Excel. Later Megan sent me the original KMZ except for Heron, Lizard, and Ningaloo. For these three, Shawn Smith sent me point data in Excel (08/20/07).
FMAP			Y							Boris responded 07/10
GoMA					07/02		07/02			Fish Distributions and Change Shapefiles
HMAP			Y	06/27	06/21	06/27	N/A	N/A		PowerPoint slides Continue discussing how to represent (Kim & Tim) 07/03 Tim will work on some image maps and tracklines (07/05).
			Y	06/27	06/21	06/27	06/21	06/27		Gulf of Maine Cod (Andy) 1182452298-2104
			Y	07/06	07/06	07/06	07/06	07/06		Julia A. Lajus (White & Barent Seas)
			Y	07/10	07/10	07/10	07/10	07/10		EHIM & HMID
				07/12	07/12	07/12	07/12	07/12		Fish Bones Points in Excel
										North Sea 1184069189-4493
										South Asia 1184261530-5871 Kira sent additional (values) 1184769539-2492
										Baltic Sea (Henn)
				07/18	07/18	07/18	07/18	07/18		Caribbean HMAP Caribbean.kml
ICoMM			Y	07/05	07/05	07/05	07/05	07/05		Phillip sent me the data.
MAR-ECO			Y	07/03	07/03	07/03	07/03	07/03		Already exists
NaGISA			Y	07/05	07/05	07/05	07/05	07/05		JPEG. To trace red areas.
OBIS			Y
POST			Y	07/09	07/09	07/09	07/09	07/09
TOPP			Y		07/11					Jane got back to me on 8/23/07 with a map. Jane will collect tracklines from Lynn DeWitt (07/09) Meanwhile use the area shapefile Glenn Strout sent me original color: #cee7e6

• CoMA Fish Distributions - Reprojected from Traverse Mercator to WGS84. Created an empty shapefile with feature type of Polygon. Appended features from the original that have M and Z values with them to the empty shapefile to eliminate M and Z values which Mapserver can't handle.
• NaGISA - Using Georeferencing Tools in ArcMap, approximately overlaid the JPEG image over world map. Created a shapefile containing features tracing the red areas. Erased the land with "Erase" tool.
• ICoMM - Imported CSV data into DatasetUtilities EZ and created a shapefile. Markers from the ICoMM's online map.
• HMAP White & Barent Seas - eliminated onland water bodies (rivers etc.) from "water" and created a new shapefile. Reprojected it with WGS84.
• ArcOD - The KML provided was not suitable to convert shapefile because it crosses the dateline. So edited it with help of SEAMAP Mapper to break portions into east and west spheres (ArcOD_East_West_separated.kml). Then, the KML was converted to shapefile.
• CeDAMar - Georeferenced with ArcGIS and traced the shapes (CeDAMar.shp). Then, erased islands (CeDAMar2.shp).
• CReefs - Edited data with Excel so they are in decimal degree (see the second sheet in the Excel file). Manually converted them to KML. For those that Megan sent me the original KMZ, replaced the area from Excel with KMZ. Merged them into CReefs.kml. Converted it to a shapefile.
  For Heron, Lizard, and Ningaloo, points data send by Shawn Smith were imported into ArcGIS (XY Data) and converted to a shapefile.
• CenSeam - The points in the Excel spreadsheet were imported into Datasets Utility EZ to make a point shapefile. The ridge line data were converted to a KML and to a shapefile.
• HMAP (South Asia) - Kira forwarded me the coordinates. I made the shepes with SEAMAP Mapper and saved it. Converted it to KML and then to a shapefile. Erased lands (SouthAsia_fine.shp).
  Kira sent me additional coordinates from which I created KML. Turned it to shapefile (SouthAsia_additional) and merged it to SouthAsia -> SouthAsia_fine.
• HMAP (Baltic Sea) - I drew area srrounding Baltic Sea with SEAMAP Mapper. Converted it to KML. Erased lands.
• CAML - Lines cross the dateline. They were cut first by dateline_polygon with split tool in ArcGIS then as the west half was not as expected, I traced the lines generating a new shapefile. Merge all of them into a single shapefile. The polygon shapefile was OK.

Contacts