Show HN: MapChat – A simple location based chat in 300 lines of code

http://idoco.github.io/map-chat/

by idoco • 11 years ago

205 114 11 years ago

idoco.github.io

idoco30• 11 years ago

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

marvel_boy• 11 years ago

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.

idoco30• 11 years ago

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)

apeacox2• 11 years ago

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)

idoco30• 11 years ago

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

apeacox2• 11 years ago

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

highCs• 11 years ago

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

idoco30• 11 years ago

Good idea! Thanks.

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

ohitsdom• 11 years ago

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

idoco30• 11 years ago

Thanks!

Rivi2• 11 years ago

So much fun!

idoco30• 11 years ago

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

golro• 11 years ago

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

idoco30• 11 years ago

Yeah, I will work on that today, golro ;)

Rivi2• 11 years ago

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

frik• 11 years ago

Hello World :)

netcraft• 11 years ago

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

kenrick953• 11 years ago

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

moey• 11 years ago

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.

vdnkh• 11 years ago

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

idoco30• 11 years ago

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

abrichr• 11 years ago

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

FYI, someone just managed to inject a javascript alert.

emilburzo• 11 years ago

got an alert() in there, unsanitized input?

proussea• 11 years ago

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

idoco30• 11 years ago

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

underscoremark• 11 years ago

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

richerlariviere• 11 years ago

Cool but I received javascript from xss...

Globz• 11 years ago

XSS everywhere.

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

fredley• 11 years ago

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

idoco30• 11 years ago

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

idoco30• 11 years ago

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 :)

jonnw3• 11 years ago

great concept, just needs some more polish

idoco30• 11 years ago

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

maresca2• 11 years ago

The leekspin is getting annoying.

maresca2• 11 years ago

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

MrBra2• 11 years ago

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

clemlais• 11 years ago

Loituma - Ievan Polkka

MrBra2• 11 years ago

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

striking• 11 years ago

You're looking for https://en.wikipedia.org/wiki/Loituma_Girl

jacquesm• 11 years ago

That's Finnish.

sudhirmishra• 11 years ago

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

idoco30• 11 years ago

Good to hear! This is my intention.

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

jpallen3• 11 years ago

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

jpallen3• 11 years ago

Looks like it's all fixed now :)

idoco30• 11 years ago

Yeah, I added some real XSS protection.

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

idoco30• 11 years ago

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

riomus• 11 years ago

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

Kartificial• 11 years ago

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

goqu• 11 years ago

Was just about to mention that.

idoco30• 11 years ago

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

Rockdtben• 11 years ago

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

https://github.com/idoco/map-chat/pull/11

danso• 11 years ago

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

idoco30• 11 years ago

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.

glomph2• 11 years ago

Would be neat to have private rooms.

idoco30• 11 years ago

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

glomph2• 11 years ago

Sweet!

kenrick953• 11 years ago

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

idoco30• 11 years ago

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.

kenrick953• 11 years ago

From the chat that I followed a while, seems like we agreed that this is a bug rather than a feature :P

Also requested are message history and dots of different colors.

developer13• 11 years ago

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.

aw3c2• 11 years ago

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/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://chatmap.cloudapp.net/chat/info?t=1434731663123'. This request has been blocked; the content must be served over HTTPS

idoco30• 11 years ago

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• 11 years ago

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

kevin3• 11 years ago

So, this is how my experience started. 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• 11 years ago

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.

kevin3• 11 years ago

Hmm...that's my version as well.

Version 8.0.6 (10600.6.3)

leoalves• 11 years ago

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.

glial• 11 years ago

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.

I'm having that problem in Firefox.

idoco30• 11 years ago

Thanks for the feedback. I didn't really tested it on Safari yet (Although I did test it on ios) I will look into that :)

I will try to add some features to improve conversation, you are welcome to add and track these suggestions on the issues page of the project.

tomasien• 11 years ago

I agree about conversations - I actually commented that I wish I could respond to people, and somebody responded to that on the map and we had a quick conversation, just knowing that our dots were for each other. It ruled.

kevin3• 11 years ago

Well, that CloudApp link got taken down. It was a video of Safari asking for location permission over and over again. Here's the reason:

"We've noticed that one of your CloudApp drops has been getting an unusual amount of attention: Screen Recording 2015-06-19 at 09.44 AM.gif has had a download transfer rate of 4.2 GB in the last day or so.

Even though we deeply appreciate you trusting us with your data, this violates our download limit and fair use policy. Unfortunately this is not something we are able to host on our servers.

Your drop has been disabled and can't be reached as of this moment. We haven't deleted it from our servers though so if you need to get it back or feel you might have received this email in error please contact us so we can sort it out."

throwaway12357• 11 years ago

tip: messages should fade after 15? seconds

xigency• 11 years ago

Seems like a fun little project!

Kiro• 11 years ago

I would like a clear button.

html5web• 11 years ago

Just refresh browser :)

shostack• 11 years ago

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.

swsieber• 11 years ago

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• 11 years ago

Came here to post exactly this.

paste0x78• 11 years ago

Do you want to make a snowman? http://imgur.com/YDUgG3U

jonnw3• 11 years ago

good one

aalbertson• 11 years ago

https://www.youtube.com/watch?v=C1ZHetiuRb0

bradbeattie2• 11 years ago

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.

idoco30• 11 years ago

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

bradbeattie2• 11 years ago

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.

zatkin• 11 years ago

"Connection lost, please refresh :("

Every time I load the page.

idoco30• 11 years ago

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?)

sgibat• 11 years ago

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

b44rd• 11 years ago

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

idoco30• 11 years ago

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

redline22• 11 years ago

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

idoco30• 11 years ago

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 :)

kodeninja• 11 years ago

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?

cosmolev• 11 years ago

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

idoco30• 11 years ago

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?

idoco30• 11 years ago

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 :)

xylon• 11 years ago

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.

developer13• 11 years ago

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.

developer13• 11 years ago

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

anigbrowl• 11 years ago

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.

mmrasheed• 11 years ago

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!

etewiah• 11 years ago

Ha haa - interesting to see this. I had something similar in mind when I bought the domain 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.

Show HN: MapChat – A simple location based chat in 300 lines of code

Related Stories