Skip to content

Commit 2171aef

Browse files
zdilazdila
authoredJun 20, 2024
Update dependencies, externalized OL for IMD and improve examples (#34)
* updated dependencies and externalized ol variable for umd * cleaned-up examples; added ol vanilla js example
·
v2.1.7v1.3.0
1 parent 7d50210 commit 2171aef

File tree

11 files changed

+521
-467
lines changed

11 files changed

+521
-467
lines changed
 

‎examples/leaflet/AppLeaflet.svelte

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,10 @@
66
77
let containerElement: HTMLElement;
88
9-
const apiKey = import.meta.env.VITE_API_KEY;
10-
11-
if (!apiKey) {
12-
const errMsg = "missing VITE_API_KEY environment variable";
13-
14-
window.alert(errMsg);
15-
16-
throw new Error(errMsg);
17-
}
9+
const apiKey =
10+
import.meta.env.VITE_API_KEY ||
11+
prompt("Please provide your MapTiler API key") ||
12+
"";
1813
1914
onMount(() => {
2015
const map = L.map(containerElement).fitBounds([

‎examples/maplibregl/AppMapLibreGl.svelte

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,10 @@
66
77
let containerElement: HTMLElement;
88
9-
const apiKey = import.meta.env.VITE_API_KEY;
10-
11-
if (!apiKey) {
12-
const errMsg = "missing VITE_API_KEY environment variable";
13-
14-
window.alert(errMsg);
15-
16-
throw new Error(errMsg);
17-
}
9+
const apiKey =
10+
import.meta.env.VITE_API_KEY ||
11+
prompt("Please provide your MapTiler API key") ||
12+
"";
1813
1914
onMount(() => {
2015
const map = new Map({

‎examples/maptiler-sdk/AppMapTilerSdk.svelte

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,10 @@
88
99
maptilersdk.config.apiKey = import.meta.env.VITE_API_KEY;
1010
11-
const apiKey = import.meta.env.VITE_API_KEY;
12-
13-
if (!apiKey) {
14-
const errMsg = "missing VITE_API_KEY environment variable";
15-
16-
window.alert(errMsg);
17-
18-
throw new Error(errMsg);
19-
}
11+
maptilersdk.config.apiKey =
12+
import.meta.env.VITE_API_KEY ||
13+
prompt("Please provide your MapTiler API key") ||
14+
"";
2015
2116
onMount(() => {
2217
const map = new maptilersdk.Map({

‎examples/openlayers/AppOpenLayers.svelte

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,10 @@
1010
1111
let containerElement: HTMLElement;
1212
13-
const apiKey = import.meta.env.VITE_API_KEY;
14-
15-
if (!apiKey) {
16-
const errMsg = "missing VITE_API_KEY environment variable";
17-
18-
window.alert(errMsg);
19-
20-
throw new Error(errMsg);
21-
}
13+
const apiKey =
14+
import.meta.env.VITE_API_KEY ||
15+
prompt("Please provide your MapTiler API key") ||
16+
"";
2217
2318
const scale = devicePixelRatio > 1.5 ? "@2x" : "";
2419

‎examples/standalone/leaflet.html

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,10 @@
3131
<script>
3232
addEventListener("hashchange", (event) => location.reload());
3333

34-
const apiKey = new URLSearchParams(location.hash.slice(1)).get("key");
35-
36-
if (!apiKey) {
37-
const errMsg = "Missing #key=your_api_key in URL";
38-
39-
window.alert(errMsg);
40-
41-
throw new Error(errMsg);
42-
}
34+
const apiKey =
35+
new URLSearchParams(location.hash.slice(1)).get("key") ||
36+
prompt("Please provide your MapTiler API key") ||
37+
"";
4338

4439
const map = L.map(document.getElementById("map")).setView([49.2, 16.3], 6);
4540

‎examples/standalone/maplibregl.html

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,10 @@
3131
<script>
3232
addEventListener("hashchange", (event) => location.reload());
3333

34-
const apiKey = new URLSearchParams(location.hash.slice(1)).get("key");
35-
36-
if (!apiKey) {
37-
const errMsg = "Missing #key=your_api_key in URL";
38-
39-
window.alert(errMsg);
40-
41-
throw new Error(errMsg);
42-
}
34+
const apiKey =
35+
new URLSearchParams(location.hash.slice(1)).get("key") ||
36+
prompt("Please provide your MapTiler API key") ||
37+
"";
4338

4439
const map = new maplibregl.Map({
4540
container: "map",

‎examples/standalone/ol.html

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!doctype html>
2+
<meta charset="utf-8" />
3+
4+
<script src="https://cdn.jsdelivr.net/npm/ol@v9.1.0/dist/ol.js"></script>
5+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v9.2.4/ol.css" />
6+
7+
<script src="../../dist/openlayers.umd.js" charset="UTF-8"></script>
8+
9+
<link href="../../dist/style.css" rel="stylesheet" />
10+
11+
<!--
12+
<script src="https://unpkg.com/@maptiler/geocoding-control@latest/openlayers.umd.js"></script>
13+
14+
<link
15+
href="https://unpkg.com/@maptiler/geocoding-control@latest/style.css"
16+
rel="stylesheet"
17+
/>
18+
-->
19+
20+
<style>
21+
#map {
22+
position: absolute;
23+
inset: 0;
24+
}
25+
26+
.ol-search {
27+
position: absolute;
28+
top: 0.5em;
29+
right: 0.5em;
30+
}
31+
</style>
32+
33+
<div id="map"></div>
34+
35+
<script>
36+
addEventListener("hashchange", (event) => location.reload());
37+
38+
const apiKey =
39+
new URLSearchParams(location.hash.slice(1)).get("key") ||
40+
prompt("Please provide your MapTiler API key") ||
41+
"";
42+
43+
const scale = devicePixelRatio > 1.5 ? "@2x" : "";
44+
45+
new ol.Map({
46+
target: document.getElementById("map"),
47+
layers: [
48+
new ol.layer.Tile({
49+
source: new ol.source.XYZ({
50+
url: `https://api.maptiler.com/maps/basic-v2/{z}/{x}/{y}${scale}.png?key=${apiKey}`,
51+
tileSize: 512,
52+
attributions: [
53+
'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a>',
54+
'<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
55+
],
56+
}),
57+
}),
58+
],
59+
view: new ol.View({
60+
center: [0, 0],
61+
zoom: 0,
62+
}),
63+
controls: ol.control.defaults.defaults().extend([
64+
new openlayersMaptilerGeocoder.GeocodingControl({
65+
apiKey,
66+
enableReverse: "always",
67+
iconsBaseUrl: "/icons/",
68+
}),
69+
]),
70+
});
71+
</script>

‎index.html

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,22 @@
1111

1212
<h1>MapTiler Geocoding Control Examples</h1>
1313

14+
<h2>Svelte</h2>
1415
<ul>
1516
<li><a href="/examples/maptiler-sdk/">MapTiler SDK</a></li>
1617
<li><a href="/examples/maplibregl/">MapLibre GL JS</a></li>
1718
<li><a href="/examples/leaflet/">Leaflet</a></li>
1819
<li><a href="/examples/openlayers/">OpenLayers</a></li>
19-
<li><a href="/examples/react/">React</a></li>
20+
</ul>
21+
22+
<h2>React</h2>
23+
<ul>
24+
<li><a href="/examples/react/">Headless (no map, just the control)</a></li>
25+
</ul>
26+
27+
<h2>Vanilla JS</h2>
28+
<ul>
29+
<li><a href="/examples/standalone/maplibregl.html">MapLibre GL JS</a></li>
30+
<li><a href="/examples/standalone/leaflet.html">Leaflet</a></li>
31+
<li><a href="/examples/standalone/ol.html">OpenLayers</a></li>
2032
</ul>

‎package-lock.json

Lines changed: 336 additions & 330 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -103,8 +103,8 @@
103103
"./types": "./types.d.ts"
104104
},
105105
"devDependencies": {
106-
"@maptiler/sdk": "^2.0.3",
107-
"@sveltejs/package": "^2.3.1",
106+
"@maptiler/sdk": "^2.1.0",
107+
"@sveltejs/package": "^2.3.2",
108108
"@sveltejs/vite-plugin-svelte": "^3.1.1",
109109
"@tsconfig/svelte": "^5.0.4",
110110
"@turf/buffer": "^7.0.0",
@@ -117,35 +117,35 @@
117117
"concurrently": "^8.2.2",
118118
"dotenv": "^16.4.5",
119119
"eslint": "^8.57.0",
120-
"eslint-plugin-svelte": "^2.39.0",
120+
"eslint-plugin-svelte": "^2.40.0",
121121
"esm-env": "^1.0.0",
122-
"globals": "^15.3.0",
122+
"globals": "^15.6.0",
123123
"husky": "^9.0.11",
124124
"leaflet": "^1.9.4",
125-
"lint-staged": "^15.2.5",
126-
"maplibre-gl": "^4.3.2",
127-
"ol": "^7.5.2",
128-
"prettier": "^3.3.1",
125+
"lint-staged": "^15.2.7",
126+
"maplibre-gl": "^4.4.1",
127+
"ol": "9.1",
128+
"prettier": "^3.3.2",
129129
"prettier-plugin-organize-imports": "^3.2.4",
130130
"prettier-plugin-svelte": "^3.2.4",
131131
"react": "^18.3.1",
132132
"react-dom": "^18.3.1",
133-
"renamer": "^5.0.0",
133+
"renamer": "^5.0.1",
134134
"replace-in-file": "^7.2.0",
135-
"sass": "^1.77.4",
135+
"sass": "^1.77.6",
136136
"svelte": "^4.2.18",
137-
"svelte-check": "^3.8.0",
138-
"svelte-preprocess": "^5.1.4",
137+
"svelte-check": "^3.8.1",
138+
"svelte-preprocess": "^6.0.1",
139139
"tslib": "^2.6.3",
140140
"typescript": "^5.4.5",
141-
"typescript-eslint": "^7.11.0",
142-
"vite": "^5.2.13"
141+
"typescript-eslint": "^7.13.1",
142+
"vite": "^5.3.1"
143143
},
144144
"peerDependencies": {
145145
"@maptiler/sdk": "^1 || ^2",
146-
"leaflet": "^1.9 || ^1.8 || ^1.7",
146+
"leaflet": "^1.7 || ^1.8 || ^1.9",
147147
"maplibre-gl": "^2 || ^3 || ^4",
148-
"ol": "^7 || ^8 || ^9",
148+
"ol": "^6 || ^7 || ^8 || ^9",
149149
"react": "^17 || ^18",
150150
"svelte": "^4.2"
151151
},

‎vite.config.ts

Lines changed: 61 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,63 @@ import { svelte } from "@sveltejs/vite-plugin-svelte";
22
import preprocess from "svelte-preprocess";
33
import { defineConfig } from "vite";
44

5+
const libs = {
6+
leaflet: {
7+
fileName: "leaflet",
8+
entry: ["src/leaflet.ts"],
9+
name: "leafletMaptilerGeocoder",
10+
formats: ["es", "umd"],
11+
},
12+
maplibre: {
13+
fileName: "maplibregl",
14+
entry: ["src/maplibregl.ts"],
15+
name: "maplibreglMaptilerGeocoder",
16+
formats: ["es", "umd"],
17+
},
18+
maptilersdk: {
19+
fileName: "maptilersdk",
20+
entry: ["src/maptilersdk.ts"],
21+
name: "maptilersdkMaptilerGeocoder",
22+
formats: ["es", "umd"],
23+
},
24+
openlayers: {
25+
fileName: "openlayers",
26+
entry: ["src/openlayers.ts"],
27+
name: "openlayersMaptilerGeocoder",
28+
formats: ["es", "umd"],
29+
},
30+
react: {
31+
fileName: "react",
32+
entry: ["src/react.ts"],
33+
name: "reactMaptilerGeocoder",
34+
formats: ["es", "umd"],
35+
},
36+
vanilla: {
37+
fileName: "vanilla",
38+
entry: ["src/vanilla.ts"],
39+
name: "maptilerGeocoder",
40+
formats: ["es", "umd"],
41+
},
42+
"leaflet-controller": {
43+
fileName: "leaflet-controller",
44+
entry: ["src/leaflet-controller.ts"],
45+
name: "leafletMaptilerGeocodingController",
46+
formats: ["es", "umd"],
47+
},
48+
"maplibregl-controller": {
49+
fileName: "maplibregl-controller",
50+
entry: ["src/maplibregl-controller.ts"],
51+
name: "maplibreglMaptilerGeocodingController",
52+
formats: ["es", "umd"],
53+
},
54+
"openlayers-controller": {
55+
fileName: "openlayers-controller",
56+
entry: ["src/openlayers-controller.ts"],
57+
name: "openlayersMaptilerGeocodingController",
58+
formats: ["es", "umd"],
59+
},
60+
};
61+
562
// https://vitejs.dev/config/
663
export default defineConfig({
764
plugins: [
@@ -13,79 +70,16 @@ export default defineConfig({
1370
build: {
1471
sourcemap: true,
1572
emptyOutDir: false,
16-
lib:
17-
// simplify after https://github.com/vitejs/vite/pull/10609 is released
18-
process.env.FLAVOUR === "leaflet"
19-
? {
20-
fileName: "leaflet",
21-
entry: ["src/leaflet.ts"],
22-
name: "leafletMaptilerGeocoder",
23-
formats: ["es", "umd"],
24-
}
25-
: process.env.FLAVOUR === "maplibre"
26-
? {
27-
fileName: "maplibregl",
28-
entry: ["src/maplibregl.ts"],
29-
name: "maplibreglMaptilerGeocoder",
30-
formats: ["es", "umd"],
31-
}
32-
: process.env.FLAVOUR === "maptilersdk"
33-
? {
34-
fileName: "maptilersdk",
35-
entry: ["src/maptilersdk.ts"],
36-
name: "maptilersdkMaptilerGeocoder",
37-
formats: ["es", "umd"],
38-
}
39-
: process.env.FLAVOUR === "openlayers"
40-
? {
41-
fileName: "openlayers",
42-
entry: ["src/openlayers.ts"],
43-
name: "openlayersMaptilerGeocoder",
44-
formats: ["es", "umd"],
45-
}
46-
: process.env.FLAVOUR === "react"
47-
? {
48-
fileName: "react",
49-
entry: ["src/react.ts"],
50-
name: "reactMaptilerGeocoder",
51-
formats: ["es", "umd"],
52-
}
53-
: process.env.FLAVOUR === "vanilla"
54-
? {
55-
fileName: "vanilla",
56-
entry: ["src/vanilla.ts"],
57-
name: "maptilerGeocoder",
58-
formats: ["es", "umd"],
59-
}
60-
: process.env.FLAVOUR === "leaflet-controller"
61-
? {
62-
fileName: "leaflet-controller",
63-
entry: ["src/leaflet-controller.ts"],
64-
name: "leafletMaptilerGeocodingController",
65-
formats: ["es", "umd"],
66-
}
67-
: process.env.FLAVOUR === "maplibregl-controller"
68-
? {
69-
fileName: "maplibregl-controller",
70-
entry: ["src/maplibregl-controller.ts"],
71-
name: "maplibreglMaptilerGeocodingController",
72-
formats: ["es", "umd"],
73-
}
74-
: process.env.FLAVOUR === "openlayers-controller"
75-
? {
76-
fileName: "openlayers-controller",
77-
entry: ["src/openlayers-controller.ts"],
78-
name: "openlayersMaptilerGeocodingController",
79-
formats: ["es", "umd"],
80-
}
81-
: undefined,
73+
lib: libs[process.env.FLAVOUR],
74+
// simplify after https://github.com/vitejs/vite/pull/10609 is released
8275
rollupOptions: {
8376
external: [
8477
"@maptiler/sdk",
8578
"maplibre-gl",
8679
"leaflet",
8780
"react",
8881
"react-dom",
82+
"ol",
8983
],
9084
output: {
9185
// Provide global variables to use in the UMD build
@@ -96,6 +90,7 @@ export default defineConfig({
9690
leaflet: "L",
9791
react: "React",
9892
"react-dom": "ReactDOM",
93+
ol: "ol",
9994
},
10095
},
10196
},

0 commit comments

Comments
 (0)
Please sign in to comment.