Bookmark Control

Description

The Bookmark control provides a simple means to "bookmark" a location.

Examples

•  bookmark.html - A basic example of the Bookmark in action. (until sandbox is created)
•  bookmark-custom.html - An example demonstrating advanced configurations of the Bookmark control. (until sandbox is created)

•  bookmark.html - A basic example of the !Bookmark in action.
•  bookmark-custom.html - An example demonstrating advanced configurations of the Bookmark control.

Installation and Use

1. Use subversion to check out the  Bookmark addin.
2. Place the Bookmark.js file in your Control directory (or alternatively, place it elsewhere and add a <script> tag to your page that points to it).
3. Use the build tools to create a single file build (or link to your OpenLayers.js file to run in development mode).
4. Add a stylesheet to your page to style the Bookmark (see examples).
5. Construct a map and add a Bookmark to it with the following syntax:

var map = new OpenLayers.Map("map");
var bookmark = new OpenLayers.Control.Bookmark();

/* when adding the control to the map, css elements are expected */
map.addControl(bookmark);

/* bookmark a position */
bookmark.add("BOSTON","-71.401901,41.989908,-70.698776,42.693033");

Advanced Usage

Passing a user defined function and value. This function will be called when bookmark.zoomTo() method is called. This can be triggered by the user clicking the bookmark in the DIV or, if no DIV is defined, using something similar to

/* add a bookmark with user defined function and value */
bookmark.add("BOSTON","-71.401901,41.989908,-70.698776,42.693033",Msg,"Welcome to Boston");

bookmark.zoomTo(bookmark.find("boston"));.

function Msg(val) { alert(val); }

Style

The look of the Bookmark contol is styled using css elements. If the bookmark is used without a defining DIV, no css elements are required.

/* bookmark main div */
.olControlBookmark {}

/* bookmark content container */
.olControlBookmarkContent {}

/* bookmark title */
.olControlBookmarkTitle {}

/* bookmark data elements */
.olControlBookmarkElements {}

/* each row contains a remove element and link element */
.olControlBookmarkRow {}
.olControlBookmarkRemove {}
.olControlBookmarkLink {}

/* maximize and minimize buttons */
.olControlBookmarkMaximizeButton {}
.olControlBookmarkMinimizeButton {}

Note: Rounding of the bookmark div corners is done by Rico outside of the class.

OpenLayers.Rico.Corner.round( bookmark.div, {corners: "tl bl", bgColor: "transparent", color: "darkblue", blend: false});
OpenLayers.Rico.Corner.changeOpacity(bookmark.contentDiv, 0.75);