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 ZFS on Linux

Updated Oct 16 2013: shadow copies, memory settings and links for further learning.
Updated Nov 15 2013: shadow copies example, samba tuning.

Unless you've been living under a rock you should have by now heard many stories about how awesome ZFS is and the many ways it can help with saving your bacon.

The downside is that ZFS is not available (natively) for Linux because the CDDL license under which it is released is incompatible with the GPL. Assuming you are not interested in converting to one of the many Illumos distributions or FreeBSD this guide might serve you as a starting point if you are attracted  by ZFS features but are reluctant to try it out on production systems.

Basically in this post I note down both the tought process and the actual commands for implementing a fileserver for a small office. The fileserver will run as a virtual machine in a large ESXi host and use ZFS as the filesystem for shared data.