Map Markers flashing on load and zoom level ignored

[Colin Paterson]

When the map first renders the zoomSettings seem to be ignored and the markers I have specified flash for about 10 seconds. After the flashing stops the zoomSettings only kick in once I click on the zoom-in button. Then the zoom settings are fine.

Here's the configuration of the map

<ejs-maps id="all-visitors" load="load" height="700px" width="100%">
    <e-maps-zoomsettings zoomSettings="zoom" enable="true" EnablePanning="true" PinchZooming="true" MouseWheelZoom="true" minZoom=3 maxZoom=20></e-maps-zoomsettings>
    <e-maps-layers>
        <e-maps-layer shapeData="ViewBag.WorldMap">
            <e-layersettings-markers>
                <e-layersettings-marker visible="true" shape="Circle" fill="darkred" border="border" animationDuration="500" dataSource="@Model.VisitLocations"></e-layersettings-marker>
            </e-layersettings-markers>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>

@{
    var zoom = new Syncfusion.EJ2.Maps.MapsZoomSettings
    {
        Enable = true,
        ZoomFactor = 3
    };


    var border = new Syncfusion.EJ2.Maps.MapsBorder
    {
        Width = 1,
        Color = "red",
        Opacity = 1
    };
}


<script>
    function load(args) {
        var maps = document.getElementById('all-visitors').ej2_instances[0];


        maps.zoomSettings.toolbarSettings.orientation ="Vertical";
        maps.zoomSettings.toolbarSettings.backgroundColor = "white";
        maps.zoomSettings.toolbarSettings.borderWidth = 3;
        maps.zoomSettings.toolbarSettings.borderColor = "grey";
        maps.zoomSettings.toolbarSettings.verticalAlignment = "Near";
        maps.zoomSettings.toolbarSettings.horizontalAlignment = "Far";


        maps.zoomSettings.toolbarSettings.buttonSettings.fill = "white";
        maps.zoomSettings.toolbarSettings.buttonSettings.color = "black";
        maps.zoomSettings.toolbarSettings.buttonSettings.bordercolor = "grey";
        maps.zoomSettings.toolbarSettings.buttonSettings.borderwidth = 2;
        maps.zoomSettings.toolbarSettings.buttonSettings.opacity = 0.6;
        maps.zoomSettings.toolbarSettings.buttonSettings.toolbarItems = ['ZoomIn', 'ZoomOut' ];
    }
</script>

[Nishanthi Panner Selvam]

Hi Colin,

Greetings from Syncfusion

We have analyzed the code snippet you shared, and based on that, we recommend setting the zoomFactor directly within the zoomSettings tag, as shown in the updated code snippet below. Additionally, please ensure to refresh the map once after applying the zoom toolbar settings:

<ejs-maps id="maps" load="load">

    <e-maps-zoomsettings enable="true" EnablePanning="true" PinchZooming="true" MouseWheelZoom="true" minZoom=3 maxZoom=20 zoomFactor="3"></e-maps-zoomsettings>

</ejs-maps>

function load(args) {

     if (isLoadEventTriggered) {

         return;  // Prevent the load function from running again

     }

     isLoadEventTriggered = true;  // Set the flag to true to indicate the event has been triggered

     var maps = document.getElementById('maps').ej2_instances[0];

     maps.refresh();

}

GIF:

If the issue persists, could you please provide a video showing the issue? If possible, kindly try to replicate the problem in the attached sample so that we can better assist you.

We sincerely appreciate your understanding and cooperation in helping us troubleshoot this. Your input will help us provide the most accurate solution.

Regards,

Nishanthi

Attachment: CoreMaps_1da4e838.zip

[Colin Paterson]

This works and the sample helps. In terms of the code snippet for future reference it should be like so:

<script>

    var isLoadEventTriggered = false;

    function load(args) {


        if (isLoadEventTriggered) {
            return;  // Prevent the load function from running again
        }
        isLoadEventTriggered = true;  // Set the flag to true to indicate the event has been triggered

        var maps = document.getElementById('all-visitors').ej2_instances[0];

        maps.zoomSettings.toolbarSettings.orientation ="Vertical";
        maps.zoomSettings.toolbarSettings.backgroundColor = "white";
        maps.zoomSettings.toolbarSettings.borderWidth = 3;
        maps.zoomSettings.toolbarSettings.borderColor = "grey";
        maps.zoomSettings.toolbarSettings.verticalAlignment = "Near";
        maps.zoomSettings.toolbarSettings.horizontalAlignment = "Far";

        maps.zoomSettings.toolbarSettings.buttonSettings.fill = "white";
        maps.zoomSettings.toolbarSettings.buttonSettings.color = "black";
        maps.zoomSettings.toolbarSettings.buttonSettings.bordercolor = "grey";
        maps.zoomSettings.toolbarSettings.buttonSettings.borderwidth = 2;
        maps.zoomSettings.toolbarSettings.buttonSettings.opacity = 0.6;
        maps.zoomSettings.toolbarSettings.buttonSettings.toolbarItems = ['ZoomIn', 'ZoomOut' ];

        maps.refresh();
    }
</script>

[Nishanthi Panner Selvam]

Colin,

We are glad to know that the reported scenario got resolved. Please get back to us if you need further assistance.

Regards,

Nishanthi