[question] Making map markers

I saw the blog posts, for example, but it didn’t go into much depth beyond making a geojson provider.

I’m wondering how to make and manage map markers on a global scale.

This video shows a more complicated harp.gl example, but no link to any source code example: https://www.youtube.com/watch?v=9jB-3AyqkoE

Suppose we want:

• custom geometry for map markers
• billboard the markers
• clustering when zooming out
• showing the same amount of markers at any zoom level, but which markers are shown depends on importance at that zoom level (like a regular Google Maps type of a thing).
• tool tips for the markers showing information (images/text)
• to manage all the markers efficiently (for example instead of creating a new GeoJsonDataProvider for every update when we want to show a new set of markers)
• fading them in and out

Any thoughts or ideas on those points? Correct me if I’m wrong, but this stuff still needs to be implemented on top of harp.gl, and there’s no such tools yet, right?

[atomicsulfate]

@trusktr

Suppose we want:

• custom geometry for map markers
• billboard the markers
• to manage all the markers efficiently (for example instead of creating a new GeoJsonDataProvider for every update when we want to show a new set of markers)
• fading them in and out

You can do this by implementing your own DataSource, creating TextElement objects and adding them to the Tile with Tile.addTextElement. We do have an internal example, I’ll create a ticket to make it publicly available. Meanwhile, here some code snippet: ` class UserMarkerDataSource extends DataSource { private tile?: Tile; private nextFeatureId: number = 0; constructor( ) { super(“markers”); this.cacheable = true; }

    /** @override */ getDisplayZoomLevel(_zoomLevel: number): number {
        return 0;
    }

    /** @override */ getTile(tileKey: TileKey): Tile | undefined {
        if (tileKey.mortonCode() !== 1) {
            return undefined;
        }
        return this.getRootTile();
    }

    getRootTile(): Tile {
        if (this.tile === undefined) {
            this.tile = new Tile(this, TileKey.fromRowColumnLevel(0, 0, 0));
            // Mark the tile has ready to be rendered, needed for tiles with only text elements.
            this.tile.forceHasGeometry(true);
        }
        return this.tile;
    }

    addMarker(geoPoint: GeoCoordinates) {
        const tile = this.getRootTile();
        // Compute world space location where the market will be placed.
        const projectedPoint = this.projection.projectPoint(geoPoint, new THREE.Vector3());

        const text = "Marker " + this.nextFeatureId;
        const textElement = new TextElement(
            text,
            projectedPoint,
            // text render style parameters
            {
                fontSize: { unit: FontUnit.Pixel, size: 12, backgroundSize: 12 },
                color: new THREE.Color("red")
            },
            // text layout style parameters
            {}
        );

        // Unique feature id identifying the text element. Two text elements sharing the same
        // feature id are considered to belong to the same map object (e.g. two icons
        // representing the same POI on different zoom levels). This feature id is also returned
        // when the text element is picked.
        textElement.featureId = this.nextFeatureId;

        // Text drawing order is controlled by this attribute. The lower the value, the sooner
        // its drawn.
        textElement.renderOrder = this.nextFeatureId;
        ++this.nextFeatureId;
        // Allow the text in the marker to overlap other text elements.
        textElement.mayOverlap = true;
        textElement.yOffset = -15;
        textElement.poiInfo = {
            technique: {
                name: "labeled-icon",
                iconYOffset: 20,
                renderOrder: this.nextFeatureId
            },

            mayOverlap: true, // Allow the icon in the marker to overlap other text elements.
            renderTextDuringMovements: true, // draw text on camera movements.
            imageTextureName: "poi-icon",
            textElement
        };
        // User data returned when the text element is picked.
        textElement.userData = { textElement };
        tile.addUserTextElement(textElement);
        this.requestUpdate();
    }

    removeMarker(marker: TextElement) {
        this.getRootTile().removeUserTextElement(marker);
        this.requestUpdate();
    }

    /** @override */ getTilingScheme(): TilingScheme {
        return webMercatorTilingScheme;
    }

    clearMarkers() {
        this.getRootTile().clearTextElements();
        this.nextFeatureId = 0;
        this.requestUpdate();
    }
}

`

• tool tips for the markers showing information (images/text)

A TextElement can have so far an icon and a piece of text. Additional attachments are not supported so far. You could manage to make tooltips pop up whenever a marker is selected by the user. For that, you can pick text elements (or any other map object) using MapView.intersectMapObjects. From that you’ll get whether a text element was picked and what’s its featureId. Then you can add a text element next to it using MapView.addOverlayText.

• clustering when zooming out

We don’t support label clustering yet, we might add it since it’s a useful feature but we don’t have a plan for it yet.

• showing the same amount of markers at any zoom level, but which markers are shown depends on importance at that zoom level (like a regular Google Maps type of a thing).

You can so far assign priorities to the markers, so that higher priority markers will displace other markers with lower priority on collision. There’s no way to set text element limit on a map view though.

[diegarte]

About the youtube video, it was intended to illustrate one of the “dream states” of a new react-harp component that is currently being built outside of the harp team… We will post more news once we have a simple version including default markers and a basic clustering mechanism.