Skip to content

Bug: strange delay speed for some lines #178

Description

@SAbolfazlSH

Type:

  • bug

Environment:

  • OS: Windows10, Linux
  • Browser: firefox(last version), chrome(last version), ...
  • Library Version: 1.3.0

Description:
hey everyone I hope your doing great
recently i used this library in my project, but i found a critical bug in delay option of lines
sometimes some lines will display at a strange and different delay speed after the map and AntPath will loading
I made sure that my code does not have any bug so i wrote this static example for testing
and it does not have any different when the page will refresh or this trigger button will pressed, this bug will happening sometimes anyway

bug:
main

the vue3 code:

<template>
  <div>
    <button @click="trigger">{{ display ? 'show' : 'hide' }}</button>
    <div v-if="display" id="map" :style="{height: '300px', width: '300px'}"></div>
  </div>
</template>

<script setup>
import leaflet from 'leaflet'
import { AntPath } from 'leaflet-ant-path'
import { onMounted, ref, nextTick } from 'vue'

const display = ref(true)

const trigger = () => {
  display.value = !display.value
  if(display.value) nextTick(() => { init() })
}

const init = () => {
  const map = leaflet.map('map', {
    minZoom: 3,
    maxZoom: 23,
    fullscreenControl: true,
    drawControl: true
  }).setView([35.6996774, 51.3376701], 11);

  leaflet.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    maxZoom:19,
    minZoom: 1,
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);
  map.addLayer(new AntPath([{lat: 35.72488256155388, lng: 51.41975477778468}, {lat: 35.72484256186000, lng: 51.41979000000000}], { delay: 100 }))
  map.addLayer(new AntPath([{lat: 35.72484256186000, lng: 51.41979000000000}, {lat: 35.72494256186000, lng: 51.41979000000000}], { delay: 10000 }))
  map.addLayer(new AntPath([{lat: 35.72494256186000, lng: 51.41979000000000}, {lat: 35.72494256186000, lng: 51.41990000000000}], { delay: 100 }))
  map.addLayer(new AntPath([{lat: 35.72494256186000, lng: 51.41990000000000}, {lat: 35.72496256186000, lng: 51.41980000000000}], { delay: 10000 }))
  map.fitBounds([
    {lat: 35.72484256155388, lng: 51.41976477778468}, {lat: 35.72484256186000, lng: 51.41979000000000},
    {lat: 35.72494256186000, lng: 51.41979000000000}, {lat: 35.72494256186000, lng: 51.41990000000000}
  ], { padding: [60, 60] });
}
onMounted(init)
</script>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions