@tileflow/dom 0.1.0-alpha.1 → 0.1.0-alpha.3

package/README.md

@@ -5,8 +5,8 @@ the map, loads its manifest and style, keeps its theme, colours, camera, annotat
 interactions current, and takes everything down again. It draws nothing of its own around the map:
 marker, popup and tooltip views, loading and error states belong to your page.
 
-Use it for plain pages and web components. The React, Vue and Svelte packages are the easier way in
-those frameworks.
+Use it for plain pages and web components. The React, Vue and Svelte packages run on it and are the
+easier way in those frameworks.
 
 > Related packages and guides: [documentation index](https://raw.githubusercontent.com/tileflow/tileflow-sdk/main/llms.txt).
 
@@ -104,6 +104,46 @@ settles with `null` once the image has loaded.
 
 See [REFERENCE.md](REFERENCE.md) for every option and controller method.
 
+## Extend the map
+
+The map is a real MapLibre map: `ready` and `onLoad` give it, and `getMap()` returns it while it
+exists. Add your own layers, sources, controls, events and MapLibre libraries to it.
+
+<!-- docs:check -->
+
+```ts
+import {createTileflowMap} from '@tileflow/dom';
+
+const map = createTileflowMap(document.querySelector<HTMLElement>('#map')!, {
+  source: {map: 'madrid'},
+  onLoad(mapLibreMap) {
+    mapLibreMap.on('style.load', () => addRoute(mapLibreMap));
+    addRoute(mapLibreMap);
+  },
+});
+
+function addRoute(mapLibreMap: NonNullable<ReturnType<typeof map.getMap>>) {
+  if (mapLibreMap.getSource('route')) return;
+  mapLibreMap.addSource('route', {
+    type: 'geojson',
+    data: {
+      type: 'LineString',
+      coordinates: [
+        [-3.7038, 40.4168],
+        [-3.6921, 40.4138],
+      ],
+    },
+  });
+  mapLibreMap.addLayer({id: 'route', type: 'line', source: 'route', paint: {'line-width': 4}});
+}
+```
+
+Tileflow owns the style it applied, its protocols, its hosted requests and session, and the
+controls it adds. A theme change may replace the style while keeping the camera, so add your own
+layers and sources again on `style.load`, as above, or pass them as `dataSources` and `dataOverlays`,
+which the map puts back after every theme change. Keep the map's lifetime with the controller:
+`destroy()` takes everything down, and `getMap().remove()` stops the controller too.
+
 ## Next steps
 
 - [Show a popup on click](https://tileflow.dev/docs/examples/show-a-popup-on-click)

package/dist/index.js

@@ -1,7 +1,18 @@
 // src/map.ts
 import {
-  attachTileflowAtmosphere,
   attachTileflowBranding,
+  createTileflowAppearanceBinding,
+  createTileflowContourRequestScope,
+  createTileflowNavigationControlBinding,
+  getTileflowSystemColorScheme,
+  reportTileflowMapError,
+  resolveTileflowCameraFit,
+  subscribeTileflowSystemColorScheme,
+  tileflowMaxPitch
+} from "@tileflow/core/browser";
+import { normalizeTileflowCaptureId } from "@tileflow/core/capture";
+import {
+  attachTileflowAtmosphere,
   attachTileflowFairUseNotice,
   attachTileflowHorizonQueries,
   attachTileflowLabelPlacement,
@@ -9,26 +20,16 @@ import {
   attachTileflowMapLifecycle,
   attachTileflowNauticalLights,
   attachTileflowNotices,
-  createTileflowAppearanceBinding,
-  createTileflowContourRequestScope,
-  createTileflowNavigationControlBinding,
   createTileflowSessionStarter,
   createTileflowThemeController,
   createTileflowTransformRequest,
-  getTileflowSystemColorScheme,
   loadTileflowRuntimeStyle,
   loadTileflowStyleFonts,
   registerTileflowContourProtocol,
-  registerTileflowPathGroundProtocol,
   registerTileflowPmtilesProtocol,
   registerTileflowWorldRequestBridge,
-  reportTileflowMapError,
-  resolveTileflowCameraFit,
-  subscribeTileflowSystemColorScheme,
-  tileflowCanvasContextAttributes,
-  tileflowMaxPitch
-} from "@tileflow/core/browser";
-import { normalizeTileflowCaptureId } from "@tileflow/core/capture";
+  tileflowCanvasContextAttributes
+} from "@tileflow/core/internal";
 import {
   createTileflowSessionController,
   defaultTileflowManifestUrl,
@@ -1375,7 +1376,6 @@ function createTileflowMap(container, initialOptions, createOptions = {}) {
     const fairUseNotice = attachTileflowFairUseNotice(container);
     scope.add(() => fairUseNotice.dispose());
     registerTileflowContourProtocol({ addProtocol: maplibregl.addProtocol });
-    registerTileflowPathGroundProtocol({ addProtocol: maplibregl.addProtocol });
     registerTileflowPmtilesProtocol({ addProtocol: maplibregl.addProtocol });
     const worldRequestBridge = registerTileflowWorldRequestBridge({
       addProtocol: maplibregl.addProtocol,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tileflow/dom",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.3",
   "license": "Apache-2.0",
   "description": "Mount a Tileflow map in any DOM element, without a framework.",
   "type": "module",
@@ -40,8 +40,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@tileflow/core": ">=0.1.0-alpha.51 <0.1.0-beta.0",
-    "@tileflow/interactions": ">=0.1.0-alpha.10 <0.1.0-beta.0"
+    "@tileflow/core": ">=0.1.0-alpha.53 <0.1.0-beta.0",
+    "@tileflow/interactions": ">=0.1.0-alpha.11 <0.1.0-beta.0"
   },
   "peerDependencies": {
     "maplibre-gl": ">=6.4.1 <7"