Context Navigation

Addins/Bookmark

Version 19 (modified by hpbrantley, 22 months ago)
--

Bookmark Control

Bookmark Control

Description

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

Bookmark Trunk - v2.2

Trunk Examples

bookmark.html - A basic example of the Bookmark in action.
bookmark-custom.html - An example demonstrating advanced configurations of the Bookmark control.
bookmark-cookie.html - An example demonstrating storage of Bookmarks in a cookie.

Temporary working example bookmark-cookie.html

run-tests.html - Unit testing of the control.

Installation and Use

Use subversion to check out the Bookmark addin.
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).
Use the build tools to create a single file build (or link to your OpenLayers.js file to run in development mode).
Add a stylesheet to your page to style the Bookmark, bookmark.css.
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 positions using a bounds object or string */
bookmark.add("BOSTON", new OpenLayers.Bounds(-71.401901,41.989908,-70.698776,42.693033));
bookmark.add("BOSTON TOO","-71.401901,41.989908,-70.698776,42.693033");

Advanced Usage

Bookmarks with no containing DIV

The developer can allow interaction with the Bookmark control without adding it as a map control. Simply pass the map reference to the constructor. Using this method, the CSS declarations are not needed.

var map = new OpenLayers.Map("map");
var bookmark = new OpenLayers.Control.Bookmark({ 'map': map });
bookmark.add("BOSTON", new OpenLayers.Bounds(-71.401901,41.989908,-70.698776,42.693033));
bookmark.add("BOSTON TOO","-71.401901,41.989908,-70.698776,42.693033");

Bookmarks Outside the Map

<style>
#myBookmarks { height: 200px; width: 15em; float: right; }
#myBookmarks #olBookmarkElement { cursor : pointer; }
</style>

var map = new OpenLayers.Map("map");
bookmark = new OpenLayers.Control.Bookmark({ 'div':OpenLayers.Util.getElement('myBookmarks'), 'title': 'Bookmarks outside the map' });
map.addControl(bookmark);
bookmark.add("BOSTON", new OpenLayers.Bounds(-71.401901,41.989908,-70.698776,42.693033));
bookmark.add("BOSTON TOO","-71.401901,41.989908,-70.698776,42.693033");

<body>
<!-- Div to contain the bookmarks -->
<div id="myBookmarks"></div>
<div id="map"></div>
</body>

Passing A Function

Passing a developer 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:

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

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

/* zoom to first found reference */
bookmark.zoomToLabel(control.find("BOSTON")[0][1]);

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

Styling

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. See CSS examples bookmark.css.

/* 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);