waygo-maps 1.0.0

package/src/components/MapView/MapView.js

@@ -0,0 +1,403 @@
+import { loadCSS, loadScript } from "../../utils/resourceLoader";
+import waygoMaps from "../../WaygoMaps";
+import getMapStyle from "../../api/MapApi";
+import Component from "../../core/Component";
+import Events from "../../core/Events";
+import StateCoordinator from "./StateCoordinator";
+import SearchResultsControl from "../../Controls/SearchResultsControl";
+import mapboxgl from 'mapbox-gl';
+import axios from 'axios';
+
+
+import { convertVerticesToCoordinates } from "../../utils/coordinateSystems";
+
+const mapboxCSS = 'https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.css';
+const mapboxJS = 'https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.js';
+const accessToken = 'pk.eyJ1Ijoid2F5Z28tbWFwcyIsImEiOiJjbGtxYzZ1N3QxdG43M210bXFuYmJ4a3gxIn0.tlbznj_fRJ8La6s2UUMO6A';
+
+
+const mock = {
+    'c66d7e2c3ebd4a8fa60efa5bf3b5b301:2d4911eda2ef4950b307e51cd0ccf35e': {
+        'steps': [
+            'Leave Roundtable and make a left',
+            'Turn right after walking 177 feet',
+            'Turn left after walking 203 feet',
+            'Turn right after walking 100 feet',
+            'Continue straight in 242 feet',
+            'Arrive at Stage 4, on your left'
+        ],
+        'path': [
+            [-81.557308010743881, -195.68687504906683], 
+            [-66.793528483184829, -195.68687504906688], 
+            [-66.793528483184829, -136.30367294932935], 
+            [-6.7541584044446665, -136.30367294932955], 
+            [-6.7541584044446195, -106.92078820451393], 
+            [81.828518760909716, -106.92078820451393], 
+            [81.828518760909716, -47.209502115275079], 
+            [140.88363687114594, -47.209502115275079]
+        ]
+    }
+}
+const mockData = {
+    'b1800bf6e3ed480cae21526e42464676:a7fa2fb07ae04049b9026c296d015d66': {
+        'steps': [
+            'Leave Roundtable and make a left',
+            'Turn right after walking 177 feet',
+            'Turn left after walking 203 feet',
+            'Turn right after walking 100 feet',
+            'Continue straight in 242 feet',
+            'Arrive at Stage 4, on your left'
+        ], 
+        'path': [
+            [95.645948774511609, -118.96329432647396], 
+            [41.840174496296385, -118.96329432647379], 
+            [41.840174496296484, -56.955420310725756], 
+            [10.344111504170499, -56.955420310725756], 
+            [10.34411150417062, 18.175813285074767], 
+            [0.17350782962993705, 18.175813285074767], 
+            [0.17350782962999536, 54.265052130219125], 
+            [-25.417043351472369, 54.26505213021921]
+        ]
+    }, // ROUNDTABLE TO STAGE 4
+    '529803fcdd7e4d5db5ed71b9ff1ef0e2:899969e0115b4d8da8fb51bedf7caff2': {
+        'steps': [
+            "Leave Startups Info Point and make a left",
+            "Turn right in 12 feet",
+            "Turn left in 37 feet",
+            "Continue straight for 182 feet", 
+            "Turn right in 36 feet",
+            "Turn left after 29 feet",
+            "Turn right after 57 feet",
+            "Turn left after walking 42 feet",
+            "Arrive at Alpha 1, on your right"
+        ], 
+        'path': [
+            [284.28160504078147, -119.85123601826949], 
+            [258.75367051155007, -119.8512360182694], 
+            [258.75367051155007, -57.515278013020058], 
+            [-40.902596633706594, -57.515278013019092], 
+            [-40.902596633706445, 19.584459519789313], 
+            [-169.83960450772221, 19.584459519789728], 
+            [-169.83960450772213, 78.311493640524645], 
+            [-215.11519505890323, 78.311493640524787]
+        ]
+    },
+    'd1910e5724844b40bf8e2a721fba172a:3673b48d96b04d7aa65937dec3276d3c': {
+        'steps': [
+            "Leave startup lounge and make a right",
+            "Continue straight for 22 feet, then turn left",
+            "Turn right in 37 feet",
+            "Continue straight for 143 feet, then turn left", 
+            "Turn right in 32 feet",
+            "Continue straight for 210 feet",
+            "Turn right, and continue for 5 feet",
+            "Arrive at The Black Innovation Zone, on your right"
+        ], 
+        'path': [
+            [417.35544488563073, 75.74517709550193], 
+            [356.33182283838664, 75.745177095502129], 
+            [356.33182283838653, 17.674310953769847], 
+            [121.7517703449482, 17.674310953770604], 
+            [121.75177034494808, -56.800754663027305], 
+            [-207.21694798680142, -56.80075466302624], 
+            [-207.21694798680144, -78.116837633560053]
+        ]
+    },
+
+
+}
+
+const defaultMapOptions = {
+    container: 'map', // Default container ID
+    sourceId: 'collision-conference.2024.2xw_YUXYS8GoDTB2AQgN3A',
+    center: [0, 0], // Default map center [longitude, latitude]
+    zoom: 12, // Default zoom level
+    bearing: 0,
+    pitch: 0,
+    minPitch: 0,
+    maxPitch: 75,
+    minZoom: 0,
+    maxZoom: 22,
+    bounds: null, // The bounds of the map, would override center and zoom options.
+    doubleClickZoom: true,
+    dragPan: true,
+    dragRotate: true,
+    scrollZoom: true,
+    touchPitch: true,
+    touchZoomRotate: true,
+    interactive: true,
+    trackResize: true,
+    keyboard: true,
+};
+
+
+export class MapView extends Component {
+    constructor(options = {}) {
+        super({ ...defaultMapOptions, ...options});
+        this.mapViewApi = waygoMaps.getMapViewApi();
+        this.searchApi = waygoMaps.getSearchApi();
+        this.mapContainer = document.createElement('div');
+        this.mapContainer.className = 'inner-map-container';
+        this.ready = this._initialize(options);
+
+        // this._hiddenSymbolLayers = [];
+
+        this._stateCoordinator = new StateCoordinator(this);
+    }
+
+    async _initialize() {
+        console.log('Initializing map view component..');
+
+        try {
+            await this._loadMapLibraries();
+            this.render();
+            const style = await this._fetchMapStyle();
+            if (typeof mapboxgl !== 'undefined' && style) {
+                mapboxgl.accessToken = accessToken;
+                this.map = new mapboxgl.Map({
+                    container: this.mapContainer,
+                    style: `mapbox://styles/waygo-maps/${style}`,
+                    center: this.options.center,
+                    zoom: this.options.zoom,
+                    bearing: this.options.bearing,
+                    pitch: this.options.pitch,
+                    minPitch: this.options.minPitch,
+                    maxPitch: this.options.maxPitch,
+                    minZoom: this.options.minZoom,
+                    maxZoom: this.options.maxZoom,
+                    bounds: this.options.bounds,
+                    doubleClickZoom: this.options.doubleClickZoom,
+                    dragPan: this.options.dragPan,
+                    dragRotate: this.options.dragRotate,
+                    scrollZoom: this.options.scrollZoom,
+                    touchPitch: this.options.touchPitch,
+                    touchZoomRotate: this.options.touchZoomRotate,
+                    interactive: this.options.interactive,
+                    trackResize: this.options.trackResize,
+                    keyboard: this.options.keyboard,
+                });
+
+                this.map.on('load', () => this.fire('load'));
+                this._initializeEventListeners();
+            } else {
+                console.error('Mapbox GL JS is not loaded.');
+            }
+        } catch (error) {
+            console.error('Failed to initialize the map:', error);
+        }
+    }
+
+    _initializeEventListeners() {
+        this.mapContainer.addEventListener('mousedown', (event) => this.fire('mousedown', { originalEvent: event }));
+        // preclick
+        this.mapContainer.addEventListener('click', (event) => this.fire('click', { originalEvent: event }));
+        this.mapContainer.addEventListener('mouseover', (event) => this.fire('mouseover', { originalEvent: event }));
+        this.mapContainer.addEventListener('mousemove', (event) => this.fire('mousemove', { originalEvent: event }));
+        this.mapContainer.addEventListener('dblclick', (event) => this.fire('dblclick', { originalEvent: event }));
+        // mouseenter
+        // mouseleave
+        this.mapContainer.addEventListener('mouseout', (event) => this.fire('mouseout', { originalEvent: event }));
+        this.mapContainer.addEventListener('contextmenu', (event) => this.fire('contextmenu', { originalEvent: event }));
+        this.mapContainer.addEventListener('wheel', (event) => this.fire('wheel', { originalEvent: event }));
+        this.mapContainer.addEventListener('touchstart', (event) => this.fire('touchstart', { originalEvent: event }));
+        this.mapContainer.addEventListener('touchend', (event) => this.fire('touchend', { originalEvent: event }));
+        this.mapContainer.addEventListener('touchmove', (event) => this.fire('touchmove', { originalEvent: event }));
+        this.mapContainer.addEventListener('touchcancel', (event) => this.fire('touchcancel', { originalEvent: event }));
+        this.mapContainer.addEventListener('move', (event) => this.fire('move', { originalEvent: event }));
+
+        const movementEvents = [
+            'movestart',
+            'move',
+            'moveend',
+            'dragstart',
+            'drag',
+            'dragend',
+            'zoomstart',
+            'zoom',
+            'zoomend',
+            'rotatestart',
+            'rotate',
+            'rotateend',
+            'pitchstart',
+            'pitch',
+            'pitchend',
+            'boxzoomstart',
+            'boxzoomend',
+            'boxzoomcancel',
+        ];
+
+        movementEvents.forEach(eventName => {
+            this.map.on(eventName, (event) => {
+                this.fire(eventName, { originalEvent: event });
+            });
+        });
+    }
+
+    async _fetchMapStyle() {
+        let parts = this.options.sourceId.split('.');
+        if (parts.length !== 3) {
+            console.error('The mapViewId format is incorrect. It should be in the format "businessId.mapId.mapViewId".');
+            return;
+        }
+        let businessId = parts[0] || '';
+        let mapId = parts[1] || '';
+        let mapViewId = parts[2] || '';
+
+        try {
+            const data = await this.mapViewApi.fetchMapStyle(businessId, mapId, mapViewId);
+            console.log('Fetched map style:', data.style_id);
+            return data.style_id
+        } catch (err) {
+            console.error('Error fetching map style:', err);
+        }
+    }
+
+    async _loadMapLibraries() {
+        console.log('Loading map libraries');
+        await loadCSS(mapboxCSS);
+        await loadScript(mapboxJS);
+        console.log('Map libraries loaded');
+    }
+
+    render() {
+        const targetContainer = document.getElementById(this.options.container);
+        if (targetContainer) {
+            targetContainer.appendChild(this.mapContainer);
+            this.mapContainer.style.width = '100%';
+            this.mapContainer.style.height = '100%';
+            this.mapContainer.style.position = 'relative';
+        } else {
+            console.error(`Container element with id "${this.containerId}" not found.`);
+        }
+        return;
+    }
+
+    // MARK: Controls
+    addControl(control) {
+        const container = control.onAdd(this);
+        this.mapContainer.appendChild(container);
+    }
+
+    removeControl(control) {
+        this.map.removeControl(control);
+    }
+
+    // MARK: Map states
+    setToDefaultState() {
+        this._stateCoordinator.transitionTo('default');
+    }
+
+    async setToSearchState(query) {
+        const results = await this.search(query);
+        this._stateCoordinator.transitionTo('search', { query, results });
+    }
+
+    async setToSelectedContentState(contentPlacementIds) {
+        const lastContentPlacementId = contentPlacementIds[contentPlacementIds.length - 1];
+        const selectedContentPlacement = await this.getContentPlacementDetails(lastContentPlacementId);
+        this._stateCoordinator.transitionTo('selectedContent', { contentPlacementIds, selectedContentPlacement });
+    }
+
+    async setToDirectionsState(startContentPlacementId = null, endContentPlacementId = null) {
+        var startContentPlacement = null;
+        if (startContentPlacementId) {
+            startContentPlacement = await this.getContentPlacementDetails(startContentPlacementId);
+        }
+
+        var endContentPlacement = null;
+        if (endContentPlacementId) {
+            endContentPlacement = await this.getContentPlacementDetails(endContentPlacementId);
+        }
+
+        this._stateCoordinator.transitionTo('directions', { startContentPlacement, endContentPlacement });
+    }
+
+    initiateBack() {
+        this.fire('initiate:back');
+    }
+
+    initiateSetToSearchState() {
+        this.fire('initiate:search');
+    }
+
+    findPath(startContentPlacementId, endContentPlacementId) {
+        console.log("finding path", startContentPlacementId, endContentPlacementId);
+
+        const data = mock[`${startContentPlacementId}:${endContentPlacementId}`];
+        console.log("DATA", data);
+
+        const coordinates = convertVerticesToCoordinates(data.path, null, 10.0);
+
+        console.log("COORDINATES:", coordinates);
+        
+        return { coordinates: coordinates, steps: data.steps };
+    }
+
+
+    // MARK: Map methods
+    _findFeatureByPlacementId(placementId) {
+        // Query all rendered features and filter by the desired property (placementId)
+        const features = this.map.queryRenderedFeatures({
+            // Use a filter to find the feature with the matching placementId
+            filter: ['==', ['get', 'placement_id'], placementId]
+        });
+        
+        // Return the first feature that matches the placementId
+        return features.length > 0 ? features[0] : null;
+    }
+
+    getCenter() {
+        // Update to convert from lat, lon, to x, y in meters
+        if (this.map) {
+            return this.map.getCenter();
+        } else {
+            console.error('Map is not initialized.');
+        }
+    }
+
+    setCenter(lngLat) {
+        // Update to convert from lat, lon, to x, y in meters
+        if (this.map) {
+            this.map.setCenter(lngLat);
+        } else {
+            console.error('Map is not initialized.');
+        }
+    }
+
+
+
+    async search(query) {
+        if (query === '') {
+            return;
+        }
+        try {
+            return await this.searchApi.search(
+                'e9df990cbd084934973a87fc2f3b0e74',
+                'move-america-2024',
+                'FTdsy9btTs6qumoZ6E8Z2Q',
+                // 'collision-conference',
+                // '2024',
+                // '2xw_YUXYS8GoDTB2AQgN3A',
+                query
+            );
+        } catch (error) {
+            if (axios.isCancel(error)) {
+                console.log('Request canceled:', error.message);
+            } else {
+                console.error('Search error:', error);
+            }
+        }
+    }
+
+    async getContentPlacementDetails(contentPlacementId) {
+        try {
+            return await this.searchApi.fetchContentPlacementDetails(contentPlacementId);
+        } catch (error) {
+            if (axios.isCancel(error)) {
+                console.log('Request canceled:', error.message);
+            } else {
+                console.error('Fetching content placement details error:', error);
+            }
+        }
+    }
+}

package/src/components/MapView/StateCoordinator.js

@@ -0,0 +1,23 @@
+class StateCoordinator {
+    constructor(mapView) {
+        this.mapView = mapView;
+        this.state = 'default';
+        this.stateHistory = ['default'];
+    }
+
+    transitionTo(newState, data = {}) {
+        this.state = newState;
+        const lastState = this.stateHistory[this.stateHistory.length - 1];
+
+        if (newState == 'default') {
+            this.stateHistory = ['default'];
+        } else if (newState !== lastState) {
+            this.stateHistory.push(newState);
+        }
+
+        console.log("STATE LENGTH PROPER", this.stateHistory.length, this.stateHistory);
+        this.mapView.fire(`state:${newState}`, data);
+    }
+}
+
+export default StateCoordinator;

package/src/components/SearchBox/SearchBar.js

@@ -0,0 +1,173 @@
+import Component from "../../core/Component";
+import magnifyingGlassIcon from '../../assets/magnify.svg'
+import cancelIcon from '../../assets/cancel.svg'
+
+import backArrow from '../../assets/arrows/backArrow.svg';
+import waygoIcon from '../../assets/WaygoIcon.svg';
+
+
+class SearchBar extends Component {
+    constructor(options = {}) {
+        super(options);
+        this._initialize();
+    }
+
+    _initialize() {
+        this.element = document.createElement('div');
+        this.element.className = 'search-bar-container';
+
+        this.input = document.createElement('input');
+        this.input.type = 'text';
+        this.input.placeholder = 'Search MOVE America 2024';
+        this.input.className = 'search-bar';
+
+        this.rightButton = document.createElement('button');
+        this.rightButton.className = 'search-bar-button-right';
+        this.updateRightButtonIcon('search');
+
+        this.leftButton = document.createElement('button');
+        this.leftButton.className = 'search-bar-button-left';
+        // this.updateLeftButtonIcon('logo');
+        this.updateLeftButtonIcon('none');
+
+        this.element.appendChild(this.leftButton);
+        this.element.appendChild(this.input);
+        this.element.appendChild(this.rightButton);
+
+
+        this._setupEventListeners();
+    }
+
+    _setupEventListeners() {
+        this.input.addEventListener('input', (e) => this._handleInput(e));
+        this.input.addEventListener('focus', this._handleFocus.bind(this));
+        this.input.addEventListener('blur',this._handleBlur.bind(this));
+        this.input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                this._handleEnterSelect(e)
+            }
+        });
+        this.rightButton.addEventListener('click', (e) => this._handleRightButtonSelect(e));
+        this.leftButton.addEventListener('click', (e) => this._handleLeftButtonSelect(e));
+    }
+
+    _handleInput(e) {
+        // this.updateRightButtonIcon('cancel');
+        this.fire('input', { event: e, query: this.getText() } )
+    }
+
+    _handleFocus() {
+        // this.input.classList.add('with-results');
+        this.fire('focus');
+    }
+
+    _handleBlur() {
+        setTimeout(() => {
+            const elem = document.activeElement;
+            if (elem === this.rightButton) {
+                this.updateStyleWithoutSuggestions();
+                // this.input.classList.remove('with-results');
+                this.fire('blur');
+            } else if (elem === this.input) {
+            } else {
+                this.updateStyleWithoutSuggestions();
+                // this.input.classList.remove('with-results');
+                this.fire('blur');
+            }
+        }, 150); // Timeout to allow clicks on results before hiding
+    }
+
+    _handleEnterSelect(e) {
+        const query = this.getText();
+        if (query.length > 0) {
+            this.fire('search', { query: query, event: e });
+            this.input.blur();
+        }
+    }
+
+    _handleRightButtonSelect(e) {
+         if (this.rightButtonState === 'search') {
+            const query = this.getText();
+            if (query.length > 0) {
+                this.fire('search', { query: query, event: e });
+                this.input.blur();
+            }
+        } else if (this.rightButtonState === 'cancel') { // || this.rightButtonState === 'selectedContent') {
+            this.fire('cancel', {event: e});
+        }
+    }
+
+    _handleLeftButtonSelect(e) {
+        if (this.leftButtonState === 'logo') {
+            this.input.focus();
+       } else if (this.leftButtonState === 'back') { // || this.rightButtonState === 'selectedContent') {
+           this.fire('back');
+       }
+   }
+
+    updateStyleWithSuggestions() {
+        this.element.classList.add('with-results');
+    }
+
+    updateStyleWithoutSuggestions() {
+        this.element.classList.remove('with-results');
+    }
+
+    updateRightButtonIcon(state) {
+        this.rightButtonState = state;
+        // if (state === 'default') {
+        if (state === 'search') {
+            this.rightButton.innerHTML = `<img src="${magnifyingGlassIcon}" alt="Search" />`;
+            this.rightButton.style.display = 'flex';
+            // this.input.style.paddingLeft = '100px';
+        } else if (state === 'cancel') {
+            this.rightButton.innerHTML = `<img src="${cancelIcon}" alt="Cancel" />`;
+            this.rightButton.style.display = 'flex';
+            // this.input.style.paddingLeft = '100px';
+        } else if (state === 'none') {
+            this.rightButton.style.display = 'none';
+            // this.input.style.paddingLeft = '24px';
+        }
+    }
+
+    updateLeftButtonIcon(state) {
+        this.leftButtonState = state;
+        if (state === 'logo') {
+            this.leftButton.innerHTML = `<img src="${waygoIcon}" alt="${state}" />`;
+            const imgElement = this.leftButton.querySelector('img');
+            imgElement.style.width = '16px';
+            imgElement.style.height = '16px';
+            this.leftButton.style.display = 'flex';
+
+            // this.input.style.paddingLeft = '50px';
+        } else if (state === 'back') {
+            this.leftButton.innerHTML = `<img src="${backArrow}" alt="${state}" />`;
+            const imgElement = this.leftButton.querySelector('img');
+            imgElement.style.width = '20px';
+            imgElement.style.height = '20px';
+            // this.input.style.paddingLeft = '50px';
+            this.leftButton.style.display = 'flex';
+        } else if (state === 'none') {
+            this.leftButton.style.display = 'none';
+            // this.input.style.paddingLeft = '24px';
+        }
+    }
+
+    getText() {
+        return this.input.value;
+    }
+
+    setText(query) {
+        this.input.value = query;
+    }
+
+    setPlaceholderText(placeholderText) {
+        this.input.placeholder = placeholderText;
+    }
+
+    getElement() {
+        return this.element;
+    }
+}
+
+export default SearchBar;

package/src/components/SearchBox/SearchBarSuggestionsView.js

@@ -0,0 +1,49 @@
+import SearchBarSuggestionsViewCell from "./SearchBarSuggestionsViewCell";
+import Component from "../../core/Component";
+
+class SearchBarSuggestionsView extends Component {
+    constructor(options = {}) {
+        super(options);
+        this._initialize();
+    }
+
+    _initialize() {
+        this.results = [];
+        this.element = document.createElement('div');
+        this.element.className = 'search-bar-suggestions-view';
+    }
+
+    updateResults(results) {
+        this.results = results;
+        this.render();
+    }
+
+    render() {
+        this.element.innerHTML = ''; // Clear previous results
+
+        this.results.forEach(r => {
+            const cell = new SearchBarSuggestionsViewCell(r);
+            cell.on('click', () => this.fire('selectCell', { result: r }));
+            this.element.appendChild(cell.getElement());
+        });
+        return;
+    }
+
+    clearResults() {
+        this.updateResults([]);
+    }
+
+    show() {
+        this.element.classList.add('visible');
+    }
+
+    hide() {
+        this.element.classList.remove('visible');
+    }
+
+    getElement() {
+        return this.element;
+    }
+}
+
+export default SearchBarSuggestionsView;

package/src/components/SearchBox/SearchBarSuggestionsViewCell.js

@@ -0,0 +1,34 @@
+import Component from "../../core/Component";
+
+class SearchBarSuggestionsViewCell extends Component {
+    constructor(result, options = {}) {
+        super(options);
+        this.result = result;
+        this._initialize();
+    }
+
+    _initialize() {
+        this.element = document.createElement('div');
+        this.element.className = 'search-bar-suggestions-view-cell';
+        this.render();
+        this._setupEventListeners();
+    }
+
+    _setupEventListeners() {
+        this.element.addEventListener('click', () => this.fire('click', { result: this.result }));
+    }
+
+    render() {
+        this.element.innerHTML = `
+            <div class="suggestion-title">${this.result.name}</div>
+            <div class="suggestion-subtitle">${this.result.contextual_location}</div>
+        `;
+        return;
+    }
+
+    getElement() {
+        return this.element;
+    }
+}
+
+export default SearchBarSuggestionsViewCell;