Merge pull request #48 from Stassi/feature/mobile-tutorial-ts

feature/mobile-tutorial-ts
Stassi · Oct 7, 2024 · 8bc2da4 · 8bc2da4
2 parents 1d22621 + 1f17ef6
commit 8bc2da4
Show file tree

Hide file tree

Showing 11 changed files with 91 additions and 88 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stassi/leaf",
-  "version": "0.0.47",
+  "version": "0.0.48",
   "description": "Leaflet adapter.",
   "keywords": [
     "cartography",

diff --git a/public/leaflet-adapter/circle.js b/public/leaflet-adapter/circle.js
diff --git a/public/leaflet-adapter/map/world-locator.js b/public/leaflet-adapter/map/world-locator.js
diff --git a/public/tutorial/mobile/mobile.html b/public/tutorial/mobile/mobile.html
@@ -7,7 +7,7 @@
   <title>Leaflet on Mobile</title>
   <link href="../../leaflet/leaflet.css" rel="stylesheet"/>
   <link href="style/fullscreen.css" rel="stylesheet"/>
-  <script src="script/mobile.js" type="module"></script>
+  <script src="dist/mobile.js" type="module"></script>
 </head>
 
 <body>

diff --git a/public/tutorial/mobile/script/mobile.js b/public/tutorial/mobile/script/mobile.js
diff --git a/rollup.config.ts b/rollup.config.ts
@@ -57,6 +57,19 @@ const rollupConfig: RollupOptions[] = [
     },
     plugins: [typescript(), terser()],
   },
+  {
+    external: ['@stassi/leaf'],
+    input: 'src/tutorial/mobile/mobile.ts',
+    output: {
+      file: 'public/tutorial/mobile/dist/mobile.js',
+      format: 'esm',
+      paths: {
+        '@stassi/leaf': '../../../leaf/leaf.js',
+      },
+      sourcemap: true,
+    },
+    plugins: [typescript(), terser()],
+  },
 ]
 
 // eslint-disable-next-line import/no-default-export -- default export required by Rollup.js

diff --git a/src/index.ts b/src/index.ts
@@ -1,6 +1,7 @@
 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'

diff --git a/src/leaf/map/world-locator.ts b/src/leaf/map/world-locator.ts
@@ -0,0 +1,37 @@
+import {
+  type ErrorEventHandlerFn,
+  type LocateOptions,
+  type LocationEventHandlerFn,
+  type Map,
+} from 'leaflet'
+
+import { map } from './map.js'
+
+export type WorldLocatorMapOptions = {
+  id: string | HTMLElement
+  onLocate: LocationEventHandlerFn
+  onLocateError: ErrorEventHandlerFn
+} & Omit<LocateOptions, 'maxZoom' | 'setView'> &
+  Partial<{
+    setViewOnLocate: boolean
+    zoomMaxOnLocate: number
+  }>
+
+export function worldLocator({
+  id,
+  onLocate,
+  onLocateError,
+  setViewOnLocate: setView,
+  zoomMaxOnLocate: maxZoom,
+  ...props
+}: WorldLocatorMapOptions): Map {
+  return map({ id })
+    .fitWorld()
+    .locate({
+      maxZoom,
+      setView,
+      ...props,
+    })
+    .on('locationerror', onLocateError)
+    .on('locationfound', onLocate)
+}
diff --git a/src/tutorial/mobile/mobile.ts b/src/tutorial/mobile/mobile.ts
@@ -0,0 +1,34 @@
+import { type ErrorEvent, type LocationEvent, type Map } from 'leaflet'
+
+import { circle, marker, tileLayerOsm, worldLocator } from '@stassi/leaf'
+
+const map: Map = worldLocator({
+  id: 'map',
+  onLocate: ({
+    accuracy: radius,
+    latlng: latitudeLongitude,
+  }: LocationEvent) => {
+    circle({
+      latitudeLongitude,
+      map,
+      radius,
+    })
+
+    marker({
+      latitudeLongitude,
+      map,
+      popupContent: `You are within ${radius.toString()} meters from this point.`,
+    }).openPopup()
+  },
+  onLocateError: ({ message }: ErrorEvent) => {
+    // eslint-disable-next-line no-alert -- required by tutorial
+    alert(message)
+  },
+  setViewOnLocate: true,
+  zoomMaxOnLocate: 16,
+})
+
+tileLayerOsm({
+  map,
+  zoomMax: 19,
+})
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,8 +1,6 @@
 {
   "compilerOptions": {
-    "allowJs": true,
     "baseUrl": ".",
-    "checkJs": true,
     "esModuleInterop": true,
     "lib": ["DOM", "ESNext"],
     "module": "ESNext",
@@ -13,11 +11,7 @@
     "strict": true,
     "target": "ESNext"
   },
-  "exclude": ["node_modules", "public/tutorial/quick-start/dist/**/*.js"],
+  "exclude": ["node_modules"],
   "extends": "@vercel/style-guide/typescript/node20",
-  "include": [
-    "public/tutorial/quick-start/**/*.js",
-    "rollup.config.ts",
-    "src/**/*.ts"
-  ]
+  "include": ["rollup.config.ts", "src/**/*.ts"]
 }