add a qr code to share map urls

Author: digitaltom

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file.
 
+## 2026-10
+
+* Share map links with QR code
+
 ## 2026-09
 
 * Option to organize geojson features into multiple layers, drag&drop features between layers

app/assets/stylesheets/application.css

@@ -79,6 +79,12 @@ html {
   background-color: var(--color-dark-moss-green);
 }
 
+/* the body background must cover the viewport, else the html background shows below short pages
+   and below the map while it fades in */
+body {
+  min-height: 100dvh;
+}
+
 /* View transition */
 ::view-transition-group(root) {
   animation-duration: 0.5s;

app/assets/stylesheets/modals.css

@@ -763,7 +763,7 @@ body.map-mode-rw .ro-only {
 
   /* Larger touch targets on mobile */
   .copy-link {
-    min-width: 2rem;
+    min-width: 1.75rem;
     min-height: 2rem;
     display: inline-flex;
     align-items: center;
@@ -884,3 +884,36 @@ body.map-mode-rw .ro-only {
   height: 100%;
   object-fit: contain;
 }
+
+.copy-link.qr-link i {
+  font-size: 1.2rem;
+}
+
+#qr-viewer {
+  max-width: 100%;
+  max-height: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  text-align: center;
+}
+
+#qr-viewer::backdrop {
+  background: rgb(0 0 0 / 85%);
+}
+
+#qr-viewer svg {
+  display: block;
+  width: min(90vw, 80vh);
+  height: auto;
+}
+
+#qr-viewer .qr-caption {
+  margin: 1rem 0 0;
+  color: #fff;
+  font-size: 1.5rem;
+}
+
+#qr-viewer .qr-label {
+  color: rgb(255 255 255 / 75%);
+}

app/javascript/controllers/map/share_controller.js

@@ -5,6 +5,8 @@ import { copyToClipboard } from 'helpers/clipboard'
 import { mapProperties } from 'maplibre/map'
 
 export default class extends Controller {
+  static targets = ['qrViewer', 'qrCode', 'qrCaption', 'qrLabel']
+
   connect () {
     // initializeMaplibreProperties is not yet called yet when rendering _share.haml
     let props = mapProperties || window.gon.map_properties
@@ -74,9 +76,71 @@ export default class extends Controller {
     }).catch((error) => console.log('Error sharing', error))
   }
 
+  async showQr (e) {
+    e.preventDefault()
+    const { url: path, label } = e.currentTarget.dataset
+    const url = window.location.origin + path
+    const { default: qrcode } = await import('qrcode-generator')
+    // level H restores up to 30% of the code, the logo in the center covers less.
+    // Version 7 (45 modules) makes the fixed size corner eyes smaller relative to the code,
+    // longer urls fall back to the smallest version that fits
+    const make = (version) => {
+      const qr = qrcode(version, 'H')
+      qr.addData(url)
+      qr.make()
+      return qr
+    }
+    let qr
+    try { qr = make(7) } catch { qr = make(0) }
+    this.qrCodeTarget.innerHTML = qrSvg(qr)
+    this.qrCaptionTarget.textContent = (mapProperties || window.gon.map_properties).name || ''
+    this.qrLabelTarget.textContent = label
+    this.qrViewerTarget.showModal()
+  }
+
+  closeQr () {
+    this.qrViewerTarget.close()
+  }
+
+  // the share modal closes on esc as well, keep it open below the qr code
+  stopEsc (e) {
+    if (this.qrViewerTarget.open) { e.stopPropagation() }
+  }
+
   copyEmbedCode (e) {
     e.preventDefault()
     const embedCode = this.element.querySelector('.embed-code').value.trim()
     copyToClipboard(embedCode, window.__('Embed code copied'), e.currentTarget)
   }
 }
+
+// Mapforge style: round dots, rounded finder eyes in the logo colors, logo in the center.
+// The dots touch, a gap between them breaks decoders like jsQR at some render sizes
+function qrSvg (qr) {
+  const n = qr.getModuleCount()
+  const quiet = 3
+  const logo = Math.round(n * 0.3)
+  const logoStart = (n - logo) / 2
+  const isEye = (r, c) => (r < 7 || r >= n - 7) && (c < 7 || c >= n - 7) && !(r >= n - 7 && c >= n - 7)
+  const isLogo = (r, c) => [r, c].every((v) => v >= logoStart - 0.5 && v < logoStart + logo + 0.5)
+
+  let dots = ''
+  for (let r = 0; r < n; r++) {
+    for (let c = 0; c < n; c++) {
+      if (qr.isDark(r, c) && !isEye(r, c) && !isLogo(r, c)) {
+        dots += `<circle cx="${c + 0.5}" cy="${r + 0.5}" r="0.52"/>`
+      }
+    }
+  }
+  const eyes = [[0, 0], [n - 7, 0], [0, n - 7]].map(([x, y]) =>
+    `<rect x="${x + 0.5}" y="${y + 0.5}" width="6" height="6" rx="2" fill="none" stroke="#4D7A9C"/>` +
+    `<rect x="${x + 2}" y="${y + 2}" width="3" height="3" rx="1" fill="#B85E1E"/>`
+  ).join('')
+  const center = n / 2
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${-quiet} ${-quiet} ${n + 2 * quiet} ${n + 2 * quiet}">` +
+    `<rect x="${-quiet}" y="${-quiet}" width="${n + 2 * quiet}" height="${n + 2 * quiet}" rx="3" fill="#fff"/>` +
+    `<g fill="#354A51">${dots}</g>${eyes}` +
+    `<circle cx="${center}" cy="${center}" r="${logo / 2 + 0.5}" fill="#fff"/>` +
+    `<image href="/logo/sticker/mapforge-sticker-256.png" x="${logoStart}" y="${logoStart}" width="${logo}" height="${logo}"/>` +
+    '</svg>'
+}

app/views/maps/modals/_share.haml

@@ -4,14 +4,22 @@
     .map-modal-header
       %h3.mapforge-font= _("Share Map")
 
+    %dialog#qr-viewer{ 'aria-label': _("QR code"),
+      data: { "map--share-target": "qrViewer",
+        action: "keydown.esc@document:capture->map--share#stopEsc click->map--share#closeQr" } }
+      %button.modal-close-button{ type: "button" } ×
+      .qr-code{ data: { "map--share-target": "qrCode" } }
+      %p.qr-caption.mapforge-font{ data: { "map--share-target": "qrCaption" } }
+      %p.qr-label{ data: { "map--share-target": "qrLabel" } }
+
     .map-modal-content.inline-scroll
 
       .feature-section-card.pt-3
         - if @map_mode == 'rw' || map_owner?
           - if map_owner? && !@map.playground?
             .row.mb-3
               .col-12
-                .d-flex.gap-2.align-items-center
+                .d-flex.gap-0.gap-sm-2.align-items-center
                   %button#share-ownership-link.form-button.btn.btn-blue.flex-grow-1{ type: "button" }
                     =link_to(map_path(@map.private_id, join: true), data: { turbo: false, action: "click->map--share#nativeShare" }) do
                       - if @map.owners.any?
@@ -20,36 +28,45 @@
                             - if owner.image
                               = image_tag avatar_url(owner.image, 24), class: 'map-avatar', title: owner.name || owner.email, data: { "toggle": 'tooltip', 'bs-placement': 'top' }, referrerpolicy: 'no-referrer'
                       %i.bi.bi-shield-fill-check.me-2
-                      = _("Share ownership link")
+                      %span.d-none.d-sm-inline= _("Share ownership link")
+                      %span.d-sm-none= _("Ownership link")
                       %span.permission-badge.badge-owner.ms-2= _("Owner")
                   %a.link.text-muted.copy-link{ data: { action: "click->map--share#copyOwnershipLink", "toggle": 'tooltip', 'bs-placement': 'top' }, title: _("Copy link to clipboard") }
-                    %i.bi.bi-copy.me-1
+                    %i.bi.bi-copy.me-sm-1
+                  %a.link.text-muted.copy-link.qr-link{ data: { action: "click->map--share#showQr", url: map_path(@map.private_id, join: true), label: _("Ownership link"), "toggle": 'tooltip', 'bs-placement': 'top' }, title: _("Show QR code") }
+                    %i.bi.bi-qr-code
                 %small.text-muted.mt-2.flex-center.center
                   = _("Map owners have this map listed in their account with full permissions.")
 
           .row.mb-3
             .col-12
-              .d-flex.gap-2.align-items-center
+              .d-flex.gap-0.gap-sm-2.align-items-center
                 %button#share-edit-link.form-button.btn.btn-blue.flex-grow-1{ type: "button" }
                   =link_to(map_path(@map.private_id), data: { turbo: false, action: "click->map--share#nativeShare" }) do
                     %i.bi.bi-pencil-square.me-2
-                    = _("Share edit link")
+                    %span.d-none.d-sm-inline= _("Share edit link")
+                    %span.d-sm-none= _("Edit link")
                     %span.permission-badge.badge-edit.ms-2= _("Can Edit")
                 %a.link.text-muted.copy-link{ data: { action: "click->map--share#copyEditLink", "toggle": 'tooltip', 'bs-placement': 'top' }, title: _("Copy link to clipboard") }
-                  %i.bi.bi-copy.me-1
+                  %i.bi.bi-copy.me-sm-1
+                %a.link.text-muted.copy-link.qr-link{ data: { action: "click->map--share#showQr", url: map_path(@map.private_id), label: _("Edit link"), "toggle": 'tooltip', 'bs-placement': 'top' }, title: _("Show QR code") }
+                  %i.bi.bi-qr-code
               %small.text-muted.mt-2.flex-center.center
                 = _("With this link, users can modify the map, add layers, and make changes.")
 
         .row.mb-3
           .col-12
-            .d-flex.gap-2.align-items-center
+            .d-flex.gap-0.gap-sm-2.align-items-center
               %button#share-view-link.form-button.btn.btn-blue.flex-grow-1{ type: "button" }
                 =link_to(map_path(id: @map.public_id), data: { turbo: false, action: "click->map--share#nativeShare" }) do
                   %i.bi.bi-eye-fill.me-2
-                  = _("Share view link")
+                  %span.d-none.d-sm-inline= _("Share view link")
+                  %span.d-sm-none= _("View link")
                   %span.permission-badge.badge-view.ms-2= _("Read Only")
               %a.link.text-muted.copy-link{ data: { action: "click->map--share#copyViewLink", "toggle": 'tooltip', 'bs-placement': 'top' }, title: _("Copy link to clipboard") }
-                %i.bi.bi-copy.me-1
+                %i.bi.bi-copy.me-sm-1
+              %a.link.text-muted.copy-link.qr-link{ data: { action: "click->map--share#showQr", url: map_path(id: @map.public_id), label: _("View link"), "toggle": 'tooltip', 'bs-placement': 'top' }, title: _("Show QR code") }
+                %i.bi.bi-qr-code
             %small.text-muted.mt-2.flex-center.center
               = _("Users can explore the map but cannot modify it.")
 

config/importmap.rb

@@ -48,6 +48,8 @@
 pin "marked", preload: false # @18.0.14
 # https://github.com/cure53/DOMPurify, strips scripts and event handlers from rendered markdown
 pin "dompurify", preload: false # @3.4.16
+# https://github.com/kazuhikoarase/qrcode-generator, from https://esm.sh/qrcode-generator@2.0.4?bundle
+pin "qrcode-generator", preload: false # @2.0.4
 
 # https://github.com/mapbox/mapbox-gl-draw
 # Unminified + locally patched, see the header of the vendored file