Update MapLibre dependencies, add terrain editing (#859)

This PR aims at updating MapLibre dependencies. The main goal of this update is to allow adding terrain specification to the editor. This requires version 4 of maplibre so currently it will use the pre-release.
2025-12-25 15:40:00 +00:00 · 2024-01-11 22:05:47 +02:00
parent 87cf81d1c9
commit eb48bed32a
20 changed files with 349 additions and 111 deletions
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -9,7 +9,7 @@ import {unset} from 'lodash'
 import {arrayMoveMutable} from 'array-move'
 import hash from "string-hash";
 import {Map, LayerSpecification, StyleSpecification, ValidationError, SourceSpecification} from 'maplibre-gl'
-import {latest, validate} from '@maplibre/maplibre-gl-style-spec'
+import {latest, validateStyleMin} from '@maplibre/maplibre-gl-style-spec'

 import MapMaplibreGl from './MapMaplibreGl'
 import MapOpenLayers from './MapOpenLayers'
@@ -379,8 +379,7 @@ export default class App extends React.Component<any, AppState> {
      this.getInitialStateFromUrl(newStyle);
    }

-    // This "any" can be removed in latest version of maplibre where maplibre re-exported types from style-spec
-    const errors = validate(newStyle as any, latest) || [];
+    const errors: ValidationError[] = validateStyleMin(newStyle) || [];

    // The validate function doesn't give us errors for duplicate error with
    // empty string for layer.id, manually deal with that here.
--- a/src/components/FieldId.tsx
+++ b/src/components/FieldId.tsx
@@ -1,6 +1,6 @@
 import React from 'react'

-import {latest} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 import Block from './Block'
 import InputString from './InputString'

--- a/src/components/FieldMaxZoom.tsx
+++ b/src/components/FieldMaxZoom.tsx
@@ -1,6 +1,6 @@
 import React from 'react'

-import {latest} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 import Block from './Block'
 import InputNumber from './InputNumber'

--- a/src/components/FieldMinZoom.tsx
+++ b/src/components/FieldMinZoom.tsx
@@ -1,6 +1,6 @@
 import React from 'react'

-import {latest} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 import Block from './Block'
 import InputNumber from './InputNumber'

--- a/src/components/FieldSource.tsx
+++ b/src/components/FieldSource.tsx
@@ -1,6 +1,6 @@
 import React from 'react'

-import {latest} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 import Block from './Block'
 import InputAutocomplete from './InputAutocomplete'

--- a/src/components/FieldType.tsx
+++ b/src/components/FieldType.tsx
@@ -1,6 +1,6 @@
 import React from 'react'

-import {latest} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 import Block from './Block'
 import InputSelect from './InputSelect'
 import InputString from './InputString'
--- a/src/components/FilterEditor.tsx
+++ b/src/components/FilterEditor.tsx
@@ -47,7 +47,7 @@ function createStyleFromFilter(filter: LegacyFilterSpecification | ExpressionSpe
    "sources": {
      "tmp": {
        "type": "geojson",
-        "data": {}
+        "data": ''
      }
    },
    "sprite": "",
--- a/src/components/MapMaplibreGl.tsx
+++ b/src/components/MapMaplibreGl.tsx
@@ -14,9 +14,6 @@ import 'maplibre-gl/dist/maplibre-gl.css'
 import '../maplibregl.css'
 import '../libs/maplibre-rtl'

-
-const IS_SUPPORTED = MapLibreGl.supported();
-
 function renderPopup(popup: JSX.Element, mountNode: ReactDOM.Container) {
  ReactDOM.render(popup, mountNode);
  return mountNode;
@@ -92,8 +89,6 @@ export default class MapMaplibreGl extends React.Component<MapMaplibreGlProps, M
  }

  updateMapFromProps(props: MapMaplibreGlProps) {
-    if(!IS_SUPPORTED) return;
-
    if(!this.state.map) return

    //Maplibre GL now does diffing natively so we don't need to calculate
@@ -115,8 +110,6 @@ export default class MapMaplibreGl extends React.Component<MapMaplibreGlProps, M
  }

  componentDidUpdate() {
-    if(!IS_SUPPORTED) return;
-
    const map = this.state.map;

    this.updateMapFromProps(this.props);
@@ -146,8 +139,6 @@ export default class MapMaplibreGl extends React.Component<MapMaplibreGlProps, M
  }

  componentDidMount() {
-    if(!IS_SUPPORTED) return;
-
    const mapOpts = {
      ...this.props.options,
      container: this.container!,
@@ -235,24 +226,13 @@ export default class MapMaplibreGl extends React.Component<MapMaplibreGlProps, M
  }

  render() {
-    if(IS_SUPPORTED) {
-      return <div
-        className="maputnik-map__map"
-        role="region"
-        aria-label="Map view"
-        ref={x => this.container = x}
-        data-wd-key="maplibre:map"
-      ></div>
-    }
-    else {
-      return <div
-        className="maputnik-map maputnik-map--error"
-      >
-        <div className="maputnik-map__error-message">
-          Error: Cannot load MaplibreGL, WebGL is either unsupported or disabled
-        </div>
-      </div>
-    }
+    return <div
+      className="maputnik-map__map"
+      role="region"
+      aria-label="Map view"
+      ref={x => this.container = x}
+      data-wd-key="maplibre:map"
+    ></div>
  }
 }

--- a/src/components/ModalSettings.tsx
+++ b/src/components/ModalSettings.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import {latest} from '@maplibre/maplibre-gl-style-spec'
-import type {LightSpecification, StyleSpecification, TransitionSpecification} from 'maplibre-gl'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
+import type {LightSpecification, StyleSpecification, TerrainSpecification, TransitionSpecification} from 'maplibre-gl'

 import FieldArray from './FieldArray'
 import FieldNumber from './FieldNumber'
@@ -58,6 +58,25 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
    });
  }

+  changeTerrainProperty(property: keyof TerrainSpecification, value: any) {
+    const terrain = {
+      ...this.props.mapStyle.terrain,
+    }
+
+    if (value === undefined) {
+      delete terrain[property];
+    }
+    else {
+      // @ts-ignore
+      terrain[property] = value;
+    }
+
+    this.props.onStyleChanged({
+      ...this.props.mapStyle,
+      terrain,
+    });
+  }
+
  changeStyleProperty(property: keyof StyleSpecification | "owner", value: any) {
    const changedStyle = {
      ...this.props.mapStyle,
@@ -77,10 +96,12 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
  render() {
    const metadata = this.props.mapStyle.metadata || {} as any;
    const {onChangeMetadataProperty, mapStyle} = this.props;
-    const inputProps = { }

    const light = this.props.mapStyle.light || {};
    const transition = this.props.mapStyle.transition || {};
+    const terrain = this.props.mapStyle.terrain || {} as TerrainSpecification;
+
+    console.log(latest);

    return <Modal
      data-wd-key="modal:settings"
@@ -89,21 +110,21 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
      title={'Style Settings'}
    >
      <div className="modal:settings">
-        <FieldString {...inputProps}
+        <FieldString
          label={"Name"}
          fieldSpec={latest.$root.name}
          data-wd-key="modal:settings.name"
          value={this.props.mapStyle.name}
          onChange={this.changeStyleProperty.bind(this, "name")}
        />
-        <FieldString {...inputProps}
+        <FieldString
          label={"Owner"}
          fieldSpec={{doc: "Owner ID of the style. Used by Mapbox or future style APIs."}}
          data-wd-key="modal:settings.owner"
          value={(this.props.mapStyle as any).owner}
          onChange={this.changeStyleProperty.bind(this, "owner")}
        />
-        <FieldUrl {...inputProps}
+        <FieldUrl
          fieldSpec={latest.$root.sprite}
          label="Sprite URL"
          data-wd-key="modal:settings.sprite"
@@ -111,7 +132,7 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
          onChange={this.changeStyleProperty.bind(this, "sprite")}
        />

-        <FieldUrl {...inputProps}
+        <FieldUrl
          label="Glyphs URL"
          fieldSpec={latest.$root.glyphs}
          data-wd-key="modal:settings.glyphs"
@@ -119,7 +140,7 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
          onChange={this.changeStyleProperty.bind(this, "glyphs")}
        />

-        <FieldString {...inputProps}
+        <FieldString
          label={fieldSpecAdditional.maputnik.maptiler_access_token.label}
          fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
          data-wd-key="modal:settings.maputnik:openmaptiles_access_token"
@@ -127,7 +148,7 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
          onChange={onChangeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
        />

-        <FieldString {...inputProps}
+        <FieldString
          label={fieldSpecAdditional.maputnik.thunderforest_access_token.label}
          fieldSpec={fieldSpecAdditional.maputnik.thunderforest_access_token}
          data-wd-key="modal:settings.maputnik:thunderforest_access_token"
@@ -141,21 +162,19 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
          length={2}
          type="number"
          value={mapStyle.center || []}
-          default={latest.$root.center.default || [0, 0]}
+          default={[0, 0]}
          onChange={this.changeStyleProperty.bind(this, "center")}
        />

        <FieldNumber
-          {...inputProps}
          label={"Zoom"}
          fieldSpec={latest.$root.zoom}
          value={mapStyle.zoom}
-          default={latest.$root.zoom.default || 0}
+          default={0}
          onChange={this.changeStyleProperty.bind(this, "zoom")}
        />

        <FieldNumber
-          {...inputProps}
          label={"Bearing"}
          fieldSpec={latest.$root.bearing}
          value={mapStyle.bearing}
@@ -164,7 +183,6 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
        />

        <FieldNumber
-          {...inputProps}
          label={"Pitch"}
          fieldSpec={latest.$root.pitch}
          value={mapStyle.pitch}
@@ -173,7 +191,6 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
        />

        <FieldEnum
-          {...inputProps}
          label={"Light anchor"}
          fieldSpec={latest.light.anchor}
          name="light-anchor"
@@ -184,7 +201,6 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
        />

        <FieldColor
-          {...inputProps}
          label={"Light color"}
          fieldSpec={latest.light.color}
          value={light.color as string}
@@ -193,7 +209,6 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
        />

        <FieldNumber
-          {...inputProps}
          label={"Light intensity"}
          fieldSpec={latest.light.intensity}
          value={light.intensity as number}
@@ -202,7 +217,6 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
        />

        <FieldArray
-          {...inputProps}
          label={"Light position"}
          fieldSpec={latest.light.position}
          type="number"
@@ -212,8 +226,23 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
          onChange={this.changeLightProperty.bind(this, "position")}
        />

+        <FieldString
+          label={"Terrain source"}
+          fieldSpec={latest.terrain.source}
+          data-wd-key="modal:settings.maputnik:terrain_source"
+          value={terrain.source}
+          onChange={this.changeTerrainProperty.bind(this, "source")}
+        />
+
+        <FieldNumber
+          label={"Terrain exaggeration"}
+          fieldSpec={latest.terrain.exaggeration}
+          value={terrain.exaggeration}
+          default={latest.terrain.exaggeration.default}
+          onChange={this.changeTerrainProperty.bind(this, "exaggeration")}
+        />
+
        <FieldNumber
-          {...inputProps}
          label={"Transition delay"}
          fieldSpec={latest.transition.delay}
          value={transition.delay}
@@ -222,7 +251,6 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
        />

        <FieldNumber
-          {...inputProps}
          label={"Transition duration"}
          fieldSpec={latest.transition.duration}
          value={transition.duration}
@@ -230,7 +258,7 @@ export default class ModalSettings extends React.Component<ModalSettingsProps> {
          onChange={this.changeTransitionProperty.bind(this, "duration")}
        />

-        <FieldSelect {...inputProps}
+        <FieldSelect
          label={fieldSpecAdditional.maputnik.style_renderer.label}
          fieldSpec={fieldSpecAdditional.maputnik.style_renderer}
          data-wd-key="modal:settings.maputnik:renderer"
--- a/src/components/ModalSources.tsx
+++ b/src/components/ModalSources.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import {MdAddCircleOutline, MdDelete} from 'react-icons/md'
-import {latest} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 import type {GeoJSONSourceSpecification, RasterDEMSourceSpecification, RasterSourceSpecification, SourceSpecification, StyleSpecification, VectorSourceSpecification} from 'maplibre-gl'

 import Modal from './Modal'
@@ -134,7 +134,7 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
    case 'geojson_json': return {
      type: 'geojson',
      cluster: (source as GeoJSONSourceSpecification).cluster || false,
-      data: {}
+      data: ''
    }
    case 'tilejson_vector': return {
      type: 'vector',
--- a/src/components/_DataProperty.tsx
+++ b/src/components/_DataProperty.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import {mdiFunctionVariant, mdiTableRowPlusAfter} from '@mdi/js';
-import {latest} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'

 import InputButton from './InputButton'
 import InputSpec from './InputSpec'
@@ -302,7 +302,7 @@ export default class DataProperty extends React.Component<DataPropertyProps, Dat
              <div className="maputnik-data-spec-property-input">
                <InputSpec
                  fieldName={"base"}
-                  fieldSpec={latest.function.base}
+                  fieldSpec={latest.function.base as typeof latest.function.base & { type: "number" }}
                  value={this.props.value?.base}
                  onChange={(_, newValue) => this.changeBase(newValue as number)}
                />
--- a/src/components/_ZoomProperty.tsx
+++ b/src/components/_ZoomProperty.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import {mdiFunctionVariant, mdiTableRowPlusAfter} from '@mdi/js';
-import {latest} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'

 import InputButton from './InputButton'
 import InputSpec from './InputSpec'
@@ -207,7 +207,7 @@ export default class ZoomProperty extends React.Component<ZoomPropertyProps, Zoo
            <div className="maputnik-data-spec-property-input">
              <InputSpec
                fieldName={"base"}
-                fieldSpec={latest.function.base}
+                fieldSpec={latest.function.base as typeof latest.function.base & { type: "number" }}
                value={this.props.value?.base}
                onChange={(_, newValue) => this.changeBase(newValue as number | undefined)}
              />