Skip to main content

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),

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;
    	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:


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.


Popular posts from this blog

Indexing Apache access logs with ELK (Elasticsearch+Logstash+Kibana)

Who said that grepping Apache logs has to be boring?

The truth is that, as Enteprise applications move to the browser too, Apache access logs are a gold mine, it does not matter what your role is: developer, support or sysadmin. If you are not mining them you are most likely missing out a ton of information and, probably, making the wrong decisions.
ELK (Elasticsearch, Logstash, Kibana) is a terrific, Open Source stack for visually analyzing Apache (or nginx) logs (but also any other timestamped data).

From 0 to ZFS replication in 5m with syncoid

The ZFS filesystem has many features that once you try them you can never go back. One of the lesser known is probably the support for replicating a zfs filesystem by sending the changes over the network with zfs send/receive.
Technically the filesystem changes don't even need to be sent over a network: you could as well dump them on a removable disk, then receive  from the same removable disk.

A not so short guide to TDD SaltStack formulas

One of the hardest parts about Infrastructure As Code and Configuration Management is establishing a discipline on developing, testing and deploying changes.
Developers follow established practices and tools have been built and perfected over the last decade and a half. On the other hand sysadmins and ops people do not have the same tooling and culture because estensive automation has only become a trend recently.

So if Infrastructure As Code allows you to version the infrastructure your code runs on, what good is it if then there are no tools or established practices to follow?

Luckily the situation is changing and in this post I'm outlining a methodology for test driven development of SaltStack Formulas.

The idea is that with a single command you can run your formula against a matrix of platforms (operating systems) and suites (or configurations). Each cell of the matrix will be tested and the result is a build failure or success much alike to what every half-decent developer of…