@woosmap/ui 2.36.0 → 2.37.0

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@woosmap/ui",
-  "version": "2.36.0",
+  "version": "2.37.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/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
@@ -36,6 +37,11 @@
 		margin-top auto
 		padding-top 1rem
 		flexMiddle()
+	&__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()}
+                />
+            </>
         );
     }
 }

package/src/components/Demo/LocalitiesAddressDemo.js

@@ -2,15 +2,14 @@
 import React, { Component } from 'react';
 import axios from 'axios';
 import PropTypes from 'prop-types';
-import GoogleMapReact from 'google-map-react';
 import Demo from './SkeletonDemo';
 import AddressAutocomplete from '../Woosmap/AddressAutocomplete';
-import Marker from '../Map/Marker';
 import Constants from '../../Constants';
-import { viewpoint } from '../Map/drawOnMap';
 import CountrySelect from '../Select/CountrySelect';
 import { tr } from '../utils/locale';
 import Input from '../Input/Input';
+import markerIcon from '../../images/marker.png';
+import Script from '../utils/Script';
 
 export default class LocalitiesAddressDemo extends Component {
     constructor(props) {
@@ -31,6 +30,11 @@ export default class LocalitiesAddressDemo extends Component {
         this.requestDetailsUrl = 'https://api.woosmap.com/localities/details';
         this.inputRef = React.createRef();
         this.addressAutocompleteRef = React.createRef();
+        this.mapDivRef = React.createRef();
+    }
+
+    componentDidMount() {
+        this.displayMap();
     }
 
     componentWillUnmount() {
@@ -83,12 +87,15 @@ export default class LocalitiesAddressDemo extends Component {
             })
             .then((response) => {
                 if (this.mounted) {
-                    this.setState({
-                        error: null,
-                        showDetails: true,
-                        response: response.data.result,
-                        selectedLocality: response.data.result,
-                    });
+                    this.setState(
+                        {
+                            error: null,
+                            showDetails: true,
+                            response: response.data.result,
+                            selectedLocality: response.data.result,
+                        },
+                        this.displayOnMap
+                    );
                 }
             })
             .catch((error) => {
@@ -124,14 +131,23 @@ export default class LocalitiesAddressDemo extends Component {
     };
 
     displayOnMap = () => {
-        const { selectedAddress } = this.state;
-        if (this.viewport) {
-            this.viewport.setMap(null);
-        }
-        if (this.map && selectedAddress) {
-            if (selectedAddress.viewpoint) {
-                this.viewport = viewpoint(this.map, selectedAddress.viewpoint);
-                this.map.fitBounds(selectedAddress.viewpoint.bounds, 10);
+        if (this.map) {
+            const { selectedLocality } = this.state;
+
+            if (selectedLocality?.geometry?.location) {
+                this.map.setCenter(selectedLocality.geometry.location);
+                this.map.setZoom(17);
+
+                if (this.marker) {
+                    this.marker.setMap(null);
+                    this.marker = null;
+                }
+
+                this.marker = new window.woosmap.map.Marker({
+                    icon: { url: markerIcon, scaledSize: { height: 46, width: 30 } },
+                    position: selectedLocality.geometry.location,
+                    map: this.map,
+                });
             } else {
                 this.map.setZoom(10);
             }
@@ -304,31 +320,21 @@ export default class LocalitiesAddressDemo extends Component {
         );
     };
 
-    renderMap = () => {
-        const { selectedLocality } = this.state;
+    displayMap = () => {
+        if (this.timeoutMap) {
+            clearTimeout(this.timeoutMap);
+        }
 
-        const location =
-            selectedLocality && selectedLocality.geometry
-                ? selectedLocality.geometry.location
-                : { lat: 48.863350992156306, lng: 2.3484066674237796 };
-        const marker =
-            selectedLocality && selectedLocality.geometry ? <Marker lat={location.lat} lng={location.lng} /> : null;
-        return (
-            <GoogleMapReact
-                defaultZoom={10}
-                center={[location.lat, location.lng]}
-                bootstrapURLKeys={{ key: Constants.gmapKey, libraries: ['geometry', 'places'] }}
-                yesIWantToUseGoogleMapApiInternals
-                onGoogleApiLoaded={({ map }) => {
-                    this.map = map;
-                    this.displayOnMap();
-                }}
-            >
-                {marker}
-            </GoogleMapReact>
-        );
+        if (window.woosmap && window.woosmap.map && this.mapDivRef.current) {
+            this.map = new window.woosmap.map.Map(this.mapDivRef.current);
+            this.requestAddress();
+        } else {
+            this.timeoutMap = setTimeout(this.displayMap, 300);
+        }
     };
 
+    renderMap = () => <div className="map" ref={this.mapDivRef} />;
+
     render() {
         const { response, error, showDetails } = this.state;
         const { noheader, headerLabels, subHeader } = this.props;
@@ -337,21 +343,24 @@ export default class LocalitiesAddressDemo extends Component {
             request = this.requestDetailsUrl;
         }
         return (
-            <Demo
-                noheader={noheader}
-                header={headerLabels}
-                subHeader={subHeader}
-                id="localities-demo"
-                className="demo--localitiesaddress"
-                footerFilters={this.renderFooterFilters()}
-                headerFilters={this.renderHeaderFilters()}
-                request={request}
-                params={this.getRequestparams()}
-                referer="http://localhost/"
-                response={error || response}
-                result={this.renderAddress()}
-                map={this.renderMap()}
-            />
+            <>
+                <Script url={`https://sdk.woosmap.com/map/map.js?key=${Constants.woosmapKey}`} />
+                <Demo
+                    noheader={noheader}
+                    header={headerLabels}
+                    subHeader={subHeader}
+                    id="localities-demo"
+                    className="demo--localitiesaddress"
+                    footerFilters={this.renderFooterFilters()}
+                    headerFilters={this.renderHeaderFilters()}
+                    request={request}
+                    params={this.getRequestparams()}
+                    referer="http://localhost/"
+                    response={error || response}
+                    result={this.renderAddress()}
+                    map={this.renderMap()}
+                />
+            </>
         );
     }
 }

package/src/components/Demo/LocalitiesDemo.js

@@ -3,17 +3,17 @@ import axios from 'axios';
 import cl from 'classnames';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import GoogleMapReact from 'google-map-react';
 import Demo from './SkeletonDemo';
-import Marker from '../Map/Marker';
 import Input from '../Input/Input';
 import Select from '../Select/Select';
 import Button from '../Button/Button';
 import ButtonGroup from '../Button/ButtonGroup';
 import CountrySelect from '../Select/CountrySelect';
-import { viewpoint } from '../Map/drawOnMap';
 import Constants from '../../Constants';
 import { tr } from '../utils/locale';
+import markerIcon from '../../images/marker.png';
+import Script from '../utils/Script';
+import { WoosmapMapBoundingBox } from '../Map/drawOnMap';
 
 const languages = [
     { value: 'fr', label: 'French' },
@@ -64,10 +64,12 @@ export default class LocalitiesDemo extends Component {
         this.marker = null;
         this.viewport = null;
         this.requestUrl = 'https://api.woosmap.com/localities/autocomplete/';
+        this.mapDivRef = React.createRef();
+        this.overlay = null;
     }
 
     componentDidMount() {
-        this.requestLocalities();
+        this.displayMap();
     }
 
     componentWillUnmount() {
@@ -114,14 +116,31 @@ export default class LocalitiesDemo extends Component {
 
     displayOnMap = () => {
         const { selectedLocality } = this.state;
-        if (this.viewport) {
-            this.viewport.setMap(null);
-        }
-        if (this.map && selectedLocality) {
+
+        if (this.map && selectedLocality?.location) {
+            if (this.marker) {
+                this.marker.setMap(null);
+                this.marker = null;
+            }
+
+            if (this.overlay) {
+                this.overlay.setMap(null);
+                this.overlay = null;
+            }
+
+            this.marker = new window.woosmap.map.Marker({
+                icon: { url: markerIcon, scaledSize: { height: 46, width: 30 } },
+                position: selectedLocality.location,
+                map: this.map,
+            });
+
             if (selectedLocality.viewpoint) {
-                this.viewport = viewpoint(this.map, selectedLocality.viewpoint);
-                this.map.fitBounds(selectedLocality.viewpoint.bounds, 10);
+                this.overlay = new WoosmapMapBoundingBox(selectedLocality.viewpoint.bounds);
+                this.overlay.setMap(this.map);
+
+                this.map.fitBounds(selectedLocality.viewpoint.bounds, { top: 70, bottom: 70, left: 70, right: 70 });
             } else {
+                this.map.setCenter(selectedLocality.location);
                 this.map.setZoom(10);
             }
         }
@@ -170,28 +189,21 @@ export default class LocalitiesDemo extends Component {
         return <ul>{result}</ul>;
     };
 
-    renderMap = () => {
-        const { selectedLocality } = this.state;
-        const location = selectedLocality ? selectedLocality.location : {};
-        const marker = selectedLocality ? (
-            <Marker lat={selectedLocality.location.lat} lng={selectedLocality.location.lng} />
-        ) : null;
-        return (
-            <GoogleMapReact
-                defaultZoom={10}
-                center={[location.lat, location.lng]}
-                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.requestLocalities();
+        } else {
+            this.timeoutMap = setTimeout(this.displayMap, 300);
+        }
     };
 
+    renderMap = () => <div className="map" ref={this.mapDivRef} />;
+
     renderHeaderFilters = () => {
         const { input } = this.state;
         const { usecaseFilter } = this.props;
@@ -259,22 +271,25 @@ export default class LocalitiesDemo extends Component {
         const { localities, error } = this.state;
         const { noheader, headerLabels, subHeader } = this.props;
         return (
-            <Demo
-                id="localities-demo"
-                header={headerLabels}
-                subHeader={subHeader}
-                docLink="https://developers.woosmap.com/products/localities/get-started/"
-                className="demo--localities"
-                footerFilters={this.renderFooterFilters()}
-                headerFilters={this.renderHeaderFilters()}
-                request={this.requestUrl}
-                noheader={noheader}
-                params={this.getRequestparams()}
-                referer="http://localhost/"
-                response={error || localities}
-                result={this.renderAutocompleteList()}
-                map={this.renderMap()}
-            />
+            <>
+                <Script url={`https://sdk.woosmap.com/map/map.js?key=${Constants.woosmapKey}`} />
+                <Demo
+                    id="localities-demo"
+                    header={headerLabels}
+                    subHeader={subHeader}
+                    docLink="https://developers.woosmap.com/products/localities/get-started/"
+                    className="demo--localities"
+                    footerFilters={this.renderFooterFilters()}
+                    headerFilters={this.renderHeaderFilters()}
+                    request={this.requestUrl}
+                    noheader={noheader}
+                    params={this.getRequestparams()}
+                    referer="http://localhost/"
+                    response={error || localities}
+                    result={this.renderAutocompleteList()}
+                    map={this.renderMap()}
+                />
+            </>
         );
     }
 }

package/src/components/Demo/SearchDemo.js

@@ -2,14 +2,15 @@ import axios from 'axios';
 import cl from 'classnames';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import GoogleMapReact, { fitBounds } from 'google-map-react';
 import Demo from './SkeletonDemo';
-import Marker from '../Map/Marker';
 import Input from '../Input/Input';
 import Constants from '../../Constants';
 import FilterSelect from '../Select/FilterSelect';
 import LocalitiesAutocomplete from '../Woosmap/LocalitiesAutocomplete';
 import { tr } from '../utils/locale';
+import markerIcon from '../../images/marker.png';
+import markerIconAlt from '../../images/marker-alt.png';
+import Script from '../utils/Script';
 
 export default class SearchDemo extends Component {
     constructor(props) {
@@ -31,8 +32,13 @@ export default class SearchDemo extends Component {
         };
         this.mounted = true;
         this.map = null;
-        this.marker = null;
+        this.markers = [];
         this.requestUrl = 'https://api.woosmap.com/stores/search/';
+        this.mapDivRef = React.createRef();
+    }
+
+    componentDidMount() {
+        this.displayMap();
     }
 
     componentWillUnmount() {
@@ -70,38 +76,6 @@ export default class SearchDemo extends Component {
         };
     };
 
-    getZoomAndCenter = (stores) => {
-        if (!this.map) {
-            return { center: null, zoom: null };
-        }
-        const bounds = new google.maps.LatLngBounds();
-
-        const { selectedLocality } = this.state;
-        const locality = selectedLocality && selectedLocality.localion ? selectedLocality : this.defaultLocality;
-        if (locality && locality.location) {
-            bounds.extend(new google.maps.LatLng(locality.location.lat, locality.location.lng));
-        }
-        if (stores && stores.length > 0) {
-            stores.forEach((store) => {
-                bounds.extend(new google.maps.LatLng(store.geometry.coordinates[1], store.geometry.coordinates[0]));
-            });
-        }
-
-        return fitBounds(
-            {
-                ne: {
-                    lat: bounds.getNorthEast().lat(),
-                    lng: bounds.getNorthEast().lng(),
-                },
-                sw: {
-                    lat: bounds.getSouthWest().lat(),
-                    lng: bounds.getSouthWest().lng(),
-                },
-            },
-            { height: 360, width: 400 }
-        );
-    };
-
     requestSearch = () => {
         axios
             .get(this.requestUrl, {
@@ -110,10 +84,13 @@ export default class SearchDemo extends Component {
             .then((response) => {
                 if (this.mounted) {
                     const { data } = response;
-                    this.setState({
-                        data: data || [],
-                        error: null,
-                    });
+                    this.setState(
+                        {
+                            data: data || [],
+                            error: null,
+                        },
+                        this.displayOnMap
+                    );
                 }
             })
             .catch((error) => {
@@ -164,50 +141,62 @@ export default class SearchDemo extends Component {
         return <ul>{result}</ul>;
     };
 
-    renderMarkers = () => {
-        const { data, selectedLocality } = this.state;
-        const stores = data.features || [];
-        const markers = stores.map((store) => (
-            <Marker
-                key={store.properties.store_id}
-                lat={store.geometry.coordinates[1]}
-                lng={store.geometry.coordinates[0]}
-            />
-        ));
-        if (selectedLocality && selectedLocality.location) {
-            markers.push(
-                <Marker
-                    isSecondaryColor
-                    key="current_location"
-                    lat={selectedLocality.location.lat}
-                    lng={selectedLocality.location.lng}
-                />
-            );
+    displayOnMap = () => {
+        if (this.map) {
+            const { data, selectedLocality } = this.state;
+            const { features } = data;
+
+            const bounds = new window.woosmap.map.LatLngBounds();
+
+            if (this.markers.length > 0) {
+                this.markers.forEach((marker) => marker.setMap(null));
+                this.markers = [];
+            }
+
+            if (features && features.length > 0) {
+                features.forEach((store) => {
+                    const [lng, lat] = store.geometry.coordinates;
+                    bounds.extend(new window.woosmap.map.LatLng(lat, lng));
+                    this.markers.push(
+                        new window.woosmap.map.Marker({
+                            icon: { url: markerIcon, scaledSize: { height: 46, width: 30 } },
+                            position: { lat, lng },
+                            map: this.map,
+                        })
+                    );
+                });
+
+                const location = selectedLocality?.location || this.defaultLocality.location;
+                if (location) bounds.extend(new window.woosmap.map.LatLng(location.lat, location.lng));
+            }
+
+            if (selectedLocality && selectedLocality.location) {
+                this.markers.push(
+                    new window.woosmap.map.Marker({
+                        icon: { url: markerIconAlt, scaledSize: { height: 46, width: 30 } },
+                        position: selectedLocality.location,
+                        map: this.map,
+                    })
+                );
+            }
+
+            this.map.fitBounds(bounds, { top: 70, bottom: 70, left: 70, right: 70 });
         }
-        return markers;
     };
 
-    renderMap = () => {
-        const { selectedLocality, data } = this.state;
-        const { center, zoom } = this.getZoomAndCenter(data.features);
-        const location = selectedLocality ? selectedLocality.location : {};
-        return (
-            <GoogleMapReact
-                defaultZoom={10}
-                zoom={zoom}
-                center={center || [location.lat, location.lng]}
-                bootstrapURLKeys={{ key: Constants.gmapKey, libraries: ['geometry', 'places'] }}
-                yesIWantToUseGoogleMapApiInternals
-                onGoogleApiLoaded={({ map }) => {
-                    this.map = map;
-                    this.requestSearch();
-                }}
-            >
-                {this.renderMarkers()}
-            </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.requestSearch();
+        } else {
+            this.timeoutMap = setTimeout(this.displayMap, 300);
+        }
     };
 
+    renderMap = () => <div className="map" ref={this.mapDivRef} />;
+
     renderHeaderFilters = () => {
         const { selectedLocality } = this.state;
         const originInputs = {
@@ -320,21 +309,24 @@ export default class SearchDemo extends Component {
             ),
         };
         return (
-            <Demo
-                id="search-demo"
-                className="demo--search"
-                docLink="https://developers.woosmap.com/products/search-api/get-started/"
-                header={headerLabels}
-                footerFilters={this.renderFooterFilters()}
-                headerFilters={this.renderHeaderFilters()}
-                request={this.requestUrl}
-                params={this.getRequestparams(true)}
-                referer="http://localhost/"
-                response={error || data}
-                noheader={noheader}
-                result={this.renderStoreList()}
-                map={this.renderMap()}
-            />
+            <>
+                <Script url={`https://sdk.woosmap.com/map/map.js?key=${Constants.woosmapKey}`} />
+                <Demo
+                    id="search-demo"
+                    className="demo--search"
+                    docLink="https://developers.woosmap.com/products/search-api/get-started/"
+                    header={headerLabels}
+                    footerFilters={this.renderFooterFilters()}
+                    headerFilters={this.renderHeaderFilters()}
+                    request={this.requestUrl}
+                    params={this.getRequestparams(true)}
+                    referer="http://localhost/"
+                    response={error || data}
+                    noheader={noheader}
+                    result={this.renderStoreList()}
+                    map={this.renderMap()}
+                />
+            </>
         );
     }
 }

package/src/components/Label/Label.styl

@@ -55,21 +55,29 @@
 			sq($buttonHeightNano)
 			padding 0
 			min-height unset
-	&--localities
+	&--LOCALITIES
+	&-localities
 		background-color $localities
+	&--GEOLOCATION
 	&--geolocation
 		background-color $geolocation
+	&--DISTANCE
 	&--distance
 		background-color $distance
-	&--stores
+	&--STORES
+	&-stores
 		background-color $stores
+	&--ADDRESS
 	&--address
 		background-color $address
+	&--MAP
 	&--map
 		background-color $map
-	&--merchants
+	&--MERCHANT
+	&--merchant
 		background-color $merchant
-	&--traffic
+	&--TRAFFIC
+	&--merchant
 		background-color $traffic
 	&--free
 		background-color $free

package/src/components/Map/Marker.js

@@ -8,8 +8,8 @@ export default class Marker extends Component {
         return (
             <div
                 className={cl({
-                    marker: true,
-                    'marker--alt': isSecondaryColor,
+                    'ui-marker': true,
+                    'ui-marker--alt': isSecondaryColor,
                 })}
             />
         );

package/src/components/Map/Marker.test.js

@@ -6,9 +6,9 @@ import Marker from './Marker';
 
 it('renders a marker', () => {
     const { container } = render(<Marker />);
-    expect(container.firstChild).toHaveClass('marker');
+    expect(container.firstChild).toHaveClass('ui-marker');
 });
 it('renders a marker with seondary color', () => {
     const { container } = render(<Marker isSecondaryColor />);
-    expect(container.firstChild).toHaveClass('marker--alt');
+    expect(container.firstChild).toHaveClass('ui-marker--alt');
 });

package/src/components/Map/drawOnMap.js

@@ -76,3 +76,70 @@ export const extendedBounds = function extendedBounds(boundsArray) {
 
     return bounds;
 };
+
+export const woosmapBoundsFromViewport = function woosmapBoundsFromViewport(viewportObj) {
+    return new window.woosmap.map.LatLngBounds(
+        new window.woosmap.map.LatLng(viewportObj.southwest),
+        new window.woosmap.map.LatLng(viewportObj.northeast)
+    );
+};
+
+export class WoosmapMapBoundingBox {
+    constructor(bounds, padding) {
+        this.overlayView = new window.woosmap.map.OverlayView();
+
+        this.bounds = !(bounds instanceof window.woosmap.map.LatLngBounds)
+            ? new window.woosmap.map.LatLngBounds(
+                  { lng: bounds.east, lat: bounds.north },
+                  { lng: bounds.west, lat: bounds.south }
+              )
+            : bounds;
+
+        this.padding = {
+            right: padding?.right || 0,
+            left: padding?.left || 0,
+            top: padding?.top || 0,
+            bottom: padding?.bottom || 0,
+        };
+
+        const self = this;
+
+        this.overlayView.onAdd = () => {
+            const panes = this.overlayView.getPanes();
+
+            this.div = document.createElement('div');
+            this.div.style.borderStyle = 'solid';
+            this.div.style.borderWidth = '1px';
+            this.div.style.borderColor = 'rgba(0, 0, 255, 0.8)';
+            this.div.style.position = 'absolute';
+            this.div.style.backgroundColor = 'rgba(0, 0, 255, 0.2)';
+
+            panes.overlayLayer.appendChild(this.div);
+        };
+
+        this.overlayView.draw = () => {
+            const overlayProjection = this.overlayView.getProjection();
+
+            const sw = overlayProjection.fromLatLngToDivPixel(self.bounds.getSouthWest());
+            const ne = overlayProjection.fromLatLngToDivPixel(self.bounds.getNorthEast());
+
+            if (this.div) {
+                this.div.style.left = `${sw.x - self.padding.left}px`;
+                this.div.style.top = `${ne.y - self.padding.top}px`;
+                this.div.style.width = `${ne.x - sw.x + (self.padding.left + self.padding.right)}px`;
+                this.div.style.height = `${sw.y - ne.y + (self.padding.top + self.padding.bottom)}px`;
+            }
+        };
+
+        this.overlayView.onRemove = () => {
+            if (this.div) {
+                this.div.parentNode.removeChild(this.div);
+                delete this.div;
+            }
+        };
+    }
+
+    setMap(map) {
+        this.overlayView.setMap(map);
+    }
+}

package/src/components/Map/marker.styl

@@ -1,4 +1,4 @@
-.marker
+.ui-marker
 	position absolute
 	width 3rem
 	height 4.6rem

package/src/locales/en/translation.json

@@ -29,6 +29,7 @@
   "Default": "Default",
   "Destination": "Destination",
   "Display Map POIs": "Display Map POIs",
+  "Display Geolocation POIs": "Display points of interest",
   "Display Woosmap Stores overlay": "Display Woosmap Stores overlay",
   "Display your regional promotions and catchment area.": "Display your regional promotions and catchment area.",
   "Distance API": "Distance API",
@@ -44,7 +45,7 @@
   "Grey": "Grey",
   "Identify the country to redirect users to the suitable website, or adapt your services according to the timezone.": "Identify the country to redirect users to the suitable website, or adapt your services according to the timezone.",
   "In Store Wifi": "In Store Wifi",
-  "Initialise your map display around the end user and retrieve your own Points of Interest.": "Initialise your map display around the end user and retrieve your own Points of Interest.",
+  "Initialise your map display around the end user and retrieve your own Points of Interest.": "Initialise your map display around the end user and retrieve your own points of interest.",
   "Language": "Language",
   "Light Grey": "Light Grey",
   "Loading...": "Loading...",

package/src/locales/fr/translation.json

@@ -29,8 +29,9 @@
   "Default": "Défaut",
   "Destination": "Destination",
   "Display Map POIs": "Afficher les POIs de la carte",
+  "Display Geolocation POIs": "Afficher les points de vente",
   "Display Woosmap Stores overlay": "Afficher la couche de magasins Woosmap",
-  "Display your regional promotions and catchment area.": "Affichez les offres promotionnelles de la région, et la zone de chalandise.",
+  "Display your regional promotions and catchment area.": "Affichez les offres promotionnelles de la région et la zone de chalandise.",
   "Distance API": "Distance API",
   "Features": "Caractéristiques",
   "Filter by": "Filtrer par",
@@ -44,7 +45,7 @@
   "Grey": "Gris",
   "Identify the country to redirect users to the suitable website, or adapt your services according to the timezone.": "Identifiez le pays pour rediriger vers le bon site et adaptez vos offres de services en fonction du fuseau horaire de vos visiteurs.",
   "In Store Wifi": "Wifi",
-  "Initialise your map display around the end user and retrieve your own Points of Interest.": "Listez vos propres points de vente et centrez votre affichage cartographique autour de sa position.",
+  "Initialise your map display around the end user and retrieve your own Points of Interest.": "Centrez la carte autour de la position de votre visiteur et affichez vos propres points de vente.",
   "Language": "Language",
   "Light Grey": "Gris clair",
   "Loading...": "Chargement...",

package/src/styles/console/colors.styl

@@ -70,6 +70,8 @@ $special2 = #ff3260
 $special3 =  #46cebc
 $focus = #3633ff
 
+$favorite = #ffc200
+
 $modalBg = rgba(0, 11, 31, .85)
 
 // Labels