Using OpenLayers with an Image File
Markers & Layer Switcher
There are two ways to add markers, both of which will be examined here.
Markers Layer
The first method is to add a markers layer to the map, then add markers to the layer. Each marker has an icon object, which has size and offset parameters. The size parameter is an OpenLayers.Size object, which specifies the icon size (width, height) in pixels. The offset parameter is an OpenLayers.Pixel object, which specifies where the centre of the icon is in relation to the top-left corner.
Each marker can have the opacity set using the setOpacity () function, passing a value from 0 to 1.0 - setting a value less than 1.0 gives the marker some transparency. Example:
//Set the opacity of marker m1 to 50% to make it semi-transparent
m1.setOpacity (0.5)
Events can be set up for markers, to display an alert box when the user clicks on the icon, for instance. Events are configured using the marker's events.register () function. Example:
//Set up a click event for marker m1
m1.events.register ('click', m1, function(evt) {alert ('You clicked on marker m1'); OpenLayers.Event.stop (evt); })
Multiple markers can be added, but note that each marker must have a distinct icon object. If multiple icons are to have the same graphic file, size and offset, then the icon's clone () function can be used to create duplicates.
Text Layer
The second method is to add a text layer. This uses a tab-separated text file to define the markers (one per line). The first row of the text file should be a header line with the column names of the data. The possible columns are shown below. Note that I could not get a file with lat and lon columns to work, and so used a point column instead.
- point lat,lon of the point where a marker is to be placed
- lat Latitude of the point where a marker is to be placed
- lon Longitude of the point where a marker is to be placed
- iconURL URL of marker icon to use.
- iconSize Size of Icon to use.
- iconOffset Where the top-left corner of the icon is to be placed relative to the latitude and longitude of the point.
- title The text of the 'title' is placed inside an 'h2' marker inside a popup, which opens when the marker is clicked.
- description The text of the 'description' is placed below the h2 in the popup. this can be plain text or HTML.
Once a suitable data file is set up [example file], adding the markers to the map requires only two lines of code:
//Create a text layer. First parameter is name to be displayed in layer switcher control.
//Second parameter is options array (only option set is location of text file)
var txtlayer = new OpenLayers.Layer.Text ("Text Markers", {location: "markers.txt"} )
//Add text layer to map
map.addLayer (txtlayer)
The map at the bottom of this page uses both a markers layer and a text layer. A layer switcher control is added, so that the user can select which layers are visible, using the following line of code:
map.addControl (new OpenLayers.Control.LayerSwitcher())
The visibility of the text layer is initially set to false, so that it is not shown unless the user enables it using the layer switcher control. The new code (which is simply appended to the existing code) is shown below, with the resulting map.
//Add a markers layer. Parameter is name - this is displayed in LayerSwitcher if one is used
var markers = new OpenLayers.Layer.Markers ("Markers")
map.addLayer(markers)
//Create size and offset objects. These can be re-used among several icons
var size = new OpenLayers.Size (21, 25)
var offset = new OpenLayers.Pixel (-(size.w/2), -size.h)
//Create a semi-transparent icon object. Parameters are image URL, size object, and offset object
var icon1 = new OpenLayers.Icon ('img/marker-green.png', size, offset)
//Create a marker. Parameters are LonLat object, icon object
m1 = new OpenLayers.Marker (new OpenLayers.LonLat (100, 150), icon1)
//Set the opacity to 50% to make it semi-transparent
m1.setOpacity (0.5)
//Add the marker to the markers layer
markers.addMarker (m1)
//Set up a click event for the new marker
m1.events.register ('click', m1, function(evt) {alert ('You clicked on marker m1'); OpenLayers.Event.stop (evt); })
//Create a second marker. Note that the icon is a clone of icon1, not icon1 itself
m2 = new OpenLayers.Marker (new OpenLayers.LonLat (200, 100), icon1.clone ())
//Add the marker to the markers layer
markers.addMarker (m2)
//Set up a click event for the new marker
m2.events.register ('click', m2, function(evt) {alert ('You clicked on marker m2'); OpenLayers.Event.stop (evt); })
//Create a text layer. First parameter is name to be displayed in layer switcher control.
//Second parameter is options array (only option set is location of text file)
var txtlayer = new OpenLayers.Layer.Text ("Text Markers", {location: "markers.txt"} )
//Set visibility to false so that it is not visible unless the user enables it in the layer switcher
txtlayer.setVisibility (false)
//Add text layer to map
map.addLayer (txtlayer)
//Add a layer switcher control to the map
map.addControl (new OpenLayers.Control.LayerSwitcher())
// -->
</script>
The Map
Markers not Always Visible
You may find that the markers are not always visible. In that case, overriding the calculateInRange function to always return true should fix the problem, eg:
//Original
var markers = new OpenLayers.Layer.Markers ("Markers")
//override the calculateInRange function to always return true
var markers = new OpenLayers.Layer.Markers ("Markers", {'calculateInRange': function() { return true; }});
//Original
var txtlayer = new OpenLayers.Layer.Text ("Text Markers", {location: "markers.txt"} )
//override the calculateInRange function to always return true
var txtlayer = new OpenLayers.Layer.Text ("Text Markers", {'calculateInRange': function() { return true; }, location: "markers.txt"} )
Previous |
Contents
This work is licensed under a Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License.
Russ' OpenStreetMap pages