
Show HN: MapChat – A simple location based chat in 300 lines of code - idoco
http://idoco.github.io/map-chat/
======
kevin
So, this is how my experience started.
[http://cl.ly/image/071f1j0B0M3a](http://cl.ly/image/071f1j0B0M3a)

And then it took me like 5 seconds to figure out how to chat. I first tried to
click on people's chat to reply to them and then I finally found the text
input at the bottom of the screen. Then nothing would happen when I hit enter.
Then I eventually found the blue circle send button and that didn't work.

Then I tried Chrome. Worked! So I found some bugs in Safari :)

Amazing that this was done in 300 lines. Something about this format is
immediately appealing. Maybe it's because dots on a map feel more human than
handles on a forum or comment thread. Anonymity is this double-edged sword in
communities. Maybe this is the minimum amount needed to make people behave?
Probably not, but something IS interesting here.

Right now it's just people shouting...I hope your next trick is to figure out
how to turn it into conversations. Suggestion: Please don't be tempted to just
rewrite it or start from scratch. Iterate from this version because 1) it
would be faster and 2) this one already has some magic in it.

Thanks for sharing!

~~~
jasonlotito
Just another data point, but using Safari Version 8.0.6 (10600.6.3), and I
didn't see this issue. It worked as one would expect.

~~~
leoalves
If you use safari connected to the internet with a cable safari does not give
the lat-long. Only if you use the wireless. Had this issue the other day.

~~~
hiou
Not surprised. I'm still very confused why someone would use a web browser
built by a company that has a business plan based on shrinking the web.

------
paste0x78
Do you want to make a snowman?
[http://imgur.com/YDUgG3U](http://imgur.com/YDUgG3U)

~~~
aalbertson
[https://www.youtube.com/watch?v=C1ZHetiuRb0](https://www.youtube.com/watch?v=C1ZHetiuRb0)

------
idoco
Tip - You can create a private chat map by adding the url #word i.e.
[http://idoco.github.io/map-chat/#test](http://idoco.github.io/map-chat/#test)

------
idoco
Feel free to fork and contribute :) [https://github.com/idoco/map-
chat](https://github.com/idoco/map-chat)

~~~
marvel_boy
Newbie here. Nice idea ! How much time it took you to buid the site? It is js-
only based? By the way, works perfectly on Safari.

~~~
idoco
Thanks! It took me about two weeks in after work hours. The server is 70 lines
of Java (vertx) and the UI is like 200 lines of JS (With very little JQuery)

------
aw3c2
Would be great if you could put all resources behind https, otherwise browsers
do complain:

> Mixed Content: The page at '[https://idoco.github.io/map-
> chat/'](https://idoco.github.io/map-chat/') was loaded over HTTPS, but
> requested an insecure XMLHttpRequest endpoint
> '[http://chatmap.cloudapp.net/chat/info?t=1434731663123'](http://chatmap.cloudapp.net/chat/info?t=1434731663123').
> This request has been blocked; the content must be served over HTTPS

~~~
idoco
Yes, I was thinking about that. The change is very small, but I'm not sure
about its implications.

Currently the websocket connection is in http, I'm not sure how it will effect
the server if I change it to https. Will it create more load on it?

~~~
finnn
It probably won't be too significant, but the only way to be sure is to try
it.

------
netcraft
Very nice! it would be nice to have an option though that would fuzz your
location a bit - I dont have a problem with people knowing im from my city -
pinpointing my house is a different thing though...

~~~
kenrick95
Yeah, it's pretty creepy to have a very accurate location.

------
jpallen
This has serious XSS holes which need fixing! Here is a PR that should do the
job (not tested): [https://github.com/idoco/map-
chat/pull/1](https://github.com/idoco/map-chat/pull/1)

~~~
jpallen
Looks like it's all fixed now :)

~~~
idoco
Yeah, I added some real XSS protection.

Before today, I thought it would be cool to enable some html :)

~~~
martokus
Yes, indeed the party is over. Going for beers now ;)

~~~
idoco
Thank you for your participation in my XSS hackathon experiment ;)

------
ohitsdom
Very nice! Lot of people having fun in there right now, which is a clear sign
you did something right.

~~~
Rivi
So much fun!

------
proussea
It seems that a lot of people are trying the 4 days work week ;)

~~~
idoco
Was that a bad idea posting it on a week day? :)

~~~
underscoremark
Not at all! A welcome distraction for a Friday afternoon.

------
Kartificial
I think something of a timeout on the message bubbles is needed.. As to not
cloud the screen too much. Nice work though :)

~~~
idoco
Yes, this is at the top of my list. Thanks :)

~~~
Rockdtben
I got a PR request up on the github if you want it.

[https://github.com/idoco/map-chat/pull/11](https://github.com/idoco/map-
chat/pull/11)

------
fredley
And it's already been XSS'd to death. I wouldn't recommend visiting this for
now.

~~~
idoco
I think it is now somewhat disabled. you just need to refresh the page.

~~~
idoco
This is what I did for now

    
    
        msg.text =
            msg.text.replace('>','')
                .replace('<','')
                .replace(';','')
                .replace('/','')
                .replace('\\','')
                .replace('\'','')
                .replace('\"','')
                .replace(':"','')
                .replace('!important','');
    

I will think of a more clever solution next week :)

~~~
krapp
Here is how mustache.js[0] does it:

    
    
        var entityMap = {
            "&": "&amp;",
            "<": "&lt;",
            ">": "&gt;",
            '"': '&quot;',
            "'": '&#39;',
            "/": '&#x2F;'
         };
    
          function escapeHtml(string) {
            return String(string).replace(/[&<>"'\/]/g, function (s) {
              return entityMap[s];
            });
          }
    
    
    

also document.createTextNode will tell the browser not to render the children
as html, whereas appending a dom element and innerHTML will.[1] I'm just
assuming that behavior is correct in all browsers though.

[0][https://github.com/janl/mustache.js/blob/master/mustache.js#...](https://github.com/janl/mustache.js/blob/master/mustache.js#L52)

[1][https://jsfiddle.net/1dsygwoj/](https://jsfiddle.net/1dsygwoj/)

~~~
idoco
Thanks I added that on top of JsHtmlSanitizer.

------
developer1
I just looked through Google Map's API licensing options. Obviously you may
quickly max out your limit. It doesn't look like there's really an extended
paid model to increase the limit by much? 100k requests is the only additional
limit I see.

Does Google not offer much higher limits if you're willing to pay? I'd be
curious to try a similar app, but it seems that popularity might kill one
pretty quickly with such low API limits.

------
vdnkh
Not sure if you intended this feature, but using HTML as a chat message is
awesome

~~~
idoco
It was, but I had to disable it for today. Too many xss loop holes.

------
idoco
I see some abuse from some specific IPs, and I'm thinking about automatically
black-listing them after two messages in less than a specific threshold. What
do you think?

~~~
idoco
It is done.

Lets try to enjoy some hacking free chat, instead of ruining it. You can fill
you spare time by implementing new features and sending me pull requests :)

------
danso
Great work! Obviously ~300 lines of code isn't enough to do a full-fledged
slick interface...but one suggestion that presumably would be easy to
implement: a button that closes all current word-balloons.

I was also thinking a "reply" button for threaded discussions between
users...but then that would kill the fun simplicity of the app...I just like
seeing where HN users are currently this morning. And also, the ways people
try to obfuscate XSS attacks

~~~
idoco
Thanks! The button to close all current balloons is at the top of my list :)

I'm afraid that a reply button might take out some of the fun and the
simplicity, but I will conciser that.

------
etewiah
Ha haa - interesting to see this. I had something similar in mind when I
bought the domain [http://chattymaps.com](http://chattymaps.com) As you can
see if you look at it now, the concept has changed somewhat. I'm still looking
at adding more 'chatty' features though. If you are interested in doing
something more with this, let me know - it could be interesting.

------
developer1
The Chrome Dev Tools geolocation emulation has become a hit. North Korea,
Antarctica, and the RMS Titanic are all online.

------
kodeninja
On my Chrome+OS X Yosemite, I opened it in a separate tab, and went back to
working on something else. After a couple of minutes, the laptop really
started heating up :). The `Google Chrome Helper` associated with this tab was
the culprit, hogging 100% CPU. Killed it and everything came back to normal.

Anyone else experience that?

------
MrBra
What's the name of the russian sounding song that someone injected? I've been
searching it for ages!

~~~
clemlais
Loituma - Ievan Polkka

~~~
MrBra
Thanks! I want to say I love you but I will only say that I wanted to say it
:P

------
shostack
Very cool. Wish there were some form of message persistence. Otherwise the
speed at which I type is limited to how quickly others acknowledge what I say,
and that slows the entire conversation down.

Adding more traditional scrolling chat bubbles (see Ultima Online) would help
that I think.

------
apeacox
very nice idea! :-)

perhaps it needs:

* something to zoom the map (and thus, filtering messages for a given radius) * and/or something to organize messages in a way they don't overlap :P (eg: balloons with a number, when clicked it shows the full list of messages)

~~~
idoco
Thanks!

It is possible to save the message history on the client side. But I though
that this is fun to have no history :) Right now notifications (The switch on
top) gives you some history.

I disabled the zoom buttons, because I was thinking about mobile browsers and
the very limited screen space they have. I will reconsider

~~~
apeacox
agree on storage :-) I just meant something to organize/view messages during a
session. client side, of course :)

PS: it's so amazing to see all that people around the world at the same time,
on a map. sounds like a new world to explore :P

------
swsieber
Alternate interface suggestion: Keep a rolling chat box. For avatars of each
person, use a smallinsh picture of the area surrounding their dot. That might
bump up the line count a bit though.

I think that'd provide a nice basis for fleshing it out.

~~~
lowglow
Came here to post exactly this.

------
mmrasheed
Nice hack! It felt like using the old Yahoo! chat rooms implemented on a world
map. Chaotic environment, everybody writes, barely anyone replies to any
message that makes sense. It's fun!

------
bradbeattie
Notifications should be limited to the messages visible within your bounding
box. If I've zoomed in on a city, I don't want notifications from somewhere
half-way around the world.

~~~
idoco
Yes! Right now it is just broken :) you get an endless stream of
notifications, I will add a very simple distance filter.

~~~
bradbeattie
I'm not so sure about distance. Maybe based on your zoom level? Because if
you're zoomed out, I'd guess you want more notifications than if you're zoomed
in on a city or region.

------
moey
Very cool project. A lot of people active already playing along. Would be nice
if we could PM one another that to start a one-on-one convo with someone in a
place we're interested in.

------
kenrick95
Looks like the user's dot/bubble can be dragged around.

~~~
idoco
Yes, this is intentional. I found it easier to be able to move users that
blocked my view. They pop back into place after they write again.

Maybe I'll change it after I'll make messages dissolve after some time.

~~~
developer1
Two features to replace dragging:

1\. Fade timeout on messages (10 to 20 seconds).

2\. Clicking on a chat bubble needs to bring it to the front (change the
z-index). Sometimes just want to read a specific message hidden behind
another, and having to click to close gets tired fast. Extra bonus if future
messages from the same person you've clicked on once always pop up on top of
others in the area (or provide a little "pin" option in each chat bubble, but
that will probably clutter too much).

And as a separate suggestion already mentioned by others:

3\. The ability to toggle the enableHighAccuracy boolean. Exact street address
is a little too creepy.

------
xylon
It doesn't work for me. I can see other people's messages but. When I type and
press enter or send button nothing happens. Tried with both Iceweasel and
Chromium.

------
anigbrowl
Love it. Would love to read my news this way. I find this much more intuitive
and antural than Twitter. You have a hot product here OP, congratulations.

------
zatkin
"Connection lost, please refresh :("

Every time I load the page.

~~~
idoco
Does the problem still persist? which browser are you using? Are you on some
restricted network? (Like an internal company network behind a fire wall?)

------
abrichr
Very cool. I could see something like this replacing/augmenting the current
social networking paradigm.

FYI, someone just managed to inject a javascript alert.

------
Globz
XSS everywhere.

Very fun app! Love it! Are chat bubbles auto disappearing? maybe let us set a
timer?

------
cosmolev
Just add the concept of mayorship for the cities and this thing gonna last
long!

------
redline22
Awesome! Could this unintentially DDOS google's map tile server / API?

~~~
idoco
I'm using a google maps api key to track this, and so far I had only 11K hits
on their server. The free limit is 25K for 90 days. After that I'll need to
start pay :)

------
maresca
How about only pulling messages and users from within your zoomed-in map
bounds?

------
sudhirmishra
This is super, will fork it into a private chat with bunch of my friends.

~~~
idoco
Good to hear! This is my intention.

If you implement some new cool features, I'll be glad to merge them.

------
b44rd
Seems like there's quite a few Ido Cohens. How to contact you?

~~~
idoco
Hi, I'm not sure what is the best way :)

GitHub issues are a good way if you want to comment about the app. You can
also contact me at ido.mapchat @gmail.com

------
highCs
I would like to see how many people are in there (screen-wise).

~~~
idoco
Good idea! Thanks.

BTW as for writing this message there are 150 people on the map :)

------
frik
_Hello World_ :)

------
idoco
Ok I added a real XSS filter, lets hope that it holds :)

~~~
riomus
Poland stronk, wykop.pl :) Old working xss <>.''"".:/:/,,iframe=iframe=src
<iframe src="javascript:window.alert('asd')"/>

------
sgibat
The most recent chats should have a higher z-index.

------
throwaway12357
tip: messages should fade after 15? seconds

------
richerlariviere
Cool but I received javascript from xss...

------
glomph
Would be neat to have private rooms.

~~~
idoco
There are private rooms, but the UI do not support that yet. Just add #word to
the url and get your private chat map. i.e. [http://idoco.github.io/map-
chat#test](http://idoco.github.io/map-chat#test)

~~~
glomph
Sweet!

------
golro
very cool actually seeing all the other writers - a counter would actually be
a great idea

~~~
Rivi
Golro, Are you related to the famous Golro08? :-)

------
maresca
The leekspin is getting annoying.

------
xigency
Seems like a fun little project!

------
Kiro
I would like a clear button.

~~~
html5web
Just refresh browser :)

------
emilburzo
got an alert() in there, unsanitized input?

------
jonnw
great concept, just needs some more polish

~~~
idoco
Thanks for your feedback. The next things I will add are users and messages
counters.

