Vue2leaflet: Realtime data update with GeoJSON

[pumano]

Description

I have simple code:

<v-map class="map" ref="mymap" :zoom="11" :center="[55.7541, 37.6195]" :maxZoom="17">
      <v-tilelayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></v-tilelayer>
      <v-geo-json
        :geojson="geojson"
        :options="options"
        :options-style="styleFunction"
      />
</v-map>

I got data from websocket and want to update data points inside my map, but looks like it only add points if geojson property is updated with new data (that cause memory leak).
How to properly implement removing all circle points (I have around 3-4K points) and then load new points via <v-geo-json>?
I try to use this.$refs.geojsonelem.clearLayers(), but it not working. How to properly get reference to v-geo-json instance?

Steps to Reproduce

Expected Results

It's nice to have got updated redrawed geojson when new data populated via :geojson binding.

Actual Results

add data points use addData()? and fresh data concatenated to existed or not properly updated (which cause memory leak)

Browsers Affected

• [x] Chrome
• [ ] Firefox
• [ ] Edge
• [ ] Safari 9
• [ ] Safari 8
• [ ] IE 11

Versions

• Leaflet: v1.4.0 (but looks like I use L instance from Vue2Leaflet which is not fresh 1.4.0)
• Vue: v2.5.22
• Vue2Leaflet: v1.2.3

[DonNicoJs]

Hi! you can access leaflet api via: mapObject => https://korigan.github.io/Vue2Leaflet/#/quickstart?id=accessing-leaflet-api

I hope this helps, let me know if you need more info / help

[bezany]

@pumano Under hood LGeoJSon use clearLayers function, see here
In case when all points change position you can simple replace old geojson object for new.
If you want update some part of exists GeoJSON then see approach here
Also see leaflet-realtime project.

[pumano]

@bezany thanks for this. I got it! But don't figure out, why memory leak happens with huge amount of objects (I have 5-6K points) realtime.

[pumano]

Looks like vuetified version of leaflet can't update properly data. Pure leaflet give me something to non-leakable solution with realtime updates for 6k data points per sec.

[DonNicoJs]

@pumano could you help us to fix this by giving us a sample data set ? and possibly (part) your code?

[pumano]

@lordfuoco I prepared worked demo with pure leaflet: https://stackblitz.com/edit/typescript-leaflet-loadtest-5k-markers
You can check it.

I also use chrome task manager for checking memory issues:
chrome => additional instruments => task manager

[DonNicoJs]

@pumano thank you, I will take a look

[pumano]

@lordfuoco https://stackblitz.com/edit/typescript-vuejs-leaflet-5k-load-test - it's closest vue example with memory leak. I got same result using <v-geo-json/>.

[bezany]

@pumano Very interesting case. I found some difference in pure-leafelt version and vue2-leaflet version. Compare functions setMarkers and generator. In pure-leaflet version function setMarkers call new L.CircleMarker only on first call. Another calls do not re-create markers, only change positions with setLatLng.
In vue2-leafelt version markers array replaced every interval tick and under hood re-crate L.CircleMarker.
Anyway, memory leak exist. But I created small example how avoid recreated markers every tick. See https://stackblitz.com/edit/typescript-vuejs-leaflet-5k-load-test-ryjho6
Main idea: no recreate array every tick, only change markers positions. It version not have memory leak, memory usage stable around 420 mb. (memory usage of pure leaflet version stable around 130 mb).
For now, it's all ideas.

[DonNicoJs]

@bezany you are my MVP :) i have some ideas on how to implement all of this. but I need a 2.0 stable and out. and finish the docs for it.
I did not receive much testing feedback and I am a bit afraid to push it out as it is!
Thanks to you and @pumano

[DonNicoJs]

@bezany how do you propose we move forward with this ? do you want to submit a PR or shall I take this head on?

[bezany]

@DonNicoJs I try now run example with memory problem. And now memory grow to 1GB and free to 500MB in newest Chrome . I think it is not memory leak, it is many objects and interval between GC calls.
I think we should not try to identify change instead Vue.
But I know interesting trick, that can be helpful for @pumano
Usage Object.freeze. It is disable reactive system for big objects if this objects never partially change, only full replace.
See this Evan You comment.
I create changed version with with approach. See here. Demo
Memory usage stable around ~ 400MB.
I think issue may be closed.

[DonNicoJs]

Closing this! We should add something to the docs about big dictionaries in data / computed / vuex