title: How to load dynamically many markers with Leaflet using VueJs?
body: <p>I have a webapp that displays many markers on a map that are loaded dynamically when the user moves the map around. I call an API with the bounds and get back a list of markers.</p>
  <h3>The current solution</h3>
  <pre><code>&lt;l-map v-if=&quot;showMap&quot; :zoom=&quot;zoom&quot; :center=&quot;center&quot; @update:bounds=&quot;boundsUpdated&quot; style=&quot;height: 100%&quot;&gt;
      &lt;l-tile-layer :url=&quot;url&quot; :attribution=&quot;attribution&quot;/&gt;
      &lt;l-marker v-for=&quot;marker in markers&quot; :key=&quot;marker.id&quot; :lat-lng=&quot;marker.coordinates&quot; &gt;
        &lt;l-icon
            icon-url=&quot;https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png&quot;&gt;
        &lt;/l-icon&gt;
      &lt;/l-marker&gt;
  &lt;/l-map&gt;
  
  ...
  
  mounted() {
      let thisClass = this;
      EventBus.$on('new_markers', function (payLoad) {
        for (const marker of payLoad) {
          thisClass.markerMap[marker.id] = marker;
        }
        thisClass.markers = Object.values(thisClass.markerMap)
      });
    },
  </code></pre>
  <p>Based on how slow it is to render the markers and how hot my laptop gets, I assume it is rendering all the markers every time.</p>
  <h3>My question</h3>
  <p>How to load with leaflet only the markers that are new in the list of markers and not the entire list every time?</p>