Objects on the map
In the Yandex Maps API, you can add various objects to the map:
- Data sources.
- Layers.
- Geo objects.
- Markers.
Data sources
The Yandex Maps API distinguishes the following data sources:
- Tile source.
- Source for geo objects.
Tile data source
This source is the YMapTileDataSource class. The class's main task is storing data about where to load the tiles from and how to render them.
The lass is mostly used to display tiles by the link:
const map = new YMap(element, {
location: {center: [25.229762, 55.289311], zoom: 14},
mode: 'vector'
});
map.addChild(
new YMapTileDataSource({
id: 'urlSource',
raster: {
type: 'tiles',
// x, y — tile coordinates;
// z — zoom;
// scale — scale for various DevicePixelRatio.
fetchTile: 'https://sitename.com/?x={{x}}&y={{y}}&z={{z}}&scale={{scale}}'
}
})
);
As an extended option, you can use an asynchronous function that returns HTMLImageElement or HTMLCanvasElement as the raster.fetchTile parameter:
const tileSize = 256;
async function fetchTile(tileX, tileY, tileZ) {
const canvas = document.createElement('canvas');
canvas.width = tileSize;
canvas.height = tileSize;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#000000';
ctx.fillText(`${tileX}:${tileY}:${tileZ}`, 10, 10);
return {image: canvas};
}
map.addChild(
new YMapTileDataSource({
id: 'tileGeneratorSource',
raster: {
type: 'tiles',
fetchTile: fetchTile,
fetchHotspots: fetchHotspots,
transparent: true,
size: tileSize
}
})
);
Data source for geo objects
The YMapFeatureDataSource class serves as the data source for geo objects.
Example of creating the class:
map.addChild(
new YMapFeatureDataSource({
id: 'featureSource'
})
);
Layers
Can be metaphorically described as a puff pastry. Each YMapLayer instance can be displayed above or below another instance that belongs to the same class.
You can set the order in which the layers are displayed by the order in which you add the layers to the map or using the zIndex parameter (by default, the value specified in YMapLayer.defaultProps.zIndex is used).
Alert
Each layer displays data from a specific data source, so be sure to add sources to the map before adding layers.
Examples:
map.addChild(
new YMapLayer({
source: 'urlSource',
type: 'tiles'
})
);
map.addChild(
new YMapLayer({
source: 'tileGeneratorSource',
type: 'tiles',
zIndex: 2000,
raster: {
// Use this option to wait until all visible tiles load before displaying them.
awaitAllTilesOnFirstDisplay: true,
// This option sets the duration of the loaded tiles' display animation
tileRevealDuration: 0
}
})
);
map.addChild(
new YMapLayer({
source: 'markerSource',
type: 'markers',
zIndex: 2020
})
);
map.addChild(
new YMapLayer({
source: 'featureSource',
type: 'features',
zIndex: 2010
})
);
The layers will be displayed as follows:
urlSourcetileGeneratorSourcefeatureSourcemarkerSource
For convenient usage, the following default layers are provided:
YMapDefaultSchemeLayercombines a tile data source and a set of layers to display the schematic Yandex map.YMapDefaultFeaturesLayercombines a data source for geo objects and a layer for displaying it. It also adds a layer for displaying DOM elements.
Geo objects
There are two types of geo objects in the API: a polyline and a polygon.
Each object is described by geometry that is defined by type, coordinates, and display style. For example, you can set the color of a form or the thickness of a line.
Polyline
Type: LineString.
Usage example:
const lineStringFeature = new YMapFeature({
id: 'line',
source: 'featureSource',
geometry: {
type: 'LineString',
coordinates: [
[25.129762, 55.189311],
[25.329762, 55.389311]
]
},
style: {
stroke: [{width: 12, color: 'rgb(14, 194, 219)'}]
}
});
map.addChild(lineStringFeature);
Polygon
Type: Polygon.
Usage example:
const polygonFeature = new YMapFeature({
id: 'polygon',
source: 'featureSource',
geometry: {
type: 'Polygon',
coordinates: [
[
[25.029762, 55.189311],
[25.229762, 55.289311],
[25.329762, 55.389311]
]
]
},
style: {
stroke: [{width: 6, color: 'rgb(14, 194, 219)'}],
fill: 'rgba(56, 56, 219, 0.5)'
}
});
map.addChild(polygonFeature);
Markers
A marker is an HTML container linked to a point on the map. Use it to display a custom layout on the map.
Usage example:
const markerElement = document.createElement('div');
markerElement.className = 'marker-class';
markerElement.innerText = "I'm marker!";
const marker = new YMapMarker(
{
source: 'markerSource',
coordinates: [25.229762, 55.289311],
draggable: true,
mapFollowsOnDrag: true
},
markerElement
);
map.addChild(marker);