Adding Sproutcore KVO to OpenLayers - Part 2

You can also Read Part 1  or  Read Part 3

In the previous post of this series I have showed how easily an OpenLayers object can be extended with Sproutcore KVO.

The main driver behind integrating KVO into OL is that of beauty and simplicity. When KVO is available texfields, checkboxes, layers, features, you name it can all have their state transparently and continuosly synchronized without writing any code at all.

The first post was more of a proof of concept. In this post instead I am going to show a more practical use and rewrite one the OpenLayers examples (from the dev examples). The original example shows how to create and add features to a map from javascript. With the help of KVO I am going to expand the original and also make the features editable. As we will see the changes will propagate immediately into the map.

The full source is available on github. To run the example simply download/clone/fetch the repo and open index.html with a browser. The example was written with Sproutcore 2.0 and tested on Google Chrome. The Sproutcore 2.0 starter kit was downloaded from here.

Let's start from index.html. First of all I have added OpenLayers.js to the file so that the OpenLayers code is correctly loaded into the browser.
After that I have added the div where OL will render the map.

To make OL actually load and initialize I copied the javascript code over from the original example into a separate file which I have then included into index.html.

At this point I created a Sproutcore Object with the sole purpose of making it a lightweight controller and use it to share data between the OpenLayers object and the input controls. The controller is in the app.js file together will all the other SC code we are going to write. That's remarkably little code isn't it?

var App = SC.Application.create();

App.featureController = SC.Object.create({
  // attributes of our point
  content: SC.Object.create({
		name: "toto",
        age: 20,
        favColor: 'red',
        align: "cm"
  }),
  
  // coordinates
  geometry: SC.mixin(
  	new OpenLayers.Geometry.Point(-111.04, 45.68),
  	SC.Observable
  )
});

After that I went on to edit the OL init code in app_ol_init.js.
The most important changes are at lines 24-15 were I extended the original OL class with a function that will be our observer's target action:

// update function
OpenLayers.Feature.Vector.prototype._sc_update=function() { if(this.layer) this.layer.redraw(); };

When invoked this function will simply ask the layer containing the feature to redraw itself.

Between lines 51 and 64  is all the KVO glue:

// create a point feature
    var point = App.featureController.geometry;
    
    pointFeature = SC.mixin(new OpenLayers.Feature.Vector(point), SC.Observable);
    //             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    //             Adding Observable to OpenLayers.Feature.Vector

    // KVO instrumentation
    pointFeature.attributes = App.featureController.content;
    SC.keys(pointFeature.attributes).forEach(function(k){
    	if(!k.startsWith("_")) { // _ properties are usually internals, so we avoid observing them
    		pointFeature.addObserver("attributes."+k, pointFeature, '_sc_update');
    	}
    });
    pointFeature.addObserver("geometry.x", pointFeature, '_sc_update');
    pointFeature.addObserver("geometry.y", pointFeature, '_sc_update');

As is clearly marked the OL object is extended with SC.Observable functionality via SC.mixin as I showed in the previous post. From that point on all the addObserver code should be quite familiar to anyone who's dipped his toes in SC.

After refreshing the page in the browser we can now change the attributes or coordinates values in the App.featureController and see the map immediately updating. For instance try this in the Javascript console of your browser:

App.featureController.content.set("name","Umberto")

To complete the example I then added four input controls to the web page so that we can more comfortably edit our object.

Refresh again the browser and then try to edit any field. As if it was by magic the map will immediately refresh according to the new values. If the editing causes the map to flickr or use too much cpu in rendering operation it is always possibile to group the edits with a beginPropertyChanges/endPropertyChanges.