Initialization (Map)
Initialization
// initialize the map on the "map" div with a given center and zoom
var map = ym.map('map', {
center: [51.505, -0.09],
zoom: 13
});
Factory: ym.map(id, options)
Instantiates a map object with a div element (or its ID) and optionally an object with the map options described below.
Parameters
Name | Description | Data type | Default value |
---|---|---|---|
id |
A div-element oder an ID. [mandatory] |
HTML-element or string |
|
options |
[optional] | Object |
Parameter: options
Map Status Options
Name | Description | Data type | Default value |
---|---|---|---|
center |
Original geographical center of the map. | LatLng |
null |
zoom |
Original zoom value. | int |
null |
layers |
Layers that are first added to the map. | ILayer[] |
null |
minZoom |
Minimum zoom level of the map. Overrides all minZoom settings of the map layers. | int |
null |
maxZoom |
Maximum zoom level of the map. Overrides all maxZoom settings of the map layers. | int |
null |
maxBounds |
When this option is set, the map restricts the view to the specified geographical boundaries and prevents the user from moving the map outside the view. To set the restriction dynamically, use the setMaxBounds method. | LatLngBounds |
null |
style |
Setting of the map style to be displayed on the map. By default, the profile lightmode is used. You can choose between different styles, adapted to the respective use case. |
|
lightmode |
Interaction options
Name | Description | Data type | Default value |
---|---|---|---|
fullscreenControl |
Whether the map can be opened in full screen mode | bool |
flase |
draggable |
Whether or not the card can be dragged with the mouse or touch | bool |
true |
touchZoom |
Whether the card can be zoomed by touching it with two fingers | bool |
true |
scrollWheelZoom |
Whether the map can be zoomed with the mouse wheel. If you pass "center", the map is zoomed to the center of the view, regardless of where the mouse was located. | bool |
true |
doubleClickZoom |
Whether the map can be enlarged by double-clicking and reduced by double-clicking while holding down the Shift key. If you have selected the "Center" option, double-clicking the zoom zooms to the center of the view, regardless of where the mouse was located. | bool |
true |
boxZoom |
Whether the map can be zoomed to a rectangular area defined by dragging with the mouse while holding down the Shift key. | bool |
true |
tap |
Enables mobile hacks to support instant taps (fixing 200 ms click delay on iOS/Android) and touch holds (triggered as context menu events) | bool |
true |
tapTolerance |
The maximum number of pixels that a user can move while touching with a finger so that it can be considered a valid fingertip. | int |
15 |
trackResize |
Whether the map automatically resizes the browser window to update itself. | bool |
true |
worldCopyJump |
When this option is enabled, the map tracks are displayed when moving to another copy of the world and seamlessly jumping to the original map, so that all overlays like markers and vector layers are still visible. | bool |
false |
closePopupOnClick |
Set false if you do not want popups to be closed by clicking on the map. | bool |
true |
bounceAtZoomLimits |
Set this setting to false if you don't want the map to zoom beyond the min/max zoom and then jump back at pinch zoom. | bool |
true |
Keyboard input options
Name | Description | Data type | Default value |
---|---|---|---|
keyboard |
Makes the map focusable and allows the user to navigate through the map using keyboard arrows and [+]/[-] keys. | bool |
true |
keyboardPanOffset |
Number of pixels to move when pressing an arrow key. | int |
80 |
keyboardZoomOffset |
Number of zoom levels to be changed when pressing the [+]/[-] key. | int |
1 |
Options for the moment of inertia of move actions
Name | Description | Data type | Default value |
---|---|---|---|
inertia |
When this option is enabled, moving the map has an inertia effect while dragging, so that the map moves in the same direction for some time. Feels especially good on touch devices. | bool |
|
inertiaDeceleration |
The speed at which the inertial motion is slowed down, in pixels per second. | int |
3000 |
inertiaMaxSpeed |
Maximum speed of inertial motion, in pixels/second. | int |
1500 |
inertiaThreshold |
Number of milliseconds to elapse between stopping the movement and releasing the mouse or touch to prevent inertia (32 by default for touch devices and 14 for all other devices) | int |
Control options
Name | Description | Data type | Default value |
---|---|---|---|
zoomControl |
Whether the zoom slider is added to the map by default. | bool |
true |
attributionControl |
Whether the attribution control is added to the map by default. | boll |
true |
Animation options
Name | Description | Data type | Default value |
---|---|---|---|
fadeAnimation |
Whether the tile crossfade animation is activated. By default, this is enabled in all browsers that support CSS3 transitions (not Android). | bool |
|
zoomAnimation |
Whether the tile zoom animation is activated. By default it is enabled in all browsers that support CSS3 transitions (not Android). | bool |
|
zoomAnimationThreshold |
The zoom is not animated if the zoom difference exceeds this value. | int |
4 |
markerZoomAnimation |
Specifies whether markers are also animated during the zoom animation. If it is deactivated, the markers disappear for the duration of the animation. By default it is enabled in all browsers that support CSS3 transitions (not Android). | bool |
Localization Options
Name | Description | Data type | Default value |
---|---|---|---|
watch |
If true, the continuous observation of location changes (instead of detecting them only once) starts with the W3C watchPosition method. You can stop observing later with the map.stopLocate method. | bool |
false |
setView |
If false, the map view is automatically (if geolocation failed) set to the user's location in terms of recognition accuracy or to the world view. | bool |
false |
maxZoom |
The maximum zoom factor for the automatic setting of the view when using the setView" option. |
int |
Infinity |
timeout |
Number of milliseconds to wait for a geolocation response before a location error event is triggered. | Number |
10000 |
maximumAge |
Maximum age of the detected location. If less than this number of milliseconds has passed since the last geolocation response, locate returns a cached location. | int |
0 |
enableHighAccuracy |
Enables high accuracy (see description in W3C specification) | bool |
false |
Zoom and move options
Name | Description | Data type | Default value |
---|---|---|---|
reset |
If true, the map view is completely reset (without animations). | bool |
false |
pan |
Sets the options for panning (without zoom change) when it occurs. | pan options | |
zoom |
Sets the options for the zoom change when it occurs. | zoom options | |
animate |
An equivalent to passing animations for zoom and pan options (see below). | bool |
Move options
Name | Description | Data type | Default value |
---|---|---|---|
animate |
If true, dragging will be animated if possible. If false, dragging is not animated. Either the map view will be reset when moving by more than one screen width, or only a new offset will be set for the map section (except for panBy, which always does the latter). | bool |
|
duration |
Duration of animated moving. | int |
0.25 |
easeLinearity |
The curvature factor of the displacement-animation-relaxation (third parameter of the Cubic Bezier curve). 1.0 means linear animation. The less, the more the curve bowed. | int |
0.25 |
noMoveStart |
If true, moving at startup will not trigger the Movestart event (used internally for panning inertia). | bool |
false |
Zoom options
Name | Description | Datentyp | Default value |
---|---|---|---|
animate |
If not specified, the zoom animation is executed. condition: The origin of the zoom is inside the current view. If this is the case, the map will try to animate the zoom, regardless of where the origin of the zoom is located. Setting false causes the view to always reset completely without animation. | bool |
Edge Enhancement Options
Name | Description | Data type | Default value |
---|---|---|---|
paddingTopLeft |
Defines how much margin padding is displayed in the upper left corner of a map container that should not be taken into account when adjusting the view to the borders. Useful if you have some control overlays on the map like a sidebar and you don't want to hide the objects you zoom in on. | Point |
[0, 0] |
paddingBottomRight |
The same applies to the lower right corner of the card. | Point |
[0, 0] |
padding |
Corresponds to the setting of the margin padding for both top left and bottom right. The same value is set. | Point |
[0, 0] |
maxZoom |
The maximum possible zoom you can use. | int |
null |