javascript - Dynamic change font-size in Leaflet marker tooltip text on zoom change - Stack Overflow

admin管理员组

文章数量:1335103

I show some text on map, I did this by this example

Rotate Lealfet markers tooltip text

I need to see smaller text if zoom out and text should be larger when I zoom in.

mymap.on('zoomend', function () {
    var zoomLevel = mymap.getZoom();
    var tooltip = $('.leaflet-tooltip');

    switch (zoomLevel) {
        case -2:
            tooltip.css('font-size', 7);
            break;
        case -1:
            tooltip.css('font-size', 10);
            break;
        case 0:
            tooltip.css('font-size', 12);
            break;
        case 1:
            tooltip.css('font-size', 14);
            break;
        case 2:
            tooltip.css('font-size', 16);
            break;
        case 3:
            tooltip.css('font-size', 18);
            break;
        default:
            tooltip.css('font-size', 14);
    }
}

I guess this is not by the book solution and I want to ask for a better way for changing font size dynamically to follow map size on zoom in or zoom out.

I show some text on map, I did this by this example

Rotate Lealfet markers tooltip text

I need to see smaller text if zoom out and text should be larger when I zoom in.

mymap.on('zoomend', function () {
    var zoomLevel = mymap.getZoom();
    var tooltip = $('.leaflet-tooltip');

    switch (zoomLevel) {
        case -2:
            tooltip.css('font-size', 7);
            break;
        case -1:
            tooltip.css('font-size', 10);
            break;
        case 0:
            tooltip.css('font-size', 12);
            break;
        case 1:
            tooltip.css('font-size', 14);
            break;
        case 2:
            tooltip.css('font-size', 16);
            break;
        case 3:
            tooltip.css('font-size', 18);
            break;
        default:
            tooltip.css('font-size', 14);
    }
}

I guess this is not by the book solution and I want to ask for a better way for changing font size dynamically to follow map size on zoom in or zoom out.

• javascript
• css
• leaflet

Share Improve this question Follow asked Dec 22, 2017 at 14:46 Stevan TosicStevan Tosic 7,2491313 gold badges6464 silver badges120120 bronze badges 6

• Your current solution seems good to me. Why do you want to change it? – Halcyon Commented Dec 22, 2017 at 14:47
• There is a time gap between zoom before font size is changed :/ – Stevan Tosic Commented Dec 22, 2017 at 14:49
• Then change it to zoomstart? – Halcyon Commented Dec 22, 2017 at 14:50
• Good point! There are known data for next zoom level on zoomstart or there is data only for direction where zoom goes? – Stevan Tosic Commented Dec 22, 2017 at 14:52
• Check the event properties. I have no experience with leaflet. – Halcyon Commented Dec 22, 2017 at 14:54

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 6

So I just change event from zoomend to zoomstart and there is no more big time gap between zooming and font changing.

mymap.on('zoomstart', function () {
    var zoomLevel = mymap.getZoom();
    var tooltip = $('.leaflet-tooltip');

    switch (zoomLevel) {
        case -2:
            tooltip.css('font-size', 7);
            break;
        case -1:
            tooltip.css('font-size', 10);
            break;
        case 0:
            tooltip.css('font-size', 12);
            break;
        case 1:
            tooltip.css('font-size', 14);
            break;
        case 2:
            tooltip.css('font-size', 16);
            break;
        case 3:
            tooltip.css('font-size', 18);
            break;
        default:
            tooltip.css('font-size', 14);
    }
});

本文标签： javascriptDynamic change fontsize in Leaflet marker tooltip text on zoom changeStack Overflow