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.

Mirth: recover space when mirthdb grows out of control

I was recently asked to recover a mirth instance whose embedded database had grown to fill all available space so this is just a note-to-self kind of post.
Btw: the recovery, depending on db size and disk speed, is going to take long.

The problem A 1.8 Mirth Connect instance was started, then forgotten (well neglected, actually). The user also forgot to setup pruning so the messages filled the embedded Derby database until it grew to fill all the available space on the disk. The SO is linux.

The solution First of all: free some disk space so that the database can be started in embedded mode from the cli. You can also copy the whole mirth install to another server if you cannot free space. Depending on db size you will need a corresponding amount of space: in my case a 5GB db required around 2GB to start, process logs and then store the temp files during shrinking.

Then open a shell as the user that mirth runs as (you're not running it as root, are you?) and cd into the mirth home. …