Custom base layer (tile provider) and layers control

[gemblev]

Hello,

I inherit functions from the ui 0.3.0 plugin to use your leaflet-elevation 2.4.0 plugin. I would like to use a layer manager other than the layer manager of your ui plugin.

For my layer manager to display the IGN map by default, I have to set the layersControl to true, otherwise the Open Topo Map layer is displayed by default. So I have 2 icons layer manager displayed. How to get only one control, which is the leaflet L.control.layers ?

Here's the code. My comments are in French, but I can translate them if you wish.

Thank you.

function loadLeafletVisuRandonnee(laclefIGN, viewerDiv, trace_gpx, nom_rando) {
  (function(global, L) {
    "use strict";
    var couches = {};
    var overlays = {};

    ///////////////////// function layerUrl(key, layer) ////////////////////////
    function layerUrl(key, layer) {
      return "https://wxs.ign.fr/" + key +
        "/geoportail/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&" +
        "LAYER=" + layer + "&STYLE=normal&TILEMATRIXSET=PM&" +
        "TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image%2Fjpeg";
    }

    // la couche IGN carte top25
    couches['IGN SCAN 25'] = L.tileLayer(
      layerUrl(
        laclefIGN, "GEOGRAPHICALGRIDSYSTEMS.MAPS"
      ), {
        attribution: '&copy; <a href="http://www.ign.fr/">IGN</a>'
      }
    );

    // la couche OpenTopoMap
    couches['Open Topo Map'] = L.tileLayer(
      '//{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="https://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
      }
    );

    // La couche Photographies aériennes
    couches['IGN Photos aériennes'] = L.tileLayer('https://wxs.ign.fr/{ignApiKey}/geoportail/wmts?' +
      '&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&TILEMATRIXSET=PM' +
      '&LAYER={ignLayer}&STYLE={style}&FORMAT={format}' +
      '&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}', {
        ignApiKey: 'pratique',
        ignLayer: 'ORTHOIMAGERY.ORTHOPHOTOS',
        style: 'normal',
        format: 'image/jpeg',
        service: 'WMTS'
      });

    // instanciation de map
    var map = L.map(viewerDiv, {
      layers: [couches['IGN SCAN 25']],
      center: [47.88, -3.582],
      zoom: 10,
      printControl: true,
      minimapControl: false,
      gestureHandling: false,
      searchControl: true,
      pegmanControl: false,
      locateControl: true,
      layersControl: true, // Y must set to true to have  IGN map set by default
      //layersControl: false,
      fullscreenControl: true,
      resizerControl: true,
      preferCanvas: false,
      rotate: true,
      rotateControl: {
        closeOnZeroBearing: true
      },
    });

    // Ajout d un controle pour le choix des couches
    L.control.layers(couches, overlays, {
      position: 'bottomright'
    }).addTo(map);

    // graphique altitude   
    var elevation_options = {
      position: 'topright',
      //theme: "lime-theme",
      theme: "lightblue-theme",
      detached: false,
      collapsed: true,
      autohide: false,
      legend: false,
      downloadLink: true,
      almostOver: true,
      edgeScale: false,
      //direction: true,
      distanceMarkers: {
        distance: true,
        direction: true,
        lazy: true
      }
    };

    // Instanciation du controle altitude
    var controlElevation = L.control.elevation(elevation_options);
    controlElevation.addTo(map);

    // chargement de la trace .gpx
    controlElevation.load(trace_gpx);

  })(window, L);
} // fin function (global, L)

[Raruto]

To change the default layers, it should be enough to instantiate your map using any of these options according to your needs:

https://github.com/Raruto/leaflet-ui/blob/31b300a69f0ae70b1d0c767686ca1c25c541f03a/src/leaflet-ui.js#L244-L248

https://github.com/Raruto/leaflet-ui/blob/31b300a69f0ae70b1d0c767686ca1c25c541f03a/src/leaflet-ui.js#L85-L145

after that, it should work as you expect as well:

// layersControl: true, // Y must set to true to have  IGN map set by default
layersControl: false,

For further info see here 👉 https://github.com/Raruto/leaflet-ui/issues/1#issuecomment-538546557

👋 Raruto

[gemblev]

It works very well :) Thanks a lot