osm-in / flood-map Goto Github PK
View Code? Open in Web Editor NEWA simple web map to visualize flood information on maps
Home Page: http://osm-in.github.io/flood-map/
License: MIT License
A simple web map to visualize flood information on maps
Home Page: http://osm-in.github.io/flood-map/
License: MIT License
https://github.com/osm-in/flood-map/blob/gh-pages/chennai.html#L199
Mixed content doesn't load well in modern browsers. Plain HTTP content getting blocked .
At the moment when a user marks a street, the whole street selected as flooded. This might not accurately reflect the flood situation on the ground.
First report in down street codebase here: nickmcintyre#4
Current work-flow
User zoom in and tap/click to select a street
The whole street or road is highlighted as flooded.
I think it is important to let the users select the areas that currently are flooded selectively. They can select a street, highlight only those areas that are effected. Or they can draw polygon shapes to highlight open areas that are currently flooded.
Expected work-flow
User zoom in and tap/click to select a street
A part of the street is highlighted.
User can resize the highlighted to show which areas are affected.
Alternatively we can let users paint a large area using polycon fill to highlight areas underwater. The user can use resize markers or paint with touch gestures.
Hello there! This map was of immense use during the Chennai floods. Wouldn't it be a good idea to redeploy this for the Kerala floods now in 2018, and spread the word? At least in major towns and cities this should be of great use!
Currently, this repository works fine as a single stand up application for working with flood tracking in a single city, Chennai, but the instructions for setting it up to work for other cities are non-existent, creating great confusion on how to replicate this for a new city.
The map has gone offline and we are not able to view the map.
Are similar FloodMaps being deployed in the aftermath of Cyclone Fani that hit Odisha?
Hey there! The flood map is incredibly promising. I love that you all managed to pull this together so quickly. I think the user experience could be dramatically improved with a few changes.
There are too many competing visual elements on this map. The goal of the map is to show users which streets are flooded and allow users to report additional flooded streets and the map should be laser focused on that goal.
There is no legend. I don't know what I'm looking at. What are the icons with triangles in them?
How does the default pitch setting support the goal of the map?
At high zoom levels the underlying satellite imagery is it too low resolution to be usable. If you want to use the satellite imagery to orient users at lower zoom levels, that's fine: but as the user zooms in, the satellite layer should fade away and be replaced with a solid background so the focus of the map moves to the roads.
Why was the starting template Mapbox streets? The map contains a lot of unnecessary details that distract from the primary goal of the map. I circled three POIs that have the same visual style and same level of visual hierarchy as the relief camps, but are irrelevant to the goal of the map:
Another problem with using the streets template is that the template was designed specifically to work against a beige background. Using a blue background without modifying other parts of streets leads to illegible neighborhood labels and harsh text halos. If the map would have been based on light or dark and then adjusted to match the background color, these problems would go away and the map would be much more legible.
When designing applications, the tool should 1) quickly and clearly teach users how to use the tool, and then 2) allow users to focus on using the tool.
I numbered the areas based on what I think users should see first:
Right now, the map overpowers everything and then the bottom right overlay and the sidebar both have similar, competing visual weight.
It would be best to first introduce users to the tool with a centered overlay with a concise explanation of the tool and how it works, and then afterwards, show just map and the legend. The added advantage of an intro overlay is that the user wouldn't see a distracting GIF infinitely looping in the sidebar when trying to help report floods.
Once the user starts clicking on the map, there should be more feedback. It's far too easy to click on the map and get no feedback and then give up, or alternatively click all over the map without realizing that you're "reporting" floods. When user successfully reports a flood, tell them. Maybe even give user a chance to confirm their changes to avoid misreported flooding. If a user clicks on the map at a zoom level that is too high, tell them.
What was the intention with using a custom scrollbar? It's buggy and it doesn't add anything to the experience.
Why did you choose to use a semi-transparent sidebar? Semi-transparency might look cool, but it almost always detracts from the legibility of the content in the semi-transparent area and should be used sparingly in UI design.
@planemad, @arunasank, @batpad, @prasannavl, @geohacker โ Hopefully you find this feedback helpful. Happy to talk about any of these suggestions in more detail.
Hey developers,
It would be helpful to have a road map of this project in your wiki page if you plan to add more functionality. I would be happy to contribute to your project! You can read about my background here - https://sites.google.com/site/solovimal/research
I think you are leaking mapbox secret key in js/config.js file.
We need a better way to handle accidental submissions. It is a common problem on touch interfaces: a user might accidentally mark a road as flooded while using zooming, panning touch gestures.
Reported in downstream code: nickmcintyre#1
The current workaround is to tap again to mark the road as flooded. This could be documented in the usage dialog box next to 'Zoom in to your street and click/tap to report it as flooded (or cleared)'.
In the long term, it would be good to provide a change history. The user might choose to revert certain changes before submitting the reports.
Great job on quickly hacking up so far. But I guess, this has grown reasonably and so I thought I'll migrate it to a project structure with npm
, and a build system - so we can slowly start modularizing it.
Unfortunately, there is no master
branch on this - so, I haven't created a Pull Request
yet. If this seems okay to you guys, please create a master branch and let me know so I can create a PR, or jus t directly base it off my master here: https://github.com/prasannavl/flood-map/tree/master
I've also written Travis
build scripts to auto create a travis build and push to the gh-pages
branch whenever someone pushes to the master
so it auto build using gulp
. Does all the image minimization, compression, minification, runs tests if required, and auto deploys from master
.
Will modify README accordingly if this makes sense to you guys. For testing it out, please clone my master
branch, and run npm install
, and the gulp build
to get the local build.
PS: Also for Travis an autodeply ssh
key is required, which will have to be added after encrypting it to the .travis
for auto commits to gh-pages
- but all the base work is already done.
mapHighlightReset
seemed to work (or atleast doesn't do what is expected out of it), but I can't seem to reproduce it working and fails in most scenarios - atleast on Chrome 48, and Firefox dev. Perhaps, related to this - roads doesn't work either. (I haven't looked into it properly yet, so not quite sure if it has to be a separate issue).
https://github.com/osm-in/flood-map/blob/gh-pages/chennai.html#L336
Is this declared properly? Throwing an error in the console.
Current method states to 'Download the latest flooded streets layer as a geojson using this Ajax request.'
However it's a little clunky especially when operating on a headless, serverside environment.
At the moment, I am doing a 'Copy All as HAR' on Chrome Dev Inspector to a JSON text file and then parsing out the AJAX queries via perl next if $url !~ /api.mapbox.com/datasets/v1/chennaiflood/cihoxpoqp0000vjkq160aw68g/features?access_token/;
Is there a more direct, simpler, programmatic way to do that? Preferably one direct curl request to dump out all the data in JSON format.
[Btw, we are using this to power http://chennai-akkarai.ngrok.com Thanks for all the work! ]
Just got this message on my Wikipedia page
Hello,
I saw your flood map, St. Louis Missouri USA could use your right now!
Is this something that can be deployed quickly or something that takes backend time to setup?
Ideally if you could set this up so that it could be used anywhere on top of google maps for emergencies.
There is a flood warning in Missouri right now and is a good use case for making flood-map a reusable tool to crowdsource information during future emergencies.
@batpad @geohacker @arunasank what does it take to redeploy this for a new location? Also how can we make this community owned so that anyone can redeploy in times of crisis?
Several links to mapbox tiles (.pbf) throw 404.
The crowdsourced geojson is nearing 1mb and we might need to prune the filesize for better performance:
oneway
and type
field from properties. We can always query that from OSM later.This should give around 30% reduction in data size
cc @arunasank
Is there a centralized database for the map?
If someone host flood map on his/her website. Any update on that instance will be reflected on the master database i.e the database of http://osm-in.github.io/flood-map.?
or vice versa
If someone update on that master database i.e the database of http://osm-in.github.io/flood-map. Will that be reflected on the website hosted by someone else?
Can we add each and every areas helpline numbers in this map?
I tried all ways to mark water logged points in the map but in vain
How to add them?
https://osm-in.github.io/flood-map/chennai.html#19/13.09008/80.19136
Since it is jammed with high traffic and also because most of the city is without power and most do not have access to social media anymore for sending live updates...The news now circulating seems to be old and could be dangerous if not updated. Right now, there are excel sheets with current and updated information circulated on facebook. Maybe you can work with them and do the updates regularly on the map. Or work with a news agency and map information. My suggestion is that it needs to be monitored even if crowd sourced. The situation on the roads is constantly changing. This map is a great idea, and if you can keep it current and real time it would be very useful.
Hi,
I've been trying to build a mapbox styles, but it doesn't seem to work as I am getting errors like:
Uncaught TypeError: Cannot read property 'geometry' of undefined
How do we add our custom mapbox style? Maybe a step by step guide?
All the best!
Please kindly support offline support using remote storage (https://remotestorage.io/) or something similar. This will help us to use this on mobile phones in remote disaster zones.
Having the map tiles cached and reports stored in a shared remotestorage would enabled us to promote the use this project in areas where reliable Internet connectivity is present.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.