how can I determine when Google Maps loadGeoJson completes?

Question

I have a scenario where users can store their mapping styling. When a user navigates back to that page with the map it should display the map the way it was previously.

The user can change colors of geographies, and borders as well as apply thematic styles based on demographic information.

With the release of the new loadGeoJson I have had great success with speeding up my application, Initially I was drawing all of the geographies myself, via JS. This was causeing some memory issues at around 1500 geographies. This new functionality decreases it significantly. I am choosing to generate the Features objects on the server side and just pass a URL to the map for rendering. This URL is passed in along with all of the other style information to rebuild the map as it was previously.

The problem I'm encountering, is when I attempt to apply the stylings, the map hasn't retrieved its list of features to be displayed on the map.

Looking through the documenation I don't see any events specifically for the loadGeoJson method, but did see for addfeature and setgeometry, but neither of these events get raised when using the loadGeoJson method.

This has all been written in Typescript and tries to adhere to a pretty strict MVVM approach using Knockout to handle all of UI changes for me via binding.

Is there another event I can tie into to see when this method has completed so I can apply my styles appropriately?

Is there another approach where I can bake in a 'wait' somewhere? .

Answer 1

addfeature event is definitely invoked by loadGeoJson, if isn't for you is some setup error.

loadGeoJson has an optional callback parameter what is invoked after all features were loaded and has the features as parameter.

https://developers.google.com/maps/documentation/javascript/3.exp/reference

loadGeoJson(url:string, options?:Data.GeoJsonOptions, callback?:function(Array))

You can signal your code from this callback that it can continue processing.

map.data.loadGeoJson('google.json', null, function (features) {
    map.fitBounds(bounds); // or do other stuff what requires all features loaded
});

You could also wrap loadGeoJson into a promise and resolve the promise in loadGeoJson's callback.

function loadGeoJson(url, options) {
    var promise = new Promise(function (resolve, reject) {
      try {
        map.data.loadGeoJson(url, options, function (features) {
            resolve(features);
        });
      } catch (e) {
        reject(e);
      }
    });

    return promise;
}

// Somewhere else in your code:
var promise = loadGeoJson('studs.json');

promise.then(function (features) {
    // Do stuff
});

promise.catch(function (error) {
    // Handle error
});

Answer 2

You can listen to addFeature event which will be fired for each feature in your json. e.g. if you use https://storage.googleapis.com/maps-devrel/google.json six events are raised after the json request is completed i.e. when google api starts adding the features from the json file:

You can see the demo here : http://jsbin.com/ofutUbA/4/edit