Placing Markers on Harp-GL globe

Question

I try to build a globe with markers (like the markers on google maps) with HERE and harp.gl. These markers are SVG-Images and need to be loaded from their file. They also need to be clickable with some metadata attached like an ID.

So my questions are:

• what is the best way to display these markers?
• how can I make them clickable? (raycasting?)
• is there a way to attach some metadata?

thanks in advance!

Edit: To clarify, the Markers are SVG-Images stored in SVG-Files which need to be loaded and displayed as Markers.

The Data is provided by an API and therefore I tried adding it as Point of it's own like the Cube-Example and also tried to translate it to GeoJSON and FeatureSets:

    const geojsonPoints: {type:  "FeatureCollection", features: Feature[]} = {  type: "FeatureCollection",
        features: [
        ]
    };
    for(let i = 0; i < locationdata.length; i++) {
        geojsonPoints.features.push({
            type: "Feature",
            id: i.toString(),
            geometry: {
                type: "Point",
                coordinates: [locationdata[i]["lonlat"][1], locationdata[i]["lonlat"][0]]
            },
            properties: locationdata[i]
        })
    }
    const features: MapViewFeature[] = [];
    for(let i = 0; i < locationdata.length; i++) {
        features.push(new MapViewPointFeature([locationdata[i]["lonlat"][1], locationdata[i]["lonlat"][0]], locationdata[i]))
    }

When I try adding a GeoJSON-Layer I get an error that the decoder.min.js couldn't be loaded but I configured it like that:

const mapView = new MapView({
        canvas: this.canvas,
        projection: sphereProjection,
        theme: {
            extends: pluginpath + "/js/harp.gl-example/dist/resources/berlin_tilezen_base_globe.json",
            styles: {
                geojson: this.getStyleSet()
            }
        },
        decoderUrl: pluginpath + "/js/harp.gl-example/dist/decoder.bundle.js"
    });

pluginpath is a variable containing prefix since the js-folder isn't directly in the root-directory like in all the examples.

To sum it all up: I need to display the data provided by the API as markers. The markers should be the SVG-Images mentioned earlier and these markers should be clickable.

Edit 2: I tried modifying this example to display the SVG-Markers. The first step worked where I just displayed the cubes from the example at the needed locations, but I couldn't replace the cube with markers. I used these two documentations from three.js website but they didn't work for me:

• https://threejs.org/docs/#examples/en/renderers/SVGRenderer
• https://threejs.org/docs/#examples/en/loaders/SVGLoader

I didn't get any error the SVGs just didn't show up.

Answer 1

Just a quick note that in general, it's better to ask one question at a time. I'm going to focus on your first one about adding markers. Our tutorial has a section on adding markers, https://developer.here.com/tutorials/harpgl/#add-data. In the example, it assumes GeoJSON data. You didn't mention what kind of file you had so I don't know if it's GeoJSON or not.

I'd say - begin by describing what kind of file you have, how the data looks. Then look at the example I linked to in terms of adding markers. Then - share with us what you tried.

Answer 2

Loading SVGs directly is not supported but you could use base64 encoded svg images, e.g.:

const imageString =
"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiIHZlcnNpb249IjEuMSIgaWQ9Imx1aS1pY29uLWRlc3RpbmF0aW9ucGluLW9uZGFyay1zb2xpZC1sYXJnZSIKCSB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4IDQ4IgoJIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDQ4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0ibHVpLWljb24tZGVzdGluYXRpb25waW4tb25kYXJrLXNvbGlkLWxhcmdlLWJvdW5kaW5nLWJveCIgb3BhY2l0eT0iMCI+CgkJPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTQ3LDF2NDZIMVYxSDQ3IE00OCwwSDB2NDhoNDhWMEw0OCwweiIvPgoJPC9nPgoJPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNmZmZmZmYiIGQ9Ik0yNCwyQzEzLjg3MDgsMiw1LjY2NjcsMTAuMTU4NCw1LjY2NjcsMjAuMjIzMwoJCWMwLDUuMDMyNSwyLjA1MzMsOS41ODg0LDUuMzcxNywxMi44ODgzTDI0LDQ2bDEyLjk2MTctMTIuODg4M2MzLjMxODMtMy4zLDUuMzcxNy03Ljg1NTgsNS4zNzE3LTEyLjg4ODMKCQlDNDIuMzMzMywxMC4xNTg0LDM0LjEyOTIsMiwyNCwyeiBNMjQsMjVjLTIuNzY1LDAtNS0yLjIzNS01LTVzMi4yMzUtNSw1LTVzNSwyLjIzNSw1LDVTMjYuNzY1LDI1LDI0LDI1eiIvPgo8L2c+Cjwvc3ZnPgo=";

This image can then be used in the style definition like this:

            styles: {
                geojson: [
                    {
                        when: ["==", ["geometry-type"], "Point"],
                        technique: "labeled-icon",
                        attr: {
                            text: ["get", "text"],
                            textMayOverlap: true,
                            size: 14,
                            imageTexture: "custom-icon",
                            screenHeight: 32,
                            iconScale: 0.5,
                            distanceScale: 1,
                            iconYOffset: 20
                        }
                    }
                ]
            },
            images: {
                "custom-icon": {
                    url: imageString,
                    preload: true
                }
            },
            imageTextures: [
                {
                    name: "custom-icon",
                    image: "custom-icon"
                }
            ]