@woosmap/ui 2.43.0 → 2.44.0

package/package.json

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

package/src/components/Demo/DistanceDemo.js

@@ -16,6 +16,7 @@ import WalkingImg from '../../images/walk.png';
 import { tr } from '../utils/locale';
 import markerIcon from '../../images/marker.png';
 import Script from '../utils/Script';
+import { createWoosmapMap } from '../Map/drawOnMap';
 
 const languages = [
     { value: 'fr', label: 'French' },
@@ -209,7 +210,7 @@ export default class DistanceDemo extends Component {
         }
 
         if (window.woosmap && window.woosmap.map && this.mapDivRef.current) {
-            this.map = new window.woosmap.map.Map(this.mapDivRef.current);
+            this.map = createWoosmapMap(this.mapDivRef.current);
             this.requestDistance();
         } else {
             this.timeoutMap = setTimeout(this.displayMap, 300);

package/src/components/Demo/GeolocationDemo.js

@@ -6,12 +6,12 @@ import Demo from './SkeletonDemo';
 
 import Constants from '../../Constants';
 import { tr } from '../utils/locale';
-import markerIcon from '../../images/marker.png';
-import markerIconAlt from '../../images/marker-alt.png';
+import markerIcon from '../../images/marker-dot.svg';
+import markerGeolocationIcon from '../../images/marker-alt.png';
 import Script from '../utils/Script';
 import Input from '../Input/Input';
 
-import { WoosmapMapBoundingBox, woosmapBoundsFromViewport } from '../Map/drawOnMap';
+import { WoosmapMapBoundingBox, woosmapBoundsFromViewport, createWoosmapMap } from '../Map/drawOnMap';
 
 export default class GeolocationDemo extends Component {
     constructor(props) {
@@ -56,20 +56,17 @@ export default class GeolocationDemo extends Component {
     getRequestparams = () => ({
         key: Constants.geolocationWoosmapSearchKey,
         radius: 200000,
+        limit: 20,
     });
 
-    processMarker = (latLng, icon, forceMap = null) => {
+    processMarker = (latLng, icon, forceMap = null, scaledSize = { height: 24, width: 24 }) => {
         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,
-        });
+        return new window.woosmap.map.Marker({ icon: { url: icon, scaledSize }, position: latLng, map });
     };
 
     displayOnMap = () => {
@@ -93,8 +90,6 @@ export default class GeolocationDemo extends Component {
                 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;
@@ -102,6 +97,8 @@ export default class GeolocationDemo extends Component {
                 });
             }
 
+            this.marker = this.processMarker(location, markerGeolocationIcon, this.map, { height: 46, width: 30 });
+
             const bounds = woosmapBoundsFromViewport(geolocation.viewport);
 
             this.overlay = new WoosmapMapBoundingBox(bounds, { top: 55, left: 30, bottom: 10, right: 30 });
@@ -182,7 +179,7 @@ export default class GeolocationDemo extends Component {
         }
 
         if (window.woosmap && window.woosmap.map && this.mapDivRef.current) {
-            this.map = new window.woosmap.map.Map(this.mapDivRef.current);
+            this.map = createWoosmapMap(this.mapDivRef.current);
             this.requestGeolocation();
         } else {
             this.timeoutMap = setTimeout(this.displayMap, 300);

package/src/components/Demo/LocalitiesAddressDemo.js

@@ -10,6 +10,7 @@ import { tr } from '../utils/locale';
 import Input from '../Input/Input';
 import markerIcon from '../../images/marker.png';
 import Script from '../utils/Script';
+import { createWoosmapMap } from '../Map/drawOnMap';
 
 export default class LocalitiesAddressDemo extends Component {
     constructor(props) {
@@ -326,7 +327,7 @@ export default class LocalitiesAddressDemo extends Component {
         }
 
         if (window.woosmap && window.woosmap.map && this.mapDivRef.current) {
-            this.map = new window.woosmap.map.Map(this.mapDivRef.current);
+            this.map = createWoosmapMap(this.mapDivRef.current);
             this.requestAddress();
         } else {
             this.timeoutMap = setTimeout(this.displayMap, 300);

package/src/components/Demo/LocalitiesDemo.js

@@ -13,7 +13,7 @@ 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';
+import { WoosmapMapBoundingBox, createWoosmapMap } from '../Map/drawOnMap';
 
 const languages = [
     { value: 'fr', label: 'French' },
@@ -195,7 +195,7 @@ export default class LocalitiesDemo extends Component {
         }
 
         if (window.woosmap && window.woosmap.map && this.mapDivRef.current) {
-            this.map = new window.woosmap.map.Map(this.mapDivRef.current);
+            this.map = createWoosmapMap(this.mapDivRef.current);
             this.requestLocalities();
         } else {
             this.timeoutMap = setTimeout(this.displayMap, 300);

package/src/components/Demo/SearchDemo.js

@@ -11,6 +11,7 @@ import { tr } from '../utils/locale';
 import markerIcon from '../../images/marker.png';
 import markerIconAlt from '../../images/marker-alt.png';
 import Script from '../utils/Script';
+import { createWoosmapMap } from '../Map/drawOnMap';
 import 'resize-observer-polyfill/dist/ResizeObserver.global';
 
 export default class SearchDemo extends Component {
@@ -189,7 +190,7 @@ export default class SearchDemo extends Component {
         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.map = createWoosmapMap(this.mapDivRef.current);
             this.requestSearch();
         } else {
             this.timeoutMap = setTimeout(this.displayMap, 300);

package/src/components/Map/drawOnMap.js

@@ -84,6 +84,46 @@ export const woosmapBoundsFromViewport = function woosmapBoundsFromViewport(view
     );
 };
 
+export const createWoosmapMap = (node) =>
+    new window.woosmap.map.Map(node, {
+        styles: [
+            {
+                featureType: 'administrative',
+                elementType: 'all',
+                stylers: [{ visibility: 'on' }, { saturation: -100 }, { lightness: 20 }],
+            },
+            {
+                featureType: 'road',
+                elementType: 'all',
+                stylers: [{ visibility: 'on' }, { saturation: -100 }, { lightness: 40 }],
+            },
+            {
+                featureType: 'water',
+                elementType: 'all',
+                stylers: [{ visibility: 'on' }, { saturation: -10 }, { lightness: 30 }],
+            },
+            {
+                featureType: 'landscape.man_made',
+                elementType: 'all',
+                stylers: [{ visibility: 'simplified' }, { saturation: -60 }, { lightness: 10 }],
+            },
+            {
+                featureType: 'landscape.natural',
+                elementType: 'all',
+                stylers: [{ visibility: 'simplified' }, { saturation: -60 }, { lightness: 60 }],
+            },
+            {
+                featureType: 'poi',
+                elementType: 'all',
+                stylers: [{ visibility: 'off' }, { saturation: -100 }, { lightness: 60 }],
+            },
+            {
+                featureType: 'transit',
+                elementType: 'all',
+                stylers: [{ visibility: 'off' }, { saturation: -100 }, { lightness: 60 }],
+            },
+        ],
+    });
 export class WoosmapMapBoundingBox {
     constructor(bounds, padding) {
         this.overlayView = new window.woosmap.map.OverlayView();

package/src/images/marker-dot.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.64 32.64" width="32.64" height="32.64">
+<defs>
+	<filter id="dropshadow" height="130%">
+		<feGaussianBlur in="SourceAlpha" stdDeviation="1.6"/>
+		<feOffset dx="0" dy="1" result="offsetblur"/>
+		<feComponentTransfer>
+			<feFuncA type="linear" slope="0.4"/>
+		</feComponentTransfer>
+		<feMerge>
+			<feMergeNode/>
+			<feMergeNode in="SourceGraphic"/>
+		</feMerge>
+	</filter>
+</defs>
+<path d="M16.15,27.67a12.486,12.486,0,0,1-8.857-3.663,12.637,12.637,0,0,1,.1-17.714A12.49,12.49,0,1,1,16.15,27.67Z" fill="#fff" filter="url(#dropshadow)" /><path d="M23.593,7.707a10.468,10.468,0,0,0-14.786,0A10.629,10.629,0,0,0,8.715,22.6,10.526,10.526,0,0,0,23.593,7.707Z" fill="#5587fd"/><path d="M16.3,7.9A5.335,5.335,0,0,0,11,13.2c0,3.8,4.8,5.8,4.8,9.4,0,.3.2.4.5.4a.458.458,0,0,0,.5-.4c0-3.5,4.8-5.5,4.8-9.4A5.271,5.271,0,0,0,16.3,7.9Z" fill="#fff"/><circle cx="16.3" cy="13.4" r="2.1" fill="#5587fd"/><rect width="32.6" height="32.6" fill="none"/></svg>