0

I've imported customized basemap from Mapbox studio, and want to create a webpage for visualization using qgis2web plugin. The QGIS imports and displays the base map from map box properly.

However, when I try to create webpage using the qgis2web plugin it isn't showing the one imported from Map box, nor is the "Mapbox GL JS" getting highlited for me to select. It imports other base maps but not from Mapbox. I have attached the screen shot of same.

Any solution please?

enter image description here

Improve this question
4
  • 1
    The Mapbox GL JS export was removed a while ago as it was no longer supported. I will remove the writing to avoid any misunderstanding. You can still insert your WMS or XYZ base maps and export the project with openlayers and leaflets. A guide here qgis2web.github.io/qgis2web/#setBasemaps
    – andreaordonselli
    Commented Jul 11 at 7:30
  • Hi, thank you for the response. I can import it as WMS base map. However, when I try to export it using qgis2web, the web map imported as WMS layer via mapbox doesn't show. Any solutions for that pelase?
    – Adarsh M Kulkarni
    Commented Jul 16 at 11:50
  • Can you create a zip from your QGIS project or your export and upload it to the web and link it here?
    – andreaordonselli
    Commented Jul 16 at 12:50
  • I have uploaded it to my Gdrive, the line and point are test layers. The "Outdoors" base map is obtained from Mapbox, which doesn't export in the plugin. Here is the link. drive.google.com/drive/folders/… It contains the project file as well. Thank you
    – Adarsh M Kulkarni
    Commented Jul 17 at 9:06

1 Answer 1

Reset to default
0

Export with openlayers then reach the layers.js file contained in the layers folder, modify your layer by adding tileLoadFunction: customLoader and add the customLoader function at the beginning of the file in which you will have to enter your username and password

function customLoader(tile, src) {
        var client = new XMLHttpRequest();
        client.open('GET', src);
        // Uncomment to pass authentication header
        //var user = '';
        //var pass = '';
        //client.setRequestHeader("Authorization", "Basic " + window.btoa(user + ":" + pass));
        client.onload = function() {
          tile.getImage().src = src;
        };
        client.send();
      }

    var lyr_Outdoors_0 = new ol.layer.Tile({
        source: new ol.source.WMTS(({
            url: "https://api.mapbox.com/styles/v1/adarshredhill/clyocmzb9004h01pidczp9caf/wmts",
            attributions: ' ',
            tileLoadFunction: customLoader,
            "layer": "clyocmzb9004h01pidczp9caf",
            "TILED": "true",
            matrixSet: 'EPSG:3857',
            format: 'image/png',
            projection: projection_Outdoors_0,
            tileGrid: new ol.tilegrid.WMTS({
                origin: ol.extent.getTopLeft(projectionExtent_Outdoors_0),
                resolutions: resolutions_Outdoors_0,
                matrixIds: matrixIds_Outdoors_0
            }),
            style: 'default',
            wrapX: true,
            "VERSION": "1.0.0",
        })),
        title: "Outdoors",
        opacity: 1.0,
    
    
    });
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.