Merge pull request #7048 from TerriaJS/fix-marker-url

Fix `PointStyleTraits.marker` bug where URLs were not being used.
TerriaJS · Apr 4, 2024 · 31952dc · 31952dc
2 parents 422aa7d + 2ce0268
commit 31952dc
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 3 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -3,6 +3,7 @@
 #### next release (8.7.1)
 
 - Upgraded to TerriajS Cesium 1.115.0
+- Fix `PointStyleTraits.marker` bug where URLs were not being used.
 - [The next improvement]
 
 #### 8.7.0 - 2024-03-22

diff --git a/lib/Table/getFeatureStyle.ts b/lib/Table/getFeatureStyle.ts
@@ -261,7 +261,10 @@ export function getFeatureStyle(style: TableStyle, rowId: number) {
     /** Use PointGraphics instead of BillboardGraphics, if not using maki icon AND not using image marker. */
     usePointGraphics:
       !isMakiIcon(pointStyle?.marker) &&
-      !pointStyle?.marker?.startsWith("data:image")
+      !(
+        pointStyle?.marker?.startsWith("data:image") ||
+        pointStyle?.marker?.startsWith("http")
+      )
   };
 }
 

diff --git a/lib/Traits/TraitsClasses/Table/PointStyleTraits.ts b/lib/Traits/TraitsClasses/Table/PointStyleTraits.ts
@@ -16,7 +16,7 @@ export class PointSymbolTraits extends mixTraits(TableStyleMapSymbolTraits) {
   @primitiveTrait({
     name: "Marker (icon)",
     description:
-      'Marker used to symbolize points. Default is "point"/"circle". This can be data URI or one of the supported [Maki icons](https://labs.mapbox.com/maki-icons/) (eg "hospital")',
+      'Marker used to symbolize points. Default is "point"/"circle". This can be a URL, [data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) or one of the supported [Maki icons](https://labs.mapbox.com/maki-icons/) (eg "hospital")',
     type: "string"
   })
   marker?: string = "point";

diff --git a/test/ModelMixins/TableMixinSpec.ts b/test/ModelMixins/TableMixinSpec.ts
@@ -876,7 +876,7 @@ describe("TableMixin", function () {
   });
 
   describe("applies TableStyles to lat/lon features", function () {
-    it("supports image marker style", async function () {
+    it("supports image marker style - data URI", async function () {
       item.setTrait(CommonStrata.user, "csvString", LatLonValCsv);
 
       const image =
@@ -914,6 +914,43 @@ describe("TableMixin", function () {
       });
     });
 
+    it("supports image marker style - URL", async function () {
+      item.setTrait(CommonStrata.user, "csvString", LatLonValCsv);
+
+      const image = "http://localhost:3001/build/TerriaJS/images/map-pin.svg";
+
+      item.setTrait(CommonStrata.user, "styles", [
+        createStratumInstance(TableStyleTraits, {
+          id: "test-style",
+          point: createStratumInstance(TablePointStyleTraits, {
+            null: createStratumInstance(PointSymbolTraits, {
+              marker: image,
+              height: 20
+            })
+          })
+        })
+      ]);
+      item.setTrait(CommonStrata.user, "activeStyle", "test-style");
+
+      (await item.loadMapItems()).throwIfError();
+
+      const mapItem = item.mapItems[0] as CustomDataSource;
+
+      mapItem.entities.values.forEach((feature) => {
+        expect(
+          feature.billboard?.image?.getValue(
+            item.terria.timelineClock.currentTime
+          )
+        ).toBe(image);
+
+        expect(
+          feature.billboard?.height?.getValue(
+            item.terria.timelineClock.currentTime
+          )
+        ).toBe(20);
+      });
+    });
+
     it("bin outline style with points", async function () {
       item.setTrait(CommonStrata.user, "csvString", LatLonValCsv);