app/assets/javascripts/leaflet.shortbread.js

   1 //= require leaflet.maplibre
   2
   3 L.OSM.Shortbread = L.MaplibreGL.extend({
   4   onAdd: function (map) {
   5     L.MaplibreGL.prototype.onAdd.call(this, map);
   6     const styleURL = "https://vector.openstreetmap.org/demo/shortbread/" + this.options.styleName;
   7     this.getMaplibreMap().setStyle(styleURL, {
   8       transformStyle: (previousStyle, nextStyle) => ({
   9         ...nextStyle,
  10         sprite: [...nextStyle.sprite.map(s => {
  11           return {
  12             ...s,
  13             url: new URL(s.url, styleURL).href
  14           };
  15         })],
  16         // URL will % encode the {} in glyph and source URL so assemble them manually
  17         glyphs: (new URL(styleURL)).origin + nextStyle.glyphs,
  18         sources: {
  19           "versatiles-shortbread": {
  20             ...nextStyle.sources["versatiles-shortbread"],
  21             tiles: [(new URL(styleURL)).origin + nextStyle.sources["versatiles-shortbread"].tiles[0]]
  22           }
  23         }
  24       })
  25     });
  26   },
  27   onRemove: function (map) {
  28     L.MaplibreGL.prototype.onRemove.call(this, map);
  29   }
  30 });
  31
  32 L.OSM.ShortbreadColorful = L.OSM.Shortbread.extend({
  33   options: {
  34     styleName: "colorful.json"
  35   }
  36 });
  37
  38 L.OSM.ShortbreadEclipse = L.OSM.Shortbread.extend({
  39   options: {
  40     styleName: "eclipse.json"
  41   }
  42 });