waygo-maps 1.0.29 → 1.0.31

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.
Files changed (3) hide show
  1. package/dist/bundle.js +1 -1
  2. package/dist/style.css +12 -2
  3. package/package.json +1 -1
package/dist/bundle.js CHANGED
@@ -603,7 +603,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
603
603
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
604
604
 
605
605
  "use strict";
606
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _core_Control__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core/Control */ \"./src/core/Control.js\");\n/* harmony import */ var _utils_coordinateSystems__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils/coordinateSystems */ \"./src/utils/coordinateSystems.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _superPropGet(t, e, r, o) { var p = _get(_getPrototypeOf(1 & o ? t.prototype : t), e, r); return 2 & o ? function (t) { return p.apply(r, t); } : p; }\nfunction _get() { return _get = \"undefined\" != typeof Reflect && Reflect.get ? Reflect.get.bind() : function (e, t, r) { var p = _superPropBase(e, t); if (p) { var n = Object.getOwnPropertyDescriptor(p, t); return n.get ? n.get.call(arguments.length < 3 ? e : r) : n.value; } }, _get.apply(null, arguments); }\nfunction _superPropBase(t, o) { for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t));); return t; }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\nvar InteractionControl = /*#__PURE__*/function (_Control) {\n function InteractionControl() {\n var _this;\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n _classCallCheck(this, InteractionControl);\n _this = _callSuper(this, InteractionControl, [options]);\n _this.map = null;\n _this.previouslySelectedFeature = null;\n _this.previouslySelectedIcon = null;\n _this.previouslySelectedTextColor = null;\n _this.previouslySelectedTextOffset = null;\n // this.previouslyHoveredTextColor = null;\n _this.previouslyHoveredFeature = null;\n _this.originalTextColor = null;\n _this.textColorReference = {};\n _this.currentView = null; // Can be set to 'desktop' or 'mobile'\n\n _this.selectedTextColor = '#BE2E28';\n return _this;\n }\n _inherits(InteractionControl, _Control);\n return _createClass(InteractionControl, [{\n key: \"onAdd\",\n value: function onAdd(map) {\n this.map = map;\n this.container = document.createElement('div');\n this.container.className = 'interaction-control-container';\n this.initializeEventListeners();\n this._attachResizeListener();\n this._initialize();\n this.createHighlightedContentLayer();\n this.createSelectedContentLayer();\n this.storeTextColorReferences();\n this.applyHoverEffectToAllSymbolLayers();\n return this.container;\n }\n }, {\n key: \"_initialize\",\n value: function _initialize() {\n var containerWidth = this.map.mapContainer.offsetWidth;\n this._configureView(containerWidth);\n }\n }, {\n key: \"onRemove\",\n value: function onRemove() {\n _superPropGet(InteractionControl, \"onRemove\", this, 3)([]);\n }\n }, {\n key: \"_attachResizeListener\",\n value: function _attachResizeListener() {\n var _this2 = this;\n window.addEventListener('resize', function () {\n var newWidth = _this2.map.mapContainer.offsetWidth;\n _this2._configureView(newWidth);\n });\n }\n }, {\n key: \"_configureView\",\n value: function _configureView(width) {\n if (width > 767) {\n this._setViewForDesktop();\n } else {\n this._setViewForMobile();\n }\n }\n }, {\n key: \"_setViewForDesktop\",\n value: function _setViewForDesktop() {\n this.currentView = 'desktop';\n }\n }, {\n key: \"_setViewForMobile\",\n value: function _setViewForMobile() {\n this.currentView = 'mobile';\n }\n }, {\n key: \"initializeEventListeners\",\n value: function initializeEventListeners() {\n var _this3 = this;\n this.map.map.on('styleimagemissing', function (e) {\n var missingImage = e.id;\n console.warn(\"Image \\\"\".concat(missingImage, \"\\\" could not be loaded.\"));\n });\n this.map.map.on('click', function (e) {\n _this3._handleClick(e);\n });\n this.map.on('state:default', this._handleDefaultState.bind(this));\n this.map.on('state:search', this._handleSearchState.bind(this));\n this.map.on('state:selectedContent', this._handleSelectedContentState.bind(this));\n this.map.on('state:directions', this._handleDirectionsState.bind(this));\n this.map.on('additionalSearchResults', this._handleAdditionalSearch.bind(this));\n this.map.on('hoverSearchResult', this._handleHoverSearchResult.bind(this));\n this.map.on('hoverEndSearchResult', this._handleHoverEndSearchResult.bind(this));\n }\n }, {\n key: \"storeTextColorReferences\",\n value: function storeTextColorReferences() {\n var _this4 = this;\n var layers = this.map.map.getStyle().layers;\n layers.forEach(function (layer) {\n if (layer.type === 'symbol') {\n var textColor = _this4.map.map.getPaintProperty(layer.id, 'text-color');\n if (textColor !== undefined) {\n _this4.textColorReference[layer.id] = textColor; // Store the text color reference using the layer ID as the key\n }\n }\n });\n }\n }, {\n key: \"createSelectedContentLayer\",\n value: function createSelectedContentLayer() {\n this.map.map.addSource('selected-content', {\n 'type': 'geojson',\n 'data': {\n 'type': 'FeatureCollection',\n 'features': [] // Initially empty, you will add features dynamically\n }\n });\n\n // Add a layer that references this GeoJSON source and matches the styling in your Mapbox Studio project\n this.map.map.addLayer({\n 'id': 'selected-content-layer',\n 'type': 'symbol',\n // Or 'fill', 'line', etc. based on your needs\n 'source': 'selected-content',\n 'layout': {\n 'text-field': ['get', 'name'],\n 'text-font': ['Inter Medium'],\n 'text-size': 14,\n 'text-justify': 'left',\n 'text-anchor': 'bottom-left',\n 'text-offset': [1.3, -1],\n 'icon-image': 'selected-pin',\n 'icon-size': 0.5,\n 'icon-offset': [0, -5],\n 'icon-anchor': 'bottom',\n 'symbol-z-elevate': true,\n 'text-padding': 10,\n 'icon-padding': 5\n },\n 'paint': {\n 'text-color': '#BE2E28',\n 'text-halo-color': '#ffffff',\n 'text-halo-width': 1\n }\n });\n }\n }, {\n key: \"createHighlightedContentLayer\",\n value: function createHighlightedContentLayer() {\n this.map.map.addSource('highlighted-content', {\n 'type': 'geojson',\n 'data': {\n 'type': 'FeatureCollection',\n 'features': []\n }\n });\n this.map.map.addLayer({\n 'id': 'highlighted-content-layer',\n 'type': 'symbol',\n 'source': 'highlighted-content',\n 'layout': {\n 'text-field': ['get', 'name'],\n 'text-font': ['Inter Medium'],\n 'text-size': 14,\n 'text-justify': 'left',\n 'text-anchor': 'bottom-left',\n 'text-offset': [1.2, -0.6],\n 'icon-image': 'highlightedPin',\n 'icon-size': 0.5,\n 'icon-offset': [0, -5],\n 'icon-anchor': 'bottom',\n 'symbol-z-elevate': true,\n 'text-padding': 5,\n 'icon-padding': 5\n },\n 'paint': {\n 'text-color': '#1E1E1E',\n 'text-halo-color': '#ffffff',\n 'text-halo-width': 1\n }\n });\n }\n }, {\n key: \"clearSelectedContentLayer\",\n value: function clearSelectedContentLayer() {\n this.map.map.getSource('selected-content').setData({\n 'type': 'FeatureCollection',\n 'features': []\n });\n }\n }, {\n key: \"clearHighlightedContentLayer\",\n value: function clearHighlightedContentLayer() {\n this.map.map.getSource('highlighted-content').setData({\n 'type': 'FeatureCollection',\n 'features': []\n });\n }\n }, {\n key: \"addSelectedFeature\",\n value: function addSelectedFeature(coordinates, properties) {\n var source = this.map.map.getSource('selected-content');\n var currentData = source._data;\n var newFeature = {\n 'type': 'Feature',\n 'geometry': {\n 'type': 'Point',\n 'coordinates': coordinates\n },\n 'properties': properties\n };\n currentData.features.push(newFeature);\n source.setData(currentData);\n }\n }, {\n key: \"addHighlightedFeature\",\n value: function addHighlightedFeature(coordinates, properties) {\n var source = this.map.map.getSource('highlighted-content');\n var currentData = source._data;\n var newFeature = {\n 'type': 'Feature',\n 'geometry': {\n 'type': 'Point',\n 'coordinates': coordinates\n },\n 'properties': properties\n };\n currentData.features.push(newFeature);\n source.setData(currentData);\n return newFeature;\n }\n }, {\n key: \"_handleDefaultState\",\n value: function _handleDefaultState() {\n this.clearHighlightedContentLayer();\n this.clearSelectedContentLayer();\n this.showSymbolLayers();\n }\n }, {\n key: \"_handleSearchState\",\n value: function _handleSearchState(data) {\n var query = data.query,\n results = data.results;\n this.hideSymbolLayers();\n this.clearSelectedContentLayer();\n this.updateLabelsForSearchResults(results);\n }\n }, {\n key: \"_handleAdditionalSearch\",\n value: function _handleAdditionalSearch(data) {\n var results = data.results;\n // console.log(\"--> HERE ARE ADDITIONAL RESULTS:\", results);\n this.updateLabelsForSearchResults(results, false);\n }\n }, {\n key: \"_handleHoverSearchResult\",\n value: function _handleHoverSearchResult(data) {\n var result = data.result;\n // console.log(\"--> HERE IS HOVERED RESULT:\", result);\n this.updateLabelForSelectedContentPlacement(result, false);\n }\n }, {\n key: \"_handleHoverEndSearchResult\",\n value: function _handleHoverEndSearchResult() {\n // const { result } = data;\n // console.log(\"--> HERE IS HOVERED RESULT:\", result);\n // this.updateLabelForSelectedContentPlacement(result);\n this.clearSelectedContentLayer();\n }\n }, {\n key: \"_handleSelectedContentState\",\n value: function _handleSelectedContentState(data) {\n var contentPlacementIds = data.contentPlacementIds,\n selectedContentPlacement = data.selectedContentPlacement;\n console.log('adding selected content pin', selectedContentPlacement);\n this.updateLabelForSelectedContentPlacement(selectedContentPlacement);\n }\n }, {\n key: \"_handleDirectionsState\",\n value: function _handleDirectionsState(data) {\n console.log(\"handling directions state in interaction control\");\n }\n }, {\n key: \"hideSymbolLayers\",\n value: function hideSymbolLayers() {\n var _this5 = this;\n var layers = this.map.map.getStyle().layers;\n layers.forEach(function (layer) {\n // Check if the layer is a symbol layer and not 'selected' or 'highlighted'\n if (layer.type === 'symbol' && layer.id !== 'selected-content-layer' && layer.id !== 'highlighted-content-layer') {\n _this5.map.map.setLayoutProperty(layer.id, 'visibility', 'none');\n }\n });\n }\n }, {\n key: \"showSymbolLayers\",\n value: function showSymbolLayers() {\n var _this6 = this;\n var layers = this.map.map.getStyle().layers;\n layers.forEach(function (layer) {\n if (layer.type === 'symbol') {\n _this6.map.map.setLayoutProperty(layer.id, 'visibility', 'visible');\n }\n });\n }\n }, {\n key: \"updateLabelsForSearchResults\",\n value: function updateLabelsForSearchResults(results) {\n var _this7 = this;\n var animate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;\n this.clearHighlightedContentLayer();\n var features = [];\n results.forEach(function (result) {\n // console.log(\"RESULT:\", result);\n\n var coordinates = (0,_utils_coordinateSystems__WEBPACK_IMPORTED_MODULE_1__.convertVerticesToCoordinates)([result.location], null, 10.0);\n // console.log(\"pls\", coordinates[0]);\n var coordinate = coordinates[0];\n var feature = _this7.addHighlightedFeature(coordinate, result);\n features.push(feature);\n\n // const placementId = result.placement_id;\n // const feature = this.map._findFeatureByPlacementId(placementId);\n // if (feature) {\n // const coorindates = feature.geometry.coordinates;\n // const properties = feature.properties;\n // console.log(\"HERE\", feature);\n // this.addHighlightedFeature(coorindates, properties);\n // features.push(feature);\n // }\n });\n if (features.length && animate) {\n // console.log('chek');\n var bounds = new mapboxgl.LngLatBounds();\n // console.log('chekk', bounds);\n features.forEach(function (feature) {\n // console.log('chekkk', feature.geometry.coordinates);\n bounds.extend(feature.geometry.coordinates);\n });\n if (this.currentView === 'desktop') {\n var camera = this.map.map.cameraForBounds(bounds, {\n // padding: {\n // top: 200,\n // bottom: 200,\n // left: 550,\n // right: 200\n // },\n padding: {\n top: 200,\n bottom: 400,\n left: 800,\n right: 200\n },\n maxZoom: 14\n });\n this.map.map.easeTo(_objectSpread(_objectSpread({}, camera), {}, {\n // Use the calculated camera position to keep the bounds and padding\n pitch: 45,\n // Set pitch\n bearing: -37,\n // Set bearing\n duration: 1000 // Animation duration\n }));\n\n // this.map.map.flyTo({\n // center: bounds.getCenter(), // Center of the bounds\n // zoom: this.map.map.getZoom(), // Keep the current zoom level from `fitBounds`\n // pitch: 45, // Target pitch\n // bearing: -37, // Target bearing\n // duration: 1000 // Animation duration for the pitch/bearing transition\n // });\n // this.map.map.fitBounds(bounds, {\n // padding: {\n // top: 200,\n // bottom: 200,\n // left: 550,\n // right: 200\n // },\n // maxZoom: 15,\n // duration: 1000\n // });\n\n // setTimeout(() => {\n // this.map.map.flyTo({\n // center: bounds.getCenter(), // Center of the bounds\n // zoom: this.map.map.getZoom(), // Keep the current zoom level from `fitBounds`\n // pitch: 60, // Target pitch\n // bearing: 30, // Target bearing\n // duration: 1000 // Animation duration for the pitch/bearing transition\n // });\n // }, 1000);\n // this.map.map.setPitch(60);\n // this.map.map.setBearing(60);\n } else if (this.currentView === 'mobile') {\n var mapHeight = this.map.mapContainer.offsetHeight;\n var mapWidth = this.map.mapContainer.offsetWidth;\n var bottomPaddingPercent = 55;\n var sidePaddingPercent = 30;\n var bottomPaddingInPixels = mapHeight * (bottomPaddingPercent / 100);\n var sidePaddingInPixels = mapWidth * (sidePaddingPercent / 100);\n this.map.map.fitBounds(bounds, {\n padding: {\n top: 200,\n bottom: bottomPaddingInPixels,\n left: sidePaddingInPixels,\n right: sidePaddingInPixels\n },\n maxZoom: 15,\n duration: 1000\n });\n }\n }\n }\n }, {\n key: \"updateLabelForSelectedContentPlacement\",\n value: function updateLabelForSelectedContentPlacement(result) {\n var animate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;\n // const placementId = contentPlacement.placement_id;\n // const position = contentPlacement.position; // Should eventually use this, with scaling!\n this.clearSelectedContentLayer();\n\n // const features = this.map.map.queryRenderedFeatures({\n // // Use a filter to find the feature with the matching placementId\n // filter: ['==', ['get', 'placement_id'], placementId]\n // });\n\n var coordinates = (0,_utils_coordinateSystems__WEBPACK_IMPORTED_MODULE_1__.convertVerticesToCoordinates)([result.location], null, 10.0);\n var coordinate = coordinates[0];\n var feature = this.addHighlightedFeature(coordinate, result);\n // features.push(feature);\n\n if (!result.name) {\n console.log(\"no name\");\n if (result.content) {\n console.log(\"content:\", result.content);\n if (result.content.title_key) {\n console.log(\"title key:\", result.content.title_key);\n var titleKey = result.content.title_key;\n var title = result.content.data[titleKey];\n result.name = title;\n }\n }\n }\n\n // if (features.length !== 0) {\n // const feature = features[0]\n // const coorindates = feature.geometry.coordinates;\n // const properties = feature.properties;\n\n this.addSelectedFeature(coordinate, result);\n if (animate) {\n if (this.currentView === 'desktop') {\n this.map.map.easeTo({\n center: coordinate,\n padding: {\n top: 0,\n bottom: 0,\n left: 330,\n right: 0\n },\n // zoom: 12, // Optional: Desired zoom level\n duration: 1000 // Optional: Duration of the animation in milliseconds\n });\n } else if (this.currentView === 'mobile') {\n var mapHeight = this.map.mapContainer.offsetHeight;\n var bottomPaddingPercent = 35;\n var bottomPaddingInPixels = mapHeight * (bottomPaddingPercent / 100);\n this.map.map.easeTo({\n center: coordinate,\n padding: {\n top: 0,\n bottom: bottomPaddingInPixels,\n left: 0,\n right: 0\n },\n // zoom: 12, // Optional: Desired zoom level\n duration: 1000 // Optional: Duration of the animation in milliseconds\n });\n }\n }\n // }\n }\n }, {\n key: \"applyHoverEffectToAllSymbolLayers\",\n value: function applyHoverEffectToAllSymbolLayers() {\n var _this8 = this;\n var layers = this.map.map.getStyle().layers;\n layers.forEach(function (layer) {\n if (layer.type === 'symbol') {\n var layerId = layer.id;\n var defaultTextColor = _this8.textColorReference[layerId];\n _this8.map.map.on('mouseenter', layerId, function (e) {\n var feature = e.features[0];\n var placementId = feature.properties.placement_id;\n\n // this.originalTextColor = null;\n if (!_this8.previouslySelectedFeature || _this8.previouslySelectedFeature.layer.id !== feature.layer.id) {\n _this8.originalTextColor = _this8.map.map.getPaintProperty(layerId, 'text-color');\n _this8.map.map.setPaintProperty(layerId, 'text-color', ['case', ['==', ['get', 'placement_id'], placementId], '#4B90F7', defaultTextColor //this.originalTextColor\n ]);\n } else {\n _this8.originalTextColor = _this8.previouslySelectedTextColor;\n var previouslySelectedPlacementId = _this8.previouslySelectedFeature.properties.placement_id;\n _this8.map.map.setPaintProperty(layerId, 'text-color', ['case', ['==', ['get', 'placement_id'], placementId], '#4B90F7', ['==', ['get', 'placement_id'], previouslySelectedPlacementId], _this8.selectedTextColor, defaultTextColor //this.originalTextColor\n ]);\n }\n _this8.map.map.getCanvas().style.cursor = 'pointer';\n });\n _this8.map.map.on('mouseleave', layerId, function () {\n if (!_this8.previouslySelectedFeature) {\n _this8.map.map.setPaintProperty(layerId, 'text-color', defaultTextColor); //this.originalTextColor);\n } else {\n // If a feature is selected, maintain its selected color\n var previouslySelectedPlacementId = _this8.previouslySelectedFeature.properties.placement_id;\n _this8.map.map.setPaintProperty(layerId, 'text-color', ['case', ['==', ['get', 'placement_id'], previouslySelectedPlacementId], _this8.selectedTextColor, defaultTextColor //this.originalTextColor\n ]);\n }\n _this8.map.map.getCanvas().style.cursor = 'default';\n });\n }\n });\n }\n }, {\n key: \"_handleClick\",\n value: function _handleClick(e) {\n var features = this.map.map.queryRenderedFeatures(e.point);\n var symbolFeatures = features.filter(function (feature) {\n return feature.layer.type === 'symbol';\n });\n if (symbolFeatures.length > 0) {\n var placementId = symbolFeatures[0].properties.placement_id;\n this.map.setToSelectedContentState([placementId]);\n }\n }\n\n // removeCurrentSelectedFeatureStyling() {\n // console.log('Remove styling for selected placement');\n\n // if (this.previouslySelectedFeature) {\n // this.map.map.setLayoutProperty(this.previouslySelectedFeature.layer.id, 'icon-image', this.previouslySelectedIcon);\n // this.map.map.setPaintProperty(this.previouslySelectedFeature.layer.id, 'text-color', this.previouslySelectedTextColor);\n // this.map.map.setLayoutProperty(this.previouslySelectedFeature.layer.id, 'text-offset', this.previouslySelectedTextOffset);\n\n // this.previouslySelectedFeature = null;\n // }\n // }\n\n // addStylingForSelectedPlacement(placementId) {\n // console.log('Adding styling for selected placement');\n\n // const feature = this.map._findFeatureByPlacementId(placementId);\n // const layerId = feature.layer.id;\n\n // this.previouslySelectedFeature = feature;\n // this.previouslySelectedIcon = this.map.map.getLayoutProperty(layerId, 'icon-image');\n // // this.previouslySelectedTextColor = this.map.map.getPaintProperty(layerId, 'text-color');\n // this.previouslySelectedTextColor = this.originalTextColor;\n // this.previouslySelectedTextOffset = this.map.map.getLayoutProperty(layerId, 'text-offset');\n\n // this.map.map.setLayoutProperty(layerId, 'icon-image', [\n // 'case',\n // ['==', ['get', 'placement_id'], placementId], 'selected-pin1',\n // this.previouslySelectedIcon\n // ]);\n\n // // this.map.map.setPaintProperty(layerId, 'text-color', [\n // // 'case',\n // // ['==', ['get', 'placement_id'], placementId], this.selectedTextColor,\n // // this.previouslySelectedTextColor\n // // ]);\n // this.map.map.setPaintProperty(layerId, 'text-color', [\n // 'case',\n // ['==', ['get', 'placement_id'], placementId], this.selectedTextColor,\n // this.previouslySelectedTextColor\n // ]);\n\n // console.log(\"HEHE\", this.previouslySelectedTextColor, this.originalTextColor);\n\n // this.map.map.setLayoutProperty(layerId, 'text-offset', [\n // 'case',\n // ['==', ['get', 'placement_id'], placementId], [1.3, -1.0],\n // this.previouslySelectedTextOffset\n // ]);\n\n // }\n }]);\n}(_core_Control__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (InteractionControl);\n\n//# sourceURL=webpack://waygomaps/./src/Controls/InteractionControl.js?");
606
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _core_Control__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core/Control */ \"./src/core/Control.js\");\n/* harmony import */ var _utils_coordinateSystems__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils/coordinateSystems */ \"./src/utils/coordinateSystems.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _superPropGet(t, e, r, o) { var p = _get(_getPrototypeOf(1 & o ? t.prototype : t), e, r); return 2 & o ? function (t) { return p.apply(r, t); } : p; }\nfunction _get() { return _get = \"undefined\" != typeof Reflect && Reflect.get ? Reflect.get.bind() : function (e, t, r) { var p = _superPropBase(e, t); if (p) { var n = Object.getOwnPropertyDescriptor(p, t); return n.get ? n.get.call(arguments.length < 3 ? e : r) : n.value; } }, _get.apply(null, arguments); }\nfunction _superPropBase(t, o) { for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t));); return t; }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\nvar InteractionControl = /*#__PURE__*/function (_Control) {\n function InteractionControl() {\n var _this;\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n _classCallCheck(this, InteractionControl);\n _this = _callSuper(this, InteractionControl, [options]);\n _this.map = null;\n _this.previouslySelectedFeature = null;\n _this.previouslySelectedIcon = null;\n _this.previouslySelectedTextColor = null;\n _this.previouslySelectedTextOffset = null;\n // this.previouslyHoveredTextColor = null;\n _this.previouslyHoveredFeature = null;\n _this.originalTextColor = null;\n _this.textColorReference = {};\n _this.currentView = null; // Can be set to 'desktop' or 'mobile'\n\n _this.selectedTextColor = '#BE2E28';\n return _this;\n }\n _inherits(InteractionControl, _Control);\n return _createClass(InteractionControl, [{\n key: \"onAdd\",\n value: function onAdd(map) {\n this.map = map;\n this.container = document.createElement('div');\n this.container.className = 'interaction-control-container';\n this.initializeEventListeners();\n this._attachResizeListener();\n this._initialize();\n this.createHighlightedContentLayer();\n this.createSelectedContentLayer();\n this.storeTextColorReferences();\n this.applyHoverEffectToAllSymbolLayers();\n return this.container;\n }\n }, {\n key: \"_initialize\",\n value: function _initialize() {\n var containerWidth = this.map.mapContainer.offsetWidth;\n this._configureView(containerWidth);\n }\n }, {\n key: \"onRemove\",\n value: function onRemove() {\n _superPropGet(InteractionControl, \"onRemove\", this, 3)([]);\n }\n }, {\n key: \"_attachResizeListener\",\n value: function _attachResizeListener() {\n var _this2 = this;\n window.addEventListener('resize', function () {\n var newWidth = _this2.map.mapContainer.offsetWidth;\n _this2._configureView(newWidth);\n });\n }\n }, {\n key: \"_configureView\",\n value: function _configureView(width) {\n if (width > 767) {\n this._setViewForDesktop();\n } else {\n this._setViewForMobile();\n }\n }\n }, {\n key: \"_setViewForDesktop\",\n value: function _setViewForDesktop() {\n this.currentView = 'desktop';\n }\n }, {\n key: \"_setViewForMobile\",\n value: function _setViewForMobile() {\n this.currentView = 'mobile';\n }\n }, {\n key: \"initializeEventListeners\",\n value: function initializeEventListeners() {\n var _this3 = this;\n this.map.map.on('styleimagemissing', function (e) {\n var missingImage = e.id;\n console.warn(\"Image \\\"\".concat(missingImage, \"\\\" could not be loaded.\"));\n });\n this.map.map.on('click', function (e) {\n _this3._handleClick(e);\n });\n this.map.on('state:default', this._handleDefaultState.bind(this));\n this.map.on('state:search', this._handleSearchState.bind(this));\n this.map.on('state:selectedContent', this._handleSelectedContentState.bind(this));\n this.map.on('state:directions', this._handleDirectionsState.bind(this));\n this.map.on('additionalSearchResults', this._handleAdditionalSearch.bind(this));\n this.map.on('hoverSearchResult', this._handleHoverSearchResult.bind(this));\n this.map.on('hoverEndSearchResult', this._handleHoverEndSearchResult.bind(this));\n }\n }, {\n key: \"storeTextColorReferences\",\n value: function storeTextColorReferences() {\n var _this4 = this;\n var layers = this.map.map.getStyle().layers;\n layers.forEach(function (layer) {\n if (layer.type === 'symbol') {\n var textColor = _this4.map.map.getPaintProperty(layer.id, 'text-color');\n if (textColor !== undefined) {\n _this4.textColorReference[layer.id] = textColor; // Store the text color reference using the layer ID as the key\n }\n }\n });\n }\n }, {\n key: \"createSelectedContentLayer\",\n value: function createSelectedContentLayer() {\n this.map.map.addSource('selected-content', {\n 'type': 'geojson',\n 'data': {\n 'type': 'FeatureCollection',\n 'features': [] // Initially empty, you will add features dynamically\n }\n });\n\n // Add a layer that references this GeoJSON source and matches the styling in your Mapbox Studio project\n this.map.map.addLayer({\n 'id': 'selected-content-layer',\n 'type': 'symbol',\n // Or 'fill', 'line', etc. based on your needs\n 'source': 'selected-content',\n 'layout': {\n 'text-field': ['get', 'name'],\n 'text-font': ['Inter Medium'],\n 'text-size': 14,\n 'text-justify': 'left',\n 'text-anchor': 'bottom-left',\n 'text-offset': [1.3, -1],\n 'icon-image': 'selected-pin',\n 'icon-size': 0.5,\n 'icon-offset': [0, -5],\n 'icon-anchor': 'bottom',\n 'symbol-z-elevate': true,\n 'text-padding': 10,\n 'icon-padding': 5\n },\n 'paint': {\n 'text-color': '#BE2E28',\n 'text-halo-color': '#ffffff',\n 'text-halo-width': 1\n }\n });\n }\n }, {\n key: \"createHighlightedContentLayer\",\n value: function createHighlightedContentLayer() {\n this.map.map.addSource('highlighted-content', {\n 'type': 'geojson',\n 'data': {\n 'type': 'FeatureCollection',\n 'features': []\n }\n });\n this.map.map.addLayer({\n 'id': 'highlighted-content-layer',\n 'type': 'symbol',\n 'source': 'highlighted-content',\n 'layout': {\n 'text-field': ['get', 'name'],\n 'text-font': ['Inter Medium'],\n 'text-size': 14,\n 'text-justify': 'left',\n 'text-anchor': 'bottom-left',\n 'text-offset': [1.2, -0.6],\n 'icon-image': 'highlightedPin',\n 'icon-size': 0.5,\n 'icon-offset': [0, -5],\n 'icon-anchor': 'bottom',\n 'symbol-z-elevate': true,\n 'text-padding': 5,\n 'icon-padding': 5\n },\n 'paint': {\n 'text-color': '#1E1E1E',\n 'text-halo-color': '#ffffff',\n 'text-halo-width': 1\n }\n });\n }\n }, {\n key: \"clearSelectedContentLayer\",\n value: function clearSelectedContentLayer() {\n this.map.map.getSource('selected-content').setData({\n 'type': 'FeatureCollection',\n 'features': []\n });\n }\n }, {\n key: \"clearHighlightedContentLayer\",\n value: function clearHighlightedContentLayer() {\n this.map.map.getSource('highlighted-content').setData({\n 'type': 'FeatureCollection',\n 'features': []\n });\n }\n }, {\n key: \"addSelectedFeature\",\n value: function addSelectedFeature(coordinates, properties) {\n var source = this.map.map.getSource('selected-content');\n var currentData = source._data;\n var newFeature = {\n 'type': 'Feature',\n 'geometry': {\n 'type': 'Point',\n 'coordinates': coordinates\n },\n 'properties': properties\n };\n currentData.features.push(newFeature);\n source.setData(currentData);\n }\n }, {\n key: \"addHighlightedFeature\",\n value: function addHighlightedFeature(coordinates, properties) {\n var source = this.map.map.getSource('highlighted-content');\n var currentData = source._data;\n var newFeature = {\n 'type': 'Feature',\n 'geometry': {\n 'type': 'Point',\n 'coordinates': coordinates\n },\n 'properties': properties\n };\n currentData.features.push(newFeature);\n source.setData(currentData);\n return newFeature;\n }\n }, {\n key: \"_handleDefaultState\",\n value: function _handleDefaultState() {\n this.clearHighlightedContentLayer();\n this.clearSelectedContentLayer();\n this.showSymbolLayers();\n }\n }, {\n key: \"_handleSearchState\",\n value: function _handleSearchState(data) {\n var query = data.query,\n results = data.results;\n this.hideSymbolLayers();\n this.clearSelectedContentLayer();\n this.updateLabelsForSearchResults(results);\n }\n }, {\n key: \"_handleAdditionalSearch\",\n value: function _handleAdditionalSearch(data) {\n var results = data.results;\n // console.log(\"--> HERE ARE ADDITIONAL RESULTS:\", results);\n this.updateLabelsForSearchResults(results, false);\n }\n }, {\n key: \"_handleHoverSearchResult\",\n value: function _handleHoverSearchResult(data) {\n var result = data.result;\n // console.log(\"--> HERE IS HOVERED RESULT:\", result);\n this.updateLabelForSelectedContentPlacement(result, false);\n }\n }, {\n key: \"_handleHoverEndSearchResult\",\n value: function _handleHoverEndSearchResult() {\n // const { result } = data;\n // console.log(\"--> HERE IS HOVERED RESULT:\", result);\n // this.updateLabelForSelectedContentPlacement(result);\n this.clearSelectedContentLayer();\n }\n }, {\n key: \"_handleSelectedContentState\",\n value: function _handleSelectedContentState(data) {\n var contentPlacementIds = data.contentPlacementIds,\n selectedContentPlacement = data.selectedContentPlacement;\n console.log('adding selected content pin', selectedContentPlacement);\n this.updateLabelForSelectedContentPlacement(selectedContentPlacement);\n }\n }, {\n key: \"_handleDirectionsState\",\n value: function _handleDirectionsState(data) {\n console.log(\"handling directions state in interaction control\");\n }\n }, {\n key: \"hideSymbolLayers\",\n value: function hideSymbolLayers() {\n var _this5 = this;\n var layers = this.map.map.getStyle().layers;\n layers.forEach(function (layer) {\n // Check if the layer is a symbol layer and not 'selected' or 'highlighted'\n if (layer.type === 'symbol' && layer.id !== 'selected-content-layer' && layer.id !== 'highlighted-content-layer') {\n _this5.map.map.setLayoutProperty(layer.id, 'visibility', 'none');\n }\n });\n }\n }, {\n key: \"showSymbolLayers\",\n value: function showSymbolLayers() {\n var _this6 = this;\n var layers = this.map.map.getStyle().layers;\n layers.forEach(function (layer) {\n if (layer.type === 'symbol') {\n _this6.map.map.setLayoutProperty(layer.id, 'visibility', 'visible');\n }\n });\n }\n }, {\n key: \"updateLabelsForSearchResults\",\n value: function updateLabelsForSearchResults(results) {\n var _this7 = this;\n var animate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;\n this.clearHighlightedContentLayer();\n var features = [];\n results.forEach(function (result) {\n // console.log(\"RESULT:\", result);\n\n var coordinates = (0,_utils_coordinateSystems__WEBPACK_IMPORTED_MODULE_1__.convertVerticesToCoordinates)([result.location], null, 10.0);\n // console.log(\"pls\", coordinates[0]);\n var coordinate = coordinates[0];\n var feature = _this7.addHighlightedFeature(coordinate, result);\n features.push(feature);\n\n // const placementId = result.placement_id;\n // const feature = this.map._findFeatureByPlacementId(placementId);\n // if (feature) {\n // const coorindates = feature.geometry.coordinates;\n // const properties = feature.properties;\n // console.log(\"HERE\", feature);\n // this.addHighlightedFeature(coorindates, properties);\n // features.push(feature);\n // }\n });\n if (features.length && animate) {\n // console.log('chek');\n var bounds = new mapboxgl.LngLatBounds();\n // console.log('chekk', bounds);\n features.forEach(function (feature) {\n // console.log('chekkk', feature.geometry.coordinates);\n bounds.extend(feature.geometry.coordinates);\n });\n if (this.currentView === 'desktop') {\n // this.map.map.resize();\n // const camera = this.map.map.cameraForBounds(bounds, {\n // padding: {\n // top: 50,\n // bottom: 500,\n // left: 600,\n // right: 50\n // },\n // maxZoom: 15,\n // });\n\n // this.map.map.easeTo({\n // ...camera, // Use the calculated camera position to keep the bounds and padding\n // pitch: 45, // Set pitch\n // bearing: -37, // Set bearing\n // duration: 1000 // Animation duration\n // });\n\n // const camera = this.map.map.cameraForBounds(bounds, {\n // padding: {\n // top: 100,\n // bottom: 100,\n // left: 100,\n // right: 100\n // },\n // maxZoom: 15,\n // });\n\n this.map.map.fitBounds(bounds, {\n padding: {\n top: 50,\n bottom: 50,\n left: 350,\n right: 50\n },\n maxZoom: 15,\n pitch: 45,\n bearing: -37,\n duration: 1000\n });\n\n // setTimeout(() => {\n // // const camera = this.map.map.cameraForBounds(bounds);\n // console.log(\"BOTTOM PADDING IN PIXELS\", camera.zoom);\n // this.map.map.easeTo({\n // // ...camera,\n // center: bounds.getCenter(),\n // zoom: camera.zoom,\n // padding: {\n // top: 0,\n // bottom: 0,\n // left: 300,\n // right: 0\n // },\n // // maxZoom: 15,\n // // minZoom: 10,\n // pitch: 45,\n // bearing: -37,\n // duration: 1000\n // });\n // }, 100); // Adjust the delay as necessary\n\n // this.map.map.flyTo({\n // center: bounds.getCenter(), // Center of the bounds\n // zoom: this.map.map.getZoom(), // Keep the current zoom level from `fitBounds`\n // pitch: 45, // Target pitch\n // bearing: -37, // Target bearing\n // duration: 1000 // Animation duration for the pitch/bearing transition\n // });\n // this.map.map.fitBounds(bounds, {\n // padding: {\n // top: 200,\n // bottom: 200,\n // left: 550,\n // right: 200\n // },\n // maxZoom: 15,\n // duration: 1000\n // });\n\n // setTimeout(() => {\n // this.map.map.flyTo({\n // center: bounds.getCenter(), // Center of the bounds\n // zoom: this.map.map.getZoom(), // Keep the current zoom level from `fitBounds`\n // pitch: 60, // Target pitch\n // bearing: 30, // Target bearing\n // duration: 1000 // Animation duration for the pitch/bearing transition\n // });\n // }, 1000);\n // this.map.map.setPitch(60);\n // this.map.map.setBearing(60);\n } else if (this.currentView === 'mobile') {\n var mapHeight = this.map.mapContainer.offsetHeight;\n var mapWidth = this.map.mapContainer.offsetWidth;\n // const bottomPaddingPercent = 55;\n var bottomPaddingPercent = 45;\n var sidePaddingPercent = 20;\n var bottomPaddingInPixels = mapHeight * (bottomPaddingPercent / 100);\n var sidePaddingInPixels = mapWidth * (sidePaddingPercent / 100);\n\n // this.map.map.fitBounds(bounds, {\n // padding: {\n // top: 200,\n // bottom: bottomPaddingInPixels,\n // left: sidePaddingInPixels,\n // right: sidePaddingInPixels\n // },\n // maxZoom: 15,\n // duration: 500\n // });\n\n this.map.map.fitBounds(bounds, {\n padding: {\n top: 150,\n bottom: bottomPaddingInPixels,\n left: sidePaddingInPixels,\n right: sidePaddingInPixels + 70\n },\n maxZoom: 16,\n pitch: 45,\n bearing: -37,\n duration: 1000\n });\n\n // const camera = this.map.map.cameraForBounds(bounds, {\n // padding: {\n // top: 0,\n // bottom: bottomPaddingInPixels,\n // left: sidePaddingInPixels,\n // right: sidePaddingInPixels\n // },\n // maxZoom: 15,\n // });\n\n // this.map.map.easeTo({\n // ...camera, // Use the calculated camera position to keep the bounds and padding\n // pitch: 45, // Set pitch\n // bearing: -37, // Set bearing\n // duration: 1000 // Animation duration\n // });\n\n // setTimeout(() => {\n // this.map.map.flyTo({\n // center: bounds.getCenter(), // Center of the bounds\n // zoom: this.map.map.getZoom(), // Keep the current zoom level from `fitBounds`\n // pitch: 45, // Target pitch\n // bearing: -37, // Target bearing\n // duration: 500 // Animatican on duration for the pitch/bearing transition\n // });\n // }, 0);\n\n // setTimeout(() => {\n // this.map.map.flyTo({\n // center: camera.getCenter(), // Center of the bounds\n // zoom: this.map.map.getZoom(), // Keep the current zoom level from `fitBounds`\n // pitch: 60, // Target pitch\n // bearing: 30, // Target bearing\n // duration: 1000 // Animatican on duration for the pitch/bearing transition\n // });\n // }, 1000);\n // this.map.map.setPitch(60);\n // this.map.map.setBearing(60);\n }\n }\n }\n }, {\n key: \"updateLabelForSelectedContentPlacement\",\n value: function updateLabelForSelectedContentPlacement(result) {\n var animate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;\n // const placementId = contentPlacement.placement_id;\n // const position = contentPlacement.position; // Should eventually use this, with scaling!\n this.clearSelectedContentLayer();\n\n // const features = this.map.map.queryRenderedFeatures({\n // // Use a filter to find the feature with the matching placementId\n // filter: ['==', ['get', 'placement_id'], placementId]\n // });\n\n var coordinates = (0,_utils_coordinateSystems__WEBPACK_IMPORTED_MODULE_1__.convertVerticesToCoordinates)([result.location], null, 10.0);\n var coordinate = coordinates[0];\n var feature = this.addHighlightedFeature(coordinate, result);\n // features.push(feature);\n\n if (!result.name) {\n console.log(\"no name\");\n if (result.content) {\n console.log(\"content:\", result.content);\n if (result.content.title_key) {\n console.log(\"title key:\", result.content.title_key);\n var titleKey = result.content.title_key;\n var title = result.content.data[titleKey];\n result.name = title;\n }\n }\n }\n\n // if (features.length !== 0) {\n // const feature = features[0]\n // const coorindates = feature.geometry.coordinates;\n // const properties = feature.properties;\n\n this.addSelectedFeature(coordinate, result);\n if (animate) {\n if (this.currentView === 'desktop') {\n this.map.map.easeTo({\n center: coordinate,\n padding: {\n top: 0,\n bottom: 0,\n left: 330,\n right: 0\n },\n // zoom: 12, // Optional: Desired zoom level\n duration: 1000 // Optional: Duration of the animation in milliseconds\n });\n } else if (this.currentView === 'mobile') {\n var mapHeight = this.map.mapContainer.offsetHeight;\n var bottomPaddingPercent = 35;\n var bottomPaddingInPixels = mapHeight * (bottomPaddingPercent / 100);\n this.map.map.easeTo({\n center: coordinate,\n padding: {\n top: 0,\n bottom: bottomPaddingInPixels,\n left: 0,\n right: 0\n },\n // zoom: 12, // Optional: Desired zoom level\n duration: 1000 // Optional: Duration of the animation in milliseconds\n });\n\n // setTimeout(() => {\n // this.map.map.flyTo({\n // center: camera.getCenter(), // Center of the bounds\n // zoom: this.map.map.getZoom(), // Keep the current zoom level from `fitBounds`\n // pitch: 60, // Target pitch\n // bearing: 30, // Target bearing\n // duration: 1000 // Animatican on duration for the pitch/bearing transition\n // });\n // }, 1000);\n // this.map.map.setPitch(60);\n // this.map.map.setBearing(60);\n }\n }\n // }\n }\n }, {\n key: \"applyHoverEffectToAllSymbolLayers\",\n value: function applyHoverEffectToAllSymbolLayers() {\n var _this8 = this;\n var layers = this.map.map.getStyle().layers;\n layers.forEach(function (layer) {\n if (layer.type === 'symbol') {\n var layerId = layer.id;\n var defaultTextColor = _this8.textColorReference[layerId];\n _this8.map.map.on('mouseenter', layerId, function (e) {\n var feature = e.features[0];\n var placementId = feature.properties.placement_id;\n\n // this.originalTextColor = null;\n if (!_this8.previouslySelectedFeature || _this8.previouslySelectedFeature.layer.id !== feature.layer.id) {\n _this8.originalTextColor = _this8.map.map.getPaintProperty(layerId, 'text-color');\n _this8.map.map.setPaintProperty(layerId, 'text-color', ['case', ['==', ['get', 'placement_id'], placementId], '#4B90F7', defaultTextColor //this.originalTextColor\n ]);\n } else {\n _this8.originalTextColor = _this8.previouslySelectedTextColor;\n var previouslySelectedPlacementId = _this8.previouslySelectedFeature.properties.placement_id;\n _this8.map.map.setPaintProperty(layerId, 'text-color', ['case', ['==', ['get', 'placement_id'], placementId], '#4B90F7', ['==', ['get', 'placement_id'], previouslySelectedPlacementId], _this8.selectedTextColor, defaultTextColor //this.originalTextColor\n ]);\n }\n _this8.map.map.getCanvas().style.cursor = 'pointer';\n });\n _this8.map.map.on('mouseleave', layerId, function () {\n if (!_this8.previouslySelectedFeature) {\n _this8.map.map.setPaintProperty(layerId, 'text-color', defaultTextColor); //this.originalTextColor);\n } else {\n // If a feature is selected, maintain its selected color\n var previouslySelectedPlacementId = _this8.previouslySelectedFeature.properties.placement_id;\n _this8.map.map.setPaintProperty(layerId, 'text-color', ['case', ['==', ['get', 'placement_id'], previouslySelectedPlacementId], _this8.selectedTextColor, defaultTextColor //this.originalTextColor\n ]);\n }\n _this8.map.map.getCanvas().style.cursor = 'default';\n });\n }\n });\n }\n }, {\n key: \"_handleClick\",\n value: function _handleClick(e) {\n var features = this.map.map.queryRenderedFeatures(e.point);\n var symbolFeatures = features.filter(function (feature) {\n return feature.layer.type === 'symbol';\n });\n if (symbolFeatures.length > 0) {\n var placementId = symbolFeatures[0].properties.placement_id;\n this.map.setToSelectedContentState([placementId]);\n }\n }\n\n // removeCurrentSelectedFeatureStyling() {\n // console.log('Remove styling for selected placement');\n\n // if (this.previouslySelectedFeature) {\n // this.map.map.setLayoutProperty(this.previouslySelectedFeature.layer.id, 'icon-image', this.previouslySelectedIcon);\n // this.map.map.setPaintProperty(this.previouslySelectedFeature.layer.id, 'text-color', this.previouslySelectedTextColor);\n // this.map.map.setLayoutProperty(this.previouslySelectedFeature.layer.id, 'text-offset', this.previouslySelectedTextOffset);\n\n // this.previouslySelectedFeature = null;\n // }\n // }\n\n // addStylingForSelectedPlacement(placementId) {\n // console.log('Adding styling for selected placement');\n\n // const feature = this.map._findFeatureByPlacementId(placementId);\n // const layerId = feature.layer.id;\n\n // this.previouslySelectedFeature = feature;\n // this.previouslySelectedIcon = this.map.map.getLayoutProperty(layerId, 'icon-image');\n // // this.previouslySelectedTextColor = this.map.map.getPaintProperty(layerId, 'text-color');\n // this.previouslySelectedTextColor = this.originalTextColor;\n // this.previouslySelectedTextOffset = this.map.map.getLayoutProperty(layerId, 'text-offset');\n\n // this.map.map.setLayoutProperty(layerId, 'icon-image', [\n // 'case',\n // ['==', ['get', 'placement_id'], placementId], 'selected-pin1',\n // this.previouslySelectedIcon\n // ]);\n\n // // this.map.map.setPaintProperty(layerId, 'text-color', [\n // // 'case',\n // // ['==', ['get', 'placement_id'], placementId], this.selectedTextColor,\n // // this.previouslySelectedTextColor\n // // ]);\n // this.map.map.setPaintProperty(layerId, 'text-color', [\n // 'case',\n // ['==', ['get', 'placement_id'], placementId], this.selectedTextColor,\n // this.previouslySelectedTextColor\n // ]);\n\n // console.log(\"HEHE\", this.previouslySelectedTextColor, this.originalTextColor);\n\n // this.map.map.setLayoutProperty(layerId, 'text-offset', [\n // 'case',\n // ['==', ['get', 'placement_id'], placementId], [1.3, -1.0],\n // this.previouslySelectedTextOffset\n // ]);\n\n // }\n }]);\n}(_core_Control__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (InteractionControl);\n\n//# sourceURL=webpack://waygomaps/./src/Controls/InteractionControl.js?");
607
607
 
608
608
  /***/ }),
609
609
 
package/dist/style.css CHANGED
@@ -267,6 +267,11 @@ body {
267
267
  border-radius: 15px;
268
268
  display: flex;
269
269
  /* height: fit-content; */
270
+ scrollbar-width: none; /* Firefox */
271
+ }
272
+
273
+ .search-results-control-container::-webkit-scrollbar {
274
+ display: none; /* Chrome, Safari, Edge */
270
275
  }
271
276
 
272
277
  .search-results-control-container.desktop-view {
@@ -767,6 +772,11 @@ body {
767
772
  /* border-top: 1px solid #e5e5e7; */
768
773
  padding: 8px 0 8px 0;
769
774
  /* background-color: #e5e5e7; */
775
+ scrollbar-width: none; /* Firefox */
776
+ }
777
+
778
+ .search-results-view::-webkit-scrollbar {
779
+ display: none; /* Chrome, Safari, Edge */
770
780
  }
771
781
 
772
782
  .loading-cell {
@@ -970,8 +980,8 @@ body {
970
980
  }
971
981
 
972
982
  .copy-icon {
973
- width: 20px; /* Adjust size as needed */
974
- height: 20px;
983
+ width: 18px; /* Adjust size as needed */
984
+ height: 18px;
975
985
  }
976
986
 
977
987
  .copy-popup {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "waygo-maps",
3
- "version": "1.0.29",
3
+ "version": "1.0.31",
4
4
  "main": "dist/bundle.js",
5
5
  "files": [
6
6
  "dist/bundle.js",