History
← Back to the table of contents
CM.Map¶
CM.Map is used to create a map - it's the central class of the API.
Constructor¶
| constructor |
description |
| CM.Map(<HTMLElement or String> element, <TileLayer> tiles) |
Instantiates a map object given a div element (or its id) and a tiles object (see CM.Tiles). |
| CM.Map(<HTMLElement or String> element, <TileLayer array> tiles) |
Same as above but accepts an array of tile objects (used by CM.TileLayerControl). The map uses the first one, but you can change it with CM.Map#setTileLayer. |
Methods¶
Changing map state¶
| method |
returns |
description |
| setCenter(<CM.LatLng> center, <Number> zoom?) |
|
Sets the map view to the given center and optionally zoom level. Should be invoked (with both center and zoom level passed) before performing any other operations with the map. |
| setZoom(<Number> zoom) |
|
Zooms the map to the given zoom level. |
| zoomIn() |
|
Increases the zoom level by 1. |
| zoomOut() |
|
Decreases the zoom level by 1. |
| zoomToBounds(<CM.LatLngBounds> bounds) |
|
Changes the map view to contain the given bounds. |
| panTo(<CM.LatLng> center) |
|
Sets the map view to the given center. |
| panBy(<CM.Size> size) |
|
Pans the map by a given pixel offset. |
| checkResize() |
|
Readjusts the map view in case its container has been resized. |
Getting map state¶
| method |
returns |
description |
| getCenter() |
CM.LatLng |
Returns the geographical point in the center of the map view. |
| getZoom() |
Number |
Returns the current zoom level. |
| getSize() |
CM.Size |
Returns the size of the map container in pixels. |
| getContainer() |
HTMLElement |
Returns the div element that contains the map. |
| getBounds() |
CM.LatLngBounds |
Returns the bounding box of the current map view. |
| getBoundsZoomLevel(<CM.LatLngBounds> bounds) |
Number |
Returns the minimum zoom level at which the map view contains the given bounds. |
| isLoaded() |
Boolean |
Returns true if the map is already initialized with setCenter. |
Controls¶
| method |
returns |
description |
| addControl(<Control> control, <CM.ControlPosition> position?) |
|
Adds the given control to the map. You can optionally change its default position to the given one. |
| removeControl(<Control> control) |
|
Removes the given control from the map. |
Overlays¶
| method |
returns |
description |
| addOverlay(<Overlay> overlay) |
|
Adds the given overlay to the map (e.g. CM.Marker). |
| removeOverlay(<Overlay> overlay) |
|
Removes the given overlay from the map. |
| method |
returns |
description |
| (<Sidebar> sidebar) |
|
Sets the sidebar of the map. |
| () |
|
Opens the sidebar (previously set by setSidebar method). |
| () |
|
Closes the sidebar. |
| () |
|
Opens the sidebar if it's closed and closes otherwise. |
| () |
Boolean |
Returns true if the sidebar is currently in an opened state. |
| (<String or HTMLElement> content, <Number> sidebarWidth?) |
|
Sets the HTML content and optionally the width of the sidebar directly (used in implementation of custom sidebars). |
Configuration¶
| method |
returns |
description |
| enableDragging() |
|
Enables map dragging (it's enabled by default). |
| disableDragging() |
|
Disables map dragging. |
| draggingEnabled() |
Boolean |
Returns true if map dragging is enabled. |
| enableScrollWheelZoom() |
|
Enables zooming by moving the mouse scroll wheel. |
| disableScrollWheelZoom() |
|
Disables the scroll wheel zoom. |
| scrollWheelZoomEnabled() |
Boolean |
Returns true if the scroll wheel zoom is enabled. |
| enableDoubleClickZoom() |
|
Enables zoom in by double clicking. |
| disableDoubleClickZoom() |
|
Disables the double-click zoom. |
| doubleClickZoomEnabled() |
Boolean |
Returns true if the double-click zoom is enabled. |
| enableShiftDragZoom() |
|
Enables zooming with shift-drag to select bounding box. |
| disableShiftDragZoom() |
|
Disables the shift-drag zoom. |
| shiftDragZoomEnabled() |
Boolean |
Returns true if the shift-drag zoom is enabled. |
| enableMouseZoom() |
|
Enables double click zoom, shift-drag zoom and scroll-wheel zoom (this is a shortcut). |
| disableMouseZoom() |
|
Disables double click zoom, shift-drag zoom and scroll-wheel zoom. |
Info window¶
| method |
returns |
description |
| openInfoWindow(<CM.LatLng> latlng, <String or HTMLElement> content, <CM.InfoWindow options> options) |
|
Opens the info window at the given position with the given content using the given options. |
| closeInfoWindow() |
|
Closes the info window if it's opened. |
| getInfoWindow() |
CM.InfoWindow |
Returns the CM.InfoWindow object of the map for further manipulation. |
Tile layers¶
| method |
returns |
description |
| setTileLayer(<TileLayer> tiles) |
|
Switches the map to the given tiles object. |
| getCurrentTileLayer() |
TileLayer |
Returns the tiles object currently displayed by the map. |
| getTileLayers() |
TileLayer array |
Returns the array of available tile layers for the map (used by CM.TileLayerControl). |
| addTileLayer(<TileLayer> tiles) |
|
Adds the given tiles object to the list of available tiles. |
| removeTileLayer(<TileLayer> tiles) |
|
Removes the given tiles object from the map. |
Conversions¶
| method |
returns |
description |
| fromContainerPixelToLatLng(<CM.Point> px) |
CM.LatLng |
Converts pixel coordinates (relative to the upper left corner of the map view) to the corresponding geographical point. |
| fromLatLngToContainerPixel(<CM.LatLng> latlng) |
CM.Point |
Converts given geographical coordinates to pixel coordinates (relative to the upper left corner of the map view). |
| fromLatLngToDivPixel(<CM.LatLng> latlng) |
CM.Point |
Converts the given geographical point into pixel coordinates used by map overlays (like CM.Marker) to position them selves on the map. |
| fromDivPixelToLatLng(<CM.Point> px) |
CM.LatLng |
Converts the given pixel coordinates of an overlay to the corresponding geographical point on the map. |
Events¶
You can add listeners to the following events by using CM.Event.addListener function.
| event |
arguments |
description |
| load |
|
Fires when the map is initialized by CM.Map#setCenter and ready to be manipulated. |
| movestart |
|
Fires when the map starts moving to another view (either by dragging, zooming, calling setCenter, panning, etc.) |
| move |
|
Fires while the map is moved. |
| moveend |
|
Fires when the map ends moving. |
| zoomend |
|
Fires when the map changes its zoom level. |
| dragstart |
|
Fires when the map starts being dragged. |
| drag |
|
Fires while the map is dragged. |
| dragend |
|
Fires when the map ends being dragged. |
| tilelayerchanged |
|
Fires when the current tile layer has changed. |
| tilelayeradded |
TileLayer |
Fires when a new tile layer has been added to the map. |
| tilelayerremoved |
TileLayer |
Fires when a tile layer was removed from the map. |
| mouseover |
CM.LatLng |
Fires when the mouse moves over the map. |
| mouseout |
CM.LatLng |
Fires when the mouse moves out of the map. |
| mousemove |
CM.LatLng |
Fires while the mouse moves over the map. |
| click |
CM.LatLng |
Fires when the map is clicked. |
| dblclick |
CM.LatLng |
Fires when the map is double-clicked. |
| infowindowopen |
|
Fires when the info window is opened. |
| infowindowclose |
|
Fires when the info window is closed. |
| sidebaropened |
|
Fires when the sidebar is opened. |
| sidebaroclosed |
|
Fires when the sidebar is closed. |
Basic example¶
var cloudmade = new CM.Tiles.CloudMade.Web({key: 'BC9A493B41014CAABB98F0471D759707'});
var map = new CM.Map(map, cloudmade);
map.setCenter(new CM.LatLng(50, 30), 5);
Also available in:
HTML
TXT