@superrouteca/smap-leaflet 1.1.5 → 1.1.6

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 1.1.6 — 2026-10-28
+
+- Plan editor: `smapPlanEditor()` lets a person edit a plan of routes in Leaflet — drag a stop's pin onto another stop
+  or onto a route's line, with the new times, distance and violations priced while dragging — with the ready-made
+  panel (routes, totals, violations, undo and redo, refine, insert positions, 14 languages) as a Leaflet control.
+  Every edit is a call of the Open Platform's plan editing; the new plan is reported through the editor's events.
+
 ## 1.1.5 — 2026-10-28
 
 - The version follows the shared 1.1.5 release; no change of its own.

package/README.md

@@ -146,6 +146,35 @@ clustering.
 
 `addTo()` takes `L.map`, a layer group, or the sMap map itself.
 
+## Plan editor
+
+`smapPlanEditor(options)` lets a person edit a plan of routes in Leaflet: the routes are drawn as Leaflet layers, a
+stop's pin is dragged (Leaflet's own marker dragging) onto another stop to put it before that stop, or onto a
+route's line to put it into that leg, and the ready-made panel (routes, totals, violations, undo / redo, refine,
+insert positions, in 14 languages) is a Leaflet control. Every edit is a call of the Open Platform's plan editing,
+made by the sMap plan editor; while a pin is dragged, the plan with the stop there is priced and shown in the panel.
+
+```js
+import { smapPlanEditor } from '@superrouteca/smap-leaflet';
+
+const plan = smapPlanEditor({
+  // Your server mints a short-lived token with POST /v1/plan/token; or { key: 'smk_…' } with plan editing on.
+  credentials: { token: () => fetch('/plan-token').then((r) => r.json()) },
+  plan: { region: 'NA', profile: 'car', vehicles, jobs, routes },
+  language: 'fr',
+  panel: { position: 'topright' },
+}).addTo(map);
+
+plan.editor.on('change', (e) => save(e.plan));   // the editor: insert, refine, undo, redo, lock, …
+plan.remove();                                   // off the map (add it again later)
+plan.destroy();                                  // for good: an editor the layer made is destroyed too
+```
+
+Options: every option of the sMap plan editor (`credentials`, `baseUrl`, `region`, `profile`, `snapshot`,
+`insertLimit`, …) or `editor` (one you made, never destroyed by the layer), plus `colors`, `preview` (default true),
+`language`, `labels`, `panel` (`false` for a panel of your own) and `css` (the panel's stylesheet is added to the page
+unless `false`). `features()` gives the features drawn. The editor itself is described in the sMap Web SDK's README.
+
 ## Example
 
 `examples/index.html` shows both ways. Serve the repository root (for example `npx serve .`) and open

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superrouteca/smap-leaflet",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "sMap for Leaflet: maps from Superroute's sMap service as a Leaflet layer (vector or raster), and Leaflet-style calls on an sMap map.",
   "license": "MIT",
   "author": "Goodneo Solutions",
@@ -58,7 +58,7 @@
     }
   },
   "dependencies": {
-    "@superrouteca/smap": "1.1.5"
+    "@superrouteca/smap": "1.1.6"
   },
   "devDependencies": {
     "@types/leaflet": "1.9.22",

package/src/compat.js

@@ -820,7 +820,7 @@ export function createLeafletCompat(smap) {
   const tileLayer = function (url, options) { return new TileLayer(url, options); };
   tileLayer.wms = function (url, options) { return new WmsLayer(url, options); };
   const ns = {
-    version: '1.1.5',
+    version: '1.1.6',
     map: map,
     marker: function (ll, o) { return new Marker(ll, o); },
     circleMarker: function (ll, o) { return new CircleMarker(ll, o); },

package/src/index.js

@@ -11,7 +11,7 @@ import { createEmbedded, hasWebGL2 } from './common/embed.js';
 const L = LeafletModule.default && LeafletModule.default.Layer ? LeafletModule.default : LeafletModule;
 const SDK = sMapModule.default && sMapModule.default.Map ? sMapModule.default : sMapModule;
 
-export const version = '1.1.5';
+export const version = '1.1.6';
 export { FLAVORS as styles, checkStyle, rasterPath, stylePath, SMapAccess, DEFAULT_BASE, OSM_ATTRIBUTION };
 
 /** Options that belong to Leaflet, not to the sMap map. */
@@ -299,6 +299,8 @@ export function smapBasemap(options) {
 }
 
 export { hasWebGL2 };
+export { SMapPlanEditor, SMapPlanPanel, smapPlanEditor } from './plan.js';
+import { SMapPlanEditor, smapPlanEditor } from './plan.js';
 
-const SMapLeaflet = { version, styles: FLAVORS, SMapLayer, smapLayer, SMapRasterLayer, smapRasterLayer, smapBasemap, SMapBadge, SMapAccess, hasWebGL2, rasterPath, checkStyle };
+const SMapLeaflet = { version, styles: FLAVORS, SMapLayer, smapLayer, SMapRasterLayer, smapRasterLayer, smapBasemap, SMapBadge, SMapAccess, hasWebGL2, rasterPath, checkStyle, SMapPlanEditor, smapPlanEditor };
 export default SMapLeaflet;

package/src/plan.js

@@ -0,0 +1,169 @@
+// @superrouteca/smap-leaflet — the plan editor in Leaflet: the plan's routes drawn as Leaflet layers, stops dragged
+// with Leaflet's own marker dragging onto another stop or a route's line, and the ready-made panel as a Leaflet
+// control. Every edit is a plan.* call of the Open Platform made by the sMap plan editor (@superrouteca/smap).
+import * as LeafletModule from 'leaflet';
+import * as sMapModule from '@superrouteca/smap';
+
+const L = LeafletModule.default && LeafletModule.default.Layer ? LeafletModule.default : LeafletModule;
+const SDK = sMapModule.default && sMapModule.default.Map ? sMapModule.default : sMapModule;
+
+/** Options that belong to the editor (the rest are the binding's). */
+const EDITOR_OPTIONS = ['credentials', 'baseUrl', 'fetch', 'app', 'region', 'profile', 'snapshot', 'geometry', 'insertLimit', 'objective'];
+
+function parts() {
+  if (!SDK.planEditorParts || !SDK.PlanEditor) { throw new Error('sMap: this @superrouteca/smap has no plan editor; update it'); }
+  return SDK.planEditorParts;
+}
+
+/** A corner as Leaflet names it ('top-right' and 'topright' both work). */
+function corner(position) { return String(position || 'topright').replace('-', ''); }
+
+function escapeHtml(s) { return String(s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]); }
+
+/** The ready-made plan panel as a Leaflet control. */
+export const SMapPlanPanel = L.Control.extend({
+  options: { position: 'topright' },
+  initialize: function (panel, options) { L.setOptions(this, options); this._panel = panel; },
+  onAdd: function () {
+    const el = this._panel.element;
+    // The map neither pans nor zooms from inside the panel.
+    L.DomEvent.disableClickPropagation(el);
+    L.DomEvent.disableScrollPropagation(el);
+    return el;
+  },
+  onRemove: function () {},
+});
+
+/**
+ * The plan editor as a Leaflet layer. Options: every PlanEditor option (credentials, baseUrl, fetch, app, plan,
+ * region, profile, snapshot, geometry, insertLimit, objective) or `editor` (one you made), plus `id` (default 'plan'),
+ * `colors`, `preview` (default true), `language`, `labels`, `panel` (true | false | { position, className, labels })
+ * and `css` (add the panel's stylesheet to the page; default true).
+ *
+ *   const plan = smapPlanEditor({ credentials: { token: getPlanToken }, plan }).addTo(map);
+ *   plan.editor.on('change', (e) => save(e.plan));
+ */
+export const SMapPlanEditor = L.Layer.extend({
+  initialize: function (options) {
+    options = options || {};
+    const P = parts();
+    this._o = options;
+    this._id = options.id || 'plan';
+    this._own = !options.editor;
+    if (options.editor) {
+      this.editor = options.editor;
+    } else {
+      const eo = {};
+      EDITOR_OPTIONS.forEach(function (k) { if (options[k] !== undefined) { eo[k] = options[k]; } });
+      this.editor = new SDK.PlanEditor(eo);
+    }
+    this.panel = null;
+    this._control = null;
+    this._group = L.layerGroup();
+    this._drag = P.planDrag(this.editor, { preview: options.preview !== false });
+    this._destroyed = false;
+    const self = this;
+    this._onChange = function () { if (self._map) { self._draw(); } };
+    this._onDestroy = function () { self._destroyed = true; self._own = false; self.remove(); };
+    this.editor.on('change', this._onChange);
+    this.editor.on('destroy', this._onDestroy);
+    if (this._own && options.plan) { this.editor.setPlan(options.plan).catch(function () {}); }
+  },
+
+  onAdd: function (map) {
+    const P = parts();
+    this._group.addTo(map);
+    this._draw();
+    const o = this._o;
+    if (o.panel !== false && !this._destroyed) {
+      const po = typeof o.panel === 'object' && o.panel ? o.panel : {};
+      const doc = map.getContainer().ownerDocument;
+      if (o.css !== false) { P.injectCss(doc); }
+      this.panel = P.createPanel(this.editor, {
+        language: o.language || (typeof navigator !== 'undefined' && navigator.language) || 'en',
+        labels: po.labels || o.labels, document: doc, colors: o.colors, className: po.className,
+      });
+      this._control = new SMapPlanPanel(this.panel, { position: corner(po.position) }).addTo(map);
+    }
+  },
+
+  onRemove: function (map) {
+    this._drag.cancel();
+    if (this._control) { this._control.remove(); this._control = null; }
+    if (this.panel) { this.panel.destroy(); this.panel = null; }
+    map.removeLayer(this._group);
+    this._group.clearLayers();
+  },
+
+  /** The features drawn: { legs, stops, unassigned, starts } as GeoJSON features. */
+  features: function () { return parts().planFeatures(this.editor, this._id, this._o.colors); },
+
+  /** Takes the layer and its panel off the map for good; an editor the layer made is destroyed with it. */
+  destroy: function () {
+    this.remove();
+    this.editor.off('change', this._onChange);
+    this.editor.off('destroy', this._onDestroy);
+    if (this._own) { this._own = false; this.editor.destroy(); }
+    return this;
+  },
+
+  _draw: function () {
+    const map = this._map;
+    if (!map) { return; }
+    const f = this.features();
+    const group = this._group;
+    group.clearLayers();
+    const ll = (c) => [c[1], c[0]];
+    f.legs.forEach(function (x) {
+      group.addLayer(L.polyline(x.geometry.coordinates.map(ll), { color: x.properties.color, weight: 4, opacity: 0.9, interactive: false }));
+    });
+    f.starts.forEach(function (x) {
+      group.addLayer(L.circleMarker(ll(x.geometry.coordinates), { radius: 7, color: '#ffffff', weight: 2, fillColor: x.properties.color, fillOpacity: 1, interactive: false }));
+    });
+    const self = this;
+    const pin = function (x, html, size) {
+      const m = L.marker(ll(x.geometry.coordinates), {
+        draggable: true, keyboard: false, autoPan: true,
+        icon: L.divIcon({ className: 'smap-plan-pin', html: html, iconSize: [size, size], iconAnchor: [size / 2, size / 2] }),
+      });
+      m.feature = x;
+      self._bindDrag(m, f);
+      group.addLayer(m);
+    };
+    f.unassigned.forEach(function (x) {
+      pin(x, '<span style="display:block;width:14px;height:14px;border-radius:50%;background:#9ca3af;border:2px solid #fff;box-shadow:0 0 0 1px rgba(15,23,42,.3)"></span>', 18);
+    });
+    f.stops.forEach(function (x) {
+      const p = x.properties;
+      pin(x, '<span style="display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;' +
+        'background:' + escapeHtml(p.color) + ';border:2px solid ' + escapeHtml(p.border) + ';color:#fff;' +
+        'font:600 11px/1 -apple-system,BlinkMacSystemFont,\'Segoe UI\',Roboto,Arial,sans-serif">' + escapeHtml(p.label) + '</span>', 24);
+    });
+  },
+
+  // A pin dragged with Leaflet's marker dragging; the target is the stop or the line under the pin.
+  _bindDrag: function (marker, features) {
+    const self = this;
+    const id = marker.feature.properties.id;
+    const hitsAt = function (latlng) {
+      const map = self._map;
+      const point = map.latLngToContainerPoint(latlng);
+      const project = function (c) { return map.latLngToContainerPoint([c[1], c[0]]); };
+      return { point: point, hits: parts().featuresAt(features, project, point) };
+    };
+    marker.on('dragstart', function () { self._drag.start(id, self._map.latLngToContainerPoint(marker.getLatLng())); });
+    marker.on('drag', function (e) {
+      const at = hitsAt(e.latlng || marker.getLatLng());
+      self._drag.move(at.hits, at.point);
+    });
+    marker.on('dragend', function () {
+      const at = hitsAt(marker.getLatLng());
+      self._drag.move(at.hits, at.point);
+      // The pin goes back to its stop unless the drop changed the plan (which draws it anew).
+      self._drag.end(at.hits).then(function (done) { if (!done && self._map) { self._draw(); } });
+    });
+  },
+});
+
+/** The plan editor as a Leaflet layer (see SMapPlanEditor). */
+export function smapPlanEditor(options) { return new SMapPlanEditor(options); }

package/types/index.d.ts

@@ -1,6 +1,6 @@
 // Types of @superrouteca/smap-leaflet.
 import * as L from 'leaflet';
-import type { Map as SMapMap, MapOptions as SMapMapOptions, StyleFlavor } from '@superrouteca/smap';
+import type { Map as SMapMap, MapOptions as SMapMapOptions, StyleFlavor, PlanEditor, PlanEditorOptions, PlanFeatures, PlanPanel, PlanTextKey } from '@superrouteca/smap';
 import type SMapClient from '@superrouteca/smap/client';
 
 export type { StyleFlavor };
@@ -135,6 +135,46 @@ export declare const OSM_ATTRIBUTION: string;
 /** The sMap map calls an SMapLayer forwards. */
 export declare const FORWARDED: string[];
 
+
+// ------------------------------------------------------------------ plan editor
+
+/** The plan editor's options in Leaflet: the editor's (or an editor of your own) and how it is shown. */
+export interface SMapPlanEditorOptions extends Partial<Omit<PlanEditorOptions, 'credentials'>> {
+  /** Required unless `editor` is given. */
+  credentials?: PlanEditorOptions['credentials'];
+  /** An editor you made; the layer binds it and never destroys it. */
+  editor?: PlanEditor;
+  /** Marks the features drawn (`smap_plan`); default 'plan'. */
+  id?: string;
+  /** Route colours, one per vehicle in the plan's order (repeated). */
+  colors?: string[];
+  /** Price the drop target while a pin is dragged (default true). */
+  preview?: boolean;
+  /** The panel's language (default the browser's); any BCP-47 tag, English when none of the 14 fits. */
+  language?: string;
+  labels?: Partial<Record<PlanTextKey, string>>;
+  /** The ready-made panel as a Leaflet control (default true, top right). */
+  panel?: boolean | { position?: L.ControlPosition | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'; className?: string; labels?: Partial<Record<PlanTextKey, string>> };
+  /** Add the panel's stylesheet to the page (default true). */
+  css?: boolean;
+}
+
+/** The plan editor as a Leaflet layer: routes as Leaflet layers, stops dragged with Leaflet's marker dragging. */
+export declare class SMapPlanEditor extends L.Layer {
+  constructor(options: SMapPlanEditorOptions);
+  readonly editor: PlanEditor;
+  /** The ready-made panel while the layer is on a map (null with `panel: false`). */
+  readonly panel: PlanPanel | null;
+  features(): PlanFeatures;
+  /** Off the map for good; an editor the layer made is destroyed with it. */
+  destroy(): this;
+}
+/** The ready-made plan panel as a Leaflet control. */
+export declare class SMapPlanPanel extends L.Control {
+  constructor(panel: PlanPanel, options?: L.ControlOptions);
+}
+export declare function smapPlanEditor(options: SMapPlanEditorOptions): SMapPlanEditor;
+
 declare const SMapLeaflet: {
   version: string;
   styles: StyleFlavor[];
@@ -148,5 +188,7 @@ declare const SMapLeaflet: {
   hasWebGL2: typeof hasWebGL2;
   rasterPath: typeof rasterPath;
   checkStyle: typeof checkStyle;
+  SMapPlanEditor: typeof SMapPlanEditor;
+  smapPlanEditor: typeof smapPlanEditor;
 };
 export default SMapLeaflet;