diff --git a/package-lock.json b/package-lock.json index 3fa1264..903834f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@stassi/leaf", - "version": "0.0.47", + "version": "0.0.48", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@stassi/leaf", - "version": "0.0.47", + "version": "0.0.48", "cpu": [ "arm64", "x64" diff --git a/package.json b/package.json index bdcac79..6c12eb3 100644 --- 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 deleted file mode 100644 index 4ee0da2..0000000 --- a/public/leaflet-adapter/circle.js +++ /dev/null @@ -1,23 +0,0 @@ -import { circle as leafletCircle } from '../leaflet/leaflet-src.esm.js' - -export function circle({ - color = '#3388ff', - fillColor = '#3388ff', - fillOpacity = 0.2, - latitudeLongitude, - map, - popupContent, - radius, -}) { - const created = leafletCircle(latitudeLongitude, { - color, - fillColor, - fillOpacity, - radius, - }), - conditionallyRendered = map ? created.addTo(map) : created - - return popupContent - ? conditionallyRendered.bindPopup(popupContent) - : conditionallyRendered -} diff --git a/public/leaflet-adapter/map/world-locator.js b/public/leaflet-adapter/map/world-locator.js deleted file mode 100644 index 16ee1f8..0000000 --- a/public/leaflet-adapter/map/world-locator.js +++ /dev/null @@ -1,18 +0,0 @@ -import { map } from '../../leaflet/leaflet-src.esm.js' - -export function worldLocator({ - id, - onLocate, - onLocateError, - setViewOnLocate: setView, - zoomMaxOnLocate: maxZoom, -}) { - return map(id) - .fitWorld() - .locate({ - maxZoom, - setView, - }) - .on('locationerror', onLocateError) - .on('locationfound', onLocate) -} diff --git a/public/tutorial/mobile/mobile.html b/public/tutorial/mobile/mobile.html index 94a0f09..4642a20 100644 --- a/public/tutorial/mobile/mobile.html +++ b/public/tutorial/mobile/mobile.html @@ -7,7 +7,7 @@ Leaflet on Mobile - + diff --git a/public/tutorial/mobile/script/mobile.js b/public/tutorial/mobile/script/mobile.js deleted file mode 100644 index e342415..0000000 --- a/public/tutorial/mobile/script/mobile.js +++ /dev/null @@ -1,35 +0,0 @@ -import { circle } from '../../../leaflet-adapter/circle.js' -import { marker } from '../../../leaflet-adapter/marker.js' -import { tileLayer } from '../../../leaflet-adapter/tile-layer/tile-layer.js' -import { worldLocator } from '../../../leaflet-adapter/map/world-locator.js' -import { attributionOsm, urlTemplateOsm } from '../../../script/base-layers.js' - -const map = worldLocator({ - id: 'map', - onLocate: ({ accuracy: radius, latlng: latitudeLongitude }) => { - circle({ - latitudeLongitude, - map, - radius, - }) - - marker({ - latitudeLongitude, - map, - popupContent: `You are within ${radius} meters from this point.`, - }).openPopup() - }, - onLocateError: ({ message }) => { - // eslint-disable-next-line no-alert -- required by tutorial - alert(message) - }, - setViewOnLocate: true, - zoomMaxOnLocate: 16, -}) - -tileLayer({ - attribution: attributionOsm, - map, - urlTemplate: urlTemplateOsm, - zoomMax: 19, -}) diff --git a/rollup.config.ts b/rollup.config.ts index e4aa5b6..5301c5b 100644 --- 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 index 24ee016..ce65e50 100644 --- 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 new file mode 100644 index 0000000..8d565cc --- /dev/null +++ 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 & + 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 new file mode 100644 index 0000000..9344644 --- /dev/null +++ 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 index 0746819..07acb9a 100644 --- 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"] }