@woosmap/ui 2.34.0 → 2.38.0

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@woosmap/ui",
-  "version": "2.34.0",
+  "version": "2.38.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"
   },
   "main": "src/index.js",
   "dependencies": {
+    "@mapbox/polyline": "^1.1.1",
     "axios": "^0.21.1",
     "classnames": "^2.3.1",
     "framer-motion": "^4.1.17",

package/src/Constants.js

@@ -1,4 +1,5 @@
 export default {
     woosmapKey: 'woos-5ec4eecd-d907-3da0-90f0-f2f3b7e4e672',
+    geolocationWoosmapSearchKey: 'woos-81a699ca-5082-3ffd-9f54-a684a4b82853',
     gmapKey: 'AIzaSyAogtvSQJ8e1LO6WH6GzSI-QtwaRPCV5C8',
 };

package/src/components/Button/Button.js

@@ -35,6 +35,7 @@ export default class Button extends Component {
             { active },
             { 'btn--loading': isLoading },
             { 'btn--no-label': !label },
+            { 'btn--custom-icon-size': iconSize && iconSize !== 24 },
             className
         );
         let iconComponent = icon ? <Icon size={iconSize} icon={icon} /> : null;

package/src/components/Button/Button.stories.js

@@ -215,7 +215,7 @@ export const WithDropdown = TemplateBtnWithDropdown.bind({});
 
 const TemplateBtnSwitch = (args) => {
     const { active } = args;
-    return <ButtonSwitch icon="flag" activeIcon="member" active={active} />;
+    return <ButtonSwitch iconSize={32} size="small" icon="star" activeIcon="star-filled" active={active} />;
 };
 
 TemplateBtnSwitch.args = {

package/src/components/Button/ButtonSwitch.js

@@ -11,7 +11,7 @@ export default class ButtonSwitch extends Component {
 }
 
 ButtonSwitch.defaultProps = {
-    isBtnIcon: true,
+    isBtnIcon: false,
     disabled: false,
     children: null,
     size: undefined,

package/src/components/Card/Card.stories.js

@@ -41,7 +41,7 @@ export const Default = Template.bind({});
 Default.args = {};
 
 const SimpleCardTemplate = () => (
-    <SimpleCard isDisabled isActive title="My hotels in France" subtitle="18 assets - 12K queries">
+    <SimpleCard isDisabled isActive isFavorite title="My hotels in France" subtitle="18 assets - 12K queries">
         <Tooltip text="Localities" direction="n" product="LOCALITIES">
             <Label round size="nano" label="L" product="LOCALITIES" />
         </Tooltip>

package/src/components/Card/SimpleCard.js

@@ -2,10 +2,13 @@
 import React, { Component } from 'react';
 import cl from 'classnames';
 import PropTypes from 'prop-types';
+import Icon from '../Icon/Icon';
+import { tr } from '../utils/locale';
 
 class SimpleCard extends Component {
     render() {
-        const { title, subtitle, className, children, isSelected, isActive, isDisabled, ...rest } = this.props;
+        const { title, subtitle, className, children, isSelected, isActive, isDisabled, isFavorite, ...rest } =
+            this.props;
         return (
             <div
                 className={cl(
@@ -18,6 +21,9 @@ class SimpleCard extends Component {
                 {...rest}
             >
                 {title && <div className="simplecard__title">{title}</div>}
+                {isFavorite && (
+                    <Icon className="simplecard__favorite" title={tr('Favorite project')} icon="star-filled" />
+                )}
                 {subtitle && <div className="simplecard__subtitle">{subtitle}</div>}
                 {children && <div className="simplecard__content">{children}</div>}
             </div>
@@ -33,6 +39,7 @@ SimpleCard.defaultProps = {
     isSelected: false,
     isActive: false,
     isDisabled: false,
+    isFavorite: false,
 };
 
 SimpleCard.propTypes = {
@@ -43,6 +50,7 @@ SimpleCard.propTypes = {
     title: PropTypes.string,
     subtitle: PropTypes.string,
     className: PropTypes.string,
+    isFavorite: PropTypes.bool,
 };
 
 export default SimpleCard;

package/src/components/Card/SimpleCard.styl

@@ -2,6 +2,7 @@
 	flexCol()
 	br()
 	trans()
+	position relative
 	background-color $light
 	padding 1.6rem
 	border .1rem solid $secondary20
@@ -22,10 +23,9 @@
 	&.disabled
 		background #fff url('../../images/texture.png')
 		color $secondary60
-		.simplecard__content
-			opacity .5
 		&.active
 			background $primary6 url('../../images/texture.png')
+		
 	&__title
 		font-weight 600
 		margin-bottom .2rem
@@ -36,6 +36,13 @@
 		margin-top auto
 		padding-top 1rem
 		flexMiddle()
+		.disabled &
+			opacity .5
+	&__favorite
+		position absolute
+		right 1rem
+		top 1.3rem
+		fill $favorite
 	.tooltip
 		position relative
 		$mr = -.2rem

package/src/components/Demo/DistanceDemo.js

@@ -1,13 +1,11 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import axios from 'axios';
 import React, { Component } from 'react';
-import GoogleMapReact from 'google-map-react';
 import PropTypes from 'prop-types';
 import cl from 'classnames';
+import polyline from '@mapbox/polyline';
 import Demo from './SkeletonDemo';
-import Marker from '../Map/Marker';
 import Input from '../Input/Input';
-import { polyline, decodePath, extendedBounds } from '../Map/drawOnMap';
 import Constants from '../../Constants';
 import LocalitiesAutocomplete from '../Woosmap/LocalitiesAutocomplete';
 import Button from '../Button/Button';
@@ -16,6 +14,8 @@ import DrivingImg from '../../images/car.png';
 import CyclingImg from '../../images/cycle.png';
 import WalkingImg from '../../images/walk.png';
 import { tr } from '../utils/locale';
+import markerIcon from '../../images/marker.png';
+import Script from '../utils/Script';
 
 const languages = [
     { value: 'fr', label: 'French' },
@@ -66,13 +66,15 @@ export default class DistanceDemo extends Component {
 
         this.mounted = true;
         this.map = null;
-        this.marker = null;
+        this.markers = [];
         this.requestUrl = 'https://api.woosmap.com/distance/route/json';
         this.polylines = [];
+        this.directionsRenderer = null;
+        this.mapDivRef = React.createRef();
     }
 
     componentDidMount() {
-        this.requestDistance();
+        this.displayMap();
     }
 
     componentWillUnmount() {
@@ -83,21 +85,56 @@ export default class DistanceDemo extends Component {
     }
 
     displayOnMap = () => {
-        const { routes } = this.state;
-        for (let i = 0; i < this.polylines.length; i++) {
-            this.polylines[i].setMap(null);
-        }
-
-        if (routes && routes.length > 0 && this.map) {
-            this.map.fitBounds(extendedBounds(routes.map((route) => route.bounds)));
-            this.map.setZoom(this.map.getZoom() - 1);
-
-            this.polylines = routes.map((route) => {
-                const routePolyline = polyline(decodePath(route.overview_polyline.points));
-                routePolyline.setMap(this.map);
-
-                return routePolyline;
-            });
+        if (this.map) {
+            const { originLocation, destinationLocation, routes } = this.state;
+
+            if (!this.directionsRenderer) {
+                this.directionsRenderer = new window.woosmap.map.DirectionsRenderer({ preserveViewport: true });
+                this.directionsRenderer.setMap(this.map);
+            }
+
+            if (this.markers.length > 0) {
+                this.markers.forEach((marker) => marker.setMap(null));
+                this.markers = [];
+            }
+
+            const bounds = new window.woosmap.map.LatLngBounds();
+
+            this.markers.push(
+                new window.woosmap.map.Marker({
+                    icon: { url: markerIcon, scaledSize: { height: 46, width: 30 } },
+                    position: originLocation,
+                    map: this.map,
+                })
+            );
+            bounds.extend(new window.woosmap.map.LatLng(originLocation.lat, originLocation.lng));
+
+            this.markers.push(
+                new window.woosmap.map.Marker({
+                    icon: { url: markerIcon, scaledSize: { height: 46, width: 30 } },
+                    position: destinationLocation,
+                    map: this.map,
+                })
+            );
+            bounds.extend(new window.woosmap.map.LatLng(destinationLocation.lat, destinationLocation.lng));
+
+            routes.forEach((route) =>
+                Object.values(route.bounds).forEach((bound) =>
+                    bounds.extend(new window.woosmap.map.LatLng(bound.lat, bound.lng))
+                )
+            );
+
+            const decodedRoutes = routes.map((route) => ({
+                ...route,
+                overview_path: route.overview_polyline
+                    ? polyline
+                          .decode(route.overview_polyline.points)
+                          .map((e) => new window.woosmap.map.LatLng(e[0], e[1]))
+                    : undefined,
+            }));
+
+            this.directionsRenderer.setDirections({ routes: decodedRoutes });
+            this.map.fitBounds(bounds, { top: 70, bottom: 70, left: 70, right: 70 });
         }
     };
 
@@ -166,36 +203,21 @@ export default class DistanceDemo extends Component {
         return <ul>{result}</ul>;
     };
 
-    renderMap = () => {
-        const { originLocation, destinationLocation } = this.state;
-
-        const markerOrigin = <Marker lat={originLocation.lat} lng={originLocation.lng} />;
-        const markerDestination = <Marker lat={destinationLocation.lat} lng={destinationLocation.lng} />;
+    displayMap = () => {
+        if (this.timeoutMap) {
+            clearTimeout(this.timeoutMap);
+        }
 
-        return (
-            <GoogleMapReact
-                defaultZoom={8}
-                center={[originLocation.lat, originLocation.lng]}
-                bootstrapURLKeys={{
-                    key: Constants.gmapKey,
-                    libraries: ['geometry', 'places'],
-                }}
-                yesIWantToUseGoogleMapApiInternals
-                onGoogleApiLoaded={({ map }) => {
-                    google.maps.event.addListenerOnce(map, 'idle', () => {
-                        this.timeout = setTimeout(() => {
-                            this.map = map;
-                            this.displayOnMap();
-                        }, 1000);
-                    });
-                }}
-            >
-                {markerOrigin}
-                {markerDestination}
-            </GoogleMapReact>
-        );
+        if (window.woosmap && window.woosmap.map && this.mapDivRef.current) {
+            this.map = new window.woosmap.map.Map(this.mapDivRef.current);
+            this.requestDistance();
+        } else {
+            this.timeoutMap = setTimeout(this.displayMap, 300);
+        }
     };
 
+    renderMap = () => <div className="map" ref={this.mapDivRef} />;
+
     localitiesOnChangeCallBack = (type) => (item) => {
         const newState = {};
         newState[`${type}Location`] = item ? item.location : {};
@@ -323,21 +345,24 @@ export default class DistanceDemo extends Component {
             ),
         };
         return (
-            <Demo
-                id="distance-demo"
-                className="demo--distance"
-                docLink="https://developers.woosmap.com/products/distance-api/get-started/"
-                header={headerLabels}
-                footerFilters={this.renderFooterFilters()}
-                headerFilters={this.renderHeaderFilters()}
-                request={this.requestUrl}
-                noheader={noheader}
-                params={this.getRequestparams()}
-                referer="http://localhost/"
-                response={error || routes}
-                result={this.renderRoutesSummary()}
-                map={this.renderMap()}
-            />
+            <>
+                <Script url={`https://sdk.woosmap.com/map/map.js?key=${Constants.woosmapKey}`} />
+                <Demo
+                    id="distance-demo"
+                    className="demo--distance"
+                    docLink="https://developers.woosmap.com/products/distance-api/get-started/"
+                    header={headerLabels}
+                    footerFilters={this.renderFooterFilters()}
+                    headerFilters={this.renderHeaderFilters()}
+                    request={this.requestUrl}
+                    noheader={noheader}
+                    params={this.getRequestparams()}
+                    referer="http://localhost/"
+                    response={error || routes}
+                    result={this.renderRoutesSummary()}
+                    map={this.renderMap()}
+                />
+            </>
         );
     }
 }

package/src/components/Demo/GeolocationDemo.js

@@ -1,13 +1,17 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import axios from 'axios';
 import React, { Component } from 'react';
-import GoogleMapReact from 'google-map-react';
 import PropTypes from 'prop-types';
 import Demo from './SkeletonDemo';
-import Marker from '../Map/Marker';
-import { viewport, boundsFromViewport } from '../Map/drawOnMap';
+
 import Constants from '../../Constants';
 import { tr } from '../utils/locale';
+import markerIcon from '../../images/marker.png';
+import markerIconAlt from '../../images/marker-alt.png';
+import Script from '../utils/Script';
+import Input from '../Input/Input';
+
+import { WoosmapMapBoundingBox, woosmapBoundsFromViewport } from '../Map/drawOnMap';
 
 export default class GeolocationDemo extends Component {
     constructor(props) {
@@ -15,15 +19,20 @@ export default class GeolocationDemo extends Component {
         this.state = {
             geolocation: null,
             error: null,
+            showStores: false,
+            hasStores: false,
         };
         this.map = null;
         this.marker = null;
         this.viewport = null;
-        this.requestUrl = 'https://api.woosmap.com/geolocation/position/';
+        this.requestUrl = 'https://api.woosmap.com/geolocation/stores';
+        this.mapDivRef = React.createRef();
+        this.overlay = null;
+        this.storeMarkers = [];
     }
 
     componentDidMount() {
-        this.requestGeolocation();
+        this.displayMap();
     }
 
     requestGeolocation = () => {
@@ -32,10 +41,11 @@ export default class GeolocationDemo extends Component {
                 params: this.getRequestparams(),
             })
             .then((response) => {
-                this.setState({
-                    geolocation: response.data,
-                    error: null,
-                });
+                const { data: geolocation } = response;
+                const { stores } = geolocation;
+                const hasStores = stores && stores.length > 1;
+
+                this.setState({ geolocation, hasStores, error: null }, this.displayOnMap);
             })
             .catch((error) => {
                 const errorResult = (error && error.response && error.response.data) || 'Unhandled error';
@@ -44,20 +54,87 @@ export default class GeolocationDemo extends Component {
     };
 
     getRequestparams = () => ({
-        key: Constants.woosmapKey,
+        key: Constants.geolocationWoosmapSearchKey,
+        radius: 200000,
     });
 
+    processMarker = (latLng, icon, forceMap = null) => {
+        const { showStores } = this.state;
+
+        let map;
+        if (!forceMap) map = showStores ? this.map : null;
+        else map = forceMap;
+
+        return new window.woosmap.map.Marker({
+            icon: { url: icon, scaledSize: { height: 46, width: 30 } },
+            position: latLng,
+            map,
+        });
+    };
+
     displayOnMap = () => {
         const { geolocation } = this.state;
-        if (this.viewport) {
-            this.viewport.setMap(null);
-        }
+
         if (this.map && geolocation) {
-            this.map.fitBounds(boundsFromViewport(geolocation.viewport), 20);
-            this.viewport = viewport(this.map, geolocation.viewport);
+            const location = new window.woosmap.map.LatLng(geolocation.latitude, geolocation.longitude);
+
+            if (this.marker) {
+                this.marker.setMap(null);
+                this.marker = null;
+            }
+
+            if (this.storeMarkers) {
+                this.storeMarkers.forEach((store) => store.setMap(null));
+                this.storeMarkers = [];
+            }
+
+            if (this.overlay) {
+                this.overlay.setMap(null);
+                this.overlay = null;
+            }
+
+            this.marker = this.processMarker(location, markerIconAlt, this.map);
+
+            if (geolocation?.stores?.features) {
+                geolocation.stores.features.forEach((feature) => {
+                    const [lng, lat] = feature.geometry.coordinates;
+                    this.storeMarkers.push(this.processMarker(new window.woosmap.map.LatLng({ lat, lng }), markerIcon));
+                });
+            }
+
+            const bounds = woosmapBoundsFromViewport(geolocation.viewport);
+
+            this.overlay = new WoosmapMapBoundingBox(bounds, { top: 55, left: 30, bottom: 10, right: 30 });
+            this.overlay.setMap(this.map);
+
+            this.map.fitBounds(bounds, { top: 70, left: 70, bottom: 70, right: 70 });
         }
     };
 
+    renderFooterFilters = () => {
+        const { hasStores, showStores } = this.state;
+
+        if (!hasStores) {
+            return [];
+        }
+
+        const filterStores = {
+            label: tr('Display Geolocation POIs'),
+            component: (
+                <Input
+                    type="checkbox"
+                    key="stores"
+                    checked={showStores}
+                    onChange={(e) => {
+                        this.setState({ showStores: e.target.checked }, this.displayMap);
+                    }}
+                />
+            ),
+        };
+
+        return [filterStores];
+    };
+
     renderGeolocationInfo = () => {
         const { geolocation } = this.state;
         if (!geolocation) {
@@ -73,7 +150,7 @@ export default class GeolocationDemo extends Component {
         ].forEach((item) => {
             if (geolocation[item.id]) {
                 result.push(
-                    <li key={item}>
+                    <li key={item.id}>
                         {item.label}:&nbsp;
                         <strong>{geolocation[item.id]}</strong>
                     </li>
@@ -99,26 +176,21 @@ export default class GeolocationDemo extends Component {
         return <ul>{result}</ul>;
     };
 
-    renderMap = () => {
-        const { geolocation } = this.state;
-        const location = geolocation || {};
-        const marker = geolocation ? <Marker lat={geolocation.latitude} lng={geolocation.longitude} /> : null;
-        return (
-            <GoogleMapReact
-                defaultZoom={10}
-                center={[location.latitude, location.longitude]}
-                bootstrapURLKeys={{ key: Constants.gmapKey, libraries: ['geometry', 'places'] }}
-                yesIWantToUseGoogleMapApiInternals
-                onGoogleApiLoaded={({ map }) => {
-                    this.map = map;
-                    this.displayOnMap();
-                }}
-            >
-                {marker}
-            </GoogleMapReact>
-        );
+    displayMap = () => {
+        if (this.timeoutMap) {
+            clearTimeout(this.timeoutMap);
+        }
+
+        if (window.woosmap && window.woosmap.map && this.mapDivRef.current) {
+            this.map = new window.woosmap.map.Map(this.mapDivRef.current);
+            this.requestGeolocation();
+        } else {
+            this.timeoutMap = setTimeout(this.displayMap, 300);
+        }
     };
 
+    renderMap = () => <div className="map" ref={this.mapDivRef} />;
+
     render() {
         const { geolocation, error } = this.state;
         const { noheader } = this.props;
@@ -142,20 +214,24 @@ export default class GeolocationDemo extends Component {
             }
         }
         return (
-            <Demo
-                className="demo--geolocation"
-                docLink="https://developers.woosmap.com/products/geolocation-api/location/"
-                id="geolocation-demo"
-                header={headerLabels}
-                headerTagline={precisionInfo}
-                request={this.requestUrl}
-                params={this.getRequestparams()}
-                referer="http://localhost/"
-                noheader={noheader}
-                response={error || geolocation}
-                result={this.renderGeolocationInfo()}
-                map={this.renderMap()}
-            />
+            <>
+                <Script url={`https://sdk.woosmap.com/map/map.js?key=${Constants.geolocationWoosmapSearchKey}`} />
+                <Demo
+                    className="demo--geolocation"
+                    docLink="https://developers.woosmap.com/products/geolocation-api/location/"
+                    id="geolocation-demo"
+                    header={headerLabels}
+                    headerTagline={precisionInfo}
+                    request={this.requestUrl}
+                    params={this.getRequestparams()}
+                    referer="http://localhost/"
+                    noheader={noheader}
+                    response={error || geolocation}
+                    result={this.renderGeolocationInfo()}
+                    map={this.renderMap()}
+                    footerFilters={this.renderFooterFilters()}
+                />
+            </>
         );
     }
 }