chore(deps): Bump maplibre-gl from 5.5.0 to 5.6.2 (#1308)

Bumps [maplibre-gl](https://github.com/maplibre/maplibre-gl-js) from 5.5.0 to 5.6.2. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/maplibre/maplibre-gl-js/releases">maplibre-gl's releases</a>.</em></p> <blockquote> <h2>v5.6.2</h2> <p><a href="https://github.com/maplibre/maplibre-gl-js">https://github.com/maplibre/maplibre-gl-js</a> <a href="https://github.com/maplibre/maplibre-gl-js/compare/v5.6.1...v5.6.2">Changes</a> since <a href="https://github.com/maplibre/maplibre-gl-js/releases/tag/v5.6.1">MapLibre GL JS v5.6.1</a>:</p> <h3>🐞 Bug fixes</h3> <ul> <li>Fix white artifacts when using non-zero elevation (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/6032">#6032</a>)</li> <li>Fix geolocate control lock loss on window resize and zoom (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/3504">#3504</a>)</li> <li>Fix a memory leak in <code>GeoJSONSource</code> when rapidly updating data (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/6163">#6163</a>)</li> <li>Fix <code>Map.setTransformRequest</code> parameter type to include <code>null</code> (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/6179">#6179</a>)</li> <li>Fix typo <code>_rotatePitchHandler</code> in the <code>navigation_control.ts</code> file (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/6207">#6207</a>)</li> </ul> <h2>v5.6.1</h2> <p><a href="https://github.com/maplibre/maplibre-gl-js">https://github.com/maplibre/maplibre-gl-js</a> <a href="https://github.com/maplibre/maplibre-gl-js/compare/v5.6.0...v5.6.1">Changes</a> since <a href="https://github.com/maplibre/maplibre-gl-js/releases/tag/v5.6.0">MapLibre GL JS v5.6.0</a>:</p> <h3>🐞 Bug fixes</h3> <ul> <li>Fix use of <code>textureSize</code> call in color relief shader (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/5980">#5980</a>)</li> <li>Fix Y axis transformation in projectFromLabelPlaneToClipSpace (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/6021">#6021</a>)</li> <li>Alpha-sort all examples (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/6049">#6049</a>)</li> <li>Ensure opacity is reset for popups when <code>locationOccludedOpacity</code> no longer applicable (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/6088">#6088</a>)</li> </ul> <h2>v5.6.0</h2> <p><a href="https://github.com/maplibre/maplibre-gl-js">https://github.com/maplibre/maplibre-gl-js</a> <a href="https://github.com/maplibre/maplibre-gl-js/compare/v5.5.0...v5.6.0">Changes</a> since <a href="https://github.com/maplibre/maplibre-gl-js/releases/tag/v5.5.0">MapLibre GL JS v5.5.0</a>:</p> <h3>✨ Features and improvements</h3> <ul> <li>Add <code>setGlobalStateProperty()</code> and <code>getGlobalState()</code> to the map public API (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/5613">#5613</a>)</li> <li>Improve tile frustum culling for globe, leading to better performance and faster loading times. (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/5865">#5865</a>)</li> <li>Add new <code>color-relief</code> layer type to render hypsometric tint from terrain-RGB tiles. (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/5742">#5742</a>)</li> </ul> <h3>🐞 Bug fixes</h3> <ul> <li>Fix <code>queryRenderedFeatures</code> bounding box crossing antimeridian in globe view. (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/5856">#5856</a>)</li> <li>Fix handling invalid glyph placement results along lines (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/5118">#5118</a>)</li> <li>Fix <code>refreshTiles()</code> for vector tiles (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/5875">#5875</a>)</li> <li>Revert changes to polygon intersection detection (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/5590">#5590</a> caused issue <a href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/5864">5864</a>)</li> <li>Fix breaking clusters when non-integer value provided for <code>clusterMaxZoom</code> (warning is shown) (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/5929">#5929</a>) + clarify API docs</li> </ul> </blockquote> </details> <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/maplibre/maplibre-gl-js/blob/main/CHANGELOG.md">maplibre-gl's changelog</a>.</em></p> <blockquote> <h2>5.6.2</h2> <h3>🐞 Bug fixes</h3> <ul> <li>Fix white artifacts when using non-zero elevation (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/6032">#6032</a>)</li> <li>Fix geolocate control lock loss on window resize and zoom (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/3504">#3504</a>)</li> <li>Fix a memory leak in <code>GeoJSONSource</code> when rapidly updating data (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/6163">#6163</a>)</li> <li>Fix <code>Map.setTransformRequest</code> parameter type to include <code>null</code> (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/6179">#6179</a>)</li> <li>Fix typo <code>_rotatePitchHandler</code> in the <code>navigation_control.ts</code> file (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/6207">#6207</a>)</li> </ul> <h2>5.6.1</h2> <h3>🐞 Bug fixes</h3> <ul> <li>Fix use of <code>textureSize</code> call in color relief shader (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/5980">#5980</a>)</li> <li>Fix Y axis transformation in projectFromLabelPlaneToClipSpace (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/6021">#6021</a>)</li> <li>Alpha-sort all examples (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/6049">#6049</a>)</li> <li>Ensure opacity is reset for popups when <code>locationOccludedOpacity</code> no longer applicable (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/6088">#6088</a>)</li> </ul> <h2>5.6.0</h2> <h3>✨ Features and improvements</h3> <ul> <li>Add <code>setGlobalStateProperty()</code> and <code>getGlobalState()</code> to the map public API (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/5613">#5613</a>)</li> <li>Improve tile frustum culling for globe, leading to better performance and faster loading times. (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/5865">#5865</a>)</li> <li>Add new <code>color-relief</code> layer type to render hypsometric tint from terrain-RGB tiles. (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/5742">#5742</a>)</li> </ul> <h3>🐞 Bug fixes</h3> <ul> <li>Fix <code>queryRenderedFeatures</code> bounding box crossing antimeridian in globe view. (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/5856">#5856</a>)</li> <li>Fix handling invalid glyph placement results along lines (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/5118">#5118</a>)</li> <li>Fix <code>refreshTiles()</code> for vector tiles (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/5875">#5875</a>)</li> <li>Revert changes to polygon intersection detection (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/5590">#5590</a> caused issue <a href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/5864">5864</a>)</li> <li>Fix breaking clusters when non-integer value provided for <code>clusterMaxZoom</code> (warning is shown) (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/5929">#5929</a>) + clarify API docs</li> <li>Fix use of reserved GLSL <code>switch</code> statement in hillshade shader (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/pull/5972">#5972</a>)</li> </ul> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="7887f2c899"><code>7887f2c</code></a> Bump version to 5.6.2 (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/6225">#6225</a>)</li> <li><a href="f3bf5d392e"><code>f3bf5d3</code></a> msft tier update (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/6212">#6212</a>)</li> <li><a href="6a66c11936"><code>6a66c11</code></a> Fix: issue <a href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/3504">#3504</a> geolocate lock loss zoom (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/6219">#6219</a>)</li> <li><a href="627ddaf4ad"><code>627ddaf</code></a> chore(deps): bump <code>@mapbox/tiny-sdf</code> from 2.0.6 to 2.0.7 (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/6224">#6224</a>)</li> <li><a href="5bbdd804ab"><code>5bbdd80</code></a> chore(deps-dev): bump <code>@typescript-eslint/eslint-plugin</code> (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/6221">#6221</a>)</li> <li><a href="cb873a5833"><code>cb873a5</code></a> chore(deps-dev): bump <code>@types/node</code> from 24.1.0 to 24.2.0 (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/6222">#6222</a>)</li> <li><a href="b20ddb1049"><code>b20ddb1</code></a> chore(deps-dev): bump <code>@typescript-eslint/parser</code> from 8.38.0 to 8.39.0 (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/6220">#6220</a>)</li> <li><a href="34b050ca74"><code>34b050c</code></a> chore(deps-dev): bump devtools-protocol from 0.0.1493946 to 0.0.1495869 (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/6218">#6218</a>)</li> <li><a href="cc4dfc25d5"><code>cc4dfc2</code></a> Fix _rotatePitchHandler typo (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/6208">#6208</a>)</li> <li><a href="b1a2d89710"><code>b1a2d89</code></a> chore(deps-dev): bump stylelint-config-standard from 38.0.0 to 39.0.0 (<a href="https://redirect.github.com/maplibre/maplibre-gl-js/issues/6203">#6203</a>)</li> <li>Additional commits viewable in <a href="https://github.com/maplibre/maplibre-gl-js/compare/v5.5.0...v5.6.2">compare view</a></li> </ul> </details> <br /> [![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=maplibre-gl&package-manager=npm_and_yarn&previous-version=5.5.0&new-version=5.6.2)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) </details> --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Birk Skyum <74932975+birkskyum@users.noreply.github.com> Co-authored-by: Harel M <harel.mazor@gmail.com> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
2025-12-25 15:40:00 +00:00 · 2025-09-07 14:24:50 +00:00
parent 4d5c74f4ee
commit 7289e26563
16 changed files with 249 additions and 537 deletions
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -108,7 +108,7 @@ type AppState = {
  dirtyMapStyle?: StyleSpecification,
  selectedLayerIndex: number,
  selectedLayerOriginalId?: string,
-  sources: {[key: string]: SourceSpecification},
+  sources: {[key: string]: SourceSpecification & {layers: string[]} },
  vectorLayers: {},
  spec: any,
  mapView: {
@@ -402,7 +402,6 @@ export default class App extends React.Component<any, AppState> {
    }

    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.
    const layerErrors: (Error | ValidationError)[] = [];
@@ -643,21 +642,22 @@ export default class App extends React.Component<any, AppState> {
    this.onStyleChanged(styleObj)
  }

-  fetchSources() {
-    const sourceList: {[key: string]: any} = {};
-
-    for(const [key, val] of Object.entries(this.state.mapStyle.sources)) {
-      if(
-        !Object.prototype.hasOwnProperty.call(this.state.sources, key) &&
-        val.type === "vector" &&
-        Object.prototype.hasOwnProperty.call(val, "url")
-      ) {
+  async fetchSources() {
+    const sourceList: {[key: string]: SourceSpecification & {layers: string[]}} = {};
+    for(const key of Object.keys(this.state.mapStyle.sources)) {
+      const source = this.state.mapStyle.sources[key];
+      if(source.type !== "vector" || !('url' in source)) {
+        sourceList[key] = this.state.sources[key] || {...this.state.mapStyle.sources[key]};
+        if (sourceList[key].layers === undefined) {
+          sourceList[key].layers = [];
+        }
+      } else {
        sourceList[key] = {
-          type: val.type,
+          type: source.type,
          layers: []
        };

-        let url = val.url;
+        let url = source.url;

        try {
          url = setFetchAccessToken(url!, this.state.mapStyle)
@@ -670,44 +670,28 @@ export default class App extends React.Component<any, AppState> {
            return;
          }

-          // Create new objects before setState
-          const sources = Object.assign({}, {
-            [key]: this.state.sources[key],
-          });
-
          for(const layer of json.vector_layers) {
-            (sources[key] as any).layers.push(layer.id)
+            sourceList[key].layers.push(layer.id)
          }
-
-          this.setState({
-            sources: sources
-          });
        };

-        if (url!.startsWith("pmtiles://")) {
-          (new PMTiles(url!.substr(10))).getTileJson("")
-            .then(json => setVectorLayers(json))
-            .catch(err => {
-              console.error("Failed to process sources for '%s'", url, err);
-            });
-        } else {
-          fetch(url!, {
-            mode: 'cors',
-          })
-            .then(response => response.json())
-            .then(json => setVectorLayers(json))
-            .catch(err => {
-              console.error("Failed to process sources for '%s'", url, err);
-            });
+        try {
+          if (url!.startsWith("pmtiles://")) {
+            const json = await (new PMTiles(url!.substring(10))).getTileJson("");
+            setVectorLayers(json);
+          } else {
+            const response = await fetch(url!, { mode: 'cors' });
+            const json = await response.json();
+            setVectorLayers(json);
+          }
+        } catch(err) {
+          console.error(`Failed to process source for url: '${url}', ${err}`);
        }
      }
-      else {
-        sourceList[key] = this.state.sources[key] || this.state.mapStyle.sources[key];
-      }
    }

    if(!isEqual(this.state.sources, sourceList)) {
-      console.debug("Setting sources");
+      console.debug("Setting sources", sourceList);
      this.setState({
        sources: sourceList
      })
--- a/src/components/FieldType.tsx
+++ b/src/components/FieldType.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
-
-import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
+import {v8} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import InputSelect from './InputSelect'
 import InputString from './InputString'
 import { WithTranslation, withTranslation } from 'react-i18next';
+import { startCase } from 'lodash'

 type FieldTypeInternalProps = {
  value: string
@@ -16,8 +16,9 @@ type FieldTypeInternalProps = {

 const FieldTypeInternal: React.FC<FieldTypeInternalProps> = (props) => {
  const t = props.t;
+  const layerstypes: [string, string][] = Object.keys(v8.layer.type.values || {}).map(v => [v, startCase(v.replace(/-/g, ' '))]);
  return (
-    <Block label={t('Type')} fieldSpec={latest.layer.type}
+    <Block label={t('Type')} fieldSpec={v8.layer.type}
      data-wd-key={props.wdKey}
      error={props.error}
    >
@@ -26,17 +27,7 @@ const FieldTypeInternal: React.FC<FieldTypeInternalProps> = (props) => {
      )}
      {!props.disabled && (
        <InputSelect
-          options={[
-            ['background', 'Background'],
-            ['fill', 'Fill'],
-            ['line', 'Line'],
-            ['symbol', 'Symbol'],
-            ['raster', 'Raster'],
-            ['circle', 'Circle'],
-            ['fill-extrusion', 'Fill Extrusion'],
-            ['hillshade', 'Hillshade'],
-            ['heatmap', 'Heatmap'],
-          ]}
+          options={layerstypes}
          onChange={props.onChange}
          value={props.value}
          data-wd-key={props.wdKey + '.select'}
--- a/src/components/LayerEditor.tsx
+++ b/src/components/LayerEditor.tsx
@@ -4,6 +4,7 @@ import {Accordion} from 'react-accessible-accordion';
 import {MdMoreVert} from 'react-icons/md'
 import { IconContext } from 'react-icons'
 import {BackgroundLayerSpecification, LayerSpecification, SourceSpecification} from 'maplibre-gl';
+import {v8} from '@maplibre/maplibre-gl-style-spec';

 import FieldJson from './FieldJson'
 import FilterEditor from './FilterEditor'
@@ -17,23 +18,78 @@ import FieldComment from './FieldComment'
 import FieldSource from './FieldSource'
 import FieldSourceLayer from './FieldSourceLayer'
 import { changeType, changeProperty } from '../libs/layer'
-import layout from '../config/layout.json'
 import {formatLayerId} from '../libs/format';
 import { WithTranslation, withTranslation } from 'react-i18next';
 import { TFunction } from 'i18next';
+import { NON_SOURCE_LAYERS } from '../libs/non-source-layers';

+type MaputnikLayoutGroup = {
+  id: string;
+  title: string;
+  type: string;
+  fields: string[];
+}

-function getLayoutForType(type: LayerSpecification["type"], t: TFunction) {
-  return layout[type] ? {
-    ...layout[type],
-    groups: layout[type].groups.map(group => {
-      return {
-        ...group,
-        id: group.title.replace(/ /g, "_"),
-        title: t(group.title)
-      };
-    }),
-  } : layout.invalid;
+function getLayoutForSymbolType(t: TFunction): MaputnikLayoutGroup[] {
+  const groups: MaputnikLayoutGroup[] = [];
+  groups.push({
+    title: t("General layout properties"),
+    id: "General_layout_properties",
+    type: "properties",
+    fields: Object.keys(v8["layout_symbol"]).filter(f => f.startsWith("symbol-"))
+  });
+  groups.push({
+    title: t("Text layout properties"),
+    id: "Text_layout_properties",
+    type: "properties",
+    fields: Object.keys(v8["layout_symbol"]).filter(f => f.startsWith("text-"))
+  });
+  groups.push({
+    title: t("Icon layout properties"),
+    id: "Icon_layout_properties",
+    type: "properties",
+    fields: Object.keys(v8["layout_symbol"]).filter(f => f.startsWith("icon-"))
+  });
+  groups.push({
+    title: t("Text paint properties"),
+    id: "Text_paint_properties",
+    type: "properties",
+    fields: Object.keys(v8["paint_symbol"]).filter(f => f.startsWith("text-"))
+  });
+  groups.push({
+    title: t("Icon paint properties"),
+    id: "Icon_paint_properties",
+    type: "properties",
+    fields: Object.keys(v8["paint_symbol"]).filter(f => f.startsWith("icon-"))
+  });
+  return groups;
+}
+
+function getLayoutForType(type: LayerSpecification["type"], t: TFunction): MaputnikLayoutGroup[] {
+  if (Object.keys(v8.layer.type.values).indexOf(type) < 0) {
+    return []
+  }
+  if (type === "symbol") {
+    return getLayoutForSymbolType(t);
+  }
+  const groups: MaputnikLayoutGroup[] = [];
+  if (Object.keys(v8["paint_" + type]).length > 0) {
+    groups.push({
+      title: t("Paint properties"),
+      id: "Paint_properties",
+      type: "properties",
+      fields: Object.keys(v8["paint_" + type]),
+    });
+  }
+  if (Object.keys(v8["layout_" + type]).length > 0) {
+    groups.push({
+      title: t("Layout properties"),
+      id: "Layout_properties",
+      type: "properties",
+      fields: Object.keys(v8["layout_" + type])
+    });
+  }
+  return groups;
 }

 function layoutGroups(layerType: LayerSpecification["type"], t: TFunction): {id: string, title: string, type: string, fields?: string[]}[] {
@@ -53,13 +109,13 @@ function layoutGroups(layerType: LayerSpecification["type"], t: TFunction): {id:
    type: 'jsoneditor'
  }
  return [layerGroup, filterGroup]
-    .concat(getLayoutForType(layerType, t).groups)
+    .concat(getLayoutForType(layerType, t))
    .concat([editorGroup])
 }

 type LayerEditorInternalProps = {
  layer: LayerSpecification
-  sources: {[key: string]: SourceSpecification}
+  sources: {[key: string]: SourceSpecification & {layers: string[]}}
  vectorLayers: {[key: string]: any}
  spec: object
  onLayerChanged(...args: unknown[]): unknown
@@ -89,11 +145,10 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
  constructor(props: LayerEditorInternalProps) {
    super(props)

-    //TODO: Clean this up and refactor into function
    const editorGroups: {[keys:string]: boolean} = {}
-    layoutGroups(this.props.layer.type, props.t).forEach(group => {
+    for (const group of layoutGroups(this.props.layer.type, props.t)) {
      editorGroups[group.title] = true
-    })
+    }

    this.state = { editorGroups }
  }
@@ -101,11 +156,11 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
  static getDerivedStateFromProps(props: Readonly<LayerEditorInternalProps>, state: LayerEditorState) {
    const additionalGroups = { ...state.editorGroups }

-    getLayoutForType(props.layer.type, props.t).groups.forEach(group => {
+    for (const group of getLayoutForType(props.layer.type, props.t)) {
      if(!(group.title in additionalGroups)) {
        additionalGroups[group.title] = true
      }
-    })
+    }

    return {
      editorGroups: additionalGroups
@@ -153,7 +208,7 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
    let sourceLayerIds;
    const layer = this.props.layer as Exclude<LayerSpecification, BackgroundLayerSpecification>;
    if(Object.prototype.hasOwnProperty.call(this.props.sources, layer.source)) {
-      sourceLayerIds = (this.props.sources[layer.source] as any).layers;
+      sourceLayerIds = this.props.sources[layer.source].layers;
    }

    switch(type) {
@@ -180,7 +235,7 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
        onChange={v => this.changeProperty(null, 'source', v)}
      />
      }
-      {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.props.layer.type) < 0 &&
+      {!NON_SOURCE_LAYERS.includes(this.props.layer.type) &&
        <FieldSourceLayer
          error={errorData['source-layer']}
          sourceLayerIds={sourceLayerIds}
--- a/src/components/LayerList.tsx
+++ b/src/components/LayerList.tsx
@@ -7,7 +7,7 @@ import LayerListItem from './LayerListItem'
 import ModalAdd from './ModalAdd'

 import {SortEndHandler, SortableContainer} from 'react-sortable-hoc';
-import type {LayerSpecification} from 'maplibre-gl';
+import type {LayerSpecification, SourceSpecification} from 'maplibre-gl';
 import generateUniqueId from '../libs/document-uid';
 import { findClosestCommonPrefix, layerPrefix } from '../libs/layer';
 import { WithTranslation, withTranslation } from 'react-i18next';
@@ -20,7 +20,7 @@ type LayerListContainerProps = {
  onLayerDestroy?(...args: unknown[]): unknown
  onLayerCopy(...args: unknown[]): unknown
  onLayerVisibilityToggle(...args: unknown[]): unknown
-  sources: object
+  sources: Record<string, SourceSpecification & {layers: string[]}>;
  errors: any[]
 };
 type LayerListContainerInternalProps = LayerListContainerProps & WithTranslation;
--- a/src/components/ModalAdd.tsx
+++ b/src/components/ModalAdd.tsx
@@ -6,8 +6,9 @@ import FieldType from './FieldType'
 import FieldId from './FieldId'
 import FieldSource from './FieldSource'
 import FieldSourceLayer from './FieldSourceLayer'
-import type {LayerSpecification} from 'maplibre-gl'
+import type {LayerSpecification, SourceSpecification} from 'maplibre-gl'
 import { WithTranslation, withTranslation } from 'react-i18next';
+import { NON_SOURCE_LAYERS } from '../libs/non-source-layers'

 type ModalAddInternalProps = {
  layers: LayerSpecification[]
@@ -15,7 +16,7 @@ type ModalAddInternalProps = {
  isOpen: boolean
  onOpenToggle(open: boolean): unknown
  // A dict of source id's and the available source layers
-  sources: any
+  sources: Record<string, SourceSpecification & {layers: string[]}>;
 } & WithTranslation;

 type ModalAddState = {
@@ -41,7 +42,7 @@ class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddSt

    if(this.state.type !== 'background') {
      layer.source = this.state.source
-      if(this.state.type !== 'raster' && this.state['source-layer']) {
+      if(!NON_SOURCE_LAYERS.includes(this.state.type) && this.state['source-layer']) {
        layer['source-layer'] = this.state['source-layer']
      }
    }
@@ -61,9 +62,12 @@ class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddSt
      error: null,
    }

-    if(props.sources.length > 0) {
+    if(Object.keys(props.sources).length > 0) {
      state.source = Object.keys(this.props.sources)[0];
-      state['source-layer'] = this.props.sources[state.source as keyof ModalAddInternalProps["sources"]][0]
+      const sourceLayers = this.props.sources[state.source].layers || []
+      if (sourceLayers.length > 0) {
+        state['source-layer'] = sourceLayers[0];
+      }
    }
    this.state = state;
  }
@@ -97,39 +101,26 @@ class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddSt
    return sourceObj.layers || [];
  }

-  getSources(type: string) {
-    const sources = [];
+  getSources(type: LayerSpecification["type"]) {

-    const types = {
-      vector: [
-        "fill",
-        "line",
-        "symbol",
-        "circle",
-        "fill-extrusion",
-        "heatmap"
-      ],
-      raster: [
-        "raster"
-      ],
-      geojson: [
-        "fill",
-        "line",
-        "symbol",
-        "circle",
-        "fill-extrusion",
-        "heatmap"
-      ]
+    switch(type) {
+    case 'background':
+      return [];
+    case 'hillshade':
+    case 'color-relief':
+      return Object.entries(this.props.sources).filter(([_, v]) => v.type === 'raster-dem').map(([k, _]) => k);
+    case 'raster':
+      return Object.entries(this.props.sources).filter(([_, v]) => v.type === 'raster').map(([k, _]) => k);
+    case 'heatmap':
+    case 'circle':
+    case 'fill':
+    case 'fill-extrusion':
+    case 'line':
+    case 'symbol':
+      return Object.entries(this.props.sources).filter(([_, v]) => v.type === 'vector' || v.type === 'geojson').map(([k, _]) => k);
+    default:
+      return [];
    }
-
-    for(const [key, val] of Object.entries(this.props.sources) as any) {
-      const valType = val.type as keyof typeof types;
-      if(types[valType] && types[valType].indexOf(type) > -1) {
-        sources.push(key);
-      }
-    }
-
-    return sources;
  }


@@ -182,7 +173,7 @@ class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddSt
        onChange={(v: string) => this.setState({ source: v })}
      />
        }
-        {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.state.type) < 0 &&
+        {!NON_SOURCE_LAYERS.includes(this.state.type) &&
      <FieldSourceLayer
        isFixed={true}
        sourceLayerIds={layers}
--- a/src/components/_FunctionButtons.tsx
+++ b/src/components/_FunctionButtons.tsx
@@ -17,7 +17,7 @@ class FunctionInputButtonsInternal extends React.Component<FunctionInputButtonsI
    const t = this.props.t;
    let makeZoomInputButton, makeDataInputButton, expressionInputButton;

-    if (this.props.fieldSpec.expression.parameters.includes('zoom')) {
+    if (this.props.fieldSpec.expression?.parameters.includes('zoom')) {
      expressionInputButton = (
        <InputButton
          className="maputnik-make-zoom-function"