Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Realtime Map Collaboration.

Mick Thompson
April 16, 2012
Technology
1
220

Realtime Map Collaboration.

Maps are great tools for expressing ideas, showing how things relate, and for planning. A shared map that can be updated by multiple people in realtime makes this kind of collaboration much more productive. This talk explores an application that allows users to edit maps within a web browser and share changes with others.

Mick Thompson

April 16, 2012
Tweet

More Decks by Mick Thompson

See All by Mick Thompson
Map that fits your drive
mick
0
66
CfA & Open Data... in France.
mick
1
65
Code for America <3 Maps
mick
1
89
Open Data in City Government
mick
2
110
Nodejs and CouchDB: The new Geo data toolset
mick
5
590

Other Decks in Technology

See All in Technology
Taming you application's environments
salaboy
0
190
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
BLADE: An Attempt to Automate Penetration Testing Using Autonomous AI Agents
bbrbbq
0
310
TypeScript、上達の瞬間
sadnessojisan
46
13k
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
3.2k
生成AIが変えるデータ分析の全体像
ishikawa_satoru
0
150
オープンソースAIとは何か？ --「オープンソースAIの定義 v1.0」詳細解説
shujisado
9
1k
【若手エンジニア応援LT会】ソフトウェアを学んできた私がインフラエンジニアを目指した理由
kazushi_ohata
0
150
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
380
Terraform未経験の御様に対してどの ように導⼊を進めていったか
tkikuchi
2
430
SRE×AIOpsを始めよう！GuardDutyによるお手軽脅威検出
amixedcolor
0
130
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
2
610

Featured

See All Featured
Large-scale JavaScript Application Architecture
addyosmani
510
110k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Agile that works and the tools we love
rasmusluckow
327
21k
Building an army of robots
kneath
302
43k
Teambox: Starting and Learning
jrom
133
8.8k
How to Ace a Technical Interview
jacobian
276
23k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Embracing the Ebb and Flow
colly
84
4.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k

Transcript

  1. Realtime Map Collaboration Mick Thompson @dthompson Code for America

  2. About • Web Engineer • Realtime, Chat, Geospatial • Code

    for America

  3. • Non-profit • Civic/Gov • 1 Year Fellowship • Awesome!

  4. • 2 years, 11 cities, 45 fellows • 21 apps

    from last year, more in the works. • Open Source, Open Data...Open for Applications.

  5. Realtime Map Collaboration Google docs, + google maps.

  6. What is it? • Map annotation relied in realtime. •

    2 or more editors/collaborators • chat room backchannel

  7. What exists. • Many online location data collection tools. •

    Google Maps, Esri, etc. • Ushahidi, Shareabouts, so much more...

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

  9. Mapchat

  10. Mapchat • Only 1 global room. • Bad interface. •

    Only post messages. • No real collaboration.

  11. Mapchat • Hundreds of users even if only 1 message.

    • Used as an example.

  12. That was cool, what’s next? • Edit geometries. • Embedded

    chatroom/backchannel. • Use standards. • Multiple map rooms.

  13. Mapchat.im mapchat.im/r/whereconf

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

  15. XMPP: does bi-directional & asynchronous

  16. XMPP: does fire and forget, publish-subscribe, request/response, and more...

  17. XMPP: quick guide

  18. XMPP: quick guide

  19. XMPP: quick guide

  20. XMPP: quick guide

  21. XMPP: addressing [email protected]

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

  23. XMPP: standard Started in 1999 IETF standard in 2004

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

    others.

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

    </body> </message>

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

    </body> </message>

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

    </body> </message>

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

    </body> </message>

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

    BIAB headed to Balcony. </body> </message>

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

    BIAB headed to Balcony. </body> </message>

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

    BIAB headed to Balcony. </body> </message>

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

    BIAB headed to Balcony. </body> </message>

  33. 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>

  34. 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>

  35. 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>

  36. 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>

  37. PubSub: <change> <change id='secqID'> <feature id='ID' type= 'point' > <addition>

    <point> <coordinates>43.019, -70.012</coordinates> </point> </addition> </feature> </change>

  38. PubSub PubSub Node Clients

  39. PubSub: Bounds <field var='pubsub#bounds'> <value>42.943,-71.032,43.039,-69.856</value> </field>

  40. BOSH / Strophe.js XMPP over HTTP Handles all that messy

    cross protocol stuff for you.

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

  42. Leaflet Easy to get started. Handles tile services via Wax

  43. Leaflet/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)); });

  44. Mapbox

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

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

    something. } });

  47. Demo

  48. None

  49. Learned Leaflet 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.

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

  51. What’s next. Room Persistence Sharing controls, private rooms Import live

    data feeds Presenter controls

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

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