Show your own GeoJSON as places

Fetch a council's listed buildings as GeoJSON and pin each one, named, on the map

import { CommonPlaceProps, Places, TomTomConfig } from '@tomtom-org/maps-sdk/core';
import { PlacesModule, TomTomMap } from '@tomtom-org/maps-sdk/map';
import './style.css';
import { API_KEY } from './config';

// (Set your own API key when working in your own environment)
TomTomConfig.instance.put({ apiKey: API_KEY });

const map = new TomTomMap({
    mapLibre: {
        container: 'sdk-map',
        center: [-1.8615, 53.7225],
        zoom: 15,
    },
});

const DATA_URL = 'https://dataworks.calderdale.gov.uk/download/2kyp8/hcj/listed%20buildings%20west%20yorkshire.json';

type ListedBuilding = CommonPlaceProps & { Name: string };

(async () => {
    const data: Places<ListedBuilding> = await (await fetch(DATA_URL)).json();

    const placesModule = await PlacesModule.create<ListedBuilding>(map, {
        markerType: 'base-map',
        icon: { mapping: { to: 'poiCategory', fn: () => 'COMPANY' } },
        label: { title: (place) => place.properties.Name },
    });

    await placesModule.show(data);
})();

Open Sandbox

A GeoJSON file from a council open-data portal turns into named pins across Halifax, styled like the base map’s own points of interest.

PlacesModule.show takes the fetched collection exactly as it takes a service response, so your data needs no conversion.
icon maps every building to one category icon, and label reads the title from your own Name property.
PlacesModule.create<ListedBuilding> types the module with your properties, so those callbacks are checked against your data.