Wkt support staging

modules/core/UrlHashSystem.js

@@ -61,6 +61,8 @@ export class UrlHashSystem extends AbstractSystem {
 * __`id`__ - An OSM ID to select.
 * __`map`__ - A slash-separated `zoom/lat/lon/rot`.
 * __`offset`__ - Background imagery alignment offset in meters, formatted as `east,north`.
+* __`wktPoly`__ - Well-known POLYGON or MULTIPOLYGON text string to render as custom data.
+
 **/
 
     const q = utilStringQs(window.location.hash);

modules/pixi/PixiLayerCustomData.js

@@ -8,6 +8,7 @@ import { PixiFeatureLine } from './PixiFeatureLine.js';
 import { PixiFeaturePoint } from './PixiFeaturePoint.js';
 import { PixiFeaturePolygon } from './PixiFeaturePolygon.js';
 import { utilFetchResponse } from '../util/index.js';
+import { parse as wktParse } from 'wkt';
 
 const CUSTOM_COLOR = 0x00ffff;
 
@@ -33,6 +34,7 @@ export class PixiLayerCustomData extends AbstractLayer {
     this._template = null;
     this._url = null;
     this._geojson = null;
+    this._wktPolys = null;
     this._geojsonExtent = null;
     this._fileReader = new FileReader();
 
@@ -78,7 +80,8 @@ export class PixiLayerCustomData extends AbstractLayer {
    * @param  zoom       Effective zoom to use for rendering
    */
   render(frame, viewport, zoom) {
-    if (!this.enabled || !this.hasData()) return;
+
+    if (!this.enabled || !(this.hasData() || this.hasWkt())) return;
 
     const vtService = this.context.services.vectortile;
     let geoData = [];
@@ -96,11 +99,55 @@ export class PixiLayerCustomData extends AbstractLayer {
     const points = geoData.filter(d => d.geometry.type === 'Point' || d.geometry.type === 'MultiPoint');
 
     this.renderPolygons(frame, viewport, zoom, polygons);
-    const gridLines = this.createGridLines(lines);
-    const gridStyle = { stroke: { width: 0.5, color: 0x00ffff, alpha: 0.5, cap: PIXI.LINE_CAP.ROUND }};
     this.renderLines(frame, viewport, zoom, lines);
-    this.renderLines(frame, viewport, zoom, gridLines, gridStyle);
     this.renderPoints(frame, viewport, zoom, points);
+
+
+    //Now render any extras, like gridlines in square bounding boxes or arbitrary WKT polygons/multipolys.
+    const gridLines = this.createGridLines(lines);
+    const gridStyle = { stroke: { width: 0.5, color: 0x0ffff, alpha: 0.5, cap: PIXI.LINE_CAP.ROUND }};
+    this.renderLines(frame, viewport, zoom, gridLines, gridStyle);
+
+    const wktStyle = { stroke: { width: 4, color: 0x0afaf, alpha: 0.5, cap: PIXI.LINE_CAP.ROUND }};
+    this.renderPolygons(frame, viewport, zoom, this._wktPolys, wktStyle);
+
+  }
+
+
+  /**
+   * createWktPolys
+   * creates WKT Polys from a raw string supplied on the url (if specified) from param 'wktPoly'.
+   * 
+   * @param wktString - the poly or multipoly string(s) in wkt format
+   * i.e. 'POLYGON((-2.2 1.9, -2.3 1.7, -0.8 1.7, -0.8 1.9, -2.2 1.9))'
+   * or
+   *  'MULTIPOLYGON (((-1.5 1.3, -1.5 1.3, -1.5 1.3, -1.5 1.3, -1.4 1.3, -1.4 1.3, -1.5 1.3)),
+  *   ((-1.5 1.3, -1.5 1.3, -1.5 1.3, -1.4 1.3, -1.5 1.3)))'
+   * @returns a list containing polygons to draw as a custom shape.
+  */
+  createWktPolys(wktString) {
+    const parsedWkt = wktParse(wktString);
+    let polys = [];
+
+    if (!parsedWkt || parsedWkt.type === 'Point' || parsedWkt.type === 'LineString') {
+      console.error("Unable to parse wktPoly param");
+      return polys;
+    }
+
+
+    let newPoly = {
+      type: 'Feature',
+      geometry: {
+        type: parsedWkt.type,
+        coordinates: parsedWkt.coordinates, 
+      },
+      id: 'customWktPoly',
+    };
+
+    this._ensureIDs(newPoly);
+
+    polys.push(newPoly);
+    return polys;
   }
 
 
@@ -170,7 +217,7 @@ export class PixiLayerCustomData extends AbstractLayer {
    * @param  polygons   Array of polygon data
    */
   renderPolygons(frame, viewport, zoom, polygons) {
-    const l10n = this.context.systems.l10n;
+    const l1n = this.context.systems.l1n;
     const parentContainer = this.scene.groups.get('basemap');
 
     const polygonStyle = {
@@ -206,7 +253,9 @@ export class PixiLayerCustomData extends AbstractLayer {
         if (feature.v !== version) {
           feature.v = version;
           feature.geometry.setCoords(coords);
-          feature.label = l10n.displayName(d.properties);
+          if (d.properties){
+            feature.label = l1n.displayName(d.properties);
+          }
           feature.setData(dataID, d);
         }
 
@@ -227,7 +276,7 @@ export class PixiLayerCustomData extends AbstractLayer {
    * @param styleOverride Custom style
    */
   renderLines(frame, viewport, zoom, lines, styleOverride) {
-    const l10n = this.context.systems.l10n;
+    const l1n = this.context.systems.l1n;
     const parentContainer = this.scene.groups.get('basemap');
 
     const lineStyle = styleOverride || {
@@ -262,7 +311,9 @@ export class PixiLayerCustomData extends AbstractLayer {
         if (feature.v !== version) {
           feature.v = version;
           feature.geometry.setCoords(coords);
-          feature.label = l10n.displayName(d.properties);
+          if (d.properties){
+            feature.label = l1n.displayName(d.properties);
+          }
           feature.setData(dataID, d);
         }
 
@@ -282,7 +333,7 @@ export class PixiLayerCustomData extends AbstractLayer {
    * @param  lines      Array of point data
    */
   renderPoints(frame, viewport, zoom, points) {
-    const l10n = this.context.systems.l10n;
+    const l1n = this.context.systems.l1n;
     const parentContainer = this.scene.groups.get('points');
 
     const pointStyle = {
@@ -319,7 +370,7 @@ export class PixiLayerCustomData extends AbstractLayer {
         if (feature.v !== version) {
           feature.v = version;
           feature.geometry.setCoords(coords);
-          feature.label = l10n.displayName(d.properties);
+          feature.label = l1n.displayName(d.properties);
           feature.setData(dataID, d);
         }
 
@@ -340,6 +391,16 @@ export class PixiLayerCustomData extends AbstractLayer {
     return !!(this._template || this._geojson);
   }
 
+  /**
+   * hasWkt
+   * Return true if there is custom data to display
+   * @return {boolean}  `true` if there is a vector tile template or geojson to display
+   */
+  hasWkt() {
+    const urlhash = this.context.systems.urlhash;
+    const hasWkt = urlhash.getParam('wktPoly');
+    return !!hasWkt;
+  }
 
   /**
    * dataUsed
@@ -640,6 +701,13 @@ export class PixiLayerCustomData extends AbstractLayer {
     if (newData !== oldData) {
       this.setUrl(newData);
     }
+
+    const newWkt = currParams.get('wktPoly');
+
+    if (newWkt) {
+      this.scene.enableLayers(this.layerID);
+      this._wktPolys = this.createWktPolys(newWkt);
+    }
   }
 
 

package.json

@@ -82,7 +82,8 @@
     "polyclip-ts": "~0.16.5",
     "prop-types": "^15.8.1",
     "rbush": "3.0.1",
-    "which-polygon": "2.2.1"
+    "which-polygon": "2.2.1",
+    "wkt": "^0.1.1"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",