@woosmap/ui 3.44.0 → 3.48.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "3.44.0",
+  "version": "3.48.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"

package/src/components/Demo/AddressDemo.js

@@ -2,17 +2,17 @@
 import React, { Component } from 'react';
 import axios from 'axios';
 import cl from 'classnames';
-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 { createWoosmapMap, WoosmapMapBoundingBox } from '../Map/drawOnMap';
 import Button from '../Button/Button';
 import ButtonGroup from '../Button/ButtonGroup';
 import CountrySelect from '../Select/CountrySelect';
 import { tr } from '../utils/locale';
 import Input from '../Input/Input';
+import Script from '../utils/Script';
+import markerIcon from '../../images/marker.png';
+import AddressAutocomplete from '../Woosmap/AddressAutocomplete';
 
 const languages = [
     { value: 'fr', label: 'French' },
@@ -49,6 +49,11 @@ export default class AddressDemo extends Component {
         this.requestGeocodeUrl = 'https://api.woosmap.com/address/geocode/json';
         this.inputRef = React.createRef();
         this.addressAutocompleteRef = React.createRef();
+        this.demoRef = React.createRef();
+    }
+
+    componentDidMount() {
+        this.displayMap();
     }
 
     componentWillUnmount() {
@@ -80,9 +85,9 @@ export default class AddressDemo extends Component {
                     };
                     if (usecase === 'geocode') {
                         // eslint-disable-next-line prefer-destructuring
-                        state.selectedLocality = response.data.results[0];
+                        state.selectedAddress = response.data.results[0];
                     }
-                    this.setState(state);
+                    this.setState(state, this.displayOnMap);
                 }
             })
             .catch((error) => {
@@ -107,12 +112,15 @@ export default class AddressDemo 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,
+                            selectedAddress: response.data.result,
+                        },
+                        this.displayOnMap
+                    );
                 }
             })
             .catch((error) => {
@@ -122,12 +130,10 @@ export default class AddressDemo extends Component {
     };
 
     getRequestparams = () => {
-        const { input, geocodeInput, selectedLocality, language, countries, showDetails, usecase, geometry } =
-            this.state;
+        const { input, geocodeInput, language, countries, showDetails, usecase, geometry } = this.state;
         if (showDetails) {
             const detailsParam = {
                 key: Constants.woosmapKey,
-                public_id: selectedLocality.public_id,
             };
             if (geometry) {
                 detailsParam.fields = 'geometry';
@@ -154,14 +160,37 @@ export default class AddressDemo 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 && selectedAddress?.geometry.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: selectedAddress.geometry.location,
+                map: this.map,
+            });
+
+            if (selectedAddress.geometry.viewport) {
+                const { northeast, southwest } = selectedAddress.geometry.viewport;
+                const bounds = {
+                    north: northeast.lat,
+                    east: northeast.lng,
+                    south: southwest.lat,
+                    west: southwest.lng,
+                };
+                this.overlay = new WoosmapMapBoundingBox(bounds);
+                this.overlay.setMap(this.map);
+                this.map.fitBounds(bounds, { top: 70, bottom: 70, left: 70, right: 70 });
             } else {
+                this.map.setCenter(selectedAddress.geometry.location);
                 this.map.setZoom(10);
             }
         }
@@ -171,7 +200,7 @@ export default class AddressDemo extends Component {
         this.setState(
             {
                 error: null,
-                selectedLocality: address,
+                selectedAddress: address,
             },
             this.requestAddress
         );
@@ -194,7 +223,7 @@ export default class AddressDemo extends Component {
                         key="autocomplete"
                         active={usecase === 'autocomplete'}
                         onClick={() => {
-                            this.setState({ usecase: 'autocomplete', selectedLocality: null, showDetails: false });
+                            this.setState({ usecase: 'autocomplete', selectedAddress: null, showDetails: false });
                         }}
                         label={tr('Autocomplete')}
                     />
@@ -203,7 +232,7 @@ export default class AddressDemo extends Component {
                         key="geocode"
                         active={usecase === 'geocode'}
                         onClick={() => {
-                            this.setState({ usecase: 'geocode', selectedLocality: null, showDetails: false });
+                            this.setState({ usecase: 'geocode', selectedAddress: null, showDetails: false });
                         }}
                         label={tr('Geocode')}
                     />
@@ -296,14 +325,14 @@ export default class AddressDemo extends Component {
     };
 
     renderAddress = () => {
-        const { selectedLocality, geometry } = this.state;
+        const { selectedAddress, geometry } = this.state;
         if (geometry) {
             return null;
         }
         let addressComponents = [];
-        const hasComponents = selectedLocality && selectedLocality.address_components;
+        const hasComponents = selectedAddress && selectedAddress.address_components;
         if (hasComponents) {
-            addressComponents = selectedLocality.address_components;
+            addressComponents = selectedAddress.address_components;
         }
         let shippingAddress = '';
         let shippingAddress2 = '';
@@ -393,29 +422,17 @@ export default class AddressDemo 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.demoRef.current) {
+            window.woosmap.map.config.setApiKey(Constants.woosmapKey);
+            this.map = createWoosmapMap(this.demoRef.current.getMap());
+        } else {
+            this.timeoutMap = setTimeout(this.displayMap, 300);
+        }
     };
 
     render() {
@@ -429,19 +446,23 @@ export default class AddressDemo extends Component {
             }
         }
         return (
-            <Demo
-                noheader
-                id="address-demo"
-                className="demo--address"
-                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" />
+                <Demo
+                    noheader
+                    id="address-demo"
+                    className="demo--address"
+                    footerFilters={this.renderFooterFilters()}
+                    headerFilters={this.renderHeaderFilters()}
+                    request={request}
+                    params={this.getRequestparams()}
+                    referer="http://localhost/"
+                    response={error || response}
+                    result={this.renderAddress()}
+                    ref={this.demoRef}
+                    withMap
+                />
+            </>
         );
     }
 }

package/src/styles/style-website.styl

@@ -1,8 +1,8 @@
 // Common styles - Don't change order
+@import "./website/fonts.styl"
 @import "./commons/reset.styl"
 
 // Specicif style - Do not change order
-@import "./website/fonts.styl"
 @import "./website/mixins.styl"
 @import "./website/variables.styl"
 @import "./website/colors.styl"