I’m integrating TomTom Maps into a React application and using clustering to combine map points. However, I’m encountering the following error when trying to display cluster counts:

Error: layers.cluster-count.layout.text-field: use of "text-field" requires a style "glyphs"

This error occurs when I try to add a layer for displaying the cluster count using the text-field property. I believe the issue is related to missing glyphs (fonts) in the map style, but I’m not sure how to properly configure the map to include them.

Here’s my current implementation:

const mapInstance = useRef(null);
const markersOnMap = useRef({});

useEffect(() => {
  if (!mapElement.current) return;

  // Convert markers to GeoJSON format
  const geoJson = {
    type: "FeatureCollection",
    features: markers.map((marker, index) => ({
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [marker.longitude, marker.latitude],
      },
      properties: {
        id: index + 1,
        name: marker.label || `Location ${index + 1}`,
      },
    })),
  };

  // Initialize map
  mapInstance.current = tt.map({
    key: process.env.TOMTOM_API_KEY,
    container: mapElement.current,
    center: center,
    zoom: zoom,
  });

  // Setup layers and sources
  const setupMapLayers = () => {
    // Add source for clustering
    if (mapInstance.current.getSource("point-source")) return;
    mapInstance.current.addSource("point-source", {
      type: "geojson",
      data: geoJson,
      cluster: true,
      clusterMaxZoom: 14,
      clusterRadius: 50,
    });

    // Add cluster circles layer
    mapInstance.current.addLayer({
      id: "clusters",
      type: "circle",
      source: "point-source",
      filter: ["has", "point_count"],
      paint: {
        "circle-color": [
          "step",
          ["get", "point_count"],
          "#EC619F", // Default color
          4, // Number of points threshold
          "#008D8D", // Color for clusters with 4+ points
          7, // Number of points threshold
          "#004B7F", // Color for clusters with 7+ points
        ],
        "circle-radius": [
          "step",
          ["get", "point_count"],
          15, // Default radius
          4, // Number of points threshold
          20, // Radius for clusters with 4+ points
          7, // Number of points threshold
          25, // Radius for clusters with 7+ points
        ],
        "circle-stroke-width": 1,
        "circle-stroke-color": "white",
        "circle-stroke-opacity": 1,
      },
    });

    // Add cluster count layer
    mapInstance.current.addLayer({
      id: "cluster-count",
      type: "symbol",
      source: "point-source",
      filter: ["has", "point_count"],
      layout: {
        "text-field": "{point_count_abbreviated}",
        "text-size": 16,
      },
      paint: {
        "text-color": "white",
      },
    });

I attempted to specify a map style that includes glyphs by adding the glyphs property to the map initialization, but I’m not sure if I’m doing it correctly.

I’m integrating TomTom Maps into a React application and using clustering to combine map points. However, I’m encountering the following error when trying to display cluster counts:

Error: layers.cluster-count.layout.text-field: use of "text-field" requires a style "glyphs"

This error occurs when I try to add a layer for displaying the cluster count using the text-field property. I believe the issue is related to missing glyphs (fonts) in the map style, but I’m not sure how to properly configure the map to include them.

Here’s my current implementation:

const mapInstance = useRef(null);
const markersOnMap = useRef({});

useEffect(() => {
  if (!mapElement.current) return;

  // Convert markers to GeoJSON format
  const geoJson = {
    type: "FeatureCollection",
    features: markers.map((marker, index) => ({
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [marker.longitude, marker.latitude],
      },
      properties: {
        id: index + 1,
        name: marker.label || `Location ${index + 1}`,
      },
    })),
  };

  // Initialize map
  mapInstance.current = tt.map({
    key: process.env.TOMTOM_API_KEY,
    container: mapElement.current,
    center: center,
    zoom: zoom,
  });

  // Setup layers and sources
  const setupMapLayers = () => {
    // Add source for clustering
    if (mapInstance.current.getSource("point-source")) return;
    mapInstance.current.addSource("point-source", {
      type: "geojson",
      data: geoJson,
      cluster: true,
      clusterMaxZoom: 14,
      clusterRadius: 50,
    });

    // Add cluster circles layer
    mapInstance.current.addLayer({
      id: "clusters",
      type: "circle",
      source: "point-source",
      filter: ["has", "point_count"],
      paint: {
        "circle-color": [
          "step",
          ["get", "point_count"],
          "#EC619F", // Default color
          4, // Number of points threshold
          "#008D8D", // Color for clusters with 4+ points
          7, // Number of points threshold
          "#004B7F", // Color for clusters with 7+ points
        ],
        "circle-radius": [
          "step",
          ["get", "point_count"],
          15, // Default radius
          4, // Number of points threshold
          20, // Radius for clusters with 4+ points
          7, // Number of points threshold
          25, // Radius for clusters with 7+ points
        ],
        "circle-stroke-width": 1,
        "circle-stroke-color": "white",
        "circle-stroke-opacity": 1,
      },
    });

    // Add cluster count layer
    mapInstance.current.addLayer({
      id: "cluster-count",
      type: "symbol",
      source: "point-source",
      filter: ["has", "point_count"],
      layout: {
        "text-field": "{point_count_abbreviated}",
        "text-size": 16,
      },
      paint: {
        "text-color": "white",
      },
    });

I attempted to specify a map style that includes glyphs by adding the glyphs property to the map initialization, but I’m not sure if I’m doing it correctly.

• javascript
• reactjs
• tomtom

1 Answer 1

I removed the custom style object in my previous answer and used TomTom maps vector tile service url. This should resolve the glyph loading error:

const mapInstance = useRef(null);
const markersOnMap = useRef({});

useEffect(() => {
  if (!mapElement.current) return;

  // Convert markers to GeoJSON format
  const geoJson = {
    type: "FeatureCollection",
    features: markers.map((marker, index) => ({
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [marker.longitude, marker.latitude],
      },
      properties: {
        id: index + 1,
        name: marker.label || `Location ${index + 1}`,
      },
    })),
  };

  // Initialize map with correct glyphs configuration
  mapInstance.current = tt.map({
    key: process.env.TOMTOM_API_KEY,
    container: mapElement.current,
    center: center,
    zoom: zoom,
    style: 'https://api.tomtom/map/1/style/22.2.1-*/2/metadata.json?key={Your_API_Key}',
    glyphs: 'https://api.tomtom/map/1/glyph/22.2.1-*/metadata.json?key={Your_API_Key}'
  });

  // Setup layers and sources
  const setupMapLayers = () => {
    // Add source for clustering
    if (mapInstance.current.getSource("point-source")) return;
    mapInstance.current.addSource("point-source", {
      type: "geojson",
      data: geoJson,
      cluster: true,
      clusterMaxZoom: 14,
      clusterRadius: 50,
    });

    // Add cluster circles layer
    mapInstance.current.addLayer({
      id: "clusters",
      type: "circle",
      source: "point-source",
      filter: ["has", "point_count"],
      paint: {
        "circle-color": [
          "step",
          ["get", "point_count"],
          "#EC619F", 
          4, 
          "#008D8D", 
          7, 
          "#004B7F", 
        ],
        "circle-radius": [
          "step",
          ["get", "point_count"],
          15, 
          4, 
          20, 
          7, 
          25, 
        ],
        "circle-stroke-width": 1,
        "circle-stroke-color": "white",
        "circle-stroke-opacity": 1,
      },
    });

    // Add cluster count layer
    mapInstance.current.addLayer({
      id: "cluster-count",
      type: "symbol",
      source: "point-source",
      filter: ["has", "point_count"],
      layout: {
        "text-field": "{point_count_abbreviated}",
        "text-size": 16,
        "text-font": ["Noto Sans Regular"]  // Using a standard font from TomTom's default style
      },
      paint: {
        "text-color": "white",
      },
    });
  };

  mapInstance.current.on('load', setupMapLayers);

  return () => {
    if (mapInstance.current) {
      mapInstance.current.remove();
    }
  };
}, [markers, center, zoom]);