Upgrade to maplibre 6.0

CHANGELOG.md

@@ -4,6 +4,7 @@ All notable changes to this project will be documented in this file.
 
 ## 2026-07
 
+* Update to [Maplibre GL JS 6.0](https://github.com/maplibre/maplibre-gl-js/releases/tag/v6.0.0)
 * Performance improvements for large maps
 * Option to delete items from context menu
 

app/javascript/controllers/feature/modal_controller.js

@@ -295,6 +295,10 @@ export default class extends Controller {
     dom.showElements(['#feature-desc-section', '#feature-desc'])
     // https://github.com/Ionaru/easy-markdown-editor
     await import('easymde') // import EasyMDE UMD bundle
+    // EasyMDE defaults to a broken font-awesome build from bootstrapcdn; load a working one ourselves
+    // (v4-shims maps EasyMDE's old "fa fa-*" classes to FA6 icons)
+    dom.loadStylesheet('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css')
+    dom.loadStylesheet('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/v4-shims.min.css')
     if (easyMDE) { easyMDE.toTextArea() }
     document.querySelector('#feature-desc-input').value = this.getSelectedFeature().properties.desc || ''
     easyMDE = new window.EasyMDE({
@@ -303,6 +307,7 @@ export default class extends Controller {
       toolbar: ["bold", "italic", "heading", "code", "table", "|", "unordered-list", "horizontal-rule", "|", "link", "image", "preview"],
       minHeight: '4em',
       spellChecker: false,
+      autoDownloadFontAwesome: false,
       status: [{
         className: 'autosave',
         onUpdate: () => { this.updateDesc() }

app/javascript/controllers/map/settings_controller.js

@@ -191,12 +191,17 @@ export default class extends Controller {
     dom.showElements(['#map-description'])
 
     await import('easymde') // import EasyMDE UMD bundle
+    // EasyMDE defaults to a broken font-awesome build from bootstrapcdn; load a working one ourselves
+    // (v4-shims maps EasyMDE's old "fa fa-*" classes to FA6 icons)
+    dom.loadStylesheet('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css')
+    dom.loadStylesheet('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/v4-shims.min.css')
     descEasyMDE = new window.EasyMDE({
       element: document.getElementById('map-description-input'),
       placeholder: 'Add a description text',
       toolbar: ["bold", "italic", "heading", "code", "table", "|", "unordered-list", "horizontal-rule", "|", "link", "image", "preview"],
       minHeight: '4em',
       spellChecker: false,
+      autoDownloadFontAwesome: false,
       status: [{
         className: 'autosave',
         onUpdate: () => { this.updateDescription() }

app/javascript/deck.js

@@ -1,6 +1,6 @@
 import { hexToRgb } from 'helpers/functions'
 import { mapProperties, initializeMaplibreProperties } from 'maplibre/map'
-import maplibregl from 'maplibre-gl'
+import * as maplibregl from 'maplibre-gl'
 
 // eslint expects variables to get imported, but we load the full lib in header
 const deck = window.deck;

app/javascript/helpers/dom.js

@@ -71,6 +71,14 @@ export function scrollToId(elementId) {
   }
 }
 
+export function loadStylesheet (href) {
+  if (document.querySelector(`link[href="${href}"]`)) return
+  const link = document.createElement('link')
+  link.rel = 'stylesheet'
+  link.href = href
+  document.head.appendChild(link)
+}
+
 export function isInputElement(target) {
   return target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT' || target.isContentEditable
 }

app/javascript/maplibre/controls/geolocate.js

@@ -1,6 +1,6 @@
 import * as functions from 'helpers/functions'
 import { status } from 'helpers/status'
-import maplibregl from 'maplibre-gl'
+import * as maplibregl from 'maplibre-gl'
 import { map, mapProperties } from 'maplibre/map'
 
 let isInFollowMode = false

app/javascript/maplibre/controls/shared.js

@@ -3,7 +3,7 @@ import * as dom from 'helpers/dom'
 import { animateElement, initTooltips } from 'helpers/dom'
 import * as f from 'helpers/functions'
 import * as functions from 'helpers/functions'
-import MaplibreGeocoder from 'maplibre-gl-geocoder'
+import MaplibreGeocoder from '@maplibre/maplibre-gl-geocoder'
 import { hideContextMenu } from 'maplibre/controls/context_menu'
 import { resetEditControls } from 'maplibre/controls/edit'
 import { initializeGeoLocateControl } from 'maplibre/controls/geolocate'
@@ -437,11 +437,9 @@ export function initializeDefaultControls () {
       maplibregl,
       zoom: 16,
       flyTo: { maxZoom: 16 },
-      clearAndBlurOnEsc: true,
-      // prioritize results near map center
-      proximity: {
-        latitude: () => { map.getCenter().lat }, longitude: () => { map.getCenter().lng }
-      }
+      clearAndBlurOnEsc: true
+      // trackProximity defaults to true, which already biases results toward
+      // the current map center — no need to wire up proximity manually
     }), 'top-right'
   )
   const geocoderButton = document.querySelector('.maplibregl-ctrl-geocoder')

app/javascript/maplibre/map.js

@@ -4,7 +4,7 @@ import equal from 'fast-deep-equal'; // https://github.com/epoberezkin/fast-deep
 import * as dom from 'helpers/dom';
 import * as functions from 'helpers/functions';
 import { status } from 'helpers/status';
-import maplibregl from 'maplibre-gl';
+import * as maplibregl from 'maplibre-gl';
 import { AnimateLineAnimation, AnimatePointAnimation, AnimatePolygonAnimation, animateViewFromProperties } from 'maplibre/animations';
 import { hideContextMenu, initContextMenu } from 'maplibre/controls/context_menu';
 import { isGeolocateFollowModeActive } from 'maplibre/controls/geolocate';
@@ -100,7 +100,7 @@ export async function initializeMap (divId = 'maplibre-map') {
 
   if (!!mapProperties.description?.trim()) { dom.showElements('#description-modal') }
 
-  map.on('styleimagemissing', loadImage)
+  map.setMissingStyleImageResolver(loadImage)
 
   // TODO: remove once https://github.com/maplibre/maplibre-gl-js/issues/7752 is fixed (5.25)
   window.addEventListener('error', (event) => {

app/javascript/maplibre/routing/directions.js

@@ -40,6 +40,18 @@ class CustomMapLibreGlDirections extends MapLibreGlDirections {
       this.buildRequest = orsBuildRequest
       this.fetch = orsFetch.bind(this)
     }
+
+    // queryRenderedFeatures only supports string/number properties; object-valued ones come
+    // back mangled, breaking the library's JSON.parse in onMove (hover-insert never fires).
+    const buildRoutelines = this.buildRoutelines
+    this.buildRoutelines = (...args) => {
+      const routelines = buildRoutelines(...args)
+      routelines.forEach(group => group.forEach(routeline => {
+        routeline.properties.departSnappointProperties = JSON.stringify(routeline.properties.departSnappointProperties)
+        routeline.properties.arriveSnappointProperties = JSON.stringify(routeline.properties.arriveSnappointProperties)
+      }))
+      return routelines
+    }
   }
 
   // Override onMove to be defensive - check if layer exists before querying
@@ -296,7 +308,7 @@ function updateTrack(feature) {
 }
 
 export function getDirectionsLayers () {
-  let layers = layersFactory()
+  let layers = layersFactory(1.2)
   layers = layers.filter(layer => layer.id !== "maplibre-gl-directions-routeline")
   layers = layers.filter(layer => layer.id !== "maplibre-gl-directions-routeline-casing")
 

app/javascript/maplibre/styles/edit_styles.js

@@ -57,7 +57,7 @@ export function editStyles() {
   return [
     // removeSource(styles()['polygon-layer']), // gl-draw-polygon-fill-inactive
     styles()['polygon-layer-outline'],
-    styles()['line-layer-outline'], // line outline below line, because it's a wider line
+    // styles()['line-layer-outline'], // line outline below line, because it's a wider line
     // removeSource(styles()['line-layer']),
 
     // active polygon outline

app/javascript/maplibre/styles/styles.js

@@ -70,20 +70,20 @@ export function clearImageState() {
 // Reset labelFont to default when clearing state
 export function resetLabelFont() { labelFont = [defaultFont] }
 
-export async function loadImage (e) {
+export async function loadImage (id) {
   // Skip if already loading, loaded, or failed
-  if (imageState[e.id]) {
-    // console.log(`Skipped loading image '${e.id}'`, imageState[e.id])
+  if (imageState[id]) {
+    // console.log(`Skipped loading image '${id}'`, imageState[id])
     return
   }
 
-  const imageUrl = e.id
+  const imageUrl = id
 
   if (imageUrl.startsWith('http') || imageUrl.startsWith('/')) {
     try {
-      imageState[e.id] = 'loading'
+      imageState[id] = 'loading'
       // Synchronously register a transparent 1x1 placeholder before any await, so
-      // MapLibre's getImage re-check (right after the styleimagemissing event fires)
+      // MapLibre's getImage re-check (right after the missing-image resolver is invoked)
       // succeeds and skips the "Image could not be loaded" warning. The real image
       // is swapped in below once it has loaded.
       if (!map.hasImage(imageUrl)) {
@@ -94,14 +94,14 @@ export async function loadImage (e) {
         // replace the placeholder (remove + add, since dimensions differ)
         if (map.hasImage(imageUrl)) { map.removeImage(imageUrl) }
         map.addImage(imageUrl, response.data)
-        imageState[e.id] = 'loaded'
+        imageState[id] = 'loaded'
       } else {
         console.warn(imageUrl + ' not found')
       }
     } catch (error) {
       // Handle errors here
       console.error(`Failed to load image ${imageUrl}: ` + error)
-      imageState[e.id] = 'error'
+      imageState[id] = 'error'
     }
   }
 }

config/importmap.rb

@@ -1,4 +1,4 @@
-# Pin npm packages by running ./bin/importmap pin <npm module name>@<version> --from jspm|unpkg|jsdelivr --download
+# Pin npm packages by running ./bin/importmap pin <npm module name>@<version> --from jspm|unpkg|jsdelivr
 # https://github.com/rails/importmap-rails
 
 pin "application"
@@ -27,9 +27,9 @@
   under: "mapbox-gl-draw-paint-mode", preload: false
 
 # https://github.com/maplibre/maplibre-gl-js
-pin "maplibre-gl" # @5.24.0 — preloaded so the browser fetches during head parse
+pin "maplibre-gl" # @6.0.0 — preloaded so the browser fetches during head parse
 # https://github.com/maplibre/maplibre-gl-geocoder
-pin "maplibre-gl-geocoder", to: "maplibre-gl-geocoder.js", preload: false
+pin "@maplibre/maplibre-gl-geocoder", preload: false, to: "@maplibre--maplibre-gl-geocoder.js" # @1.9.4
 # https://github.com/GIScience/openrouteservice-js?tab=readme-ov-file
 pin "openrouteservice-js", preload: false # @0.4.1
 # https://github.com/maplibre/maplibre-gl-directions/tree/main

config/initializers/content_security_policy.rb

@@ -8,7 +8,7 @@
   config.content_security_policy do |policy|
     # policy.default_src :self, :https
     policy.font_src :self, :https, :data
-    policy.img_src :self, :https, :data
+    policy.img_src :self, :https, :data, :blob
     policy.object_src :none
     # TODO: It seems not possible yet to use Turbo and csp without :unsafe_inline, :unsafe_eval
     policy.script_src :self, :https, :blob, :unsafe_inline, :unsafe_eval

config/initializers/mime_types.rb

@@ -3,3 +3,12 @@
 Mime::Type.register("application/javascript", :mjs)
 
 Rack::Mime::MIME_TYPES[".mjs"] = "application/javascript"
+
+# Sprockets keeps its own mime type registry (separate from Rack's above) and only
+# recognizes .js by default, so .mjs assets (e.g. maplibre-gl's split-out worker chunk)
+# get served with no content type and browsers refuse to load them as modules.
+Rails.application.config.assets.configure do |env|
+  # register_mime_type replaces the whole entry rather than merging, so re-list
+  # .js alongside .mjs to avoid dropping it from Sprockets' internal mime_types map.
+  env.register_mime_type "application/javascript", extensions: [ ".js", ".mjs" ], charset: :unicode
+end