factor out layer methods into objects, use promise based loading

Author: digitaltom

app/assets/stylesheets/docs.css

@@ -21,7 +21,7 @@ nav.fixed-top~#docs {
     padding-bottom: 0.4rem;
     width: fit-content;
     border-bottom: 0.15rem solid transparent;
-    border-image: linear-gradient(to right, var(--color-dark-moss-green), var(--color-light-sand)) 1;
+    border-image: linear-gradient(to right, var(--color-light-sand), var(--color-dark-moss-green)) 1;
   }
 
   h2, h3, h4 {

app/javascript/channels/map_channel.js

@@ -1,5 +1,6 @@
 import consumer from 'channels/consumer'
-import { initializeLayerStyles, layers, loadLayerDefinitions } from 'maplibre/layers/layers'
+import { createLayerInstance } from 'maplibre/layers/factory'
+import { initializeLayerSources, initializeLayerStyles, layers, loadLayerDefinitions } from 'maplibre/layers/layers'
 import {
   destroyFeature,
   initializeMaplibreProperties, map,
@@ -101,19 +102,17 @@ export function initializeSocket () {
         case 'update_layer':
           const index = layers.findIndex(l => l.id === data.layer.id)
           if (index > -1) {
-            // Remove geojson key before comparison
-            const { ['geojson']: _, ...layerDef } = layers[index]
+            const layerDef = layers[index].toJSON()
             if (JSON.stringify(layerDef) !== JSON.stringify(data.layer)) {
-              // preserve geojson data when updating layer definition
-              const geojson = layers[index].geojson
-              layers[index] = data.layer
-              if (geojson) { layers[index].geojson = geojson }
               console.log('Layer updated on server, reloading layer styles', data.layer)
+              layers[index].update(data.layer)
               initializeLayerStyles(data.layer.id)
-              setLayerVisibility(data.layer.type + '-source-' + data.layer.id, data.layer.show !== false)
+              setLayerVisibility(layers[index].sourceId, data.layer.show !== false)
             }
           } else {
-            layers.push(data.layer)
+            const newLayer = createLayerInstance(data.layer)
+            layers.push(newLayer)
+            initializeLayerSources(data.layer.id)
             initializeLayerStyles(data.layer.id)
           }
           break

app/javascript/controllers/feature/edit_controller.js

@@ -6,8 +6,7 @@ import { status } from 'helpers/status'
 import { flyToFeature } from 'maplibre/animations'
 import { draw, handleDelete } from 'maplibre/edit'
 import { confirmImageLocation, featureIcon, featureImage, uploadImageToFeature } from 'maplibre/feature'
-import { renderGeoJSONLayer } from 'maplibre/layers/geojson'
-import { getFeature, getLayer } from 'maplibre/layers/layers'
+import { getFeature, getLayer, renderLayer } from 'maplibre/layers/layers'
 import { featureColor, featureOutlineColor } from 'maplibre/styles/styles'
 import { addUndoState } from 'maplibre/undo'
 
@@ -41,7 +40,7 @@ export default class extends Controller {
     document.querySelector('#feature-edit-raw .error').innerHTML = ''
     try {
       feature.properties = JSON.parse(document.querySelector('#feature-edit-raw textarea').value)
-      renderGeoJSONLayer(this.layerIdValue, true)
+      renderLayer(this.layerIdValue, true)
       mapChannel.send_message('update_feature', feature)
     } catch (error) {
       console.error('Error updating feature:', error.message)
@@ -56,7 +55,7 @@ export default class extends Controller {
     feature.properties.title = title
     if (document.querySelector('#feature-show-title-on-map')?.checked) {
       feature.properties.label = title
-      renderGeoJSONLayer(this.layerIdValue, false)
+      renderLayer(this.layerIdValue, false)
     }
     document.querySelector('#feature-title').textContent = title
     functions.debounce(() => { this.saveFeature() }, 'title')
@@ -70,7 +69,7 @@ export default class extends Controller {
     } else {
       delete feature.properties.label
     }
-    renderGeoJSONLayer(this.layerIdValue, false)
+    renderLayer(this.layerIdValue, false)
     functions.debounce(() => { this.saveFeature() }, 'show-title-on-map', 1000)
   }
 
@@ -86,7 +85,7 @@ export default class extends Controller {
     }
     feature.properties[propertyName] = value
     draw.setFeatureProperty(this.featureIdValue, propertyName, value)
-    renderGeoJSONLayer(this.layerIdValue, true)
+    renderLayer(this.layerIdValue, true)
   }
 
   // called as preview on slider change
@@ -134,15 +133,15 @@ export default class extends Controller {
       document.querySelector('#stroke-color').removeAttribute('disabled')
     }
     feature.properties.stroke = color
-    renderGeoJSONLayer(this.layerIdValue, true)
+    renderLayer(this.layerIdValue, true)
   }
 
   updateFillColor () {
     const feature = this.getEditFeature()
     const color = document.querySelector('#fill-color').value
     if (feature.geometry.type === 'Polygon' || feature.geometry.type === 'MultiPolygon') { feature.properties.fill = color }
     if (feature.geometry.type === 'Point') { feature.properties['marker-color'] = color }
-    renderGeoJSONLayer(this.layerIdValue, true)
+    renderLayer(this.layerIdValue, true)
   }
 
   updateFillColorTransparent () {
@@ -158,7 +157,7 @@ export default class extends Controller {
     }
     if (feature.geometry.type === 'Polygon' || feature.geometry.type === 'MultiPolygon') { feature.properties.fill = color }
     if (feature.geometry.type === 'Point') { feature.properties['marker-color'] = color }
-    renderGeoJSONLayer(this.layerIdValue, true)
+    renderLayer(this.layerIdValue, true)
   }
 
   updateShowKmMarkers () {
@@ -170,7 +169,7 @@ export default class extends Controller {
       delete feature.properties['show-km-markers']
       delete feature.properties['stroke-image-url']
     }
-    renderGeoJSONLayer(this.layerIdValue, true)
+    renderLayer(this.layerIdValue, true)
   }
 
   updateMarkerSymbol () {
@@ -183,7 +182,7 @@ export default class extends Controller {
     // draw layer feature properties aren't getting updated by draw.set()
     draw.setFeatureProperty(this.featureIdValue, 'marker-symbol', symbol)
     functions.e('.feature-symbol', e => { e.innerHTML = featureIcon(feature) })
-    renderGeoJSONLayer(this.layerIdValue, true)
+    renderLayer(this.layerIdValue, true)
   }
 
   async updateMarkerImage () {
@@ -205,7 +204,7 @@ export default class extends Controller {
           feature.geometry.coordinates = imageLocation
           flyToFeature(feature)
         }
-        renderGeoJSONLayer(this.layerIdValue, true)
+        renderLayer(this.layerIdValue, true)
         this.saveFeature()
       })
   }

app/javascript/controllers/map/context_menu_controller.js

@@ -3,10 +3,9 @@ import { mapChannel } from 'channels/map_channel'
 import { status } from 'helpers/status'
 import * as functions from 'helpers/functions'
 import { hideContextMenu } from 'maplibre/controls/context_menu'
-import { getFeature } from 'maplibre/layers/layers'
+import { getFeature, renderLayers } from 'maplibre/layers/layers'
 import { addFeature } from 'maplibre/map'
 import { addUndoState } from 'maplibre/undo'
-import { renderGeoJSONLayers } from 'maplibre/layers/geojson'
 
 export default class extends Controller {
 
@@ -18,7 +17,7 @@ export default class extends Controller {
     addUndoState('Feature update', feature)
     if (feature.geometry.type === 'LineString') { feature.geometry.coordinates.splice(vertexIndex, 1) }
     if (feature.geometry.type === 'Polygon') { feature.geometry.coordinates[0].splice(vertexIndex, 1) }
-    renderGeoJSONLayers(true)
+    renderLayers('geojson', true)
     mapChannel.send_message('update_feature', { ...feature })
     status('Point deleted')
     hideContextMenu()
@@ -36,7 +35,7 @@ export default class extends Controller {
     // Keep original feature, shorten it to the first segment
     addUndoState('Feature update', feature)
     feature.geometry.coordinates = firstCoords
-    renderGeoJSONLayers(true)
+    renderLayers('geojson', true)
     mapChannel.send_message('update_feature', { ...feature })
 
     const secondFeature = {

app/javascript/controllers/map/layers_controller.js

@@ -6,9 +6,8 @@ import { status } from 'helpers/status'
 import { flyToFeature } from 'maplibre/animations'
 import { initLayersModal } from 'maplibre/controls/shared'
 import { confirmImageLocation, uploadImageToFeature } from 'maplibre/feature'
-import { renderGeoJSONLayer } from 'maplibre/layers/geojson'
-import { initializeLayerSources, initializeLayerStyles, layers, loadAllLayerData, loadLayerData } from 'maplibre/layers/layers'
-import { initializeOverpassLayers } from 'maplibre/layers/overpass'
+import { createLayerInstance } from 'maplibre/layers/factory'
+import { initializeLayerSources, initializeLayerStyles, layers, loadAllLayerData, loadLayerData, renderLayer } from 'maplibre/layers/layers'
 import { queries } from 'maplibre/layers/queries'
 import { map, mapProperties, removeGeoJSONSource, setLayerVisibility, upsert } from 'maplibre/map'
 
@@ -111,7 +110,7 @@ export default class extends Controller {
     uploadImageToFeature(file, feature).then( () => {
       upsert(feature)
       // redraw first geojson layer
-      renderGeoJSONLayer(layers.find(l => l.type === 'geojson').id)
+      renderLayer(layers.find(l => l.type === 'geojson').id)
       mapChannel.send_message('new_feature', { ...feature })
       status('Added image')
       flyToFeature(feature)
@@ -159,10 +158,9 @@ export default class extends Controller {
     layer["cluster"] = clustered
     layer["heatmap"] = layer.query.includes("heatmap=true")
     event.target.closest('.layer-item').querySelector('.layer-name').innerHTML = layer.name
-    const { geojson: _geojson, ...sendLayer } = layer
-    mapChannel.send_message('update_layer', sendLayer)
+    mapChannel.send_message('update_layer', layer.toJSON())
     event.target.closest('.layer-item').querySelector('.reload-icon').classList.add('layer-refresh-animate')
-    initializeOverpassLayers(layerId)
+    layer.initialize().then(() => { initLayersModal() })
   }
 
   refreshLayer (event) {
@@ -209,7 +207,7 @@ export default class extends Controller {
     const wasVisible = layer.show !== false
     layer.show = !wasVisible
 
-    setLayerVisibility(layer.type + '-source-' + layerId, layer.show)
+    setLayerVisibility(layer.sourceId, layer.show)
 
     // update UI (both desktop and mobile visibility buttons)
     layerElement.querySelectorAll('button.layer-visibility i, button.layer-visibility-mobile i').forEach(icon => {
@@ -240,8 +238,7 @@ export default class extends Controller {
 
     // sync to server only in rw mode
     if (window.gon.map_mode === "rw") {
-      const { geojson: _geojson, ...sendLayer } = layer
-      mapChannel.send_message('update_layer', sendLayer)
+      mapChannel.send_message('update_layer', layer.toJSON())
     }
   }
 
@@ -266,20 +263,21 @@ export default class extends Controller {
   createLayer(type, name, query) {
     let layerId = functions.featureId()
     // must match server attribute order, for proper comparison in map_channel
-    let layer = { "id": layerId, "type": type, "name": name, "heatmap": false, "cluster": true, "show": true}
+    let layerData = { "id": layerId, "type": type, "name": name, "heatmap": false, "cluster": true, "show": true}
     if (type == 'overpass') {
-      layer["query"] = query
+      layerData["query"] = query
       // TODO: move cluster + heatmap to layer checkboxes
-      const clustered = !layer.query.includes("heatmap=true") &&
-        !layer.query.includes("cluster=false") &&
-        !layer.query.includes("geom") // clustering breaks lines & geometries
-      layer["cluster"] = clustered
-      layer["heatmap"] = layer.query.includes("heatmap=true")
+      const clustered = !layerData.query.includes("heatmap=true") &&
+        !layerData.query.includes("cluster=false") &&
+        !layerData.query.includes("geom") // clustering breaks lines & geometries
+      layerData["cluster"] = clustered
+      layerData["heatmap"] = layerData.query.includes("heatmap=true")
     }
+    let layer = createLayerInstance(layerData)
     layers.push(layer)
     initializeLayerSources(layerId)
     initializeLayerStyles(layerId)
-    mapChannel.send_message('new_layer', layer)
+    mapChannel.send_message('new_layer', layerData)
     initLayersModal()
     document.querySelector('#layer-list-' + layerId + ' .reload-icon').classList.add('layer-refresh-animate')
     return layerId
@@ -291,12 +289,10 @@ export default class extends Controller {
     dom.closeTooltips()
     const layerElement = event.target.closest('.layer-item')
     const layerId = layerElement.getAttribute('data-layer-id')
-    const layerType = layerElement.getAttribute('data-layer-type')
     const layer = layers.find(f => f.id === layerId)
-    const { geojson: _geojson, ...sendLayer } = layer
     layers.splice(layers.indexOf(layer), 1)
-    removeGeoJSONSource(layerType + '-source-' + layerId)
-    mapChannel.send_message('delete_layer', sendLayer)
+    removeGeoJSONSource(layer.sourceId)
+    mapChannel.send_message('delete_layer', layer.toJSON())
     initLayersModal()
   }
 }

app/javascript/maplibre/animations.js

@@ -7,8 +7,7 @@ import * as functions from 'helpers/functions'
 import { status } from 'helpers/status'
 import { resetControls } from 'maplibre/controls/shared'
 import { highlightFeature } from 'maplibre/feature'
-import { renderGeoJSONLayers } from 'maplibre/layers/geojson'
-import { getFeatureSource } from 'maplibre/layers/layers'
+import { getFeatureSource, renderLayers } from 'maplibre/layers/layers'
 import { map, mapProperties } from 'maplibre/map'
 
 export class AnimationManager {
@@ -51,7 +50,7 @@ export class AnimatePointAnimation extends AnimationManager {
         start[1] + (end[1] - start[1]) * progress
       ]
       feature.geometry.coordinates = newCoordinates
-      renderGeoJSONLayers(false)
+      renderLayers('geojson', false)
       if (progress < 1) { this.animationId = requestAnimationFrame(animate) }
     }
     this.animationId = requestAnimationFrame(animate)
@@ -94,7 +93,7 @@ export class AnimateLineAnimation extends AnimationManager {
       // console.log("Frame #" + _frame + ", distance: " + distance + ", coord: " + coordinate)
 
       line.geometry.coordinates.push(coordinate)
-      renderGeoJSONLayers(false)
+      renderLayers('geojson', false)
 
       // Update camera position
       if (follow) { map.jumpTo({ center: coordinate }) }
@@ -125,7 +124,7 @@ export class AnimatePolygonAnimation extends AnimationManager {
       const progress = counter / steps
       polygon.properties['fill-extrusion-height'] = progress * height
       // console.log('New height: ' + polygon.properties['fill-extrusion-height'])
-      renderGeoJSONLayers(false)
+      renderLayers('geojson', false)
 
       counter++
 
@@ -137,7 +136,7 @@ export class AnimatePolygonAnimation extends AnimationManager {
     }
 
     polygon.properties['fill-extrusion-height'] = 0
-    renderGeoJSONLayers(true)
+    renderLayers('geojson', true)
     this.animationId = requestAnimationFrame(animate)
   }
 }

app/javascript/maplibre/edit.js

@@ -6,8 +6,7 @@ import { status } from 'helpers/status';
 import { disableEditControls, enableEditControls, initializeEditControls } from 'maplibre/controls/edit';
 import { initializeDefaultControls, resetControls } from 'maplibre/controls/shared';
 import { highlightFeature } from 'maplibre/feature';
-import { renderGeoJSONLayers } from 'maplibre/layers/geojson';
-import { getFeature, hasFeatures, layers } from 'maplibre/layers/layers';
+import { getFeature, hasFeatures, initializeLayers, layers, renderLayers } from 'maplibre/layers/layers';
 import { addFeature, destroyFeature, map, mapProperties } from 'maplibre/map';
 import { getRouteElevation, getRouteUpdate } from 'maplibre/routing/openrouteservice';
 import { initDirections, resetDirections } from 'maplibre/routing/osrm';
@@ -75,15 +74,13 @@ export async function initializeEditMode () {
   initializeEditControls()
   initializeDefaultControls()
 
-  // Show map settings modal on untouched map
+  // Show map settings modal on untouched map and handle URL feature selection
   map.once('load', async function (_e) {
-    if (!layers) { await functions.waitForEvent(map, 'layers.load') }
+    if (!layers) { await initializeLayers() }
     if (!mapProperties.name && !hasFeatures('geojson') && !layers?.filter(l => l.type !== 'geojson').length)  {
       functions.e('.maplibregl-ctrl-map', e => { e.click() })
     }
-  })
 
-  map.on('geojson.load', function (_e) {
     const urlFeatureId = new URLSearchParams(window.location.search).get('f')
     const feature = getFeature(urlFeatureId, 'geojson')
     if (feature) { map.fire('draw.selectionchange', {features: [feature]}) }
@@ -256,7 +253,7 @@ function handleCreate (e) {
   addUndoState('Feature added', feature)
   // redraw if the painted feature was changed in this method
   if (mode === 'directions_car' || mode === 'directions_bike' || mode === 'directions_foot' || mode === 'draw_paint_mode') {
-    renderGeoJSONLayers(false)
+    renderLayers('geojson', false)
   }
   mapChannel.send_message('new_feature', feature)
   if (feature.geometry.type === 'LineString') { updateElevation(feature) }
@@ -297,7 +294,7 @@ async function handleUpdate (e) {
 
   status('Feature ' + feature.id + ' changed')
   geojsonFeature.geometry = feature.geometry
-  renderGeoJSONLayers(false)
+  renderLayers('geojson', false)
 
   if (feature.geometry.type === 'LineString') {
     // gets also triggered on failure