2.1.50 (current version)
2.1.52 (release candidate)

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:


The complete text of the example (with adding the image layer to the map) is provided below:


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.