Menu

MapLabels.html.svelte component

Adds HTML text labels based features in the data or a custom GeoJSON Feature Collection.

Param Default Required Description
projection Function None
yes
A D3 projection function. Pass this in as an uncalled function, e.g. projection={geoAlbersUsa}.
fixedAspectRatio Number None
no
By default, the map fills to fit the $width and $height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here.
getLabel Function None
yes
An accessor function to get the field to display.
getCoordinates Function d=>d.geometry.coordinates
no
An accessor function to get the [x, y] coordinate field. Defaults to a GeoJSON feature format.
features Array None
no
A list of labels as GeoJSON features. If unset, the plotted features will defaults to those in $data.features, assuming this field a list of GeoJSON features.

Used in these examples:

SSR Examples:

<!--
  @component
  Adds HTML text labels based features in the data or a custom GeoJSON Feature Collection.
 -->
<script>
  import { getContext } from 'svelte';

  const { data, width, height } = getContext('LayerCake');

  /** @type {Function} projection - A D3 projection function. Pass this in as an uncalled function, e.g. `projection={geoAlbersUsa}`. */
  export let projection;

  /** @type {Number} [fixedAspectRatio] - By default, the map fills to fit the $width and $height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here. */
  export let fixedAspectRatio = undefined;

  /** @type {Function} getLabel - An accessor function to get the field to display. */
  export let getLabel;

  /** @type {Function} [getCoordinates=d => d.geometry.coordinates] - An accessor function to get the `[x, y]` coordinate field. Defaults to a GeoJSON feature format. */
  export let getCoordinates;

  /** @type {Array} [features] - A list of labels as GeoJSON features. If unset, the plotted features will defaults to those in `$data.features`, assuming this field a list of GeoJSON features. */
  export let features = undefined;

  $: fitSizeRange = fixedAspectRatio ? [100, 100 / fixedAspectRatio] : [$width, $height];

  $: projectionFn = projection()
    .fitSize(fitSizeRange, $data);

  $: units = fixedAspectRatio ? '%': 'px';
</script>

<div
  class="map-labels"
  style:aspect-ratio={fixedAspectRatio ? 1 : null}
>
{#each (features || $data.features) as d}
  {@const coords = projectionFn(getCoordinates(d))}
  <div
    class="map-label"
    style="
      left: {coords[0]}{units};
      top: {coords[1]}{units};
    "
  >{getLabel(d)}</div>
{/each}
</div>

<style>
  .map-labels {
    pointer-events: none;
    position: relative;
  }
  .map-label {
    position: absolute;
    text-align: center;
    font-size: 8px;
    color: #333;
    margin-top: -3px; /* To match the SVG labels, it needs a slight tweak */
    transform: translate(-50%, -50%);
  }
</style>