How to display NOAA Charts

[rcriii42]

I am working on a project for the Port of Houston, simulating the dredging activities of the Project 11 channel widening program. The Houston Plots have instituted a '5-mile rule' whereby dredges cannot be within 5 miles of each other in the main channel. I am using Mesa and Mesa-geo to track contractor schedules and see where they might overlap 5-mile zones. In the screenshot below, one dredge is in the main channel, and the oval bubble indicates the 5-mile zone. The smaller green bubble is a dredge in the Bayport Ship Channel where the 5-mile rule does not apply. Mesa and Mesa-geo have been invaluable to me, thanks!

I would like to display a navigation chart rather than the open street map view, and until some time last summer, the URL from this SO answer worked. NOAA has evidently updated the services, and based on the information on the NOAA website I tried the following but get a blank background, so obviously I am doing something wrong. Any ideas would be appreciated.

map_tile = RasterWebTile(
             url="http://www.ngs.noaa.gov/storm_archive/tilesx/tileserver.php?/wmts?/wmts/?/EC1702a-OB-N/{z}/{x}/{y}.png",
             options={
                 "attribution": '&copy; <a href=\"https://www.nauticalcharts.noaa.gov/">NOAAA</a>'
             },
         )

map_element = MapModule(channel_draw,
                        view=[29.5, -94.875], zoom=10,  # center window on a point in the bay
                        map_height=1000,
                        map_width=map_width,
                        tiles=map_tile)

[wang-boyu]

This is an interesting problem to solve!

First of all, the service url "http://www.ngs.noaa.gov/storm_archive/tilesx/tileserver.php?/wmts?/wmts/?/EC1702a-OB-N/{z}/{x}/{y}.png" doesn't seem to work. When it is used, there are lots of 404 errors in the console.

From here it mentioned that there are new services from NOAA as listed in: https://nauticalcharts.noaa.gov/data/gis-data-and-services.html#enc-display-services

Using the "OGC Web Map Service (WMS)" under NOAA Chart Display Service from the webpage as an example -

import mesa_geo as mg

# use `WMSWebTile` instead of `RasterWebTile`
map_tile = mg.WMSWebTile(
    url="https://gis.charttools.noaa.gov/arcgis/rest/services/MCS/NOAAChartDisplay/MapServer/exts/MaritimeChartService/WMSServer/",
    options={
        "layers": "0,1,2,3,4,5,6,7,8,9,10,11,12",
        "attribution": '&copy; <a href="https://www.nauticalcharts.noaa.gov/">NOAAA</a>',
    },
)

it seemed to be working (I randomly chose a place to view the map)

But to make it work for you, firstly there's a bug in Mesa-Geo that needs to be fixed: #140. There appears to be some CI issues that I need to fix in order to merge it. If you happen to have a development environment, you may try to fix it at your local environment. It's a simple fix, simple change

mesa-geo/mesa_geo/tile_layers.py

Line 57 in bea0f32

kind = "wms_web_tile"

to

kind: str = "wms_web_tile"

But of course you could also wait for the PR : )

In addition you'll need to use WMSWebTile instead of RasterWebTile as in the code above. To use WMS tiles with Leaflet.js properly, you will at least need to find out:

1. The service url
2. The provided layers from the service

For instance, in the example if you click the "OGC Web Map Service (WMS)" link under NOAA Chart Display Service, there'll be a page full of XML. I found the service url and layer names inside it.

In general I found WMS services slightly more difficult to use. For more information you could refer to these links:

• WMS and TMS
• TileLayer.WMS

Perhaps it would be good to specify WMS service version number (which can also be found from the XML page) too, in case things went wrong, such as

map_tile = mg.WMSWebTile(
    url="https://gis.charttools.noaa.gov/arcgis/rest/services/MCS/NOAAChartDisplay/MapServer/exts/MaritimeChartService/WMSServer/",
    options={
        "layers": "0,1,2,3,4,5,6,7,8,9,10,11,12",
        "version": "1.3.0",
        "attribution": '&copy; <a href="https://www.nauticalcharts.noaa.gov/">NOAAA</a>',
    },
)

but it worked for me without it.

Hope this helps! I sincerely wish they could provide the previous raster tile services.

[wang-boyu]

The PR has been merged so the main branch should work for the usage of WMSWebTile now.

[rcriii42]

Thanks! I had originally looked at the WMSWebTile, but could not make it work. Here is the app with the standard chart display:

map_tile = WMSWebTile(url="https://gis.charttools.noaa.gov/arcgis/rest/services/MCS/NOAAChartDisplay/MapServer/exts/MaritimeChartService/WMSServer/",

                      options={"layers": "0,1,2,3,4,5,6,7,8,9,10,11,12",
                               # "version": "1.3.0",  #  The maps don't display when this is enabled
                               "attribution": '&copy; <a href="https://www.nauticalcharts.noaa.gov/">NOAA</a>',
                               },
                      )

map_element = MapModule(channel_draw,
                        view=[29.5, -94.875], zoom=10,  # center window on a point in the bay
                        map_height=1000,
                        map_width=map_width,
                        tiles=map_tile)

Now that I know what to look for, here is the version with International Hydrographic Organization (IHO) symbology. I replaced the base URL with "https://gis.charttools.noaa.gov/arcgis/rest/services/MCS/ENCOnline/MapServer/exts/MaritimeChartService/WMSServer"

Both are pretty busy at the scale I am using, but with your help I now know what to look for!

[Update: Fixed typo in the word "NOAA"]

[wang-boyu]

That's great! The map looks busy probably because I put all layers inside (from 0 to 12). You may find your ideal layers and their names by looking inside their XML and only use those that are needed.

Have fun!

[rcriii42]

I created a small layer browser to help me figure out what the layers look like and try combinations: https://github.com/rcriii42/mesa-geo-navex

[wang-boyu]

Cool!