Custom MapType provider

[arverne63]

Good evening, I created a web page following your leaflet-elevation project with the gpx waypoint icon example. I would like to add an ign map background, for this I have modified the file leaflet-ui-src.js as below after the code of the Topo map (lines 3879 a 3890)

topo : {
          name : "Topo",
          url : "https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png",
          options : {
            maxZoom : 17,
            attribution : 'Map data: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://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>)'
          }
        },

    ign: {
        name : "Ign",
    url: 'https://wxs.ign.fr/{apiKey}/geoportail/wmts?service=WMTS&request=GetTile&version=1.0.0&tilematrixset=PM&tilematrix={z}&tilecol={x}&tilerow={y}&layer={layer}&format=image/jpeg&style=normal',
    options: {
      apiKey: 'jydfj63r1k14ap3e052ws7h6', // <-- CHANGE IT WITH YOUR IGN API KEY
      layer: 'GEOGRAPHICALGRIDSYSTEMS.MAPS',
      minZoom : 0,
      maxZoom : 18,
      tileSize : 256,
      attribution : "IGN-F/Géoportail"
    },

And also add the label "ign" in the mapTypeIds, (line 3977)

mapTypeIds : ["streets", "terrain", "satellite", "topo", "ign"],

but it doesn’t work. Thank you in advance for your help.

Jean Marc.

[arverne63]

Files project leaflet-elevation_gpx-waypoints.txt leaflet-ui-src.txt

[Raruto]

Basically you just need to extend default map options:

var opts = {

  maps: {

    // Common leaflet options
    center: [45.128074, 3.997882],
    zoom: 10,

    // Custom leaflet-ui options
    mapTypeId: 'ign',
    mapTypeIds: ["streets", "terrain", "satellite", "topo", "ign"],
    mapTypes: {
      ign: { // <-- DEFINE A NEW MAPTYPE ID
        name: "IGN",
        url: 'https://wxs.ign.fr/{apiKey}/geoportail/wmts?service=WMTS&request=GetTile&version=1.0.0&tilematrixset=PM&tilematrix={z}&tilecol={x}&tilerow={y}&layer={layer}&format=image/jpeg&style=normal',
        options: {
          apiKey: 'IGN_KEY', // <-- CHANGE IT WITH YOUR IGN API KEY
          layer: 'GEOGRAPHICALGRIDSYSTEMS.MAPS',
          minZoom: 0,
          maxZoom: 24,
          maxNativeZoom: 18,
          tileSize: 256,
          attribution: "IGN-F/Géoportail"
        },
      }
    },

    ...

  }

};

// Set leaflet map options
var map = new L.Map('maps', opts.maps );

Alternatively you can just ovveride one of the predefined map types:

var opts = {

  maps: {

    ...

    mapTypeId: 'topo',
    mapTypeIds: ["streets", "terrain", "satellite", "topo"],
    mapTypes: {
      topo: { // <-- OVERRIDE A DEFAULT MAPTYPE ID
        name: "IGN",
        url: 'https://wxs.ign.fr/{apiKey}/geoportail/wmts?service=WMTS&request=GetTile&version=1.0.0&tilematrixset=PM&tilematrix={z}&tilecol={x}&tilerow={y}&layer={layer}&format=image/jpeg&style=normal',
        options: {
          apiKey: 'IGN_KEY', // <-- CHANGE IT WITH YOUR IGN API KEY
          layer: 'GEOGRAPHICALGRIDSYSTEMS.MAPS',
          minZoom: 0,
          maxZoom: 24,
          maxNativeZoom: 18,
          tileSize: 256,
          attribution: "IGN-F/Géoportail"
        },
      }
    },

    ...

  }

};

Regards, Raruto

[arverne63]

Good morning, It is working very well now. Thank you. Jean Marc