• 2

Question:Can someone make a map to display NOAA Harvey imagery with coordinates and permalink?

warren asked on September 20, 2017 15:26
152 | 3 answers | shortlink


We are creating a workflow for folks to scan through NOAA Harvey aerial imagery to find flooding, flaring, and other pollution incidents at industrial sites:

https://storms.ngs.noaa.gov/storms/harvey/index.html

The problem is that:

  1. you can't see latitude and longitude on the map as you browse around
  2. you can't permalink to a particular location or image so that you can share that exact view, for example in a report

I think the NOAA map is probably using some kind of standard map tile display. Can someone write a map with those features that loads the same imagery sets to make it easier for people to report pollution?

Thank you!!!

Screenshot_2017-09-20_at_10.37.43_AM.png



mapping maps leaflet gis disaster-response harvey hurricanes web-mapping noaa

question:harvey



0 Comments

Log in to comment

3 Answers

Adding coordinates to a Mapbox GL map is pretty straight forward.

Not sure that Mapbox GL supports permalinks, but then again I might be misunderstanding this exchange.

I did find a permalink solution for Leaflet, but I think you'd have to do something like this which probably defeats the whole purpose of Mapbox GL.

Getting the NOAA data in there is a step beyond me.

If somebody wants to point me to a repo for this map, I'll add the coordinates code.


jbreen 2 months ago

Actually, looking at the source code this is just mapbox.js and not mapbox-gl.js. So that permalink solution should work, might need something else for the coordinates.

warren 2 months ago

Ooh, and here are the layers:


var aug27a_ob = new L.mapbox.tileLayer('https://storms.ngs.noaa.gov/storms/tilesd/services/tileserver.php?/20170827-rgb.json', {errorTileUrl:'../harvey/images/clear.png'}).addTo(map);
var aug28a_ob = new L.mapbox.tileLayer('https://storms.ngs.noaa.gov/storms/tilesd/services/tileserver.php?/20170828a-rgb.json', {errorTileUrl:'../harvey/images/clear.png'}).addTo(map);
var aug28b_ob = new L.mapbox.tileLayer('https://storms.ngs.noaa.gov/storms/tilesd/services/tileserver.php?/20170828b-rgb.json', {errorTileUrl:'../harvey/images/clear.png'}).addTo(map);
var aug29a_ob = new L.mapbox.tileLayer('https://storms.ngs.noaa.gov/storms/tilesd/services/tileserver.php?/20170829a-rgb.json', {errorTileUrl:'../harvey/images/clear.png'}).addTo(map);
var aug29b_ob = new L.mapbox.tileLayer('https://storms.ngs.noaa.gov/storms/tilesd/services/tileserver.php?/20170829b-rgb.json', {errorTileUrl:'../harvey/images/clear.png'}).addTo(map);
var aug30a_ob = new L.mapbox.tileLayer('https://storms.ngs.noaa.gov/storms/tilesd/services/tileserver.php?/20170830-rgb.json', {errorTileUrl:'../harvey/images/clear.png'}).addTo(map);
var aug31a_ob = new L.mapbox.tileLayer('https://storms.ngs.noaa.gov/storms/tilesd/services/tileserver.php?/20170831a-rgb.json', {errorTileUrl:'../harvey/images/clear.png'}).addTo(map);
var aug31b_ob = new L.mapbox.tileLayer('https://storms.ngs.noaa.gov/storms/tilesd/services/tileserver.php?/20170831b-rgb.json', {errorTileUrl:'../harvey/images/clear.png'}).addTo(map);
var sept01a_ob = new L.mapbox.tileLayer('https://storms.ngs.noaa.gov/storms/tilesd/services/tileserver.php?/20170901a-rgb.json', {errorTileUrl:'../harvey/images/clear.png'}).addTo(map);
var sept01b_ob = new L.mapbox.tileLayer('https://storms.ngs.noaa.gov/storms/tilesd/services/tileserver.php?/20170901b-rgb.json', {errorTileUrl:'../harvey/images/clear.png'}).addTo(map);
var sept01c_ob = new L.mapbox.tileLayer('https://storms.ngs.noaa.gov/storms/tilesd/services/tileserver.php?/20170901c-rgb.json', {errorTileUrl:'../harvey/images/clear.png'}).addTo(map);
var sept02a_ob = new L.mapbox.tileLayer('https://storms.ngs.noaa.gov/storms/tilesd/services/tileserver.php?/20170902a-rgb.json', {errorTileUrl:'../harvey/images/clear.png'}).addTo(map);
var sept02b_ob = new L.mapbox.tileLayer('https://storms.ngs.noaa.gov/storms/tilesd/services/tileserver.php?/20170902b-rgb.json', {errorTileUrl:'../harvey/images/clear.png'}).addTo(map);
var sept02c_ob = new L.mapbox.tileLayer('https://storms.ngs.noaa.gov/storms/tilesd/services/tileserver.php?/20170902c-rgb.json', {errorTileUrl:'../harvey/images/clear.png'}).addTo(map);
var sept03a_ob = new L.mapbox.tileLayer('https://storms.ngs.noaa.gov/storms/tilesd/services/tileserver.php?/20170903a-rgb.json', {errorTileUrl:'../harvey/images/clear.png'}).addTo(map);

warren 2 months ago

all in https://storms.ngs.noaa.gov/storms/harvey/js/app.js

Log in to comment

There's a good thread going on Twitter on this!

https://twitter.com/PublicLab/status/910574138242273281


jbreen 2 months ago

Is there anyone but me responding to the Twitter?

warren 2 months ago

not yet!

warren about 1 month ago

Hi, @jbreen -- I'm working on a related Leaflet project if you still have any time to add in the permalink and coords plugins you found -- https://github.com/publiclab/leaflet-archive is designed to try to display a map based on an https://Archive.org image collection, using the GPS Exif tags. If you're looking for a project! Trying to widen the set of imagery we can run through this workflow.

jbreen about 1 month ago

Hi @warren -- just sent you a pull request.

warren about 1 month ago

Awesome -- looks super! https://publiclab.github.io/leaflet-archive/#14/30.0679/-93.5891

warren about 1 month ago

https://publiclab.github.io/leaflet-archive/#11/30.0602/-93.5753&limit=10 too

Log in to comment

hey guys,

I work on the NOAA pages. I just added permalinks and mouseover lat/lon coords to both the Hurricane Harvey and Irma imagery pages. The changes should be live tomorrow morning.


warren 2 months ago

That's tremendous, thank you Jason! Much obliged.

liz 2 months ago

Wow this is super amazing! Thank you @jasonwool ! So great to meet you.

jasonwool 2 months ago

Permalinks and mouseover Lat/Lons now working on Harvey and Irma pages at: https://storms.ngs.noaa.gov/storms/harvey/index.html and https://storms.ngs.noaa.gov/storms/irma/index.html

Let me know if it doesn't work as expected. Thanks for what you guys do!

warren 2 months ago

It works!!

https://storms.ngs.noaa.gov/storms/harvey/index.html#13/27.9218/-97.1129

liz 2 months ago

awesome!

warren 2 months ago

Hi, @jasonwool - this doesn't seem to be working anymore; can you confirm if it's still up and running? Thanks!

jasonwool 2 months ago

hey - Yeah, it seems to be ok here. Working for me in Chrome and FF. What type of error are you seeing?

warren 2 months ago

Oh super, it's working again now. Weird, i wonder if it was related to caching somehow... anyways looks good now! Thanks again!

Zengirl2 about 1 month ago

@jasonwool TY for the quick help!

warren about 1 month ago

@jasonwool - if you're interested, we would LOVE to meet you in person at the Public Lab Barnraising -- https://publiclab.org/barnraising -- Nov 3-5 in Cocodrie, Louisiana; this is our annual community event and Harvey and Irma imagery (as well as other disaster response issues) will surely be one of the big topics this year.

Thanks again!

jasonwool about 1 month ago

Cool! Thanks for the invite. I'll see what I can do.

Log in to comment

Sign up or Login to post an answer to this question.