@lblod/ember-rdfa-editor-lblod-plugins 35.1.1 → 35.1.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 35.1.2
+
+### Patch Changes
+
+- [#634](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/634) [`7f89a0f`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/7f89a0f010d4f843407390621cdab4f0966deb02) Thanks [@kobemertens](https://github.com/kobemertens)! - Change the default tile server of location plugin to GBR and add OSM as an option
+
 ## 35.1.1
 
 ### Patch Changes

package/addon/components/location-plugin/map.gts

@@ -20,6 +20,10 @@ import {
   GeoPos,
   type GlobalCoordinates,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/location-plugin/utils/geo-helpers';
+import AuToggleSwitch from '@appuniversum/ember-appuniversum/components/au-toggle-switch';
+import AuCard from '@appuniversum/ember-appuniversum/components/au-card';
+import { on } from '@ember/modifier';
+import set from '@lblod/ember-rdfa-editor-lblod-plugins/helpers/set';
 
 // Taken from Leaflet's default icon, with the viewbox tweaked (from 0 0 500 820), so that the icon
 // is a whole number of pixels in size, to make positioning the point easy.
@@ -56,16 +60,26 @@ const MARKER_ICON = Leaflet.divIcon({
 export const SUPPORTED_LOCATION_TYPES = ['address', 'place', 'area'] as const;
 export type LocationType = (typeof SUPPORTED_LOCATION_TYPES)[number];
 
-const MAP_TILE_ATTRIBUTION =
-  '&copy; <a target="_blank" href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
-const MAP_TILE_URL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+const TILE_PROVIDER_CONSTANTS = {
+  OPEN_STREET_MAP: {
+    ATTRIBUTION:
+      '&copy; <a target="_blank" href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    URL: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+  },
+  GRB: {
+    ATTRIBUTION:
+      'Bron: Grootschalig Referentie Bestand Vlaanderen, Digitaal Vlaanderen',
+    URL: 'https://geo.api.vlaanderen.be/GRB/wmts?layer=grb_bsk&style=GRB-Basiskaart&tilematrixset=GoogleMapsVL&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={z}&TileCol={x}&TileRow={y}',
+  },
+};
+
 const COORD_SYSTEM_CENTER: GlobalCoordinates = {
   lng: 4.450822554431,
   lat: 50.50526730529,
 };
 const COORD_SYSTEM_START = {
   center: COORD_SYSTEM_CENTER,
-  zoom: 7,
+  zoom: 8,
 };
 
 function isLast(array: unknown[], index: number) {
@@ -216,6 +230,7 @@ class MapWrapper extends Component<MapWrapperSig> {
 
 export default class LocationPluginMapComponent extends Component<Signature> {
   @tracked vertices: GlobalCoordinates[] = [];
+  @tracked useOpenStreetMaps = false;
 
   // Use untracked properties as otherwise the map jumps to any area or location we pick
   existingAreaBounds = generateBoundsFromShape(this.args.existingArea);
@@ -259,6 +274,14 @@ export default class LocationPluginMapComponent extends Component<Signature> {
     return 'center' in this.mapLocation ? this.mapLocation.center : false;
   }
 
+  get tileProvider() {
+    if (this.useOpenStreetMaps) {
+      return TILE_PROVIDER_CONSTANTS.OPEN_STREET_MAP;
+    } else {
+      return TILE_PROVIDER_CONSTANTS.GRB;
+    }
+  }
+
   @action
   onMapClick(event: LeafletMouseEvent) {
     if (this.args.locationType === 'place') {
@@ -280,6 +303,11 @@ export default class LocationPluginMapComponent extends Component<Signature> {
     }
   }
 
+  @action
+  stopEventPropagation(event: MouseEvent) {
+    event.stopPropagation();
+  }
+
   <template>
     <div
       class='map-wrapper
@@ -291,10 +319,46 @@ export default class LocationPluginMapComponent extends Component<Signature> {
         @onClick={{this.onMapClick}}
         as |layers|
       >
-        <layers.tile
-          @url={{MAP_TILE_URL}}
-          @attribution={{MAP_TILE_ATTRIBUTION}}
-        />
+        <div
+          {{! template-lint-disable no-invalid-interactive }}
+          {{on 'click' this.stopEventPropagation}}
+          class='tile-provider-selector'
+        >
+          <AuCard
+            class='au-u-padding-tiny'
+            @size='flush'
+            @textCenter={{true}}
+            as |c|
+          >
+            <c.content>
+              <AuToggleSwitch @onChange={{set this 'useOpenStreetMaps'}}>
+                <p class='au-u-para-tiny'>{{t
+                    'location-plugin.use-open-street-map'
+                  }}</p>
+              </AuToggleSwitch>
+            </c.content>
+          </AuCard>
+        </div>
+        {{! Don't change: I know the last component from each leg can be lifted out of the condition but cycling the OSM button does not work anymore then}}
+        {{#if (eq this.tileProvider.URL TILE_PROVIDER_CONSTANTS.GRB.URL)}}
+          <layers.tile
+            @url={{TILE_PROVIDER_CONSTANTS.OPEN_STREET_MAP.URL}}
+            @minZoom={{8}}
+            @maxNativeZoom={{12}}
+          />
+          <layers.tile
+            @url={{this.tileProvider.URL}}
+            @attribution={{this.tileProvider.ATTRIBUTION}}
+            @minZoom={{8}}
+          />
+        {{else}}
+          <layers.tile
+            @url={{this.tileProvider.URL}}
+            @attribution={{this.tileProvider.ATTRIBUTION}}
+            @minZoom={{8}}
+          />
+        {{/if}}
+
         {{#if (and @address (eq @locationType 'address') this.foundAddress)}}
           <layers.marker
             @location={{this.foundAddress}}

package/addon/helpers/set.ts

@@ -0,0 +1,15 @@
+export default <T extends string, U>(
+  obj: Record<T, U>,
+  propName: T,
+  value?: U,
+) => {
+  if (value === undefined) {
+    return (innerValue: U) => {
+      obj[propName] = innerValue;
+    };
+  } else {
+    return () => {
+      obj[propName] = value;
+    };
+  }
+};

package/app/styles/location-plugin.scss

@@ -19,6 +19,7 @@
 
   .map-wrapper {
     height: 100%;
+    position: relative;
   }
 
   // Override the 'grab' cursor to 'pointer' so we can accurately pick points
@@ -28,5 +29,13 @@
 
   .leaflet-container {
     height: 100%;
+    font-family: var(--au-font);
+  }
+
+  .leaflet-container .tile-provider-selector {
+    position: absolute;
+    bottom: 0.6em;
+    left: 0.6em;
+    z-index: 1000;
   }
 }

package/declarations/addon/components/location-plugin/map.d.ts

@@ -20,11 +20,17 @@ interface Signature {
 }
 export default class LocationPluginMapComponent extends Component<Signature> {
     vertices: GlobalCoordinates[];
+    useOpenStreetMaps: boolean;
     existingAreaBounds: LatLngBoundsExpression | undefined;
     existingLocationCoords: GlobalCoordinates | undefined;
     mapLocation: LeafletMapStart;
     get foundAddress(): false | import("leaflet").LatLngTuple | import("leaflet").LatLngLiteral;
+    get tileProvider(): {
+        ATTRIBUTION: string;
+        URL: string;
+    };
     onMapClick(event: LeafletMouseEvent): void;
     onVertexClick(index: number): void;
+    stopEventPropagation(event: MouseEvent): void;
 }
 export {};

package/declarations/addon/helpers/set.d.ts

@@ -0,0 +1,2 @@
+declare const _default: <T extends string, U>(obj: Record<T, U>, propName: T, value?: U) => (innerValue: U) => void;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "35.1.1",
+  "version": "35.1.2",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",

package/translations/en-US.yaml

@@ -434,6 +434,7 @@ lmb-plugin:
 
 location-plugin:
   insert-placeholder: Insert location placeholder
+  use-open-street-map: OpenStreetMap
   modal:
     insert: Insert location
     edit: Edit location

package/translations/nl-BE.yaml

@@ -431,6 +431,7 @@ lmb-plugin:
 
 location-plugin:
   insert-placeholder: Voeg locatie-placeholder in
+  use-open-street-map: OpenStreetMap
   modal:
     insert: Locatie invoegen
     edit: Bewerk locatie