Creating a hotspot layer
Use the hotspot.Layer class to create the hotspot layer. In its constructor, pass the data source that was defined previously, and any additional options that are necessary:
var hotspotLayer = new ymaps.hotspot.Layer(**objSource**, {
hasBalloon: false // the balloon field will not be created for the layer
});
Then the layer must be added to the map:
myMap.layers.add(hotspotLayer);
The complete text of the example (with adding the image layer to the map) is provided below:
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map('map', {
center: [55.709243, 37.500737],
zoom: 9
}, {
// In our example, there are hotspots for zoom levels 9 and 10 only.
// So we are limiting the range of zoom levels on the map.
minZoom: 9,
maxZoom: 10
});
// Adding the zoom level control to the map.
myMap.controls.add('smallZoomControl', { top: 5 });
// URL template for hotspot data.
// The data source will request data via a URL with the format:
// '.../hotspot_layer/hotspot_data/9/tile_x=1&y=2', where
// x and y are the number of the tile that data is requested for, and
// 9 is the value of the map zoom level.
var tileUrlTemplate = 'examples/maps/ru/hotspot_layer/hotspot_data/%z/tile_x=%x`&`y=%y',
// The template for the callback function that the server will wrap the tile data in.
// Example of the callback function after substitution - 'testCallback_tile_x_1_y_2_z_9'.
keyTemplate = 'testCallback_tile_%c',
// URL for image layer tiles.
// Example of the URL after substitution -
// '.../hotspot_layer/_images/9/tile_x=1&y=2.png'.
imgUrlTemplate = 'examples/maps/ru/hotspot_layer/_images/%z/tile_x=%x&y=%y.png',
// Creating a data source for the hotspot layer.
objSource = new ymaps.hotspot.ObjectSource(tileUrlTemplate, keyTemplate),
// Creating the image layer and the hotspot layer.
imgLayer = new ymaps.Layer(imgUrlTemplate, {tileTransparent: true}),
hotspotLayer = new ymaps.hotspot.Layer(objSource, {cursor: 'help'});
// Adding layers to the map.
myMap.layers.add(hotspotLayer);
myMap.layers.add(imgLayer);
}