Realtime Map Collaboration.

Realtime Map Collaboration Mick Thompson @dthompson Code for America

About • Web Engineer • Realtime, Chat, Geospatial • Code
for America

• Non-proﬁt • Civic/Gov • 1 Year Fellowship • Awesome!

• 2 years, 11 cities, 45 fellows • 21 apps
from last year, more in the works. • Open Source, Open Data...Open for Applications.

Realtime Map Collaboration Google docs, + google maps.

What is it? • Map annotation relied in realtime. •
2 or more editors/collaborators • chat room backchannel

What exists. • Many online location data collection tools. •
Google Maps, Esri, etc. • Ushahidi, Shareabouts, so much more...

Backstory •Chat, pubsub, xmpp •Realtime search •Mapchat

Mapchat

Mapchat • Only 1 global room. • Bad interface. •
Only post messages. • No real collaboration.

Mapchat • Hundreds of users even if only 1 message.
• Used as an example.

That was cool, what’s next? • Edit geometries. • Embedded
chatroom/backchannel. • Use standards. • Multiple map rooms.

Mapchat.im mapchat.im/r/whereconf

XMPP Open standards and interoperability in the real-time communications.

XMPP: does bi-directional & asynchronous

XMPP: does ﬁre and forget, publish-subscribe, request/response, and more...

XMPP: quick guide

XMPP: addressing [email protected]

XMPP: federation [email protected] can chat with [email protected]

XMPP: standard Started in 1999 IETF standard in 2004

XMPP: already in use Google, Facebook, Apple, Hipchat, Superfeedr, many
others.

XMPP <message from=’[email protected]/home’ to=’[email protected]’ type=’chat’> <body> Wherefore art thou, Romeo?
</body> </message>

MUC: Multi User Chat <message from=‘[email protected]/home’ to=‘[email protected]’ type=‘groupchat’> <body> Juliet,
BIAB headed to Balcony. </body> </message>

PubSub <iq to=‘geo.talkback.im’ from=‘[email protected]/web’ type=‘set’ id=‘sub:1’> <pubsub xmlns=‘http://jabber.org/protocol/pubsub’> <subscribe node=‘whereconf’
jid=‘[email protected]/web’/> </pubsub> </iq>

PubSub <iq to=‘geo.talkback.im’ from=‘[email protected]/web’ type=‘set’ id=‘sub:1’> <pubsub xmlns=‘http://jabber.org/protocol/ pubsub’> <subscribe
node=‘whereconf’ jid=‘[email protected]/web’/> </pubsub> </iq>

PubSub <message from=‘geo.talkback.im’ to=‘[email protected]’> <event xmlns=‘http://jabber.org/protocol/pubsub#event’> <items node=‘whereconf’> <item id=‘10239481’>
<change></change> </item> </items> </event> </message>

PubSub: <change> <change id='secqID'> <feature id='ID' type= 'point' > <addition>
<point> <coordinates>43.019, -70.012</coordinates> </point> </addition> </feature> </change>

PubSub PubSub Node Clients

PubSub: Bounds <ﬁeld var='pubsub#bounds'> <value>42.943,-71.032,43.039,-69.856</value> </ﬁeld>

BOSH / Strophe.js XMPP over HTTP Handles all that messy
cross protocol stuff for you.

Strophe.js connection.pubsub.subscribe(“room_ name”, {}, //options pubsubEvent); // ref to callback

Leaﬂet Easy to get started. Handles tile services via Wax

Leaﬂet/Wax var url = ‘tilejosn source url’; // Make a
new Leaflet map in your container div map = new L.Map('map', {zoomControl:false}) .setView(new L.LatLng(43.059, -73.022), 12); wax.tilejson(url, function(tilejson) { // Add MapBox Streets as a base layer map.addLayer(new wax.leaf.connector(tilejson)); });

Mapbox

Node.js Great for asynchronous coding. async protocol + async callbacks

Module: node-xmpp cl.on('stanza', function(stanza) { " if (stanza.is('message'){ // do
something. } });

Learned Leaﬂet is great. Google API has more edit tools.
Node.js is a great way to start using XMPP XMPP requires some ramp up, but cools gains.

XMPP Chat room, presence, roster, login, etc for free.

What’s next. Room Persistence Sharing controls, private rooms Import live
data feeds Presenter controls

Source http://github.com/dthompson/mapchat

Questions? ....Thanks! Mick Thompson @dthompson [email protected]

Realtime Map Collaboration.

Realtime Map Collaboration.

More Decks by Mick Thompson

Other Decks in Technology

Featured

Transcript