Realtime Map Collaboration.

Slide 1

Slide 1 text

Realtime Map Collaboration Mick Thompson @dthompson Code for America

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Realtime Map Collaboration Google docs, + google maps.

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Mapchat

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Mapchat.im mapchat.im/r/whereconf

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

XMPP: does bi-directional & asynchronous

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

XMPP: quick guide

Slide 18

Slide 18 text

XMPP: quick guide

Slide 19

Slide 19 text

XMPP: quick guide

Slide 20

Slide 20 text

XMPP: quick guide

Slide 21

Slide 21 text

XMPP: addressing [email protected]

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

XMPP: standard Started in 1999 IETF standard in 2004

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

XMPP Wherefore art thou, Romeo?

Slide 26

Slide 26 text

XMPP Wherefore art thou, Romeo?

Slide 27

Slide 27 text

XMPP Wherefore art thou, Romeo?

Slide 28

Slide 28 text

XMPP Wherefore art thou, Romeo?

Slide 29

Slide 29 text

MUC: Multi User Chat Juliet, BIAB headed to Balcony.

Slide 30

Slide 30 text

MUC: Multi User Chat Juliet, BIAB headed to Balcony.

Slide 31

Slide 31 text

MUC: Multi User Chat Juliet, BIAB headed to Balcony.

Slide 32

Slide 32 text

MUC: Multi User Chat Juliet, BIAB headed to Balcony.

Slide 33

Slide 33 text

PubSub

Slide 34

Slide 34 text

PubSub

Slide 35

Slide 35 text

PubSub

Slide 36

Slide 36 text

PubSub

Slide 37

Slide 37 text

PubSub: 43.019, -70.012

Slide 38

Slide 38 text

PubSub PubSub Node Clients

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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)); });

Slide 44

Slide 44 text

Mapbox

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Demo

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

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.

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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