[openstreetmap/openstreetmap-website] Add OpenMapTiles vector map (PR #4042)

[Tom Hughes]

@tomhughes commented on this pull request.



> +        openmaptiles_url: "https://openmaptiles.org/",
+        maptiler_url: "https://www.maptiler.com/"
+      });
+
+      var terms = $("<a>", {
+        href: "https://wiki.osmfoundation.org/wiki/Terms_of_Use",
+        text: I18n.t("javascripts.map.website_and_api_terms")
+      }).prop("outerHTML");
+
+      this.baseLayers.push(new L.OpenMapTiles({
+        attribution: copyright + ". " + openmaptiles_link + ". " + terms,
+        code: "V",
+        keyid: "openmaptiles_osm",
+        name: I18n.t("javascripts.map.base.openmaptiles_osm")
+      }));
+    }

So I was able to use this definition:

```yaml
- leafletOsmId: "OpenMapTiles"
  code: "V"
  layerId: "openmaptiles_osm"
  nameId: "openmaptiles_osm"
  apiKeyId: "MAPTILER_KEY"
  credit:
    id: "openmaptiles"
    children:
      openmaptiles_link:
        id: "openmaptiles_url"
        href: "https://openmaptiles.org/"
      maptiler_link:
        id: "maptiler_url"
        href: "https://www.maptiler.com/"
```

with a few changes - move `L.OpenMapTiles` to `L.OSM.OpenMapTiles` and change it to set the style URL in a constructor using the `apikey` option, for example:

```js
    initialize: function (options) {
      L.Util.setOptions(this, {
        ...options,
        style: "https://api.maptiler.com/maps/openstreetmap/style.json?key=" + options.apikey
      });

      L.MaplibreGL.prototype.initialize.call(this);
    },
```

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/4042#discussion_r1966844335
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/4042/review/2635686597 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20250223/defc556a/attachment-0001.htm>