Btd 14 retrieve v1 updates

docs/references/fit-bounds.md

@@ -4,7 +4,7 @@
 
 ## fitBounds
 
-> fitBounds(bounds, zoom = mapOptions.zoom)
+> fitBounds(bounds, zoom = mapOptions.zoom, padding = 50)
 
 Set zoom and the display area limits of the map.
 
@@ -17,3 +17,15 @@ The display area limits of the map.
 #### `zoom` - Number
 
 The zoom level.
+
+#### `padding` - Number | Object
+
+The padding around the display area limits in pixel.  
+If it's a number, all directions will have the same value.
+
+Object properties:
+
+- `top` - Number (optional, default `0`)
+- `right` - Number (optional, default `0`)
+- `bottom` - Number (optional, default `0`)
+- `left` - Number (optional, default `0`)

docs/references/index.md

@@ -4,36 +4,37 @@
 
 ## Map Provider API
 
--   [Google Map](https://developers.google.com/maps/documentation/javascript/)
--   [Mappy (Leaflet)](http://leafletjs.com/reference-1.0.3.html)
--   [Leaflet](http://leafletjs.com/reference-1.5.1.html)
+- [Google Map](https://developers.google.com/maps/documentation/javascript/)
+- [Mappy (Leaflet)](http://leafletjs.com/reference-1.0.3.html)
+- [Leaflet](http://leafletjs.com/reference-1.5.1.html)
 
 ## Methods
 
--   [addCluster](add-cluster)
--   [addMarker](add-marker)
--   [addMarkers](add-markers)
--   [addUserMarker](add-user-marker)
--   [constructor](constructor)
--   [extendBounds](extend-bounds)
--   [fitBounds](fit-bounds)
--   [focusOnMarker](focus-on-marker)
--   [getGeolocation](get-geolocation)
--   [getMarkerIconByType](get-marker-icon-by-type)
--   [getMarkerIcons](get-marker-icons)
--   [getMarkerIconType](get-marker-icon-type)
--   [getMarker](get-marker)
--   [getMarkers](get-markers)
--   [getPoints](get-points)
--   [getBounds](get-bounds)
--   [initMap](init-map)
--   [listenZoomChange](listen-zoom-change)
--   [minifyMarkerIcons](minify-marker-icons)
--   [panTo](pan-to)
--   [removeMarker](remove-marker)
--   [setCenter](set-center)
--   [setIconOnMarker](set-icon-on-marker)
--   [setMapOptions](set-map-options)
--   [setMarkerIcons](set-marker-icons)
--   [setPoint](set-point)
--   [setZoom](set-zoom)
+- [addCluster](add-cluster)
+- [addMarker](add-marker)
+- [addMarkers](add-markers)
+- [addUserMarker](add-user-marker)
+- [constructor](constructor)
+- [extendBounds](extend-bounds)
+- [fitBounds](fit-bounds)
+- [focusOnMarker](focus-on-marker)
+- [getGeolocation](get-geolocation)
+- [getMarkerIconByType](get-marker-icon-by-type)
+- [getMarkerIcons](get-marker-icons)
+- [getMarkerIconType](get-marker-icon-type)
+- [getMarker](get-marker)
+- [getMarkers](get-markers)
+- [getPoints](get-points)
+- [getBounds](get-bounds)
+- [initMap](init-map)
+- [listenZoomChange](listen-zoom-change)
+- [minifyMarkerIcons](minify-marker-icons)
+- [panTo](pan-to)
+- [panBy](pan-by)
+- [removeMarker](remove-marker)
+- [setCenter](set-center)
+- [setIconOnMarker](set-icon-on-marker)
+- [setMapOptions](set-map-options)
+- [setMarkerIcons](set-marker-icons)
+- [setPoint](set-point)
+- [setZoom](set-zoom)

docs/references/pan-by.md

@@ -0,0 +1,19 @@
+# References
+
+[⇠ Go Back](../references/)
+
+## panBy
+
+> panBy(x, y)
+
+Changes the center of the map by the given distance in pixels.
+
+### Parameters
+
+#### `x` - Number
+
+The distance from west to east in pixels.
+
+#### `y` - Number
+
+The distance from north to south in pixels.

example/components/location.js

@@ -48,10 +48,10 @@ class LocationMapModule {
     });
 
     this.batMap.addMarkers();
-    this.batMap.fitBounds(
-      this.batMap.getBounds(),
-      this.attr.options.locationZoom,
-    );
+
+    const coords = this.attr.locations[0].localisation.coordinates;
+    this.map.setCenter(this.map.makeLatLng(coords.latitude, coords.longitude));
+    this.map.setZoom(this.attr.options.locationZoom);
   }
 }
 

example/components/results.js

@@ -131,7 +131,14 @@ class ResultsMapModule {
       this.batMap
         .getGeolocation()
         .then(position => {
-          this.batMap.addUserMarker(position.coords, 'user');
+          this.batMap.addUserMarker(
+            this.map.makeLatLng(
+              position.coords.latitude,
+              position.coords.longitude,
+            ),
+            'user',
+          );
+          this.batMap.panToAllMarkers();
         })
         .catch(error => {
           console.error('geolocateOnMap(): ' + error.message);
@@ -167,6 +174,26 @@ class ResultsMapModule {
 
   handleMouseEnterOnMarker(marker) {
     return () => {
+      /**
+       * NOTE: Set all non active markers to default icon for Mappy and Leaflet
+       *   prevent markers to not update correctly when showLabel is set to true
+       */
+      if (
+        this.attr.showLabel &&
+        (this.attr.provider === 'mappy' || this.attr.provider === 'leaflet')
+      ) {
+        this.getMarkers()
+          .filter(m => {
+            const type = this.getMarkerIconType(m);
+            return (
+              type !== 'active' && type !== 'default' && marker.id !== m.id
+            );
+          })
+          .forEach(m => {
+            this.setIconOnMarker(m, 'default');
+          });
+      }
+
       if (
         this.getMarkerIconType(marker) !== 'active' &&
         this.getMarkerIconType(marker) !== 'hover'

src/AbstractMap.js

@@ -33,6 +33,7 @@ export class AbstractMap {
     this.icons = [];
     this.bounds = null;
     this.cluster = null;
+    this.focusInProgress = false;
 
     this.defaultOptions = {
       zoom: 12,
@@ -110,6 +111,10 @@ export class AbstractMap {
     console.error(`${this.provider} has no 'setPoint' method implemented.`);
   }
 
+  clearPoints() {
+    this.points.length = 0;
+  }
+
   addMarkers() {
     console.error(`${this.provider} has no 'addMarkers' method implemented.`);
   }
@@ -128,6 +133,21 @@ export class AbstractMap {
     console.error(`${this.provider} has no 'removeMarker' method implemented.`);
   }
 
+  removeCluster() {
+    console.error(
+      `${this.provider} has no 'removeCluster' method implemented.`,
+    );
+  }
+
+  removeAllMarkers() {
+    if (this.cluster) {
+      this.removeCluster();
+    }
+    this.markers.forEach(marker => {
+      this.removeMarker(marker);
+    });
+  }
+
   setMarkerIcons() {
     console.error(
       `${this.provider} has no 'setMarkerIcons' method implemented.`,
@@ -150,10 +170,20 @@ export class AbstractMap {
     console.error(`${this.provider} has no 'addCluster' method implemented.`);
   }
 
+  makeLatLng() {
+    console.error(`${this.provider} has no 'makeLatLng' method implemented.`);
+  }
+
   setCenter() {
     console.error(`${this.provider} has no 'setCenter' method implemented.`);
   }
 
+  getCenterLatLng() {
+    console.error(
+      `${this.provider} has no 'getCenterLatLng' method implemented.`,
+    );
+  }
+
   fitBounds() {
     console.error(`${this.provider} has no 'fitBounds' method implemented.`);
   }
@@ -166,10 +196,24 @@ export class AbstractMap {
     console.error(`${this.provider} has no 'getBounds' method implemented.`);
   }
 
+  getBoundsLatLng() {
+    console.error(
+      `${this.provider} has no 'getBoundsLatLng' method implemented.`,
+    );
+  }
+
   panTo() {
     console.error(`${this.provider} has no 'panTo' method implemented.`);
   }
 
+  panBy() {
+    console.error(`${this.provider} has no 'panBy' method implemented.`);
+  }
+
+  getZoom() {
+    console.error(`${this.provider} has no 'getZoom' method implemented.`);
+  }
+
   setZoom() {
     console.error(`${this.provider} has no 'setZoom' method implemented.`);
   }
@@ -180,6 +224,12 @@ export class AbstractMap {
     );
   }
 
+  listenBoundsChange() {
+    console.error(
+      `${this.provider} has no 'listenBoundsChange' method implemented.`,
+    );
+  }
+
   minifyMarkerIcons() {
     console.error(
       `${this.provider} has no 'minifyMarkerIcons' method implemented.`,