osm-in / flood-map

A simple web map to visualize flood information on maps

Flood Maps

Interactive map to visualize and crowdsource flood related information using OpenStreetMap and Mapbox GL JS. Read more in the press

Flooded Streets Data

The flooded streets layer is contributed by the public. Contributions are anonymous with no version control for the sake of simplicity.

Data dump

You are encouraged to make use of the collected data for further analysis. Download the latest flooded streets layer as a geojson using this Ajax request.

• 11AM Dec 2, 2015

Data Sources

• Base Layer - OpenStreetMap
• Vulnerable and Inundated Areas
  • Inundated areas (Nov 28) Flood Waters Over Chennai Area UNITAR - UNOSAT
  • Inundated areas (Dec 3) ISRO RISAT 1
  • Low lying locations: ISRO Cartodem3 and SRTM 30m
• Flood relief camp locations: Chennai Flood Relief Centres Crowdmapping
• Waterlogged Roads: The NEWSminute

Sources

• HTML5 boilerplate
• Mapbox base.css

Tools

• Mapbox Studio
• Mapbox GL JS
• Mapbox Dataset API

Help us make a better map.

All of us believe in the open source ideology, and we would love your help in making the map data and source code better! Some ways in which you can contribute:

• Please take a look at our open issues, and submit PRs that can fix those issues. You can test the source code on your local machines, by
  • npm install -g serve
  • serve -p 3001
  • Running the map on your browser at localhost:3001
• If you have additional geospatial data related to the Chennai floods, please share them with us so we can add it as a layer to our base map. For example, relief centers, additional crowd-sourced data that could have valuable information etc. You can open an issue for the same in this repository.

flood-map's Issues

custom mapbox styles

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!

mapHighlightReset doesn't always work

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

Turn this repository into a pipeline

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.

TODO:

• Write up documentation for how to set this up for any city, as a first pass.
  • Base map design is the only part that will need to be done manually.
• Write up a script that automatically sets up street selection interaction on any city.

Redeploying FloodMaps for Kerala's floods!

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!

Remote Storage Support

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.

Full project restructure

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.

Mapbox secret key leaked in js.config.js

I think you are leaking mapbox secret key in js/config.js file.

Information Required

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?

Allow users to selectively mark flooded areas

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.

Please update the wiki page!

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

features is an array?

https://github.com/osm-in/flood-map/blob/gh-pages/chennai.html#L336

Is this declared properly? Throwing an error in the console.

Handle accidental submissions

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.

Map not avilable

The map has gone offline and we are not able to view the map.

Mixed content playing spoilsport

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 .

Mapbox tiles missing

Several links to mapbox tiles (.pbf) throw 404.

just an idea

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.

Design feedback

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.

Map legibility

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.

Clearer user guidance

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.

More pragmatic visual design

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.

Optimize data geojson

The crowdsourced geojson is nearing 1mb and we might need to prune the filesize for better performance:

• truncate coordinates to 5 decimal places (13 places currently)
• drop 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

Add additional features

1. rescue ops request
2. Ask for food (location)
3. Ask for shelter
4. Ask for medical help
5. Rescuer map (like have a crowd map of all rescuers of their phone numbers
6. Rescuer map (like have a crowd map of all rescuers email address)

Easier way to retrieve the latest geo data?

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! ]

Deploying FloodMaps in Odisha

Are similar FloodMaps being deployed in the aftermath of Cyclone Fani that hit Odisha?

Redeploying flood map for St. Louis

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?

High traffic is bringing down the database

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

Helpline Numbers

Can we add each and every areas helpline numbers in this map?