Instances of OpenLayers.Map are interactive maps embedded in a web page. Create a new map with the OpenLayers.Map constructor.
On their own maps do not provide much functionality. To extend a map it’s necessary to add controls (OpenLayers.Control) and layers (OpenLayers.Layer) to the map.
OpenLayers.Map | Instances of OpenLayers.Map are interactive maps embedded in a web page. |
Constants | |
Z_INDEX_BASE | {Object} Base z-indexes for different classes of thing |
EVENT_TYPES | {Array(String)} Supported application event types. |
Properties | |
events | {OpenLayers.Events} An events object that handles all events on the map |
allOverlays | {Boolean} Allow the map to function with “overlays” only. |
div | {DOMElement|String} The element that contains the map (or an id for that element). |
layers | {Array(OpenLayers.Layer)} Ordered list of layers in the map |
baseLayer | {OpenLayers.Layer} The currently selected base layer. |
tileSize | {OpenLayers.Size} Set in the map options to override the default tile size for this map. |
projection | {String} Set in the map options to override the default projection string this map - also set maxExtent, maxResolution, and units if appropriate. |
units | {String} The map units. |
resolutions | {Array(Float)} A list of map resolutions (map units per pixel) in descending order. |
maxResolution | {Float} Default max is 360 deg / 256 px, which corresponds to zoom level 0 on gmaps. |
minResolution | {Float} |
maxScale | {Float} |
minScale | {Float} |
maxExtent | {OpenLayers.Bounds} The maximum extent for the map. |
minExtent | {OpenLayers.Bounds} |
restrictedExtent | {OpenLayers.Bounds} Limit map navigation to this extent where possible. |
numZoomLevels | {Integer} Number of zoom levels for the map. |
theme | {String} Relative path to a CSS file from which to load theme styles. |
displayProjection | {OpenLayers.Projection} Requires proj4js support.Projection used by several controls to display data to user. |
fallThrough | {Boolean} Should OpenLayers allow events on the map to fall through to other elements on the page, or should it swallow them? |
eventListeners | {Object} If set as an option at construction, the eventListeners object will be registered with <OpenLayers.Events.on>. |
panMethod | {Function} The Easing function to be used for tweening. |
Constructor | |
OpenLayers.Map | Constructor for a new OpenLayers.Map instance. |
Functions | |
render | Render the map to a specified container. |
destroy | Destroy this map |
setOptions | Change the map options |
getTileSize | Get the tile size for the map |
getBy | Get a list of objects given a property and a match item. |
getLayersBy | Get a list of layers with properties matching the given criteria. |
getLayersByName | Get a list of layers with names matching the given name. |
getLayersByClass | Get a list of layers of a given class (CLASS_NAME). |
getControlsBy | Get a list of controls with properties matching the given criteria. |
getControlsByClass | Get a list of controls of a given class (CLASS_NAME). |
getLayer | Get a layer based on its id |
addLayer | |
addLayers | |
removeLayer | Removes a layer from the map by removing its visual element (the layer.div property), then removing it from the map’s internal list of layers, setting the layer’s map property to null. |
getNumLayers | {Int} The number of layers attached to the map. |
getLayerIndex | |
setLayerIndex | Move the given layer to the specified (zero-based) index in the layer list, changing its z-index in the map display. |
raiseLayer | Change the index of the given layer by delta. |
setBaseLayer | Allows user to specify one of the currently-loaded layers as the Map’s new base layer. |
addControl | |
getControl | |
removeControl | Remove a control from the map. |
addPopup | |
removePopup | |
getSize | {OpenLayers.Size} An OpenLayers.Size object that represents the size, in pixels, of the div into which OpenLayers has been loaded. |
updateSize | This function should be called by any external code which dynamically changes the size of the map div (because mozilla wont let us catch the “onresize” for an element) |
getCenter | {OpenLayers.LonLat} |
getZoom | {Integer} |
pan | Allows user to pan by a value of screen pixels |
panTo | Allows user to pan to a new lonlat If the new lonlat is in the current extent the map will slide smoothly |
setCenter | Set the map center (and optionally, the zoom level). |
getProjection | This method returns a string representing the projection. |
getProjectionObject | Returns the projection obect from the baselayer. |
getMaxResolution | {String} The Map’s Maximum Resolution |
getMaxExtent | |
getNumZoomLevels | {Integer} The total number of zoom levels that can be displayed by the current baseLayer. |
getExtent | {OpenLayers.Bounds} A Bounds object which represents the lon/lat bounds of the current viewPort. |
getResolution | {Float} The current resolution of the map. |
getUnits | {Float} The current units of the map. |
getScale | {Float} The current scale denominator of the map. |
getZoomForExtent | |
getResolutionForZoom | |
getZoomForResolution | |
zoomTo | Zoom to a specific zoom level |
zoomIn | |
zoomOut | |
zoomToExtent | Zoom to the passed in bounds, recenter |
zoomToMaxExtent | Zoom to the full extent and recenter. |
zoomToScale | Zoom to a specified scale |
getViewPortPxFromLonLat | |
getLonLatFromPixel | |
getPixelFromLonLat | Returns a pixel location given a map location. |
getViewPortPxFromLayerPx | |
getLayerPxFromViewPortPx | |
getLayerPxFromLonLat | |
Constants | |
TILE_WIDTH | {Integer} 256 Default tile width (unless otherwise specified) |
TILE_HEIGHT | {Integer} 256 Default tile height (unless otherwise specified) |
{Array(String)} Supported application event types. Register a listener for a particular event with the following syntax:
map.events.register(type, obj, listener);
Listeners will be called with a reference to an event object. The properties of this event depends on exactly what happened.
{OpenLayers.Events} An events object that handles all events on the map
{Boolean} Allow the map to function with “overlays” only. Defaults to false. If true, the lowest layer in the draw order will act as the base layer. In addition, if set to true, all layers will have isBaseLayer set to false when they are added to the map.
If you set map.allOverlays to true, then you cannot use map.setBaseLayer or layer.setIsBaseLayer. With allOverlays true, the lowest layer in the draw layer is the base layer. So, to change the base layer, use setLayerIndex or raiseLayer to set the layer index to 0.
{DOMElement|String} The element that contains the map (or an id for that element). If the OpenLayers.Map constructor is called with two arguments, this should be provided as the first argument. Alternatively, the map constructor can be called with the options object as the only argument. In this case (one argument), a div property may or may not be provided. If the div property is not provided, the map can be rendered to a container later using the render method.
Note: If you calling render after map construction, do not use maxResolution auto. Instead, divide your maxExtent by your maximum expected dimension.
{Array(OpenLayers.Layer)} Ordered list of layers in the map
{OpenLayers.Layer} The currently selected base layer. This determines min/max zoom level, projection, etc.
{OpenLayers.Size} Set in the map options to override the default tile size for this map.
{OpenLayers.Bounds} The maximum extent for the map. Defaults to the whole world in decimal degrees (-180, -90, 180, 90). Specify a different extent in the map options if you are not using a geographic projection and displaying the whole world.
{OpenLayers.Bounds} Limit map navigation to this extent where possible. If a non-null restrictedExtent is set, panning will be restricted to the given bounds. In addition, zooming to a resolution that displays more than the restricted extent will center the map on the restricted extent. If you wish to limit the zoom level or resolution, use maxResolution.
{OpenLayers.Projection} Requires proj4js support.Projection used by several controls to display data to user. If this property is set, it will be set on any control which has a null displayProjection property at the time the control is added to the map.
Constructor for a new OpenLayers.Map instance. There are two possible ways to call the map constructor. See the examples below.
div | {String} Id of an element in your page that will contain the map. May be omitted if the div option is provided or if you intend to use render later. |
options | {Object} Optional object with properties to tag onto the map. |
// create a map with default options in an element with the id "map1" var map = new OpenLayers.Map("map1"); // create a map with non-default options in an element with id "map2" var options = { maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000), maxResolution: 156543, units: 'm', projection: "EPSG:41001" }; var map = new OpenLayers.Map("map2", options);
Examples (method two | single argument): |
// create a map with non-default options var map = new OpenLayers.Map({ div: "map_id", maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000), maxResolution: 156543, units: 'm', projection: "EPSG:41001" }); // create a map without a reference to a container - call render later var map = new OpenLayers.Map({ maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000), maxResolution: 156543, units: 'm', projection: "EPSG:41001" });
getBy: function( array, property, match )
Get a list of objects given a property and a match item.
array | {String} A property on the map whose value is an array. |
property | {String} A property on each item of the given array. |
match | {String | Object} A string to match. Can also be a regular expression literal or object. In addition, it can be any object with a method named test. For reqular expressions or other, if match.test(map[array][i][property]) evaluates to true, the item will be included in the array returned. If no items are found, an empty array is returned. |
{Array} An array of items where the given property matches the given criteria.
getLayersBy: function( property, match )
Get a list of layers with properties matching the given criteria.
property | {String} A layer property to be matched. |
match | {String | Object} A string to match. Can also be a regular expression literal or object. In addition, it can be any object with a method named test. For reqular expressions or other, if match.test(layer[property]) evaluates to true, the layer will be included in the array returned. If no layers are found, an empty array is returned. |
{Array(OpenLayers.Layer)} A list of layers matching the given criteria. An empty array is returned if no matches are found.
getLayersByName: function( match )
Get a list of layers with names matching the given name.
match | {String | Object} A layer name. The name can also be a regular expression literal or object. In addition, it can be any object with a method named test. For reqular expressions or other, if name.test(layer.name) evaluates to true, the layer will be included in the list of layers returned. If no layers are found, an empty array is returned. |
{Array(OpenLayers.Layer)} A list of layers matching the given name. An empty array is returned if no matches are found.
getLayersByClass: function( match )
Get a list of layers of a given class (CLASS_NAME).
match | {String | Object} A layer class name. The match can also be a regular expression literal or object. In addition, it can be any object with a method named test. For reqular expressions or other, if type.test(layer.CLASS_NAME) evaluates to true, the layer will be included in the list of layers returned. If no layers are found, an empty array is returned. |
{Array(OpenLayers.Layer)} A list of layers matching the given class. An empty array is returned if no matches are found.
getControlsBy: function( property, match )
Get a list of controls with properties matching the given criteria.
property | {String} A control property to be matched. |
match | {String | Object} A string to match. Can also be a regular expression literal or object. In addition, it can be any object with a method named test. For reqular expressions or other, if match.test(layer[property]) evaluates to true, the layer will be included in the array returned. If no layers are found, an empty array is returned. |
{Array(OpenLayers.Control)} A list of controls matching the given criteria. An empty array is returned if no matches are found.
getControlsByClass: function( match )
Get a list of controls of a given class (CLASS_NAME).
match | {String | Object} A control class name. The match can also be a regular expression literal or object. In addition, it can be any object with a method named test. For reqular expressions or other, if type.test(control.CLASS_NAME) evaluates to true, the control will be included in the list of controls returned. If no controls are found, an empty array is returned. |
{Array(OpenLayers.Control)} A list of controls matching the given class. An empty array is returned if no matches are found.
getLayer: function( id )
Get a layer based on its id
id | {String} A layer id |
{OpenLayers.Layer} The Layer with the corresponding id from the map’s layer collection, or null if not found.
removeLayer: function( layer, setNewBaseLayer )
Removes a layer from the map by removing its visual element (the layer.div property), then removing it from the map’s internal list of layers, setting the layer’s map property to null.
a “removelayer” event is triggered.
very worthy of mention is that simply removing a layer from a map will not cause the removal of any popups which may have been created by the layer. this is due to the fact that it was decided at some point that popups would not belong to layers. thus there is no way for us to know here to which layer the popup belongs.
A simple solution to this is simply to call destroy() on the layer. the default OpenLayers.Layer class’s destroy() function automatically takes care to remove itself from whatever map it has been attached to.
The correct solution is for the layer itself to register an event-handler on “removelayer” and when it is called, if it recognizes itself as the layer being removed, then it cycles through its own personal list of popups, removing them from the map.
layer | {OpenLayers.Layer} |
setNewBaseLayer | {Boolean} Default is true |
getLayerIndex: function ( layer )
layer | {OpenLayers.Layer} |
{Integer} The current (zero-based) index of the given layer in the map’s layer stack. Returns -1 if the layer isn’t on the map.
setLayerIndex: function ( layer, idx )
Move the given layer to the specified (zero-based) index in the layer list, changing its z-index in the map display. Use map.getLayerIndex() to find out the current index of a layer. Note that this cannot (or at least should not) be effectively used to raise base layers above overlays.
layer | {OpenLayers.Layer} |
idx | {int} |
raiseLayer: function ( layer, delta )
Change the index of the given layer by delta. If delta is positive, the layer is moved up the map’s layer stack; if delta is negative, the layer is moved down. Again, note that this cannot (or at least should not) be effectively used to raise base layers above overlays.
layer | {OpenLayers.Layer} |
delta | {int} |
setBaseLayer: function( newBaseLayer )
Allows user to specify one of the currently-loaded layers as the Map’s new base layer.
newBaseLayer | {OpenLayers.Layer} |
getControl: function ( id )
id | {String} ID of the control to return. |
{OpenLayers.Control} The control from the map’s list of controls which has a matching ‘id’. If none found, returns null.
removeControl: function ( control )
Remove a control from the map. Removes the control both from the map object’s internal array of controls, as well as from the map’s viewPort (assuming the control was not added outsideViewport)
control | {OpenLayers.Control} The control to remove. |
addPopup: function( popup, exclusive )
popup | {OpenLayers.Popup} |
exclusive | {Boolean} If true, closes all other popups first |
getSize: function ()
{OpenLayers.Size} An OpenLayers.Size object that represents the size, in pixels, of the div into which OpenLayers has been loaded. Note - A clone() of this locally cached variable is returned, so as not to allow users to modify it.
setCenter: function( lonlat, zoom, dragging, forceZoomChange )
Set the map center (and optionally, the zoom level).
lonlat | {OpenLayers.LonLat} The new center location. |
zoom | {Integer} Optional zoom level. |
dragging | {Boolean} Specifies whether or not to trigger movestart/end events |
forceZoomChange | {Boolean} Specifies whether or not to trigger zoom change events (needed on baseLayer change) |
TBD: reconsider forceZoomChange in 3.0
getProjection: function()
This method returns a string representing the projection. In the case of projection support, this will be the srsCode which is loaded -- otherwise it will simply be the string value that was passed to the projection at startup.
FIXME: In 3.0, we will remove getProjectionObject, and instead return a Projection object from this function.
{String} The Projection string from the base layer or null.
getProjectionObject: function()
Returns the projection obect from the baselayer.
{OpenLayers.Projection} The Projection of the base layer.
getMaxExtent: function ( options )
options | {Object} |
restricted | {Boolean} If true, returns restricted extent (if it is available.) |
{OpenLayers.Bounds} The maxExtent property as set on the current baselayer, unless the ‘restricted’ option is set, in which case the ‘restrictedExtent’ option from the map is returned (if it is set).
getExtent: function ()
{OpenLayers.Bounds} A Bounds object which represents the lon/lat bounds of the current viewPort. If no baselayer is set, returns null.
getZoomForExtent: function ( bounds, closest )
bounds | {OpenLayers.Bounds} |
closest | {Boolean} Find the zoom level that most closely fits the specified bounds. Note that this may result in a zoom that does not exactly contain the entire extent. Default is false. |
{Integer} A suitable zoom level for the specified bounds. If no baselayer is set, returns null.
getZoomForResolution: function( resolution, closest )
resolution | {Float} |
closest | {Boolean} Find the zoom level that corresponds to the absolute closest resolution, which may result in a zoom whose corresponding resolution is actually smaller than we would have desired (if this is being called from a getZoomForExtent() call, then this means that the returned zoom index might not actually contain the entire extent specified... but it’ll be close). Default is false. |
{Integer} A suitable zoom level for the specified resolution. If no baselayer is set, returns null.
zoomToExtent: function( bounds, closest )
Zoom to the passed in bounds, recenter
bounds | {OpenLayers.Bounds} |
closest | {Boolean} Find the zoom level that most closely fits the specified bounds. Note that this may result in a zoom that does not exactly contain the entire extent. Default is false. |
getViewPortPxFromLonLat: function ( lonlat )
lonlat | {OpenLayers.LonLat} |
{OpenLayers.Pixel} An OpenLayers.Pixel which is the passed-in OpenLayers.LonLat, translated into view port pixels by the current base layer.
getLonLatFromPixel: function ( px )
px | {OpenLayers.Pixel} |
{OpenLayers.LonLat} An OpenLayers.LonLat corresponding to the given OpenLayers.Pixel, translated into lon/lat by the current base layer
getPixelFromLonLat: function ( lonlat )
Returns a pixel location given a map location. The map location is translated to an integer pixel location (in viewport pixel coordinates) by the current base layer.
lonlat | {OpenLayers.LonLat} A map location. |
{OpenLayers.Pixel} An OpenLayers.Pixel corresponding to the OpenLayers.LonLat translated into view port pixels by the current base layer.
getViewPortPxFromLayerPx:function( layerPx )
layerPx | {OpenLayers.Pixel} |
{OpenLayers.Pixel} Layer Pixel translated into ViewPort Pixel coordinates
getLayerPxFromViewPortPx:function( viewPortPx )
viewPortPx | {OpenLayers.Pixel} |
{OpenLayers.Pixel} ViewPort Pixel translated into Layer Pixel coordinates
getLayerPxFromLonLat: function ( lonlat )
lonlat | {OpenLayers.LonLat} lonlat |
{OpenLayers.Pixel} An OpenLayers.Pixel which is the passed-in OpenLayers.LonLat, translated into layer pixels by the current base layer
Render the map to a specified container.
render: function( div )
Destroy this map
destroy:function()
Change the map options
setOptions: function( options )
Get the tile size for the map
getTileSize: function()
Get a list of objects given a property and a match item.
getBy: function( array, property, match )
Get a list of layers with properties matching the given criteria.
getLayersBy: function( property, match )
Get a list of layers with names matching the given name.
getLayersByName: function( match )
Get a list of layers of a given class (CLASS_NAME).
getLayersByClass: function( match )
Get a list of controls with properties matching the given criteria.
getControlsBy: function( property, match )
Get a list of controls of a given class (CLASS_NAME).
getControlsByClass: function( match )
Get a layer based on its id
getLayer: function( id )
addLayer: function ( layer )
addLayers: function ( layers )
Removes a layer from the map by removing its visual element (the layer.div property), then removing it from the map’s internal list of layers, setting the layer’s map property to null.
removeLayer: function( layer, setNewBaseLayer )
{Int} The number of layers attached to the map.
getNumLayers: function ()
getLayerIndex: function ( layer )
Move the given layer to the specified (zero-based) index in the layer list, changing its z-index in the map display.
setLayerIndex: function ( layer, idx )
Change the index of the given layer by delta.
raiseLayer: function ( layer, delta )
Allows user to specify one of the currently-loaded layers as the Map’s new base layer.
setBaseLayer: function( newBaseLayer )
addControl: function ( control, px )
getControl: function ( id )
Remove a control from the map.
removeControl: function ( control )
addPopup: function( popup, exclusive )
removePopup: function( popup )
{OpenLayers.Size} An OpenLayers.Size object that represents the size, in pixels, of the div into which OpenLayers has been loaded.
getSize: function ()
This function should be called by any external code which dynamically changes the size of the map div (because mozilla wont let us catch the “onresize” for an element)
updateSize: function()
{OpenLayers.LonLat}
getCenter: function ()
{Integer}
getZoom: function ()
Allows user to pan by a value of screen pixels
pan: function( dx, dy, options )
Allows user to pan to a new lonlat If the new lonlat is in the current extent the map will slide smoothly
panTo: function( lonlat )
Set the map center (and optionally, the zoom level).
setCenter: function( lonlat, zoom, dragging, forceZoomChange )
This method returns a string representing the projection.
getProjection: function()
Returns the projection obect from the baselayer.
getProjectionObject: function()
{String} The Map’s Maximum Resolution
getMaxResolution: function()
getMaxExtent: function ( options )
{Integer} The total number of zoom levels that can be displayed by the current baseLayer.
getNumZoomLevels: function()
{OpenLayers.Bounds} A Bounds object which represents the lon/lat bounds of the current viewPort.
getExtent: function ()
{Float} The current resolution of the map.
getResolution: function ()
{Float} The current units of the map.
getUnits: function ()
{Float} The current scale denominator of the map.
getScale: function ()
getZoomForExtent: function ( bounds, closest )
getResolutionForZoom: function( zoom )
getZoomForResolution: function( resolution, closest )
Zoom to a specific zoom level
zoomTo: function( zoom )
zoomIn: function()
zoomOut: function()
Zoom to the passed in bounds, recenter
zoomToExtent: function( bounds, closest )
Zoom to the full extent and recenter.
zoomToMaxExtent: function( options )
Zoom to a specified scale
zoomToScale: function( scale, closest )
getViewPortPxFromLonLat: function ( lonlat )
getLonLatFromPixel: function ( px )
Returns a pixel location given a map location.
getPixelFromLonLat: function ( lonlat )
getViewPortPxFromLayerPx:function( layerPx )
getLayerPxFromViewPortPx:function( viewPortPx )
getLayerPxFromLonLat: function ( lonlat )