Search code examples
mapboxwms

Connect US BLM WMS to Mapbox


I am trying to add the WMS for the PLSS (public land survey system) published by BLM.gov to a Mapbox map, to make the Township/Range/Section grid visible, and I can't get it to display on the map. I suspect there's an issue with syntax between the Mapbox JS request and what the BLM WMS expects as a query.

I've been working with the mapbox published example for adding a WMS, modded for the BLM site, code below:

mapboxgl.accessToken = 'MY_KEY';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/light-v10',
        zoom: 8,
        center: [-95, 38]
    });

    map.on('load', function() {
        map.addSource('wms-test-source', {
            'type': 'raster',
            'tiles': [
            'https://gis.blm.gov/arcgis/services/Cadastral/BLM_Natl_PLSS_CadNSDI/MapServer/WmsServer?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.3.0&request=GetMap&srs=EPSG:3857&width=256&height=256&layers=1'
        ],
        'tileSize': 256
    });
    map.addLayer(
        {
            'id': 'wms-test-layer',
            'type': 'raster',
            'source': 'wms-test-source',
            'paint': {}
        },
    'aeroway-line'
    );
});

Does anyone see what I need to change to get this to overlay the PLSS grid, I'd be very greatful!


Solution

  • Per Thomas Martin's comment below, I utilized the tileLayer function as described here: docs.mapbox.com/mapbox.js/example/v1.0.0/wms to accomplish my goal. Code as per below:

    L.mapbox.accessToken = 'pk.eyJ1IjoicGV0cm9hbmFseXRpY2EiLCJhIjoiY2s2dTlicXQzMDdqbDNnbzhsNGo4ZjY0MCJ9.u5nBRLm8b6RwZKKXGh-L4w';
    var map = L.mapbox.map('map')
        .setView([37, -99], 8)
        .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
    
    // Add each wms layer using L.tileLayer.wms
    var Sections = L.tileLayer.wms('https://gis.blm.gov/arcgis/services/Cadastral/BLM_Natl_PLSS_CadNSDI/MapServer/WmsServer', {
        format: 'img/png',
        transparent: true,
        layers: 2
    }).addTo(map);
    
    var Townships = L.tileLayer.wms('https://gis.blm.gov/arcgis/services/Cadastral/BLM_Natl_PLSS_CadNSDI/MapServer/WmsServer', {
        format: 'img/png',
        transparent: true,
        layers: 1
    }).addTo(map);