Merge pull request #49 from Stassi/feature/merge-world-locator-into-map

feature/merge-world-locator-into-map

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stassi/leaf",
-  "version": "0.0.48",
+  "version": "0.0.49",
   "description": "Leaflet adapter.",
   "keywords": [
     "cartography",

src/index.ts

@@ -1,7 +1,6 @@
 export * from './leaf/circle.js'
 export * from './leaf/coordinate-reference-system/epsg-3857.js'
 export * from './leaf/map/map.js'
-export * from './leaf/map/world-locator.js'
 export * from './leaf/marker.js'
 export * from './leaf/polygon.js'
 export * from './leaf/popup.js'

src/leaf/map/map.ts

@@ -1,8 +1,12 @@
 import {
   map as leafletMap,
   type CRS,
+  type ErrorEventHandlerFn,
+  type FitBoundsOptions,
   type Layer,
   type LeafletMouseEventHandlerFn,
+  type LocateOptions,
+  type LocationEventHandlerFn,
   type Map,
   type MapOptions as LeafletMapOptions,
 } from 'leaflet'
@@ -15,7 +19,12 @@ export type MapOptions = LeafletMapOptions & {
     activeLayers: Layer[]
     crs: CRS
     dragging: boolean
+    fitWorld: boolean
+    fitWorldOptions: FitBoundsOptions
+    locateOptions: LocateOptions
     onClick: LeafletMouseEventHandlerFn
+    onLocate: LocationEventHandlerFn
+    onLocateError: ErrorEventHandlerFn
     zoomDelta: number
     zoomMax: number
     zoomMin: number
@@ -26,24 +35,39 @@ export function map({
   activeLayers: layers,
   crs = epsg3857,
   dragging = true,
+  fitWorld,
+  fitWorldOptions = fitWorld ? {} : undefined,
   id: element,
+  locateOptions,
   onClick,
+  onLocate,
+  onLocateError,
   zoomDelta = 1,
   zoomMax: maxZoom,
   zoomMin: minZoom,
   zoomSnap = 1,
   ...props
 }: MapOptions): Map {
-  const created = leafletMap(element, {
-    crs,
-    dragging,
-    layers,
-    maxZoom,
-    minZoom,
-    zoomDelta,
-    zoomSnap,
-    ...props,
-  })
+  const created: Map = leafletMap(element, {
+      crs,
+      dragging,
+      layers,
+      maxZoom,
+      minZoom,
+      zoomDelta,
+      zoomSnap,
+      ...props,
+    }),
+    clickHandled: Map = onClick ? created.on('click', onClick) : created,
+    locationErrorHandled: Map = onLocateError
+      ? clickHandled.on('locationerror', onLocateError)
+      : clickHandled,
+    locationFoundHandled: Map = onLocate
+      ? locationErrorHandled.on('locationfound', onLocate)
+      : locationErrorHandled,
+    located: Map = locateOptions
+      ? locationFoundHandled.locate(locateOptions)
+      : locationFoundHandled
 
-  return onClick ? created.on('click', onClick) : created
+  return fitWorldOptions ? located.fitWorld(fitWorldOptions) : located
 }

src/tutorial/mobile/mobile.ts

@@ -1,13 +1,18 @@
 import { type ErrorEvent, type LocationEvent, type Map } from 'leaflet'
 
-import { circle, marker, tileLayerOsm, worldLocator } from '@stassi/leaf'
+import { circle, map as leafletMap, marker, tileLayerOsm } from '@stassi/leaf'
 
-const map: Map = worldLocator({
+const map: Map = leafletMap({
+  fitWorld: true,
   id: 'map',
+  locateOptions: {
+    maxZoom: 16,
+    setView: true,
+  },
   onLocate: ({
     accuracy: radius,
     latlng: latitudeLongitude,
-  }: LocationEvent) => {
+  }: LocationEvent): void => {
     circle({
       latitudeLongitude,
       map,
@@ -20,12 +25,10 @@ const map: Map = worldLocator({
       popupContent: `You are within ${radius.toString()} meters from this point.`,
     }).openPopup()
   },
-  onLocateError: ({ message }: ErrorEvent) => {
+  onLocateError: ({ message }: ErrorEvent): void => {
     // eslint-disable-next-line no-alert -- required by tutorial
     alert(message)
   },
-  setViewOnLocate: true,
-  zoomMaxOnLocate: 16,
 })
 
 tileLayerOsm({