@maptiler/geocoding-control 0.0.48 → 0.0.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +0 -0
- package/dist/leaflet.js +584 -574
- package/dist/leaflet.umd.js +4 -4
- package/dist/main.d.ts +1 -1
- package/dist/maplibregl.js +705 -692
- package/dist/maplibregl.umd.js +4 -4
- package/dist/style.css +1 -1
- package/package.json +10 -8
- package/src/lib/GeocodingControl.svelte +18 -17
- package/src/lib/MarkerIcon.svelte +4 -0
- package/src/lib/leafletMapController.ts +7 -1
- package/src/lib/maplibreglMapController.ts +12 -0
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
div.svelte-7cmwmc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;display:flex;align-items:center}svg.svelte-7cmwmc{animation:svelte-7cmwmc-rotate .8s infinite cubic-bezier(.45,.05,.55,.95)}@keyframes svelte-7cmwmc-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}svg.svelte-
|
|
1
|
+
div.svelte-7cmwmc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;display:flex;align-items:center}svg.svelte-7cmwmc{animation:svelte-7cmwmc-rotate .8s infinite cubic-bezier(.45,.05,.55,.95)}@keyframes svelte-7cmwmc-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}svg.svelte-1k1cmht.svelte-1k1cmht{display:block;fill:#6b7c93;stroke:#6b7c93}.list-icon.svelte-1k1cmht.svelte-1k1cmht{grid-row:1/3;align-self:center;margin:8px}.in-map.svelte-1k1cmht.svelte-1k1cmht{height:30px}.maplibregl-canvas-container .marker-selected{z-index:1}.maplibregl-canvas-container svg.svelte-1k1cmht path.svelte-1k1cmht,.leaflet-map-pane svg.svelte-1k1cmht path.svelte-1k1cmht{fill:#3170fe;stroke:#3170fe}.marker-selected svg.svelte-1k1cmht path.svelte-1k1cmht{fill:#98b7ff;stroke:#3170fe}.marker-reverse svg.svelte-1k1cmht path.svelte-1k1cmht{fill:silver;stroke:gray}.marker-interactive{cursor:pointer!important}.marker-fuzzy svg.svelte-1k1cmht path.svelte-1k1cmht{fill:silver;stroke:gray}.marker-fuzzy.marker-selected svg.svelte-1k1cmht path.svelte-1k1cmht{fill:#ddd;stroke:silver}.maptiler-gc-popup>.maplibregl-popup-content{padding:2px 8px}svg.svelte-en2qvf{display:block;fill:var(--color-icon-button)}form.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d,form.svelte-1h1zm6d .svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d,form.svelte-1h1zm6d .svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d:after,form.svelte-1h1zm6d .svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d:before{box-sizing:border-box}form.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d{font-family:Ubuntu,Open Sans,Helvetica Neue,Arial,Helvetica,sans-serif;position:relative;background-color:#fff;width:100%;z-index:10;border-radius:4px;transition:max-width .25s;box-shadow:0 2px 8px #33335926;--color-text:#333359;--color-icon-button:#333359}form.can-collapse.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d{max-width:35px}form.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d,form.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d:focus-within,form.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d:hover{max-width:240px}input.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d{font:inherit;font-size:14px;width:100%;border:0;background-color:transparent;margin:0;height:36px;color:#000000bf;white-space:nowrap;overflow:hidden;padding:0}input.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d:focus{color:#000000bf;outline:0;outline:none;box-shadow:none}ul.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d,div.error.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d,div.no-results.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d{background-color:#fff;border-radius:4px;left:0;list-style:none;margin:0;padding:0;position:absolute;width:100%;top:calc(100% + 6px);font-size:14px;box-shadow:0 2px 8px #33335926;line-height:16px;overflow:hidden}.maplibregl-ctrl-bottom-left ul.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d,.maplibregl-ctrl-bottom-right ul.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d{top:auto;bottom:100%}li.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d{cursor:default;display:grid;grid-template-columns:auto 1fr;color:var(--color-text);padding:4px 0}li.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d:first-child{padding-top:8px}li.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d:last-child{padding-bottom:8px}li.svelte-1h1zm6d>span.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d{overflow:hidden;padding-right:8px}li.svelte-1h1zm6d>span.svelte-1h1zm6d>span.svelte-1h1zm6d.svelte-1h1zm6d{white-space:nowrap;display:block;min-width:fit-content}li.selected.svelte-1h1zm6d>span.svelte-1h1zm6d>span.svelte-1h1zm6d.svelte-1h1zm6d{animation:svelte-1h1zm6d-backAndForth 5s linear infinite}li.svelte-1h1zm6d>span.svelte-1h1zm6d:nth-of-type(1)>span.svelte-1h1zm6d>span.svelte-1h1zm6d:nth-of-type(1){font-weight:700}li.svelte-1h1zm6d>span.svelte-1h1zm6d:nth-of-type(1)>span.svelte-1h1zm6d>span.svelte-1h1zm6d:nth-of-type(2){color:#aeb6c7;font-size:12px;padding-left:4px}li.selected.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d{background-color:#f3f3f3}button.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d:hover{background-color:transparent}button.svelte-1h1zm6d:hover svg,button.active.svelte-1h1zm6d svg{fill:#6b7c92}button.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d{padding:0;margin:0;border:0;background-color:transparent}.input-group.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d{display:flex;align-items:stretch;gap:7px;padding-inline:8px;outline:#c1cfe4 solid 2px;border-radius:4px;overflow:hidden}.input-group.svelte-1h1zm6d:hover .displayable.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d{visibility:visible}.input-group.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d:focus-within{outline:#3170fe solid 2px}div.error.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d,div.no-results.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d{font:inherit;font-size:14px;padding:6px 10px}div.error.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d{color:#e25041}div.no-results.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d{color:var(--color-text)}.clear-button-container.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d{position:relative;display:flex;align-items:stretch}.clear-button-container.svelte-1h1zm6d button.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d{visibility:hidden}@keyframes svelte-1h1zm6d-backAndForth{0%{transform:translate(0)}10%{transform:translate(0)}45%{transform:translate(calc(-100% + 196px))}55%{transform:translate(calc(-100% + 196px))}90%{transform:translate(0)}to{transform:translate(0)}}form.can-collapse.svelte-1h1zm6d button.svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d:not(:nth-of-type(1)){opacity:0;transition:opacity .25s}form.can-collapse.svelte-1h1zm6d:focus-within .svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d:not(:nth-of-type(1)),form.can-collapse.svelte-1h1zm6d:hover .svelte-1h1zm6d.svelte-1h1zm6d.svelte-1h1zm6d:not(:nth-of-type(1)){opacity:1}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maptiler/geocoding-control",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.53",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Martin Ždila",
|
|
@@ -26,11 +26,13 @@
|
|
|
26
26
|
"exports": {
|
|
27
27
|
"./leaflet": {
|
|
28
28
|
"import": "./dist/leaflet.js",
|
|
29
|
-
"require": "./dist/leaflet.umd.js"
|
|
29
|
+
"require": "./dist/leaflet.umd.js",
|
|
30
|
+
"types": "./dist/lib/LeafletGeocodingControl.d.ts"
|
|
30
31
|
},
|
|
31
32
|
"./maplibregl": {
|
|
32
33
|
"import": "./dist/maplibregl.js",
|
|
33
|
-
"require": "./dist/maplibregl.umd.js"
|
|
34
|
+
"require": "./dist/maplibregl.umd.js",
|
|
35
|
+
"types": "./dist/lib/MaplibreglGeocodingControl.d.ts"
|
|
34
36
|
},
|
|
35
37
|
"./dist/style.css": {
|
|
36
38
|
"import": "./dist/style.css",
|
|
@@ -49,14 +51,14 @@
|
|
|
49
51
|
"@turf/difference": "^6.5.0",
|
|
50
52
|
"@turf/union": "^6.5.0",
|
|
51
53
|
"@types/leaflet": "^1.9.0",
|
|
52
|
-
"prettier": "^2.8.
|
|
54
|
+
"prettier": "^2.8.3",
|
|
53
55
|
"prettier-plugin-svelte": "^2.9.0",
|
|
54
|
-
"svelte": "^3.55.
|
|
55
|
-
"svelte-check": "^
|
|
56
|
-
"svelte-preprocess": "^5.0.
|
|
56
|
+
"svelte": "^3.55.1",
|
|
57
|
+
"svelte-check": "^3.0.2",
|
|
58
|
+
"svelte-preprocess": "^5.0.1",
|
|
57
59
|
"tslib": "^2.4.1",
|
|
58
60
|
"typescript": "^4.9.4",
|
|
59
|
-
"vite": "^4.0.
|
|
61
|
+
"vite": "^4.0.4"
|
|
60
62
|
},
|
|
61
63
|
"peerDependencies": {
|
|
62
64
|
"leaflet": "^1.9.3",
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
|
|
70
70
|
export let fuzzyMatch = true;
|
|
71
71
|
|
|
72
|
-
export let
|
|
72
|
+
export let country: string | string[] | undefined = undefined;
|
|
73
73
|
|
|
74
74
|
export let types: string[] | undefined = undefined;
|
|
75
75
|
|
|
@@ -233,6 +233,7 @@
|
|
|
233
233
|
|
|
234
234
|
break;
|
|
235
235
|
case "proximityChange":
|
|
236
|
+
console.log("AAAAAAAAA");
|
|
236
237
|
proximity = trackProximity ? e.proximity : undefined;
|
|
237
238
|
|
|
238
239
|
break;
|
|
@@ -325,11 +326,8 @@
|
|
|
325
326
|
);
|
|
326
327
|
}
|
|
327
328
|
|
|
328
|
-
if (
|
|
329
|
-
sp.set(
|
|
330
|
-
"stack",
|
|
331
|
-
Array.isArray(countries) ? countries.join(",") : countries
|
|
332
|
-
);
|
|
329
|
+
if (country) {
|
|
330
|
+
sp.set("country", Array.isArray(country) ? country.join(",") : country);
|
|
333
331
|
}
|
|
334
332
|
|
|
335
333
|
if (types) {
|
|
@@ -341,15 +339,17 @@
|
|
|
341
339
|
sp.set("bbox", bbox.map((c) => c.toFixed(6)).join(","));
|
|
342
340
|
}
|
|
343
341
|
|
|
344
|
-
if (
|
|
345
|
-
|
|
346
|
-
|
|
342
|
+
if (!byId) {
|
|
343
|
+
if (proximity) {
|
|
344
|
+
sp.set("proximity", proximity.map((c) => c.toFixed(6)).join(","));
|
|
345
|
+
}
|
|
347
346
|
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
347
|
+
if (exact || !showResultsWhileTyping) {
|
|
348
|
+
sp.set("autocomplete", "false");
|
|
349
|
+
}
|
|
351
350
|
|
|
352
|
-
|
|
351
|
+
sp.set("fuzzyMatch", String(fuzzyMatch));
|
|
352
|
+
}
|
|
353
353
|
}
|
|
354
354
|
|
|
355
355
|
if (limit !== undefined) {
|
|
@@ -386,6 +386,7 @@
|
|
|
386
386
|
let res: Response;
|
|
387
387
|
|
|
388
388
|
try {
|
|
389
|
+
console.log("FFFFFFF");
|
|
389
390
|
res = await fetch(url, { signal: abortController.signal }).finally(() => {
|
|
390
391
|
abortController = undefined;
|
|
391
392
|
});
|
|
@@ -514,7 +515,7 @@
|
|
|
514
515
|
|
|
515
516
|
function pick(feature: Feature) {
|
|
516
517
|
picked = feature;
|
|
517
|
-
searchValue = feature.place_name
|
|
518
|
+
searchValue = feature.place_name;
|
|
518
519
|
selectedItemIndex = -1;
|
|
519
520
|
}
|
|
520
521
|
</script>
|
|
@@ -574,10 +575,10 @@
|
|
|
574
575
|
<slot />
|
|
575
576
|
</div>
|
|
576
577
|
|
|
577
|
-
{#if
|
|
578
|
-
{""}
|
|
579
|
-
{:else if error}
|
|
578
|
+
{#if error}
|
|
580
579
|
<div class="error">{errorMessage}</div>
|
|
580
|
+
{:else if !focusedDelayed}
|
|
581
|
+
{""}
|
|
581
582
|
{:else if listFeatures?.length === 0}
|
|
582
583
|
<div class="no-results">{noResultsMessage}</div>
|
|
583
584
|
{:else if focusedDelayed && listFeatures?.length}
|
|
@@ -83,6 +83,8 @@ export function createLeafletMapController(
|
|
|
83
83
|
html: element,
|
|
84
84
|
className: "",
|
|
85
85
|
iconAnchor: [12, 26],
|
|
86
|
+
iconSize: [25, 30],
|
|
87
|
+
tooltipAnchor: [1, -24],
|
|
86
88
|
}),
|
|
87
89
|
});
|
|
88
90
|
}
|
|
@@ -258,7 +260,11 @@ export function createLeafletMapController(
|
|
|
258
260
|
? new L.Marker(pos, showResultMarkers)
|
|
259
261
|
: createMarker(pos, true);
|
|
260
262
|
|
|
261
|
-
marker
|
|
263
|
+
marker
|
|
264
|
+
.addTo(map)
|
|
265
|
+
.bindTooltip(feature.place_name.replace(/,.*/, ""), {
|
|
266
|
+
direction: "top",
|
|
267
|
+
});
|
|
262
268
|
|
|
263
269
|
const element = marker.getElement();
|
|
264
270
|
|
|
@@ -313,6 +313,14 @@ export function createMaplibreglMapController(
|
|
|
313
313
|
: createMarker(true)
|
|
314
314
|
)
|
|
315
315
|
.setLngLat(feature.center)
|
|
316
|
+
.setPopup(
|
|
317
|
+
new maplibregl.Popup({
|
|
318
|
+
offset: [1, -27],
|
|
319
|
+
closeButton: false,
|
|
320
|
+
closeOnMove: true,
|
|
321
|
+
className: "maptiler-gc-popup",
|
|
322
|
+
}).setText(feature.place_name.replace(/,.*/, ""))
|
|
323
|
+
)
|
|
316
324
|
.addTo(map);
|
|
317
325
|
|
|
318
326
|
const element = marker.getElement();
|
|
@@ -325,10 +333,14 @@ export function createMaplibreglMapController(
|
|
|
325
333
|
|
|
326
334
|
element.addEventListener("mouseenter", () => {
|
|
327
335
|
eventHandler?.({ type: "markerMouseEnter", id: feature.id });
|
|
336
|
+
|
|
337
|
+
marker.togglePopup();
|
|
328
338
|
});
|
|
329
339
|
|
|
330
340
|
element.addEventListener("mouseleave", () => {
|
|
331
341
|
eventHandler?.({ type: "markerMouseLeave", id: feature.id });
|
|
342
|
+
|
|
343
|
+
marker.togglePopup();
|
|
332
344
|
});
|
|
333
345
|
|
|
334
346
|
element.classList.toggle("marker-fuzzy", !!feature.matching_text);
|