Change circle technique size to metres

@here/harp-datasource-protocol/lib/TechniqueParams.ts

@@ -472,15 +472,19 @@ export interface PointTechniqueParams extends BaseTechniqueParams {
      * URL of a texture image to be loaded.
      */
     texture?: string;
+    /**
+     * Units in which different size properties are specified. Either `Meter` (default) or `Pixel`.
+     */
+    metricUnit?: MetricUnit;
     /**
      * For transparent lines, set a value between 0.0 for totally transparent, to 1.0 for totally
      * opaque.
      */
     opacity?: DynamicProperty<number>;
     /**
-     * Size of point in pixels.
+     * Size of point in `metricUnit`.
      */
-    size?: DynamicProperty<number>;
+    size?: DynamicProperty<StyleLength>;
     /**
      * Whether to enable picking on these points.
      */

@here/harp-examples/src/styling_square-technique.ts

@@ -3,6 +3,7 @@
  * Licensed under Apache 2.0, see full license in LICENSE
  * SPDX-License-Identifier: Apache-2.0
  */
+import { Theme } from "@here/harp-datasource-protocol";
 import { GeoCoordinates } from "@here/harp-geoutils";
 import { MapControls, MapControlsUI } from "@here/harp-map-controls";
 import { CopyrightElementHandler, MapView } from "@here/harp-mapview";
@@ -20,6 +21,37 @@ import { apikey } from "../config";
  * [[include:squares_technique_example.ts]]
  * ```
  */
+
+const squareTheme: Theme = {
+    styles: {
+        tilezen: [
+            {
+                layer: "places",
+                technique: "squares",
+                when: ["==", ["geometry-type"], "Point"],
+                color: "#ff00ff",
+                metricUnit: "Meter",
+                size: 50
+            }
+        ]
+    }
+};
+
+const circleTheme: Theme = {
+    styles: {
+        tilezen: [
+            {
+                layer: "places",
+                technique: "circles",
+                when: ["==", ["geometry-type"], "Point"],
+                color: "#ff00ff",
+                metricUnit: "Meter",
+                size: 50
+            }
+        ]
+    }
+};
+
 export namespace SquaresTechniqueExample {
     // Create a new MapView for the HTMLCanvasElement of the given id.
     function initializeMapView(id: string): MapView {
@@ -30,20 +62,7 @@ export namespace SquaresTechniqueExample {
         const map = new MapView({
             canvas,
             // snippet:squares_technique_example.ts
-            theme: {
-                extends: "resources/berlin_tilezen_base.json",
-                styles: {
-                    tilezen: [
-                        {
-                            layer: "places",
-                            technique: "squares",
-                            when: ["==", ["geometry-type"], "Point"],
-                            color: "#ff00ff",
-                            size: 500
-                        }
-                    ]
-                }
-            },
+            theme: "resources/berlin_tilezen_base.json",
             // end:squares_technique_example.ts
             target: NY,
             tilt: 50,
@@ -78,6 +97,25 @@ export namespace SquaresTechniqueExample {
 
         map.addDataSource(omvDataSource);
 
+        const points = new VectorTileDataSource({
+            baseUrl: "https://vector.hereapi.com/v2/vectortiles/base/mc",
+            authenticationCode: apikey,
+            dataSourceOrder: 1,
+            addGroundPlane: false
+        });
+        map.addDataSource(points);
+        let theme = 0;
+        const changeTheme = () => {
+            if (theme++ % 2 === 0) {
+                points.setTheme(circleTheme);
+            } else {
+                points.setTheme(squareTheme);
+            }
+            map.update();
+            setTimeout(changeTheme, 2000);
+        };
+        setTimeout(changeTheme, 1000);
+
         return map;
     }
 

@here/harp-mapview/lib/DecodedTileHelpers.ts

@@ -542,7 +542,12 @@ function getMainMaterialStyledProps(technique: Technique): StyledProperties {
         }
         case "circles":
         case "squares":
-            return pick(technique, automaticAttributes);
+            const baseProps = pick(technique, automaticAttributes);
+            baseProps.size = buildMetricValueEvaluator(
+                technique.size,
+                technique.metricUnit
+            );
+            return baseProps;
         case "extruded-line":
             return pick(technique, [
                 "color",

@here/harp-materials/lib/CirclePointsMaterial.ts

@@ -26,6 +26,7 @@ void main() {
 
     gl_Position = projectionMatrix * mvPosition;
     gl_PointSize = size;
+    gl_PointSize *= (4750.0 / - mvPosition.z);
 }
 `;