Loading GeoJson without about 350 items seems to overwhelm

[Craig1f]

I'm loading about 350 geojson objects, which represents countries. In regular leaflet, they load instantaneously. In ui-leaflet, it causes the page to freeze to the point that it starts showing the user popup warnings. It eventually loads after about 20 seconds.

I'm using the geojson attribute on the directive. Am I doing something wrong?

[nmccready]

Try disabling watches and or using directiveControls.

https://github.com/angular-ui/ui-leaflet/blob/47b9d84893b178f6f1e78338109d625aad393ed2/examples/js/controllers/MarkersClustering10000MarkersNoWatchController.js

Once you get directiveControls you can submit your geojson payload like so.

directiveControls.geojson.create($scope.map.geojson)

It has two main functions, create and clean. https://github.com/angular-ui/ui-leaflet/blob/master/src/services/leafletDirectiveControlsHelpers.js#L21-L22

[Craig1f]

We ended up just using leafletData to get a reference to the map object, then used straight leaflet to add the geojson.

What's the advantage of doing it the way you suggest? If I can't use angular bindings, I may as well just use leafletjs directly. I still use ui-leaflet to get the map object back as a promise so I don't have to deal with race-conditions, but I'm not seeing the advantage of using angular bindings on ui-leaflet if it can't handle 350 lines of geojson.

I'll try disabling watchers on Monday and see if that helps.

[nmccready]

@Craig1f correct , I agree with you.

[nmccready]

If anything it uses the same add and clean up logic that it does via the watchers. The only difference is your kicking it off.

[willmorejg]

Same thing here. I was loading 295 features, and the page hung until something (not sure what) completed. I ended up adding the GeoJSON layer directly to the map.

        var paCousubStyle = {
          "fillColor": "gray",
          "weight": 2,
          "opacity": 0.9,
          "color": 'black',
          "dashArray": '3',
          "fillOpacity": 0.1
        };

        $http.get(paCousubDataUrl).then(function(data, status) {
            console.log('data', data.data.features);// get feature count - hacky
            var paCousubGeoJSON = new L.geoJson(data.data, {style: paCousubStyle});

            leafletData.getMap().then(function(map) {
              paCousubGeoJSON.addTo(map);
            });
        });

Originally, I did the following:

        $http.get(paCousubDataUrl).then(function(data, status) {
            angular.extend($scope, {
                geojson: {
                    data: data.data,
                    style: {
                        fillColor: "gray",
                        weight: 2,
                        opacity: 0.9,
                        color: 'black',
                        dashArray: '3',
                        fillOpacity: 0.1
                    }
                }
            });
        });