OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

VueJS leaflet fitBounds not working without timeout

  • Thread starter Thread starter Waldo
  • Start date Start date
W

Waldo

Guest
I have an issue with leaflet in VueJS 3. I'm creating a leaflat map with markers, but I have to use a setTimeout-function to make the fitBounds() work. Without the setTimeout I see the map with zoomlevel 0 (Complete world). Currently my code looks like this to create the leaflet map:

Code:
setup(props, { emit }) {
        onMounted( () => {

            const defLatitude = props.visitData.visitgpslatitude;
            const defLongitude = props.visitData.visitgpslongitude;


            var maps = L.map("mapContainer");
            L.tileLayer("https://maps.omniscale.net/v2/{3}/style.default/{z}/{x}/{y}.png", {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                maxZoom: 18
            }).addTo(maps);
            //use a mix of renderers
            var customPane = maps.createPane("customPane");
            var canvasRenderer = L.canvas({ pane: "customPane" });
            customPane.style.zIndex = 399; // put just behind the standard overlay pane which is at 400
            
            var group = L.featureGroup();

            group.addTo(maps);




            //Visit icon
            var visitIcon = L.divIcon({
                className: "marker-visit",
                iconSize: [25, 41],
                iconAnchor: [10, 44],
                popupAnchor: [3, -40]
            });
            const visitMarker = new L.Marker([defLatitude, defLongitude], {icon: visitIcon});
            visitMarker.addTo(group);

            if(props.taskData != null) {
                for(var i = 0; i < props.taskData.length; i++) {
                    const task = props.taskData[i];
                    var numberIcon = L.divIcon({
                        className: "avn-marker-task marker-task",
                        iconSize: [25, 41],
                        iconAnchor: [10, 44],
                        popupAnchor: [3, -40],
                        html: "" + (i + 1)       
                    });
                    if(typeof task.latitude != "undefined" && typeof task.longitude != "undefined") {
                        const taskMarker = new L.Marker([task.latitude,task.longitude], {icon: numberIcon});
                        group.addLayer(taskMarker);
                    }
                }
            }
            window.setInterval(function () {
                maps.invalidateSize();
            }, 2);

            setTimeout(function () {
                maps.fitBounds(group.getBounds());
            }, 3500);

            
        });        
    }

How can I get rid of the setTimeout function, to fit instantly?

Sven

<p>I have an issue with leaflet in VueJS 3. I'm creating a leaflat map with markers, but I have to use a setTimeout-function to make the fitBounds() work. Without the setTimeout I see the map with zoomlevel 0 (Complete world). Currently my code looks like this to create the leaflet map:</p>
<pre><code>setup(props, { emit }) {
onMounted( () => {

const defLatitude = props.visitData.visitgpslatitude;
const defLongitude = props.visitData.visitgpslongitude;


var maps = L.map("mapContainer");
L.tileLayer("https://maps.omniscale.net/v2/{3}/style.default/{z}/{x}/{y}.png", {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 18
}).addTo(maps);
//use a mix of renderers
var customPane = maps.createPane("customPane");
var canvasRenderer = L.canvas({ pane: "customPane" });
customPane.style.zIndex = 399; // put just behind the standard overlay pane which is at 400

var group = L.featureGroup();

group.addTo(maps);




//Visit icon
var visitIcon = L.divIcon({
className: "marker-visit",
iconSize: [25, 41],
iconAnchor: [10, 44],
popupAnchor: [3, -40]
});
const visitMarker = new L.Marker([defLatitude, defLongitude], {icon: visitIcon});
visitMarker.addTo(group);

if(props.taskData != null) {
for(var i = 0; i < props.taskData.length; i++) {
const task = props.taskData;
var numberIcon = L.divIcon({
className: "avn-marker-task marker-task",
iconSize: [25, 41],
iconAnchor: [10, 44],
popupAnchor: [3, -40],
html: "" + (i + 1)
});
if(typeof task.latitude != "undefined" && typeof task.longitude != "undefined") {
const taskMarker = new L.Marker([task.latitude,task.longitude], {icon: numberIcon});
group.addLayer(taskMarker);
}
}
}
window.setInterval(function () {
maps.invalidateSize();
}, 2);

setTimeout(function () {
maps.fitBounds(group.getBounds());
}, 3500);


});
}
</code></pre>
<p>How can I get rid of the setTimeout function, to fit instantly?</p>
<p>Sven</p>
 
Top