app/assets/javascripts/embed.js.erb

   1 //= depend_on settings.yml
   2 //= depend_on settings.local.yml
   3 //= depend_on layers.yml
   4 //= require osm_embed
   5 //= require maplibre-gl/dist/maplibre-gl
   6 //= require i18n
   7 //= require i18n/embed
   8 //= require maplibre/attribution
   9 //= require maplibre/map
  10 //= require maplibre/controls
  11
  12 if (navigator.languages) {
  13   OSM.i18n.locale = navigator.languages[0];
  14 } else if (navigator.language) {
  15   OSM.i18n.locale = navigator.language;
  16 }
  17
  18 OSM.i18n.defaultLocale = <%= I18n.default_locale.to_json %>;
  19 OSM.i18n.enableFallback = true;
  20
  21 window.onload = function () {
  22   const args = new URLSearchParams(location.search);
  23
  24   const isDarkTheme = args.get("theme") === "dark" || (args.get("theme") !== "light" && window.matchMedia("(prefers-color-scheme: dark)").matches);
  25   const layers = <%= MapLayers::embed_definitions("config/layers.yml").to_json %>;
  26   <% if Settings.key?(:tile_cdn_url) %>
  27   layers.mapnik.style.sources["raster-tiles-mapnik"].tiles = [<%= Settings.tile_cdn_url.to_json %>];
  28   <% end %>
  29   const layerId = (args.get("layer") || "").replaceAll(" ", "");
  30   const layerConfig = layers[layerId] || layers.mapnik;
  31
  32   const style = isDarkTheme && layerConfig.styleDark ? layerConfig.styleDark : layerConfig.style;
  33
  34   const map = new OSM.MapLibre.Map({
  35     container: "map",
  36     style,
  37     attributionControl: false,
  38     allowRotation: layerConfig.isVectorStyle,
  39     zoomSnap: layerConfig.isVectorStyle ? 0 : 1
  40   });
  41
  42   const bbox = (args.get("bbox") || "-180,-90,180,90").split(",");
  43   map.fitBounds([[bbox[0], bbox[1]], [bbox[2], bbox[3]]], { animate: false });
  44
  45   const position = document.documentElement.dir === "rtl" ? "left" : "right";
  46   const attribution = new OSM.MapLibre.AttributionControl({
  47     credit: layerConfig.credit,
  48     includeReportLink: true
  49   });
  50   map.addControl(attribution, `bottom-${position}`);
  51
  52   const navigationControl = new OSM.MapLibre.NavigationControl();
  53   map.addControl(new OSM.MapLibre.CombinedControlGroup([navigationControl]), `top-${position}`);
  54
  55   if (args.has("marker")) {
  56     const markerCoords = args.get("marker").split(",").map(parseFloat);
  57     new OSM.MapLibre.Marker({ color: "#9cef11" })
  58       .setLngLat([markerCoords[1], markerCoords[0]])
  59       .addTo(map);
  60   }
  61 };