GeoJson Performance Issues

[mikebronner]

I'm using complex GeoJson data (state and county borders), which is turning out to be a degradation on performance. Currently I have dynamic markers that will show on the map based on a slider. This is very dynamic and fluid, with no performance issues.

However, when doing the same with large, complex Polygons and Multipolygons in GeoJson layers, performance grinds to a halt, making the web application almost unusable (the sliders are no longer responsive, etc).

Are there any recommendation to improving performance for large GeoJson data sets?

• I'm pre-loading all GeoJson data into a Javascript variable (eliminating any run-time loading penalties).
• I'm filtering the dataset using Vue computed properties.

Here is the code I'm using to render the polygons:

            <l-map :ref="'map'"
                :center="mapCenter"
                @click="click"
                :options="mapOptions"
                :zoom="14"
            >
                <l-zoom
                    v-if="showControlsAndAttributions"
                    :position="'topleft'"
                ></l-zoom>
                <l-attribution
                    :prefix="''"
                    :position="'bottomright'"
                    v-if="showControlsAndAttributions"
                ></l-attribution>
                <l-tile-layer :url="'https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png'" attribution="Map tiles by <a href='http://stamen.com'>Stamen Design</a>, under <a href='http://creativecommons.org/licenses/by/3.0'>CC BY 3.0</a>. Data by <a href='http://openstreetmap.org'>OpenStreetMap</a>, under <a href='http://www.openstreetmap.org/copyright'>ODbL</a>."></l-tile-layer>
                <l-geo-json
                    v-for="polygon in filteredPolygons"
                    :key="polygon.id"
                    :geojson="polygon.geometry"
                    :options="{style: {color: '#ff0000', weight: 2, opacity: 0.25}}"
                ></l-geo-json>
            </l-map>

        filteredPolygons: function () {
            var self = this;
            var polygons = _.filter(this.geoJson, function (polygon) {
                return (polygon.properties.start_year <= self.timeframe[1]
                        && polygon.properties.end_year >= self.timeframe[1]);
            });

            return polygons;
        },

Thanks for any suggestions or help you can provide. :)

[nmezzopera]

@mikebronner yes its a known issue not of this library but vue in general, the point is that geoJSON are made of millions of properties, when you slam them in the reactivity system it just gives up. Put them OUTSIDE the reactivity ( out of data and computed ) and the app will go back to be fast.

If you can't put them out, a deep freeze will also help (but is a slow operation )

[mikebronner]

Agreed, I figured the same after reading this: vuejs/vue#2000

Since then I've moved to setting up a GeoServer to handle the mapping data, which is much more effective. Thanks!