@bpd-library/components 1.2.3-beta.6 → 1.2.4-beta.3
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/molecules/map/utilities/mapbox/add-data.d.ts +3 -2
- package/dist/molecules/map/utilities/mapbox/add-data.js +37 -5
- package/dist/molecules/map/utilities/mapbox/add-data.js.map +1 -1
- package/dist/molecules/map/utilities/mapbox/mapbox.js +1 -1
- package/dist/molecules/map/utilities/mapbox/mapbox.js.map +1 -1
- package/dist/molecules/map/utilities/mapbox/search/search.d.ts +1 -1
- package/dist/molecules/map/utilities/mapbox/search/search.js +3 -2
- package/dist/molecules/map/utilities/mapbox/search/search.js.map +1 -1
- package/package.json +4 -4
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { MapDataItem, MapOptions, MapTheme } from '@bpd-library/types';
|
|
2
|
+
import mapboxgl from 'mapbox-gl';
|
|
3
|
+
declare const addData: (map: mapboxgl.Map, data: MapDataItem[], theme: MapTheme, options: MapOptions) => Promise<void>;
|
|
3
4
|
export default addData;
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
+
import { Fragment, h } from '@atomify/jsx';
|
|
1
2
|
import { calculateCenter, functionIsTrue } from '@bpd-library/utilities';
|
|
3
|
+
import mapboxgl from 'mapbox-gl';
|
|
2
4
|
const variants = [];
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
return !!((_a = theme.pointer) === null || _a === void 0 ? void 0 : _a.settings.find((pointerTheme) => pointerTheme.variant === variant));
|
|
6
|
-
};
|
|
7
|
-
const addData = async (map, data, theme) => {
|
|
5
|
+
const debugMarkers = [];
|
|
6
|
+
const addData = async (map, data, theme, options) => {
|
|
8
7
|
const features = {};
|
|
9
8
|
variants.forEach((variant) => (features[variant] = []));
|
|
10
9
|
data.forEach((item) => {
|
|
@@ -47,6 +46,39 @@ const addData = async (map, data, theme) => {
|
|
|
47
46
|
});
|
|
48
47
|
}
|
|
49
48
|
});
|
|
49
|
+
if (options.debugMode) {
|
|
50
|
+
addDebugMarkers(map, data, options);
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
const isPointerVariant = (variant, theme) => {
|
|
54
|
+
var _a;
|
|
55
|
+
return !!((_a = theme.pointer) === null || _a === void 0 ? void 0 : _a.settings.find((pointerTheme) => pointerTheme.variant === variant));
|
|
56
|
+
};
|
|
57
|
+
const addDebugMarkers = (map, mapData, options) => {
|
|
58
|
+
const debugProperties = options.debugProperties || ['id'];
|
|
59
|
+
debugMarkers.forEach((marker) => marker.remove());
|
|
60
|
+
mapData.forEach((mapDataItem) => {
|
|
61
|
+
const center = calculateCenter(mapDataItem.coordinates);
|
|
62
|
+
const marker = new mapboxgl.Popup({
|
|
63
|
+
closeOnMove: false,
|
|
64
|
+
closeOnClick: false,
|
|
65
|
+
closeButton: false,
|
|
66
|
+
focusAfterOpen: false,
|
|
67
|
+
})
|
|
68
|
+
.setDOMContent(h("div", { style: {
|
|
69
|
+
backgroundColor: 'rgba(0,0,0,0.5)',
|
|
70
|
+
color: '#fff',
|
|
71
|
+
fontSize: '10px',
|
|
72
|
+
} }, debugProperties
|
|
73
|
+
.map((property) => mapDataItem[property])
|
|
74
|
+
.filter(Boolean)
|
|
75
|
+
.map((value, i) => (h(Fragment, null,
|
|
76
|
+
i > 0 && h("br", null),
|
|
77
|
+
value)))))
|
|
78
|
+
.setLngLat(center)
|
|
79
|
+
.addTo(map);
|
|
80
|
+
debugMarkers.push(marker);
|
|
81
|
+
});
|
|
50
82
|
};
|
|
51
83
|
export default addData;
|
|
52
84
|
//# sourceMappingURL=add-data.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"add-data.js","sourceRoot":"","sources":["../../../../../src/molecules/map/utilities/mapbox/add-data.
|
|
1
|
+
{"version":3,"file":"add-data.js","sourceRoot":"","sources":["../../../../../src/molecules/map/utilities/mapbox/add-data.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, h } from '@atomify/jsx';\nimport { MapDataItem, MapOptions, MapTheme } from '@bpd-library/types';\nimport { calculateCenter, functionIsTrue } from '@bpd-library/utilities';\nimport mapboxgl from 'mapbox-gl';\n\nconst variants: string[] = [];\nconst debugMarkers: mapboxgl.Popup[] = [];\n\nconst addData = async (\n map: mapboxgl.Map,\n data: MapDataItem[],\n theme: MapTheme,\n options: MapOptions,\n) => {\n const features: { [variant: string]: GeoJSON.Feature[] } = {};\n\n /*\n Create empty arrays for previously set variants,\n this will make sure old variants will be removed.\n */\n variants.forEach((variant) => (features[variant] = []));\n\n /*\n Construct GeoJSON Features\n */\n data.forEach((item) => {\n const { variant } = item;\n\n if (variants.indexOf(variant) < 0) {\n variants.push(variant);\n features[variant] = [];\n }\n\n if (isPointerVariant(variant, theme)) {\n features[variant].push({\n type: 'Feature',\n geometry: {\n coordinates: calculateCenter(item.coordinates),\n type: 'Point',\n },\n properties: {\n ...item,\n },\n });\n } else {\n item.coordinates.forEach((coordinate) => {\n features[variant].push({\n type: 'Feature',\n geometry: {\n coordinates: [coordinate],\n type: 'Polygon',\n },\n properties: {\n ...item,\n },\n });\n });\n }\n });\n\n /*\n Update layer with features\n */\n await functionIsTrue(() => map.isStyleLoaded() && map.isSourceLoaded);\n\n Object.keys(features).forEach((variant) => {\n const variantFeatures = features[variant];\n\n const source = map.getSource(variant) as mapboxgl.GeoJSONSource | undefined;\n\n if (source) {\n source.setData({\n type: 'FeatureCollection',\n features: variantFeatures,\n });\n }\n });\n\n if (options.debugMode) {\n addDebugMarkers(map, data, options);\n }\n};\n\n/**\n * @description Checks if the theme variant is a pointer theme\n * @param {string} variant\n * @param {MapTheme} theme\n * @return {*}\n */\nconst isPointerVariant = (variant: string, theme: MapTheme) => {\n return !!theme.pointer?.settings.find((pointerTheme) => pointerTheme.variant === variant);\n};\n\n/**\n * @description Adds debug markers to the map, based on the mapdata\n * @param {mapboxgl.Map} map\n * @param {MapDataItem[]} mapData\n * @param {MapOptions} options\n */\nconst addDebugMarkers = (map: mapboxgl.Map, mapData: MapDataItem[], options: MapOptions) => {\n const debugProperties = options.debugProperties || ['id'];\n\n // Remove all markers\n debugMarkers.forEach((marker) => marker.remove());\n\n mapData.forEach((mapDataItem) => {\n const center = calculateCenter(mapDataItem.coordinates);\n\n const marker = new mapboxgl.Popup({\n closeOnMove: false,\n closeOnClick: false,\n closeButton: false,\n focusAfterOpen: false,\n })\n .setDOMContent(\n <div\n style={{\n backgroundColor: 'rgba(0,0,0,0.5)',\n color: '#fff',\n fontSize: '10px',\n }}>\n {debugProperties\n .map((property) => mapDataItem[property])\n .filter(Boolean)\n .map((value, i) => (\n <Fragment>\n {i > 0 && <br />}\n {value}\n </Fragment>\n ))}\n </div>,\n )\n .setLngLat(center)\n .addTo(map);\n\n debugMarkers.push(marker);\n });\n};\n\nexport default addData;\n"]}
|
|
@@ -16,7 +16,7 @@ const mapbox = (map, options, theme) => ({
|
|
|
16
16
|
interaction: (setting) => interaction(map, setting),
|
|
17
17
|
center: (coordinates) => center(map, coordinates),
|
|
18
18
|
setupPointers: (element) => setupPointers(map, theme, element),
|
|
19
|
-
addData: (data) => addData(map, data, theme),
|
|
19
|
+
addData: (data) => addData(map, data, theme, options),
|
|
20
20
|
addTooltip: (coordinates, mapDataItem) => addTooltip(map, coordinates, mapDataItem, options.openInTab),
|
|
21
21
|
removeTooltip,
|
|
22
22
|
setFeatureState: (variant, id, type, hover) => setFeatureState(map, variant, id, type, hover),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mapbox.js","sourceRoot":"","sources":["../../../../../src/molecules/map/utilities/mapbox/mapbox.ts"],"names":[],"mappings":"AAYA,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,aAAa,MAAM,2BAA2B,CAAC;AACtD,OAAO,eAAe,MAAM,0BAA0B,CAAC;AACvD,OAAO,OAAO,MAAM,oBAAoB,CAAC;AACzC,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,KAAK,MAAM,kBAAkB,CAAC;AACrC,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAEtD,MAAM,MAAM,GAAG,CAAC,GAAiB,EAAE,OAAmB,EAAE,KAAe,EAAE,EAAE,CAAC,CAAC;IACzE,MAAM,EAAE,CAAC,QAAgC,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAC;IACnE,OAAO,EAAE,CAAC,OAA4B,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC;IAChE,KAAK,EAAE,CAAC,OAA4B,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE,OAAO,CAAC;IAC5D,WAAW,EAAE,CAAC,OAA4B,EAAE,EAAE,CAAC,WAAW,CAAC,GAAG,EAAE,OAAO,CAAC;IACxE,MAAM,EAAE,CAAC,WAAwB,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,WAAW,CAAC;IAC9D,aAAa,EAAE,CAAC,OAAoB,EAAE,EAAE,CAAC,aAAa,CAAC,GAAG,EAAE,KAAK,EAAE,OAAO,CAAC;IAC3E,OAAO,EAAE,CAAC,IAAa,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"mapbox.js","sourceRoot":"","sources":["../../../../../src/molecules/map/utilities/mapbox/mapbox.ts"],"names":[],"mappings":"AAYA,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,aAAa,MAAM,2BAA2B,CAAC;AACtD,OAAO,eAAe,MAAM,0BAA0B,CAAC;AACvD,OAAO,OAAO,MAAM,oBAAoB,CAAC;AACzC,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,KAAK,MAAM,kBAAkB,CAAC;AACrC,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAEtD,MAAM,MAAM,GAAG,CAAC,GAAiB,EAAE,OAAmB,EAAE,KAAe,EAAE,EAAE,CAAC,CAAC;IACzE,MAAM,EAAE,CAAC,QAAgC,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAC;IACnE,OAAO,EAAE,CAAC,OAA4B,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC;IAChE,KAAK,EAAE,CAAC,OAA4B,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE,OAAO,CAAC;IAC5D,WAAW,EAAE,CAAC,OAA4B,EAAE,EAAE,CAAC,WAAW,CAAC,GAAG,EAAE,OAAO,CAAC;IACxE,MAAM,EAAE,CAAC,WAAwB,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,WAAW,CAAC;IAC9D,aAAa,EAAE,CAAC,OAAoB,EAAE,EAAE,CAAC,aAAa,CAAC,GAAG,EAAE,KAAK,EAAE,OAAO,CAAC;IAC3E,OAAO,EAAE,CAAC,IAAa,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC;IAC9D,UAAU,EAAE,CAAC,WAAwB,EAAE,WAAwB,EAAE,EAAE,CAC/D,UAAU,CAAC,GAAG,EAAE,WAAW,EAAE,WAAW,EAAE,OAAO,CAAC,SAAS,CAAC;IAChE,aAAa;IACb,eAAe,EAAE,CAAC,OAAe,EAAE,EAAU,EAAE,IAAuB,EAAE,KAAc,EAAE,EAAE,CACtF,eAAe,CAAC,GAAG,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC;IAClD,MAAM,EAAE,CAAC,aAA+B,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,aAAa,EAAE,OAAO,CAAC;IAChF,YAAY,EAAE,CAAC,gBAAqC,EAAE,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,gBAAgB,CAAC;IAC5F,eAAe,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC;CAC9C,CAAC,CAAC;AAEH,eAAe,MAAM,CAAC","sourcesContent":["import {\n Coordinates,\n MapData,\n MapDataItem,\n MapIsochroneSetting,\n MapOptions,\n MapSearchOptions,\n MapTheme,\n PolygonThemeSetting,\n} from '@bpd-library/types';\n\nimport { MapLayerRasterSettings } from '../../store/map';\nimport addData from './add-data';\nimport center from './center';\nimport { addIsochrone, removeIsochrone } from './isochrone';\nimport setupPointers from './pointers/setup-pointers';\nimport setFeatureState from './polygons/feature-state';\nimport geojson from './polygons/geojson';\nimport interaction from './polygons/interaction';\nimport layer from './polygons/layer';\nimport raster from './raster';\nimport search from './search/search';\nimport { addTooltip, removeTooltip } from './tooltip';\n\nconst mapbox = (map: mapboxgl.Map, options: MapOptions, theme: MapTheme) => ({\n raster: (settings: MapLayerRasterSettings) => raster(map, settings),\n geojson: (setting: PolygonThemeSetting) => geojson(map, setting),\n layer: (setting: PolygonThemeSetting) => layer(map, setting),\n interaction: (setting: PolygonThemeSetting) => interaction(map, setting),\n center: (coordinates: Coordinates) => center(map, coordinates),\n setupPointers: (element: HTMLElement) => setupPointers(map, theme, element),\n addData: (data: MapData) => addData(map, data, theme, options),\n addTooltip: (coordinates: Coordinates, mapDataItem: MapDataItem) =>\n addTooltip(map, coordinates, mapDataItem, options.openInTab),\n removeTooltip,\n setFeatureState: (variant: string, id: string, type: 'hover' | 'focus', hover: boolean) =>\n setFeatureState(map, variant, id, type, hover),\n search: (searchOptions: MapSearchOptions) => search(map, searchOptions, options),\n addIsochrone: (isochroneSetting: MapIsochroneSetting) => addIsochrone(map, isochroneSetting),\n removeIsochrone: () => removeIsochrone(map),\n});\n\nexport default mapbox;\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { MapOptions, MapSearchOptions } from '@bpd-library/types';
|
|
2
2
|
import mapboxgl from 'mapbox-gl';
|
|
3
|
-
declare const search: (map: mapboxgl.Map, { hook, kmPadding, onSearchSuggestion, noZoomAfterSearch }: MapSearchOptions, { searchCountryIsoCodes, language }: MapOptions) => Promise<void>;
|
|
3
|
+
declare const search: (map: mapboxgl.Map, { hook, kmPadding, onSearchSuggestion, noZoomAfterSearch, types, }: MapSearchOptions, { searchCountryIsoCodes, language }: MapOptions) => Promise<void>;
|
|
4
4
|
export default search;
|
|
@@ -5,7 +5,8 @@ import { clearSearchResult, getMapboxData, mapStore, updateSearchIsMoving, updat
|
|
|
5
5
|
import { fitBounds } from '../../fit-bounds';
|
|
6
6
|
import getCityAlternativeSuggestions from './alternative-city-suggestions';
|
|
7
7
|
const MIN_KM_PADDING = 10;
|
|
8
|
-
const
|
|
8
|
+
const DEFAULT_TYPES = 'region,district,place,neighborhood';
|
|
9
|
+
const search = async (map, { hook, kmPadding = MIN_KM_PADDING, onSearchSuggestion, noZoomAfterSearch, types = DEFAULT_TYPES, }, { searchCountryIsoCodes = ['nl', 'de'], language = 'nl' }) => {
|
|
9
10
|
const element = document.querySelector(hook);
|
|
10
11
|
const bounds = getCountryBoundingBox(searchCountryIsoCodes);
|
|
11
12
|
if (!element) {
|
|
@@ -26,7 +27,7 @@ const search = async (map, { hook, kmPadding = MIN_KM_PADDING, onSearchSuggestio
|
|
|
26
27
|
accessToken: mapboxgl.accessToken,
|
|
27
28
|
mapboxgl,
|
|
28
29
|
countries: searchCountryIsoCodes.join(',').toUpperCase(),
|
|
29
|
-
types
|
|
30
|
+
types,
|
|
30
31
|
localGeocoder,
|
|
31
32
|
language,
|
|
32
33
|
enableEventLogging: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search.js","sourceRoot":"","sources":["../../../../../../src/molecules/map/utilities/mapbox/search/search.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAEjC,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,WAAW,EACX,iBAAiB,EACjB,qBAAqB,EACrB,eAAe,EACf,iBAAiB,GACpB,MAAM,wBAAwB,CAAC;AAChC,OAAO,QAAQ,MAAM,WAAW,CAAC;AAEjC,OAAO,EACH,iBAAiB,EACjB,aAAa,EAEb,QAAQ,EACR,oBAAoB,EACpB,kBAAkB,GACrB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,6BAA6B,MAAM,gCAAgC,CAAC;AAE3E,MAAM,cAAc,GAAG,EAAE,CAAC;AAE1B,MAAM,MAAM,GAAG,KAAK,EAChB,GAAiB,EACjB,EAAE,IAAI,EAAE,SAAS,GAAG,cAAc,EAAE,kBAAkB,EAAE,iBAAiB,EAAoB,EAC7F,EAAE,qBAAqB,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,EAAc,EACvE,EAAE;IACA,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,MAAM,GAAG,qBAAqB,CAAC,qBAAqB,CAAC,CAAC;IAE5D,IAAI,CAAC,OAAO,EAAE;QACV,IAAI,WAAW,CAAC,OAAO;YAAE,OAAO,CAAC,KAAK,CAAC,kCAAkC,IAAI,EAAE,CAAC,CAAC;QACjF,OAAO;KACV;IAED,MAAM,YAAY,GAAG,OAAO,CAAC,aAAa,CAAC,4BAA4B,CAAqB,CAAC;IAC7F,MAAM,IAAI,GAAG,YAAY,CAAC,OAAO,CAAkB,MAAM,CAAC,CAAC;IAC3D,MAAM,kBAAkB,GAAG,OAAO,CAAC,aAAa,CAC5C,kCAAkC,CACtB,CAAC;IACjB,MAAM,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC,6BAA6B,CAAsB,CAAC;IAEhG,IAAI,QAAyB,CAAC;IAC9B,IAAI,WAA4B,CAAC;IAEjC,IAAI,EAAE,CAAC;IAEP,KAAK,UAAU,IAAI;QAEf,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,MAAM,MAAM,CAAC,4BAA4B,CAAC,CAAC;QAE/E,QAAQ,GAAG,IAAI,cAAc,CAAC;YAC1B,WAAW,EAAE,QAAQ,CAAC,WAAW;YACjC,QAAQ;YACR,SAAS,EAAE,qBAAqB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE;YACxD,KAAK,EAAE,oCAAoC;YAC3C,aAAa;YACb,QAAQ;YACR,kBAAkB,EAAE,KAAK;YACzB,MAAM,EAAE,KAAK;SAChB,CAAC,CAAC;QAEH,GAAG,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QAEzB,UAAU,EAAE,CAAC;QACb,SAAS,EAAE,CAAC;IAChB,CAAC;IAED,SAAS,UAAU;QACf,MAAM,kBAAkB,GAAG,QAAQ,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;QAEpD,YAAY,CAAC,gBAAgB,CAAC,SAAS,EAAE,kBAAkB,CAAC,CAAC;QAC7D,aAAa,CAAC,gBAAgB,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;QAC3D,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EAAE;QAE5D,eAAe,CAAC,YAAa,EAAE,kBAAkB,CAAC,CAAC;QAEnD,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,CAAC,OAAY,EAAE,EAAE;YACpC,WAAW,GAAG,OAAO,CAAC;YAEtB,iBAAiB,CAAC,WAAW,CAAC,CAAC;QACnC,CAAC,CAAC,CAAC;IACP,CAAC;IAED,SAAS,SAAS;QACd,kBAAkB,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC;QACxC,QAAQ,CAAC,SAAS,CAAC,kBAAkB,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAC7D,CAAC;IAED,SAAS,kBAAkB,CAAC,EAAE,YAAY,EAAY;QAClD,IAAI,YAAY,EAAE;YACd,QAAQ,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,aAAa,CAAC,OAAY;;gBAC7E,WAAW,GAAG,OAAO,CAAC;gBAGtB,MAAM,eAAe,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,0CAAE,IAAI,CAC3C,CAAC,EAAE,IAAI,EAAqB,EAAE,EAAE,CAC5B,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,QAAO,YAAY,CAAC,WAAW,EAAE,CACzD,CAAC;gBAEF,IAAI,eAAe,EAAE;oBACjB,gBAAgB,CAAC,eAAe,CAAC,CAAC;iBACrC;qBAAM;oBACH,qBAAqB,EAAE,CAAC;iBAC3B;gBAED,QAAQ,CAAC,GAAG,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;YAC3C,CAAC,CAAC,CAAC;SACN;IACL,CAAC;IAED,SAAS,kBAAkB;QACvB,yBAAyB,EAAE,CAAC;IAChC,CAAC;IAED,SAAS,eAAe;QACpB,IAAI,iBAAiB;YAAE,OAAO;QAE9B,SAAS,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;IAC3B,CAAC;IAED,SAAS,SAAS,CAAC,CAAgB;QAC/B,MAAM,EAAE,KAAK,EAAE,GAAG,YAAa,CAAC;QAEhC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YACnB,IAAI,CAAC,KAAK,EAAE;gBACR,QAAQ,EAAE,CAAC;gBACX,OAAO;aACV;iBAAM;gBACH,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,WAAW;oBACvC,qBAAqB,EAAE,CAAC;oBACxB,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,GAAG;oBAErB,QAAQ,CAAC,GAAG,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;gBACzC,CAAC,CAAC,CAAC;aACN;SACJ;QAED,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE;YACnB,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;SAC5B;aAAM;YACH,WAAW,GAAG,SAAS,CAAC;YACxB,eAAe,EAAE,CAAC;YAClB,yBAAyB,EAAE,CAAC;YAC5B,iBAAiB,EAAE,CAAC;SACvB;IACL,CAAC;IAED,SAAS,iBAAiB;QACtB,MAAM,EAAE,KAAK,EAAE,GAAG,YAAa,CAAC;QAEhC,IAAI,CAAC,KAAK,EAAE;YACR,QAAQ,EAAE,CAAC;SACd;aAAM;YACH,qBAAqB,EAAE,CAAC;SAC3B;IACL,CAAC;IAED,SAAS,qBAAqB;QAC1B,MAAM,eAAe,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;QAEjD,gBAAgB,CAAC,eAAe,CAAC,CAAC;IACtC,CAAC;IAED,SAAS,gBAAgB,CAAC,OAAY;QAClC,WAAW,CAAC,OAAO,CAAC,CAAC;QACrB,yBAAyB,EAAE,CAAC;IAChC,CAAC;IAED,SAAS,yBAAyB;QAC9B,kBAAkB,CAAC,SAAS,GAAG,EAAE,CAAC;IACtC,CAAC;IAED,SAAS,QAAQ;QACb,WAAW,GAAG,SAAS,CAAC;QACxB,eAAe,EAAE,CAAC;QAClB,yBAAyB,EAAE,CAAC;QAC5B,iBAAiB,EAAE,CAAC;QACpB,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,GAAG;IACzB,CAAC;IAED,SAAS,aAAa,CAAC,KAAa;QAChC,MAAM,gBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAuB,EAAE,EAAE;YACxE,MAAM,MAAM,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;YAEhD,OAAO;gBACH,UAAU,EAAE,KAAK;gBACjB,IAAI;gBACJ,MAAM;gBACN,IAAI;gBACJ,EAAE;aACL,CAAC;QACN,CAAC,CAAC;QAEF,MAAM,iBAAiB,GAAG,kBAAkB;YACxC,CAAC,CAAC,kBAAkB,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,GAAG,CAAC,gBAAgB,CAAC;YAC/D,CAAC,CAAC,EAAE,CAAC;QACT,MAAM,gBAAgB,GAAG,6BAA6B,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,GAAG,CAC3E,gBAAgB,CACnB,CAAC;QAEF,OAAO,CAAC,GAAG,iBAAiB,EAAE,GAAG,gBAAgB,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACnE,CAAC;IAED,SAAS,WAAW,CAAC,MAAW;QAC5B,IAAI,CAAC,MAAM,EAAE;YACT,kBAAkB,CAAC;gBACf,KAAK,EAAE,EAAE;gBACT,MAAM,EAAE,KAAK;aAChB,CAAC,CAAC;YAEH,eAAe,EAAE,CAAC;YAElB,OAAO;SACV;QAED,MAAM,mBAAmB,GAAG,iBAAiB,CAAC,MAAM,CAAC,IAAmB,EAAE,SAAS,CAAC,CAAC;QACrF,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAmB,CAAC;QAEvD,MAAM,OAAO,GAAG,aAAa,EAAE,CAAC;QAChC,MAAM,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CACzC,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,mBAAmB,CAAC,CAC3D,CAAC;QAEF,IAAI,CAAC,iBAAiB,EAAE;YACpB,GAAG,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC;YAGnC,oBAAoB,CAAC,IAAI,CAAC,CAAC;YAE3B,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE;gBACrB,oBAAoB,CAAC,KAAK,CAAC,CAAC;YAChC,CAAC,CAAC,CAAC;SACN;QAED,kBAAkB,CAAC;YACf,KAAK,EAAE,YAAY;YACnB,MAAM;YACN,mBAAmB;YACnB,mBAAmB;SACtB,CAAC,CAAC;IACP,CAAC;IAED,SAAS,qBAAqB,CAAC,OAAY;QACvC,YAAY,CAAC,KAAK,GAAG,OAAO,CAAC,UAAU,CAAC;QAExC,yBAAyB,EAAE,CAAC;QAC5B,WAAW,CAAC,OAAO,CAAC,CAAC;IACzB,CAAC;IAED,SAAS,iBAAiB,CAAC,WAAgB;QACvC,yBAAyB,EAAE,CAAC;QAE5B,kBAAkB,CAAC,MAAM,CACrB,UAAI,KAAK,EAAC,yBAAyB,IAC9B,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAY,EAAE,EAAE,CAAC,CACxC,UAAI,KAAK,EAAC,wBAAwB;YAC9B,cAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,IAChD,OAAO,CAAC,UAAU,CACd,CACR,CACR,CAAC,CACD,CACR,CAAC;IACN,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { h } from '@atomify/jsx';\nimport { BoundingBox, MapOptions, MapSearchOptions, MapSearchSuggestion } from '@bpd-library/types';\nimport {\n calculateBoundingBoxCenter,\n debounce,\n environment,\n expandBoundingBox,\n getCountryBoundingBox,\n useClickOutside,\n withinBoundingBox,\n} from '@bpd-library/utilities';\nimport mapboxgl from 'mapbox-gl';\n\nimport {\n clearSearchResult,\n getMapboxData,\n MapState,\n mapStore,\n updateSearchIsMoving,\n updateSearchResult,\n} from '../../../store/map';\nimport { fitBounds } from '../../fit-bounds';\nimport getCityAlternativeSuggestions from './alternative-city-suggestions';\n\nconst MIN_KM_PADDING = 10;\n\nconst search = async (\n map: mapboxgl.Map,\n { hook, kmPadding = MIN_KM_PADDING, onSearchSuggestion, noZoomAfterSearch }: MapSearchOptions,\n { searchCountryIsoCodes = ['nl', 'de'], language = 'nl' }: MapOptions,\n) => {\n const element = document.querySelector(hook);\n const bounds = getCountryBoundingBox(searchCountryIsoCodes);\n\n if (!element) {\n if (environment.isLocal) console.error(`Search element can't be found: ${hook}`);\n return;\n }\n\n const inputElement = element.querySelector('[js-hook-map-search-input]') as HTMLInputElement;\n const form = inputElement.closest<HTMLFormElement>('form');\n const suggestionsElement = element.querySelector(\n '[js-hook-map-search-suggestions]',\n ) as HTMLElement;\n const buttonElement = element.querySelector('[js-hook-map-search-button]') as HTMLButtonElement;\n\n let geocoder: any | undefined;\n let suggestions: any | undefined;\n\n init();\n\n async function init() {\n // Dynamically import geocoder library\n const { default: MapboxGeocoder } = await import('@mapbox/mapbox-gl-geocoder');\n\n geocoder = new MapboxGeocoder({\n accessToken: mapboxgl.accessToken,\n mapboxgl,\n countries: searchCountryIsoCodes.join(',').toUpperCase(),\n types: 'region,district,place,neighborhood',\n localGeocoder,\n language,\n enableEventLogging: false,\n marker: false,\n });\n\n map.addControl(geocoder);\n\n bindEvents();\n subscribe();\n }\n\n function bindEvents() {\n const debouncedOnKeyDown = debounce(onKeyDown, 300);\n\n inputElement.addEventListener('keydown', debouncedOnKeyDown);\n buttonElement.addEventListener('click', handleButtonClick);\n form?.addEventListener('submit', (e) => e.preventDefault());\n\n useClickOutside(inputElement!, handleClickOutside);\n\n geocoder.on('results', (results: any) => {\n suggestions = results;\n\n renderSuggestions(suggestions);\n });\n }\n\n function subscribe() {\n handleManualSearch(mapStore.getState());\n mapStore.subscribe(handleManualSearch, ['manualSearch']);\n }\n\n function handleManualSearch({ manualSearch }: MapState) {\n if (manualSearch) {\n geocoder.setInput(manualSearch).on('results', function handleResults(results: any) {\n suggestions = results;\n\n // First check if there's an exact match, in some cases bigger cities that are not an exact match are returned as first and most relevant result, while doing a manual search you always want an exact match.\n const firstExactMatch = results?.features?.find(\n ({ text }: { text?: string }) =>\n text?.toLowerCase() === manualSearch.toLowerCase(),\n );\n\n if (firstExactMatch) {\n submitSuggestion(firstExactMatch);\n } else {\n submitFirstSuggestion();\n }\n\n geocoder.off('results', handleResults);\n });\n }\n }\n\n function handleClickOutside() {\n clearSuggestionsContainer();\n }\n\n function handleFitBounds() {\n if (noZoomAfterSearch) return;\n\n fitBounds(map, bounds);\n }\n\n function onKeyDown(e: KeyboardEvent) {\n const { value } = inputElement!;\n\n if (e.key === 'Enter') {\n if (!value) {\n clearAll();\n return;\n } else {\n geocoder.on('results', function handleEnter() {\n submitFirstSuggestion();\n inputElement?.blur();\n\n geocoder.off('results', handleEnter);\n });\n }\n }\n\n if (value.length >= 3) {\n geocoder.setInput(value);\n } else {\n suggestions = undefined;\n handleFitBounds();\n clearSuggestionsContainer();\n clearSearchResult();\n }\n }\n\n function handleButtonClick() {\n const { value } = inputElement!;\n\n if (!value) {\n clearAll();\n } else {\n submitFirstSuggestion();\n }\n }\n\n function submitFirstSuggestion() {\n const firstSuggestion = suggestions?.features[0];\n\n submitSuggestion(firstSuggestion);\n }\n\n function submitSuggestion(feature: any) {\n updateStore(feature);\n clearSuggestionsContainer();\n }\n\n function clearSuggestionsContainer() {\n suggestionsElement.innerHTML = '';\n }\n\n function clearAll() {\n suggestions = undefined;\n handleFitBounds();\n clearSuggestionsContainer();\n clearSearchResult();\n inputElement?.blur();\n }\n\n function localGeocoder(query: string) {\n const createSuggestion = ({ title, bbox, type, id }: MapSearchSuggestion) => {\n const center = calculateBoundingBoxCenter(bbox);\n\n return {\n place_name: title,\n bbox,\n center,\n type,\n id,\n };\n };\n\n const customSuggestions = onSearchSuggestion\n ? onSearchSuggestion(query.toLowerCase()).map(createSuggestion)\n : [];\n const cityAlternatives = getCityAlternativeSuggestions(query.toLowerCase()).map(\n createSuggestion,\n );\n\n return [...customSuggestions, ...cityAlternatives].slice(0, 4);\n }\n\n function updateStore(result: any) {\n if (!result) {\n updateSearchResult({\n items: [],\n result: false,\n });\n\n handleFitBounds();\n\n return;\n }\n\n const expandedBoundingBox = expandBoundingBox(result.bbox as BoundingBox, kmPadding);\n const originalBoundingBox = result.bbox as BoundingBox;\n\n const mapData = getMapboxData();\n const filteredData = mapData.filter((item) =>\n withinBoundingBox(item.coordinates, expandedBoundingBox),\n );\n\n if (!noZoomAfterSearch) {\n map.fitBounds(expandedBoundingBox);\n\n // Update searchIsMoving boolean in store. Is used to block other focus interactions when searched.\n updateSearchIsMoving(true);\n\n map.once('moveend', () => {\n updateSearchIsMoving(false);\n });\n }\n\n updateSearchResult({\n items: filteredData,\n result,\n originalBoundingBox,\n expandedBoundingBox,\n });\n }\n\n function handleSuggestionClick(feature: any) {\n inputElement.value = feature.place_name;\n\n clearSuggestionsContainer();\n updateStore(feature);\n }\n\n function renderSuggestions(suggestions: any) {\n clearSuggestionsContainer();\n\n suggestionsElement.append(\n <ul class=\"map-search__suggestions\">\n {suggestions.features.map((feature: any) => (\n <li class=\"map-search__suggestion\">\n <button onClick={() => handleSuggestionClick(feature)}>\n {feature.place_name}\n </button>\n </li>\n ))}\n </ul>,\n );\n }\n};\n\nexport default search;\n"]}
|
|
1
|
+
{"version":3,"file":"search.js","sourceRoot":"","sources":["../../../../../../src/molecules/map/utilities/mapbox/search/search.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@atomify/jsx';\nimport { BoundingBox, MapOptions, MapSearchOptions, MapSearchSuggestion } from '@bpd-library/types';\nimport {\n calculateBoundingBoxCenter,\n debounce,\n environment,\n expandBoundingBox,\n getCountryBoundingBox,\n useClickOutside,\n withinBoundingBox,\n} from '@bpd-library/utilities';\nimport mapboxgl from 'mapbox-gl';\n\nimport {\n clearSearchResult,\n getMapboxData,\n MapState,\n mapStore,\n updateSearchIsMoving,\n updateSearchResult,\n} from '../../../store/map';\nimport { fitBounds } from '../../fit-bounds';\nimport getCityAlternativeSuggestions from './alternative-city-suggestions';\n\nconst MIN_KM_PADDING = 10;\nconst DEFAULT_TYPES = 'region,district,place,neighborhood';\n\nconst search = async (\n map: mapboxgl.Map,\n {\n hook,\n kmPadding = MIN_KM_PADDING,\n onSearchSuggestion,\n noZoomAfterSearch,\n types = DEFAULT_TYPES,\n }: MapSearchOptions,\n { searchCountryIsoCodes = ['nl', 'de'], language = 'nl' }: MapOptions,\n) => {\n const element = document.querySelector(hook);\n const bounds = getCountryBoundingBox(searchCountryIsoCodes);\n\n if (!element) {\n if (environment.isLocal) console.error(`Search element can't be found: ${hook}`);\n return;\n }\n\n const inputElement = element.querySelector('[js-hook-map-search-input]') as HTMLInputElement;\n const form = inputElement.closest<HTMLFormElement>('form');\n const suggestionsElement = element.querySelector(\n '[js-hook-map-search-suggestions]',\n ) as HTMLElement;\n const buttonElement = element.querySelector('[js-hook-map-search-button]') as HTMLButtonElement;\n\n let geocoder: any | undefined;\n let suggestions: any | undefined;\n\n init();\n\n async function init() {\n // Dynamically import geocoder library\n const { default: MapboxGeocoder } = await import('@mapbox/mapbox-gl-geocoder');\n\n geocoder = new MapboxGeocoder({\n accessToken: mapboxgl.accessToken,\n mapboxgl,\n countries: searchCountryIsoCodes.join(',').toUpperCase(),\n types,\n localGeocoder,\n language,\n enableEventLogging: false,\n marker: false,\n });\n\n map.addControl(geocoder);\n\n bindEvents();\n subscribe();\n }\n\n function bindEvents() {\n const debouncedOnKeyDown = debounce(onKeyDown, 300);\n\n inputElement.addEventListener('keydown', debouncedOnKeyDown);\n buttonElement.addEventListener('click', handleButtonClick);\n form?.addEventListener('submit', (e) => e.preventDefault());\n\n useClickOutside(inputElement!, handleClickOutside);\n\n geocoder.on('results', (results: any) => {\n suggestions = results;\n\n renderSuggestions(suggestions);\n });\n }\n\n function subscribe() {\n handleManualSearch(mapStore.getState());\n mapStore.subscribe(handleManualSearch, ['manualSearch']);\n }\n\n function handleManualSearch({ manualSearch }: MapState) {\n if (manualSearch) {\n geocoder.setInput(manualSearch).on('results', function handleResults(results: any) {\n suggestions = results;\n\n // First check if there's an exact match, in some cases bigger cities that are not an exact match are returned as first and most relevant result, while doing a manual search you always want an exact match.\n const firstExactMatch = results?.features?.find(\n ({ text }: { text?: string }) =>\n text?.toLowerCase() === manualSearch.toLowerCase(),\n );\n\n if (firstExactMatch) {\n submitSuggestion(firstExactMatch);\n } else {\n submitFirstSuggestion();\n }\n\n geocoder.off('results', handleResults);\n });\n }\n }\n\n function handleClickOutside() {\n clearSuggestionsContainer();\n }\n\n function handleFitBounds() {\n if (noZoomAfterSearch) return;\n\n fitBounds(map, bounds);\n }\n\n function onKeyDown(e: KeyboardEvent) {\n const { value } = inputElement!;\n\n if (e.key === 'Enter') {\n if (!value) {\n clearAll();\n return;\n } else {\n geocoder.on('results', function handleEnter() {\n submitFirstSuggestion();\n inputElement?.blur();\n\n geocoder.off('results', handleEnter);\n });\n }\n }\n\n if (value.length >= 3) {\n geocoder.setInput(value);\n } else {\n suggestions = undefined;\n handleFitBounds();\n clearSuggestionsContainer();\n clearSearchResult();\n }\n }\n\n function handleButtonClick() {\n const { value } = inputElement!;\n\n if (!value) {\n clearAll();\n } else {\n submitFirstSuggestion();\n }\n }\n\n function submitFirstSuggestion() {\n const firstSuggestion = suggestions?.features[0];\n\n submitSuggestion(firstSuggestion);\n }\n\n function submitSuggestion(feature: any) {\n updateStore(feature);\n clearSuggestionsContainer();\n }\n\n function clearSuggestionsContainer() {\n suggestionsElement.innerHTML = '';\n }\n\n function clearAll() {\n suggestions = undefined;\n handleFitBounds();\n clearSuggestionsContainer();\n clearSearchResult();\n inputElement?.blur();\n }\n\n function localGeocoder(query: string) {\n const createSuggestion = ({ title, bbox, type, id }: MapSearchSuggestion) => {\n const center = calculateBoundingBoxCenter(bbox);\n\n return {\n place_name: title,\n bbox,\n center,\n type,\n id,\n };\n };\n\n const customSuggestions = onSearchSuggestion\n ? onSearchSuggestion(query.toLowerCase()).map(createSuggestion)\n : [];\n const cityAlternatives = getCityAlternativeSuggestions(query.toLowerCase()).map(\n createSuggestion,\n );\n\n return [...customSuggestions, ...cityAlternatives].slice(0, 4);\n }\n\n function updateStore(result: any) {\n if (!result) {\n updateSearchResult({\n items: [],\n result: false,\n });\n\n handleFitBounds();\n\n return;\n }\n\n const expandedBoundingBox = expandBoundingBox(result.bbox as BoundingBox, kmPadding);\n const originalBoundingBox = result.bbox as BoundingBox;\n\n const mapData = getMapboxData();\n const filteredData = mapData.filter((item) =>\n withinBoundingBox(item.coordinates, expandedBoundingBox),\n );\n\n if (!noZoomAfterSearch) {\n map.fitBounds(expandedBoundingBox);\n\n // Update searchIsMoving boolean in store. Is used to block other focus interactions when searched.\n updateSearchIsMoving(true);\n\n map.once('moveend', () => {\n updateSearchIsMoving(false);\n });\n }\n\n updateSearchResult({\n items: filteredData,\n result,\n originalBoundingBox,\n expandedBoundingBox,\n });\n }\n\n function handleSuggestionClick(feature: any) {\n inputElement.value = feature.place_name;\n\n clearSuggestionsContainer();\n updateStore(feature);\n }\n\n function renderSuggestions(suggestions: any) {\n clearSuggestionsContainer();\n\n suggestionsElement.append(\n <ul class=\"map-search__suggestions\">\n {suggestions.features.map((feature: any) => (\n <li class=\"map-search__suggestion\">\n <button onClick={() => handleSuggestionClick(feature)}>\n {feature.place_name}\n </button>\n </li>\n ))}\n </ul>,\n );\n }\n};\n\nexport default search;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bpd-library/components",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.4-beta.3",
|
|
4
4
|
"description": "Description",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -46,14 +46,14 @@
|
|
|
46
46
|
"publishConfig": {
|
|
47
47
|
"access": "public"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "a920a5af921d195c1ad8846fa7d6049b353b33e1",
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@atomify/core": "2.4.1",
|
|
52
52
|
"@atomify/hooks": "1.1.11",
|
|
53
53
|
"@atomify/jsx": "1.7.1",
|
|
54
54
|
"@atomify/kit": "1.1.11",
|
|
55
|
-
"@bpd-library/types": "^1.2.
|
|
56
|
-
"@bpd-library/utilities": "^1.2.
|
|
55
|
+
"@bpd-library/types": "^1.2.4-beta.3",
|
|
56
|
+
"@bpd-library/utilities": "^1.2.4-beta.3",
|
|
57
57
|
"@mapbox/mapbox-gl-geocoder": "^4.7.0",
|
|
58
58
|
"@mapbox/mapbox-gl-language": "^0.10.1",
|
|
59
59
|
"@turf/helpers": "^6.5.0",
|