Realtime Collaborative Geospatial Editing

Put together a simple realtime geospatial collaboration application prototype. The prototype is based on Leaflet, Mapbox.js, node.js and Socket.IO.

It is quite functional considering I cranked this out in a single evening. Any number of browser clients can connect to the map and all content drawing, updating and deletion syncs automatically.

Below is a screencast showing off some of the functionality.

You can get the code for it here:

https://bitbucket.org/jordoncm/geo-collab

Bookmarks for 2014-02-05 from 12:51 to 12:59

These are my links for 2014-02-05 from 12:51 to 12:59:

Bookmarks for 2013-09-12 through 2013-11-11

These are my links for 2013-09-12 through 2013-11-11:

Bookmarks for 2013-08-24 from 07:09 to 07:42

These are my links for 2013-08-24 from 07:09 to 07:42:

Bookmarks for 2013-08-17 through 2013-08-24

These are my links for 2013-08-17 through 2013-08-24:

Bookmarks for 2013-07-09 through 2013-08-01

These are my links for 2013-07-09 through 2013-08-01:

Bookmarks for 2013-06-27 from 07:23 to 07:42

These are my links for 2013-06-27 from 07:23 to 07:42:

Bookmarks for 2013-05-07 through 2013-05-22

These are my links for 2013-05-07 through 2013-05-22:

Bookmarks for 2013-04-24 through 2013-05-06

These are my links for 2013-04-24 through 2013-05-06:

Multiple Inheritance (Mixins) with Backbone.js

I hate having deep inheritance trees using subclasses in Javascript when most of the time you just want to tack on a few useful methods to an object depending on how it is used. Multiple inheritance (or mixins) is great for this however Javascript and many frameworks don't have a clear way to do this.

I have been using Backbone a lot lately and frankly I was a little surprised that Backbone directly didn't have a way to deal with this. Fortunately Backbone is built on top of Underscore and it has a nice method _.extend to help add objects onto others.

Below are two approaches that both seem to work just fine whether you use prototype to define a class or just create an object explicitly with a set of methods and properties. Personally I like the second approach better.

// Define a couple of mixins one using prototype and the other explicitly. Both
// are using "this".
Mixin = function() {};
Mixin.prototype.method = function() {
    console.log(this.property);
    console.log(this.secondProperty);
};
Mixin.prototype.mixinProperty = 'bar';

SecondMixin = {
    secondMethod: function() {
        console.log(this.mixinProperty);
    },
    secondProperty: 'foobar'
};

// This approach does the extend at object initialization. I think this is a
// little messy.
Class = Backbone.Model.extend({
    property: null,
    initialize: function() {
        _.extend(this, new Mixin());
        _.extend(this, SecondMixin);
        this.property = 'foo';
        console.log(this.mixinProperty);
        console.log(this.secondProperty);
        this.secondProperty = 'new value';
    }
});

// This approach does the extend at class definition time. A bit cleaner I
// think. Also even though SecondMixin is used twice here _.extend is making a
// copy and therefore the property values are not shared between the two
// classes.
SecondClass = Backbone.Model.extend(_.extend({
    property: null,
    initialize: function() {
        this.property = 'foo';
        console.log(this.mixinProperty);
        console.log(this.secondProperty);
    }
}, new Mixin(), SecondMixin));

(new Class()).method();
(new SecondClass()).method();

jsFiddle of this code is here.

...older