From 8a70a5b7dc315a213589251407a93c7ff0919790 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20=C5=BDdila?= Date: Tue, 11 Jul 2023 15:52:10 +0200 Subject: [PATCH] separatd and fixed examples --- README.md | 9 ++- demo-leaflet.html | 75 ------------------- demo-maplibregl.html | 66 ---------------- {src => examples/leaflet}/AppLeaflet.svelte | 6 +- examples/leaflet/index.html | 15 ++++ examples/leaflet/main.ts | 9 +++ .../maplibregl}/AppMapLibreGl.svelte | 8 +- examples/maplibregl/index.html | 15 ++++ examples/maplibregl/main.ts | 9 +++ .../openlayers}/AppOpenLayers.svelte | 10 ++- examples/openlayers/index.html | 15 ++++ examples/openlayers/main.ts | 9 +++ examples/react/index.html | 15 ++++ examples/react/main.tsx | 51 +++++++++++++ examples/standalone/leaflet.html | 69 +++++++++++++++++ examples/standalone/maplibregl.html | 63 ++++++++++++++++ index.html | 33 ++++---- package-lock.json | 4 +- package.json | 13 ++-- src/{lib => }/ClearIcon.svelte | 0 src/{lib => }/FailIcon.svelte | 0 src/{lib => }/FeatureItem.svelte | 0 src/{lib => }/GeocodingControl.svelte | 14 ++-- src/{lib => }/LoadingIcon.svelte | 0 .../MapLibreBasedGeocodingControl.ts | 0 src/{lib => }/MarkerIcon.svelte | 0 src/{lib => }/ReverseGeocodingIcon.svelte | 0 src/{lib => }/SearchIcon.svelte | 0 src/{lib => }/leaflet-controller.ts | 0 src/{lib => }/leaflet.ts | 0 src/main.ts | 65 ---------------- src/{lib => }/maplibregl-controller.ts | 0 src/{lib => }/maplibregl.ts | 0 src/{lib => }/maptilersdk.ts | 0 src/{lib => }/mask.ts | 3 +- src/{lib => }/openlayers-controller.ts | 0 src/{lib => }/openlayers.ts | 0 src/{lib => }/react.ts | 0 src/{lib => }/types.ts | 0 src/{lib => }/vanilla.ts | 0 tsconfig.dist.json | 22 ++++++ tsconfig.json | 32 ++++---- vite.config.ts | 18 ++--- 43 files changed, 368 insertions(+), 280 deletions(-) delete mode 100644 demo-leaflet.html delete mode 100644 demo-maplibregl.html rename {src => examples/leaflet}/AppLeaflet.svelte (93%) create mode 100644 examples/leaflet/index.html create mode 100644 examples/leaflet/main.ts rename {src => examples/maplibregl}/AppMapLibreGl.svelte (86%) create mode 100644 examples/maplibregl/index.html create mode 100644 examples/maplibregl/main.ts rename {src => examples/openlayers}/AppOpenLayers.svelte (89%) create mode 100644 examples/openlayers/index.html create mode 100644 examples/openlayers/main.ts create mode 100644 examples/react/index.html create mode 100644 examples/react/main.tsx create mode 100644 examples/standalone/leaflet.html create mode 100644 examples/standalone/maplibregl.html rename src/{lib => }/ClearIcon.svelte (100%) rename src/{lib => }/FailIcon.svelte (100%) rename src/{lib => }/FeatureItem.svelte (100%) rename src/{lib => }/GeocodingControl.svelte (100%) rename src/{lib => }/LoadingIcon.svelte (100%) rename src/{lib => }/MapLibreBasedGeocodingControl.ts (100%) rename src/{lib => }/MarkerIcon.svelte (100%) rename src/{lib => }/ReverseGeocodingIcon.svelte (100%) rename src/{lib => }/SearchIcon.svelte (100%) rename src/{lib => }/leaflet-controller.ts (100%) rename src/{lib => }/leaflet.ts (100%) delete mode 100644 src/main.ts rename src/{lib => }/maplibregl-controller.ts (100%) rename src/{lib => }/maplibregl.ts (100%) rename src/{lib => }/maptilersdk.ts (100%) rename src/{lib => }/mask.ts (92%) rename src/{lib => }/openlayers-controller.ts (100%) rename src/{lib => }/openlayers.ts (100%) rename src/{lib => }/react.ts (100%) rename src/{lib => }/types.ts (100%) rename src/{lib => }/vanilla.ts (100%) create mode 100644 tsconfig.dist.json diff --git a/README.md b/README.md index 75cba99..f8263fa 100644 --- a/README.md +++ b/README.md @@ -132,10 +132,11 @@ new Map({ }); ``` -For examples without using bundler see `demo-maplibregl.html` or `demo-leaflet.html`. After building this library (`npm install && npm run build`) you can open it in the browser: +For examples without using bundler see `examples/standalone/maplibregl.html` or `examples/standalone/leaflet.html`. +After building this library (`npm install && npm run clean && npm run build`) you can open it in the browser: -- MapLibre GL JS: `sensible-browser file://$(pwd)/demo-maplibregl.html#key=YOUR_MAPTILER_API_KEY_HERE` -- Leaflet: `sensible-browser file://$(pwd)/demo-leaflet.html#key=YOUR_MAPTILER_API_KEY_HERE` +- MapLibre GL JS: `sensible-browser file://$(pwd)/examples/standalone/maplibregl.html#key=YOUR_MAPTILER_API_KEY_HERE` +- Leaflet: `sensible-browser file://$(pwd)/examples/standalone/leaflet.html#key=YOUR_MAPTILER_API_KEY_HERE` ### Example for vanilla JS using UMD @@ -371,3 +372,5 @@ You will find compilation result in `dist` directory. ```bash npm install && VITE_API_KEY=YOUR_MAPTILER_API_KEY_HERE npm run dev ``` + +Afterwards you can open the printed URL in your browser to see the examples and/or to do the development. diff --git a/demo-leaflet.html b/demo-leaflet.html deleted file mode 100644 index 7313523..0000000 --- a/demo-leaflet.html +++ /dev/null @@ -1,75 +0,0 @@ - - - - - - - - - - - - - - - - - -
- - - - diff --git a/demo-maplibregl.html b/demo-maplibregl.html deleted file mode 100644 index e8eea87..0000000 --- a/demo-maplibregl.html +++ /dev/null @@ -1,66 +0,0 @@ - - - - - - - - - - - - - - - - - -
- - - - diff --git a/src/AppLeaflet.svelte b/examples/leaflet/AppLeaflet.svelte similarity index 93% rename from src/AppLeaflet.svelte rename to examples/leaflet/AppLeaflet.svelte index 4a3b9a7..2d8c313 100644 --- a/src/AppLeaflet.svelte +++ b/examples/leaflet/AppLeaflet.svelte @@ -1,9 +1,8 @@ diff --git a/examples/leaflet/index.html b/examples/leaflet/index.html new file mode 100644 index 0000000..cbfa327 --- /dev/null +++ b/examples/leaflet/index.html @@ -0,0 +1,15 @@ + + + + + + +MapTiler Geocoding :: Leaflet + +
+ + diff --git a/examples/leaflet/main.ts b/examples/leaflet/main.ts new file mode 100644 index 0000000..ab5f765 --- /dev/null +++ b/examples/leaflet/main.ts @@ -0,0 +1,9 @@ +import App from "./AppLeaflet.svelte"; + +const appElement = document.getElementById("app"); + +if (!appElement) { + throw new Error("element with id 'app' not found"); +} + +export default new App({ target: appElement }); diff --git a/src/AppMapLibreGl.svelte b/examples/maplibregl/AppMapLibreGl.svelte similarity index 86% rename from src/AppMapLibreGl.svelte rename to examples/maplibregl/AppMapLibreGl.svelte index d02e9e5..129b948 100644 --- a/src/AppMapLibreGl.svelte +++ b/examples/maplibregl/AppMapLibreGl.svelte @@ -1,9 +1,8 @@ diff --git a/examples/maplibregl/main.ts b/examples/maplibregl/main.ts new file mode 100644 index 0000000..6aa2d5c --- /dev/null +++ b/examples/maplibregl/main.ts @@ -0,0 +1,9 @@ +import App from "./AppMapLibreGl.svelte"; + +const appElement = document.getElementById("app"); + +if (!appElement) { + throw new Error("element with id 'app' not found"); +} + +export default new App({ target: appElement }); diff --git a/src/AppOpenLayers.svelte b/examples/openlayers/AppOpenLayers.svelte similarity index 89% rename from src/AppOpenLayers.svelte rename to examples/openlayers/AppOpenLayers.svelte index 26f6213..28c301d 100644 --- a/src/AppOpenLayers.svelte +++ b/examples/openlayers/AppOpenLayers.svelte @@ -4,10 +4,9 @@ import { defaults as defaultControls } from "ol/control.js"; import TileLayer from "ol/layer/Tile"; import "ol/ol.css"; - import TileJSON from "ol/source/TileJSON"; import XYZ from "ol/source/XYZ"; import { onMount } from "svelte"; - import { GeocodingControl } from "./lib/openlayers"; + import { GeocodingControl } from "../../src/openlayers"; let containerElement: HTMLElement; @@ -47,6 +46,7 @@ apiKey, enableReverse: "always", // collapsed: true, + iconsBaseUrl: "/icons/", }), ]), }); @@ -60,4 +60,10 @@ position: absolute; inset: 0; } + + :global(.ol-search) { + position: absolute; + top: 0.5em; + right: 0.5em; + } diff --git a/examples/openlayers/index.html b/examples/openlayers/index.html new file mode 100644 index 0000000..5c2143c --- /dev/null +++ b/examples/openlayers/index.html @@ -0,0 +1,15 @@ + + + + + + +MapTiler Geocoding :: OpenLayers + +
+ + diff --git a/examples/openlayers/main.ts b/examples/openlayers/main.ts new file mode 100644 index 0000000..3fcfa06 --- /dev/null +++ b/examples/openlayers/main.ts @@ -0,0 +1,9 @@ +import App from "./AppOpenLayers.svelte"; + +const appElement = document.getElementById("app"); + +if (!appElement) { + throw new Error("element with id 'app' not found"); +} + +export default new App({ target: appElement }); diff --git a/examples/react/index.html b/examples/react/index.html new file mode 100644 index 0000000..aee1640 --- /dev/null +++ b/examples/react/index.html @@ -0,0 +1,15 @@ + + + + + + +MapTiler Geocoding :: React + +
+ + diff --git a/examples/react/main.tsx b/examples/react/main.tsx new file mode 100644 index 0000000..df1308d --- /dev/null +++ b/examples/react/main.tsx @@ -0,0 +1,51 @@ +import { createElement, useEffect, useRef, useState } from "react"; +import { createRoot } from "react-dom/client"; +import { GeocodingControl, type Methods } from "../../src/react"; + +const appElement = document.getElementById("app"); + +if (!appElement) { + throw new Error("element with id 'app' not found"); +} + +const apiKey = import.meta.env.VITE_API_KEY; + +if (!apiKey) { + const errMsg = "missing VITE_API_KEY environment variable"; + + window.alert(errMsg); + + throw new Error(errMsg); +} + +const root = createRoot(appElement); + +function App() { + const ref = useRef(null); + + // const [collapsed, setCollapsed] = useState(false); + + // useEffect(() => { + // setTimeout(() => { + // ref.current?.focus(); + // }); + + // setTimeout(() => { + // setCollapsed(true); + // }, 5000); + // }, []); + + return ( + { + console.log("select", f); + }} + iconsBaseUrl="/icons/" + /> + ); +} + +root.render(createElement(App)); diff --git a/examples/standalone/leaflet.html b/examples/standalone/leaflet.html new file mode 100644 index 0000000..16f4130 --- /dev/null +++ b/examples/standalone/leaflet.html @@ -0,0 +1,69 @@ + + + + + + + + + + + + + +
+ + diff --git a/examples/standalone/maplibregl.html b/examples/standalone/maplibregl.html new file mode 100644 index 0000000..5058911 --- /dev/null +++ b/examples/standalone/maplibregl.html @@ -0,0 +1,63 @@ + + + + + + + + + + + + + +
+ + diff --git a/index.html b/index.html index 28838bc..4c2097e 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,18 @@ - - - - - - Maptiler Geocoding - - -
- - - + + + + + +MapTiler Geocoding + + diff --git a/package-lock.json b/package-lock.json index 86138d3..92e54e0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@maptiler/geocoding-control", - "version": "0.0.97", + "version": "0.0.98-alpha.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@maptiler/geocoding-control", - "version": "0.0.97", + "version": "0.0.98-alpha.1", "license": "BSD-3-Clause", "devDependencies": { "@maptiler/sdk": "^1.1.1", diff --git a/package.json b/package.json index 672c53d..dbbe7a5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@maptiler/geocoding-control", - "version": "0.0.97", + "version": "0.0.98-alpha.1", "type": "module", "author": { "name": "Martin Ždila", @@ -32,7 +32,7 @@ "scripts": { "dev": "vite --host", "build": "npm run check && concurrently --names \"SVELTE ,MAPLIBRE,MAPTILER,MAPLIB-C,LEAFLET ,LEAFLE-C,OL ,OL-C ,REACT ,TYPES ,VANILLA \" \"npm run build-svelte\" \"npm run build-maplibre\" \"npm run build-maptilersdk\" \"npm run build-maplibre-controller\" \"npm run build-leaflet\" \"npm run build-leaflet-controller\" \"npm run build-openlayers\" \"npm run build-openlayers-controller\" \"npm run build-react\" \"npm run build-vanilla\" \"npm run build-types\" && npm run cjs2js && cp dist.svelte/*.svelte* LICENSE README.md package.json dist", - "build-svelte": "svelte-package -o dist.svelte && VITE_LIB_VERSION=$npm_package_version node replace-env-vars.js", + "build-svelte": "svelte-package -i src -o dist.svelte && VITE_LIB_VERSION=$npm_package_version node replace-env-vars.js", "build-maptilersdk": "FLAVOUR=maptilersdk vite build", "build-maplibre": "FLAVOUR=maplibre vite build", "build-maplibre-controller": "FLAVOUR=maplibregl-controller vite build", @@ -42,7 +42,7 @@ "build-openlayers-controller": "FLAVOUR=openlayers-controller vite build", "build-react": "FLAVOUR=react vite build", "build-vanilla": "FLAVOUR=vanilla vite build", - "build-types": "tsc --outDir dist --declaration --emitDeclarationOnly", + "build-types": "tsc --outDir dist --declaration --emitDeclarationOnly -p tsconfig.dist.json", "cjs2js": "renamer --find '/\\bcjs\\b/' --replace js dist/*cjs*", "clean": "rm -rf dist dist.svelte", "pack": "npm run clean && npm run build && cd dist && npm pack", @@ -126,9 +126,9 @@ "@maptiler/sdk": "^1", "leaflet": "^1.9 || ^1.8", "maplibre-gl": "^2 || ^3.0.0-alpha || ^3", + "ol": "^7.4.0", "react": "^17 || ^18", - "svelte": "^3.50", - "ol": "^7.4.0" + "svelte": "^3.50" }, "peerDependenciesMeta": { "@maptiler/sdk": { @@ -146,6 +146,5 @@ "ol": { "optional": true } - }, - "dependencies": {} + } } diff --git a/src/lib/ClearIcon.svelte b/src/ClearIcon.svelte similarity index 100% rename from src/lib/ClearIcon.svelte rename to src/ClearIcon.svelte diff --git a/src/lib/FailIcon.svelte b/src/FailIcon.svelte similarity index 100% rename from src/lib/FailIcon.svelte rename to src/FailIcon.svelte diff --git a/src/lib/FeatureItem.svelte b/src/FeatureItem.svelte similarity index 100% rename from src/lib/FeatureItem.svelte rename to src/FeatureItem.svelte diff --git a/src/lib/GeocodingControl.svelte b/src/GeocodingControl.svelte similarity index 100% rename from src/lib/GeocodingControl.svelte rename to src/GeocodingControl.svelte index b1041db..ec6aa57 100644 --- a/src/lib/GeocodingControl.svelte +++ b/src/GeocodingControl.svelte @@ -1,11 +1,4 @@