Always Show Marker Tooltip

Environment

Product Map for ProgressĀ® Kendo UIĀ®

Description

The map markers have tooltips the user can show by hovering with the mouse. In some cases, you may want them to show up automatically when the map loads.

To do this, you need to loop the markers, and call the .show() method of their tooltips. You can do this after the map initializes and in its events.

Solution

<div id="map"></div>

<script>
    function createMap() {
        var map = $("#map").kendoMap({
            center: [30.268107, -97.744821],
            zoom: 3,
            layers: [{
                type: "tile",
                urlTemplate: "http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
                subdomains: ["a", "b", "c"],
                attribution: "&copy; <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>"
            }],
            markerDefaults: { //make tooltips "sticky" by default
                tooltip: {
                    autoHide: false
                }
            },
            markers: [{
                location: [30.268107, -97.744821],
                shape: "pinTarget",
                tooltip: {
                    content: "Austin, TX"
                }
            }, {
                location: [40.7128, -74.0060],
                shape: "pinTarget",
                tooltip: {
                    content: "New York, NY"
                }
            }],
            zoomEnd: function (e) { //when the user zooms or pans, re-show the tooltips
                showTooltips(e.sender);
            },
            panEnd: function (e) {
                showTooltips(e.sender);
            }
        }).data("kendoMap");
        return map;
    }

    $(document).ready(function () {
        var map = createMap();
        showTooltips(map); //show the tooltips initially
    });

    function showTooltips(map) {
        setTimeout(function () {
            var extent = map.extent(); //we use this to only show tooltips for markers that are visible
            for (var i = 0; i < map.markers.items.length; i++) {
                if (extent.contains(map.markers.items[i].options.location)) {
                    map.markers.items[i].tooltip.show();//show the tooltips
                }
            }
        }, 500); //kinetic scrolling and loading new content can cause concurrency issues if no timeout is present. You can test smaller values if you like, though
    }
</script>

<style>
    /* remove the manual close button from the tooltips so the user can't dismiss them and the are more like labels */

    div.k-tooltip-button {
        display: none;
    }

    div.k-tooltip div.k-tooltip-content {
        padding-right: 0;
    }
</style>
In this article
Not finding the help you need? Improve this article