how can I determine when Google Maps loadGeoJson c

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

One would assume, if you are using knockout, to maybe bind onto some listeners, or attach listeners to an event.

Most events through JavaScript always have a callback function, this is good practive so that once a function has finished executing some long I/O or Database query it will immediately execute that function. Obviously that callback will be defined by you.

someLongTimeFunction(function (data) {
  // usually this callback will be fired when the function has finished.
});

If you are familiar with knockout, then you would know that once the data has been retrieved and you pass through an observable that observable would update its binding.

Here is the link for extending observables: knockout js

As far as I can understand from you question, this loadGeoJson, is it server side? If so, you do a long poll from client side and tie into that:

function doRequest() {
  var request = $.ajax({
    dataType: "json",
    url: 'loadGeoJson',
    data: data,
  });

  request.done(function(data, result) {
    if (result !== "success") {
      setTimeout(doRequest, 10000);
    }
  });
}

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

Answer 3

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
});