ReadonlyMAX_The maximum allowed zoom level for the map.
ReadonlyMIN_The minimum allowed zoom level for the map.
Add new features to the layer. These features should be compliant to OGC Simple Features Access standard.
GeoJSON features to be added to the layer.
The name of the layer to add features to.
Add a new feature to the layer. This feature should be compliant to OGC Simple Features Access standard.
A GeoJSON feature to be added to the layer.
A unique name for the new layer.
Add a new feature layer to the map.
A feature layer displays GeoJSON features which can be added with the addFeatureToLayer method.
A unique name for the new layer.
OptionalstyleContext?: SdkFeatureStyleContextStyle context to use in the dynamic styles, optional.
OptionalstyleRules?: SdkFeatureStyleRule[]Style rules to be applied to some features, based on the rule predicate, optional.
OptionalzIndexing?: booleanWhether zIndexing should be applied to the layer. Optional, defaults to false.
This example creates a layer with no styling applied. Features added to this layer will have the default map styling. This is useful when you want to add features to the map but don't need custom styling or when you plan to style them later.
sdk.Map.addLayer({ layerName: "basic_layer" });
This example uses styleRules with a predicate to style features conditionally. Features with the "isHighlighted" property will have a yellow stroke. A default style is also provided for features that do not match the predicate.
Note: style rules are applied in the order they are defined. Later rules have higher priority. Note: predicate also exposes current zoomLevel via the function argument.
sdk.Map.addLayer({
layerName: "predicate_style_layer",
styleRules: [
{
style: { // Default style
strokeColor: "lightgray",
strokeWidth: 5,
},
},
{
predicate: (featureProperties, zoomLevel) => featureProperties.isHighlighted && zoomLevel === 12,
style: {
strokeColor: "yellow",
strokeWidth: 10,
},
},
]
});
This example creates a layer using styleContext for styling. The strokeColor and strokeWidth are dynamically determined by functions in the styleContext.
sdk.Map.addLayer({
layerName: "context_style_layer",
styleContext: {
getStrokeColor: ({ feature, zoomLevel }) => feature?.properties.color ?? "#FF007F",
getStrokeWidth: () => 10,
},
styleRules: [
{
style: {
strokeColor: "${getStrokeColor}",
strokeWidth: "${getStrokeWidth}",
},
},
]
});
This example uses styleRules with a predicate to draw a feature with external graphic conditionally. Features with the "redCircle" property will draw a red circle. Features with 'blueSquare' property will draw a blue square.
The externalGraphic property accepts both base64 and url encoded images. In the example below the base64 encoded svg images are used.
const redCircleImage = 'data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxlbGxpcHNlIHN0eWxlPSJmaWxsOnJlZDsgc3Ryb2tlOm5vbmUiIGN4PSIxMCIgY3k9IjEwIiByeD0iMTAiIHJ5PSIxMCI+PC9lbGxpcHNlPjwvc3ZnPgo='
const blueSquareImage = 'data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgc3R5bGU9ImZpbGw6Ymx1ZTtzdHJva2U6bm9uZSIgLz48L3N2Zz4K'
sdk.Map.addLayer({
layerName: "marker_layer",
styleRules: [
{
predicate: (featureProperties) => featureProperties.redCircle,
style: {
externalGraphic: redCircleImage,
fillOpacity: 1,
},
},
{
predicate: (featureProperties) => featureProperties.blueSquare,
style: {
externalGraphic: blueSquareImage,
fillOpacity: 1,
},
},
],
});
sdk.Map.addFeatureToLayer({
layerName: "marker_layer",
feature: {
id: "marker_1",
type: "Feature",
geometry: {
type: "Point",
coordinates: [-36.44069, 39.42386],
},
properties: {
redCircle: true,
},
},
})
Add a raster tile layer to the map. A raster tile layer loads tile images from the provided server url and displays them based on the viewed location.
The name of a layer to be added.
Layer display options, including details for building tile server url
centers the map on the given geometry's center
the GeoJSON geometry to center the map on to
TL;DR: Do not use this method. Use addFeatureToLayer or addFeaturesToLayer methods instead.
This method provides a mechanism to add features to a layer, bypassing standard validation. Only use this method when features are known to be invalid according to the OGC Simple Features Access standard and cannot be corrected, for example, in situations where features are too complex to debug but still need to be displayed.
Limitations and Risks:
GeoJSON features to be added to the layer.
The name of the layer to add features to.
Draw a line on the map. The feature will not stay on the map.
a new LineString geometry
Draw a point on the map.
Optionally, if the snapTo parameter is set to "segment", the point will be snapped to the nearest segment.
(the point will be projected onto the nearest segment).
The feature will not stay on the map.
a new point geometry that was drawn on the map.
InvalidStateError if not allowed to draw on the map or the draw has been cancelled or
if snapTo is set to "segment" but there is no segment to project the point onto.
// Draw a point without snapping.
const point = await sdk.Map.drawPoint();
console.log(point.coordinates); // Output: [longitude, latitude]
// Draw a point and snap it to the nearest segment.
const snappedPoint = await sdk.Map.drawPoint({ snapTo: "segment" });
console.log(snappedPoint.coordinates); // Output: [longitude, latitude] (projected onto the segment)
Draw a polygon on the map. The feature will not stay on the map.
a new polygon geometry or null if an invalid polygon was drawn.
The id of a feature to retrieve the element for.
The name of the layer a feature should be searched within.
a DOM element of a feature on the map within the given layer.
The return value is HTMLElement in case it's a marker, and SVGElement otherwise.
null if a feature with provided featureId does not exist within the layer.
a link to the LiveMap with the current map state
Converts map pixel coordinates to geographic coordinates (WGS84).
This method takes pixel coordinates relative to the top-left corner of the map component and returns the corresponding geographic coordinates. These map-relative pixel coordinates are typically obtained from map events (SdkMouseEvent).
Horizontal position of the pixel, relative to the left edge of the map component.
Vertical position of the pixel, relative to the top edge of the map component.
the coordinates in WGS84 format, corresponding to the given pixel.
Converts screen pixel coordinates to geographic coordinates (WGS84).
This method takes pixel coordinates relative to the top-left corner of the screen and returns the corresponding geographic coordinates.
Horizontal position of the pixel, relative to the left edge of the screen.
Vertical position of the pixel, relative to the top edge of the screen.
the coordinates in WGS84 format, corresponding to the given pixel.
the map's current center coordinates in WGS84 format
the map's currently visible area as a GeoJSON BBox which is an array of coordinates in WGS84 format in the following order: [left, bottom, right, top]
Converts geographic coordinates (WGS84) to map pixel coordinates.
This method takes geographic coordinates and returns the corresponding pixel coordinates relative to the top-left corner of the map component. These map-relative pixel coordinates could be also obtained from map events (SdkMouseEvent).
the map pixel coordinates corresponding to the given geographic coordinates in WGS84 format.
The current resolution of the map. Map resolution defines the number of map units per pixel at the current zoom level.
OptionalincludeLayers?: booleantrue if the permalink should include the layers settings, defaults to false
the current WME permalink
Converts geographic coordinates (WGS84) to screen pixel coordinates.
This method takes geographic coordinates and returns the corresponding pixel coordinates relative to the top-left corner of the screen.
the screen pixel coordinates corresponding to the given geographic coordinates in WGS84 format.
the map's current zoom level
true if the street view pane is active
Remove a feature from the layer by id.
An id of the feature to be removed.
A name of the layer to add the feature
Remove features from the layer by id.
Ids of the features to be removed.
A name of the layer to remove the feature from.
Change map layer opacity level (layer must be created through the SDK).
A name of the layer to change opacity for.
New opacity for the layer - a float number between 0.0 and 1.0.
Change map layer visibility (layer must be created through the SDK).
A name of the layer to change visibility for.
If layer should be visible or not.
zoom in to the next zoom level
zoom out to previous zoom level
Methods for dealing with the map.