@micromag/element-map 0.3.311 → 0.3.318

package/assets/css/styles.css

@@ -1,2 +1,2 @@
-.micromag-element-map-container{position:absolute;top:0;left:0;margin:0;padding:0}.micromag-element-map-container,.micromag-element-map-container .micromag-element-map-map{width:100%;height:100%}.micromag-element-map-container.micromag-element-map-preventScroll .micromag-element-map-map div{cursor:default}
-.micromag-element-map-container{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0}
+.micromag-element-map-container{height:100%;left:0;margin:0;padding:0;position:absolute;top:0;width:100%}.micromag-element-map-container .micromag-element-map-map{height:100%;width:100%}.micromag-element-map-container.micromag-element-map-preventScroll .micromag-element-map-map div{cursor:default}
+.micromag-element-map-container{height:100%;left:0;margin:0;padding:0;position:absolute;top:0;width:100%}

package/es/index.js

@@ -193,52 +193,46 @@ var eventsMapping = {
 };
 function useGoogleMap(_ref) {
   var zoom = _ref.zoom,
-      _ref$maxZoom = _ref.maxZoom,
-      maxZoom = _ref$maxZoom === void 0 ? null : _ref$maxZoom,
-      _ref$center = _ref.center,
-      center = _ref$center === void 0 ? null : _ref$center,
-      _ref$withoutStyle = _ref.withoutStyle,
-      withoutStyle = _ref$withoutStyle === void 0 ? false : _ref$withoutStyle,
-      _ref$fitBounds = _ref.fitBounds,
-      fitBounds = _ref$fitBounds === void 0 ? false : _ref$fitBounds,
-      _ref$bounds = _ref.bounds,
-      bounds = _ref$bounds === void 0 ? null : _ref$bounds,
-      events = _ref.events,
-      _ref$draggable = _ref.draggable,
-      draggable = _ref$draggable === void 0 ? false : _ref$draggable,
-      zoomControl = _ref.zoomControl,
-      mapTypeControl = _ref.mapTypeControl,
-      scaleControl = _ref.scaleControl,
-      streetViewControl = _ref.streetViewControl,
-      rotateControl = _ref.rotateControl,
-      fullscreenControl = _ref.fullscreenControl;
+    _ref$maxZoom = _ref.maxZoom,
+    maxZoom = _ref$maxZoom === void 0 ? null : _ref$maxZoom,
+    _ref$center = _ref.center,
+    center = _ref$center === void 0 ? null : _ref$center,
+    _ref$withoutStyle = _ref.withoutStyle,
+    withoutStyle = _ref$withoutStyle === void 0 ? false : _ref$withoutStyle,
+    _ref$fitBounds = _ref.fitBounds,
+    fitBounds = _ref$fitBounds === void 0 ? false : _ref$fitBounds,
+    _ref$bounds = _ref.bounds,
+    bounds = _ref$bounds === void 0 ? null : _ref$bounds,
+    events = _ref.events,
+    _ref$draggable = _ref.draggable,
+    draggable = _ref$draggable === void 0 ? false : _ref$draggable,
+    zoomControl = _ref.zoomControl,
+    mapTypeControl = _ref.mapTypeControl,
+    scaleControl = _ref.scaleControl,
+    streetViewControl = _ref.streetViewControl,
+    rotateControl = _ref.rotateControl,
+    fullscreenControl = _ref.fullscreenControl;
   var client = useGoogleMapsClient();
-
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      ready = _useState2[0],
-      setReady = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    ready = _useState2[0],
+    setReady = _useState2[1];
   var containerRef = useRef(null);
   var mapRef = useRef(null);
-
   var _useDimensionObserver = useDimensionObserver(),
-      resizeRef = _useDimensionObserver.ref,
-      _useDimensionObserver2 = _useDimensionObserver.width,
-      width = _useDimensionObserver2 === void 0 ? null : _useDimensionObserver2,
-      _useDimensionObserver3 = _useDimensionObserver.height,
-      height = _useDimensionObserver3 === void 0 ? null : _useDimensionObserver3;
-
+    resizeRef = _useDimensionObserver.ref,
+    _useDimensionObserver2 = _useDimensionObserver.width,
+    width = _useDimensionObserver2 === void 0 ? null : _useDimensionObserver2,
+    _useDimensionObserver3 = _useDimensionObserver.height,
+    height = _useDimensionObserver3 === void 0 ? null : _useDimensionObserver3;
   useEffect(function () {
     var map = mapRef.current;
-
     if (map !== null && center !== null) {
       var _ref2 = center || {},
-          _ref2$lat = _ref2.lat,
-          lat = _ref2$lat === void 0 ? null : _ref2$lat,
-          _ref2$lng = _ref2.lng,
-          lng = _ref2$lng === void 0 ? null : _ref2$lng;
-
+        _ref2$lat = _ref2.lat,
+        lat = _ref2$lat === void 0 ? null : _ref2$lat,
+        _ref2$lng = _ref2.lng,
+        lng = _ref2$lng === void 0 ? null : _ref2$lng;
       map.panTo({
         lat: lat || 0,
         lng: lng || 0
@@ -247,7 +241,6 @@ function useGoogleMap(_ref) {
   }, [center]);
   useEffect(function () {
     var map = mapRef.current;
-
     if (map !== null && zoom !== null) {
       map.setZoom(Math.min(maxZoom, zoom));
     }
@@ -256,25 +249,20 @@ function useGoogleMap(_ref) {
     if (newBounds === null || newBounds.equals(map.getBounds())) {
       return;
     }
-
     map.fitBounds(newBounds);
-
     if (map.getZoom() > maxZoom) {
       map.setZoom(maxZoom);
     }
-
     map.panToBounds(newBounds);
   }, [maxZoom]);
   useEffect(function () {
     var map = mapRef.current;
-
     if (map !== null && fitBounds) {
       updateBounds(map, bounds);
     }
   }, [updateBounds, bounds, fitBounds, width, height]);
   useEffect(function () {
     var map = mapRef.current;
-
     if (ready && map !== null) {
       map.setOptions({
         draggable: draggable,
@@ -288,7 +276,6 @@ function useGoogleMap(_ref) {
     if (client === null || containerRef.current === null || mapRef.current !== null) {
       return function () {};
     }
-
     var map = new client.maps.Map(containerRef.current, {
       zoom: zoom,
       center: center,
@@ -300,13 +287,12 @@ function useGoogleMap(_ref) {
       rotateControl: rotateControl,
       fullscreenControl: fullscreenControl
     });
-
     if (fitBounds) {
       updateBounds(map, bounds);
     }
+    mapRef.current = map;
 
-    mapRef.current = map; // @TODO unbind events
-
+    // @TODO unbind events
     if (events !== null) {
       Object.keys(events).forEach(function (eventName) {
         if (events[eventName] !== null) {
@@ -316,7 +302,6 @@ function useGoogleMap(_ref) {
         }
       });
     }
-
     setReady(true);
     return function () {};
   }, [client, setReady]);
@@ -398,47 +383,43 @@ var defaultProps$2 = {
   children: null,
   focusable: true
 };
-
 var Map$1 = function Map(_ref) {
   var _ref2;
-
   var center = _ref.center,
-      zoom = _ref.zoom,
-      maxZoom = _ref.maxZoom,
-      bounds = _ref.bounds,
-      draggable = _ref.draggable,
-      withoutStyle = _ref.withoutStyle,
-      events = _ref.events,
-      fitBounds = _ref.fitBounds,
-      zoomControl = _ref.zoomControl,
-      mapTypeControl = _ref.mapTypeControl,
-      scaleControl = _ref.scaleControl,
-      streetViewControl = _ref.streetViewControl,
-      rotateControl = _ref.rotateControl,
-      fullscreenControl = _ref.fullscreenControl,
-      className = _ref.className,
-      children = _ref.children,
-      focusable = _ref.focusable;
-
+    zoom = _ref.zoom,
+    maxZoom = _ref.maxZoom,
+    bounds = _ref.bounds,
+    draggable = _ref.draggable,
+    withoutStyle = _ref.withoutStyle,
+    events = _ref.events,
+    fitBounds = _ref.fitBounds,
+    zoomControl = _ref.zoomControl,
+    mapTypeControl = _ref.mapTypeControl,
+    scaleControl = _ref.scaleControl,
+    streetViewControl = _ref.streetViewControl,
+    rotateControl = _ref.rotateControl,
+    fullscreenControl = _ref.fullscreenControl,
+    className = _ref.className,
+    children = _ref.children,
+    focusable = _ref.focusable;
   var _useGoogleMap = useGoogleMap({
-    zoom: zoom,
-    maxZoom: maxZoom,
-    bounds: bounds,
-    draggable: draggable,
-    fitBounds: fitBounds,
-    center: center,
-    events: events,
-    withoutStyle: withoutStyle,
-    zoomControl: zoomControl,
-    mapTypeControl: mapTypeControl,
-    scaleControl: scaleControl,
-    streetViewControl: streetViewControl,
-    rotateControl: rotateControl,
-    fullscreenControl: fullscreenControl
-  }),
-      map = _useGoogleMap.map,
-      mapRef = _useGoogleMap.ref;
-
+      zoom: zoom,
+      maxZoom: maxZoom,
+      bounds: bounds,
+      draggable: draggable,
+      fitBounds: fitBounds,
+      center: center,
+      events: events,
+      withoutStyle: withoutStyle,
+      zoomControl: zoomControl,
+      mapTypeControl: mapTypeControl,
+      scaleControl: scaleControl,
+      streetViewControl: streetViewControl,
+      rotateControl: rotateControl,
+      fullscreenControl: fullscreenControl
+    }),
+    map = _useGoogleMap.map,
+    mapRef = _useGoogleMap.ref;
   return /*#__PURE__*/React.createElement("div", Object.assign({
     className: classNames([styles$1.container, (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, styles$1.preventScroll, !draggable), _ref2)])
   }, stopDragEventsPropagation), /*#__PURE__*/React.createElement("div", {
@@ -451,7 +432,6 @@ var Map$1 = function Map(_ref) {
     });
   }));
 };
-
 Map$1.propTypes = propTypes$2;
 Map$1.defaultProps = defaultProps$2;
 
@@ -461,20 +441,18 @@ var eventMapping = {
 };
 function useGoogleMapMarker(map) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref$position = _ref.position,
-      position = _ref$position === void 0 ? null : _ref$position,
-      _ref$icon = _ref.icon,
-      icon = _ref$icon === void 0 ? null : _ref$icon,
-      _ref$iconSize = _ref.iconSize,
-      iconSize = _ref$iconSize === void 0 ? null : _ref$iconSize,
-      events = _ref.events,
-      title = _ref.title;
-
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? null : _ref$position,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? null : _ref$icon,
+    _ref$iconSize = _ref.iconSize,
+    iconSize = _ref$iconSize === void 0 ? null : _ref$iconSize,
+    events = _ref.events,
+    title = _ref.title;
   var client = useGoogleMapsClient();
   var markerRef = useRef(null);
   useEffect(function () {
     var marker = markerRef.current;
-
     if (marker !== null && position !== null) {
       marker.setPosition(position);
     }
@@ -483,12 +461,10 @@ function useGoogleMapMarker(map) {
     if (client === null) {
       return;
     }
-
     if (isObject(newIcon)) {
       var _ref2 = newIcon || {},
-          _ref2$url = _ref2.url,
-          iconUrl = _ref2$url === void 0 ? null : _ref2$url;
-
+        _ref2$url = _ref2.url,
+        iconUrl = _ref2$url === void 0 ? null : _ref2$url;
       marker.setIcon({
         url: iconUrl,
         scaledSize: new client.maps.Size(iconSize.width, iconSize.height)
@@ -499,18 +475,15 @@ function useGoogleMapMarker(map) {
   }, [client, iconSize]);
   useEffect(function () {
     var marker = markerRef.current;
-
     if (marker === null || client === null) {
       return;
     }
-
     updateIcon(marker, icon);
   }, [client, icon, updateIcon]);
   useEffect(function () {
     if (client === null || map === null || markerRef.current !== null) {
       return function () {};
     }
-
     var marker = new client.maps.Marker({
       position: position,
       map: map,
@@ -564,16 +537,15 @@ var defaultProps$1 = {
     height: 50
   }
 };
-
 var Marker = function Marker(_ref) {
   var map = _ref.map,
-      position = _ref.position,
-      type = _ref.type,
-      events = _ref.events,
-      active = _ref.active,
-      title = _ref.title,
-      image = _ref.image,
-      iconSize = _ref.iconSize;
+    position = _ref.position,
+    type = _ref.type,
+    events = _ref.events,
+    active = _ref.active,
+    title = _ref.title,
+    image = _ref.image,
+    iconSize = _ref.iconSize;
   useGoogleMapMarker(map, {
     position: position,
     type: type,
@@ -584,7 +556,6 @@ var Marker = function Marker(_ref) {
   });
   return null;
 };
-
 Marker.propTypes = propTypes$1;
 Marker.defaultProps = defaultProps$1;
 
@@ -597,7 +568,6 @@ Marker.defaultProps = defaultProps$1;
     lng: PropTypes.number
   })).isRequired,
   events: PropTypes.object // eslint-disable-line
-
 });
 
 ({
@@ -657,29 +627,28 @@ var defaultProps = {
   fullscreenControl: false,
   focusable: true
 };
-
 var Map = function Map(_ref) {
   var center = _ref.center,
-      zoom = _ref.zoom,
-      draggable = _ref.draggable,
-      markers = _ref.markers,
-      onClickMap = _ref.onClickMap,
-      onClickMarker = _ref.onClickMarker,
-      className = _ref.className,
-      onReady = _ref.onReady,
-      onCenterChanged = _ref.onCenterChanged,
-      onBoundsChanged = _ref.onBoundsChanged,
-      onDrag = _ref.onDrag,
-      onDragEnd = _ref.onDragEnd,
-      withoutStyle = _ref.withoutStyle,
-      fitBounds = _ref.fitBounds,
-      zoomControl = _ref.zoomControl,
-      mapTypeControl = _ref.mapTypeControl,
-      scaleControl = _ref.scaleControl,
-      streetViewControl = _ref.streetViewControl,
-      rotateControl = _ref.rotateControl,
-      fullscreenControl = _ref.fullscreenControl,
-      focusable = _ref.focusable;
+    zoom = _ref.zoom,
+    draggable = _ref.draggable,
+    markers = _ref.markers,
+    onClickMap = _ref.onClickMap,
+    onClickMarker = _ref.onClickMarker,
+    className = _ref.className,
+    onReady = _ref.onReady,
+    onCenterChanged = _ref.onCenterChanged,
+    onBoundsChanged = _ref.onBoundsChanged,
+    onDrag = _ref.onDrag,
+    onDragEnd = _ref.onDragEnd,
+    withoutStyle = _ref.withoutStyle,
+    fitBounds = _ref.fitBounds,
+    zoomControl = _ref.zoomControl,
+    mapTypeControl = _ref.mapTypeControl,
+    scaleControl = _ref.scaleControl,
+    streetViewControl = _ref.streetViewControl,
+    rotateControl = _ref.rotateControl,
+    fullscreenControl = _ref.fullscreenControl,
+    focusable = _ref.focusable;
   var client = useGoogleMapsClient();
   var onClick = useCallback(function (position) {
     if (onClickMap !== null) {
@@ -690,35 +659,28 @@ var Map = function Map(_ref) {
     var correctMarkers = (markers || []).filter(function (it) {
       return it !== null && (it.geoPosition || null) !== null;
     });
-
     if (client === null || correctMarkers === null || correctMarkers.length === 0) {
       return null;
     }
-
     var markersBounds = correctMarkers.reduce(function (newBounds, _ref2) {
       var _ref2$geoPosition = _ref2.geoPosition,
-          geoPosition = _ref2$geoPosition === void 0 ? null : _ref2$geoPosition;
-
+        geoPosition = _ref2$geoPosition === void 0 ? null : _ref2$geoPosition;
       var _ref3 = geoPosition || {},
-          _ref3$lat = _ref3.lat,
-          lat = _ref3$lat === void 0 ? null : _ref3$lat,
-          _ref3$lng = _ref3.lng,
-          lng = _ref3$lng === void 0 ? null : _ref3$lng;
-
+        _ref3$lat = _ref3.lat,
+        lat = _ref3$lat === void 0 ? null : _ref3$lat,
+        _ref3$lng = _ref3.lng,
+        lng = _ref3$lng === void 0 ? null : _ref3$lng;
       if (lat !== null && lng !== null) {
         newBounds.extend(new client.maps.LatLng(lat, lng));
       }
-
       return newBounds;
     }, new client.maps.LatLngBounds());
     return markersBounds;
   }, [client, markers]);
-
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      loaded = _useState2[0],
-      setLoaded = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    loaded = _useState2[0],
+    setLoaded = _useState2[1];
   useEffect(function () {
     if (client !== null && loaded) {
       if (onReady !== null) {
@@ -758,13 +720,13 @@ var Map = function Map(_ref) {
     focusable: focusable
   }, markers !== null ? markers.map(function (_ref5, index) {
     var _ref5$active = _ref5.active,
-        active = _ref5$active === void 0 ? true : _ref5$active,
-        _ref5$geoPosition = _ref5.geoPosition,
-        geoPosition = _ref5$geoPosition === void 0 ? null : _ref5$geoPosition,
-        _ref5$image = _ref5.image,
-        image = _ref5$image === void 0 ? null : _ref5$image,
-        _ref5$title = _ref5.title,
-        title = _ref5$title === void 0 ? null : _ref5$title;
+      active = _ref5$active === void 0 ? true : _ref5$active,
+      _ref5$geoPosition = _ref5.geoPosition,
+      geoPosition = _ref5$geoPosition === void 0 ? null : _ref5$geoPosition,
+      _ref5$image = _ref5.image,
+      image = _ref5$image === void 0 ? null : _ref5$image,
+      _ref5$title = _ref5.title,
+      title = _ref5$title === void 0 ? null : _ref5$title;
     return geoPosition !== null && (geoPosition.lat || null) !== null && (geoPosition.lng || null) !== null ? /*#__PURE__*/React.createElement(Marker, {
       key: "marker-".concat(index),
       active: active,
@@ -777,12 +739,10 @@ var Map = function Map(_ref) {
         } : function () {
           return console.log(index);
         } // eslint-disable-line no-console
-
       }
     }) : /*#__PURE__*/React.createElement("div", null);
   }) : null));
 };
-
 Map.propTypes = propTypes;
 Map.defaultProps = defaultProps;
 

package/lib/index.js

@@ -207,52 +207,46 @@ var eventsMapping = {
 };
 function useGoogleMap(_ref) {
   var zoom = _ref.zoom,
-      _ref$maxZoom = _ref.maxZoom,
-      maxZoom = _ref$maxZoom === void 0 ? null : _ref$maxZoom,
-      _ref$center = _ref.center,
-      center = _ref$center === void 0 ? null : _ref$center,
-      _ref$withoutStyle = _ref.withoutStyle,
-      withoutStyle = _ref$withoutStyle === void 0 ? false : _ref$withoutStyle,
-      _ref$fitBounds = _ref.fitBounds,
-      fitBounds = _ref$fitBounds === void 0 ? false : _ref$fitBounds,
-      _ref$bounds = _ref.bounds,
-      bounds = _ref$bounds === void 0 ? null : _ref$bounds,
-      events = _ref.events,
-      _ref$draggable = _ref.draggable,
-      draggable = _ref$draggable === void 0 ? false : _ref$draggable,
-      zoomControl = _ref.zoomControl,
-      mapTypeControl = _ref.mapTypeControl,
-      scaleControl = _ref.scaleControl,
-      streetViewControl = _ref.streetViewControl,
-      rotateControl = _ref.rotateControl,
-      fullscreenControl = _ref.fullscreenControl;
+    _ref$maxZoom = _ref.maxZoom,
+    maxZoom = _ref$maxZoom === void 0 ? null : _ref$maxZoom,
+    _ref$center = _ref.center,
+    center = _ref$center === void 0 ? null : _ref$center,
+    _ref$withoutStyle = _ref.withoutStyle,
+    withoutStyle = _ref$withoutStyle === void 0 ? false : _ref$withoutStyle,
+    _ref$fitBounds = _ref.fitBounds,
+    fitBounds = _ref$fitBounds === void 0 ? false : _ref$fitBounds,
+    _ref$bounds = _ref.bounds,
+    bounds = _ref$bounds === void 0 ? null : _ref$bounds,
+    events = _ref.events,
+    _ref$draggable = _ref.draggable,
+    draggable = _ref$draggable === void 0 ? false : _ref$draggable,
+    zoomControl = _ref.zoomControl,
+    mapTypeControl = _ref.mapTypeControl,
+    scaleControl = _ref.scaleControl,
+    streetViewControl = _ref.streetViewControl,
+    rotateControl = _ref.rotateControl,
+    fullscreenControl = _ref.fullscreenControl;
   var client = contexts.useGoogleMapsClient();
-
   var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      ready = _useState2[0],
-      setReady = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    ready = _useState2[0],
+    setReady = _useState2[1];
   var containerRef = React.useRef(null);
   var mapRef = React.useRef(null);
-
   var _useDimensionObserver = hooks.useDimensionObserver(),
-      resizeRef = _useDimensionObserver.ref,
-      _useDimensionObserver2 = _useDimensionObserver.width,
-      width = _useDimensionObserver2 === void 0 ? null : _useDimensionObserver2,
-      _useDimensionObserver3 = _useDimensionObserver.height,
-      height = _useDimensionObserver3 === void 0 ? null : _useDimensionObserver3;
-
+    resizeRef = _useDimensionObserver.ref,
+    _useDimensionObserver2 = _useDimensionObserver.width,
+    width = _useDimensionObserver2 === void 0 ? null : _useDimensionObserver2,
+    _useDimensionObserver3 = _useDimensionObserver.height,
+    height = _useDimensionObserver3 === void 0 ? null : _useDimensionObserver3;
   React.useEffect(function () {
     var map = mapRef.current;
-
     if (map !== null && center !== null) {
       var _ref2 = center || {},
-          _ref2$lat = _ref2.lat,
-          lat = _ref2$lat === void 0 ? null : _ref2$lat,
-          _ref2$lng = _ref2.lng,
-          lng = _ref2$lng === void 0 ? null : _ref2$lng;
-
+        _ref2$lat = _ref2.lat,
+        lat = _ref2$lat === void 0 ? null : _ref2$lat,
+        _ref2$lng = _ref2.lng,
+        lng = _ref2$lng === void 0 ? null : _ref2$lng;
       map.panTo({
         lat: lat || 0,
         lng: lng || 0
@@ -261,7 +255,6 @@ function useGoogleMap(_ref) {
   }, [center]);
   React.useEffect(function () {
     var map = mapRef.current;
-
     if (map !== null && zoom !== null) {
       map.setZoom(Math.min(maxZoom, zoom));
     }
@@ -270,25 +263,20 @@ function useGoogleMap(_ref) {
     if (newBounds === null || newBounds.equals(map.getBounds())) {
       return;
     }
-
     map.fitBounds(newBounds);
-
     if (map.getZoom() > maxZoom) {
       map.setZoom(maxZoom);
     }
-
     map.panToBounds(newBounds);
   }, [maxZoom]);
   React.useEffect(function () {
     var map = mapRef.current;
-
     if (map !== null && fitBounds) {
       updateBounds(map, bounds);
     }
   }, [updateBounds, bounds, fitBounds, width, height]);
   React.useEffect(function () {
     var map = mapRef.current;
-
     if (ready && map !== null) {
       map.setOptions({
         draggable: draggable,
@@ -302,7 +290,6 @@ function useGoogleMap(_ref) {
     if (client === null || containerRef.current === null || mapRef.current !== null) {
       return function () {};
     }
-
     var map = new client.maps.Map(containerRef.current, {
       zoom: zoom,
       center: center,
@@ -314,13 +301,12 @@ function useGoogleMap(_ref) {
       rotateControl: rotateControl,
       fullscreenControl: fullscreenControl
     });
-
     if (fitBounds) {
       updateBounds(map, bounds);
     }
+    mapRef.current = map;
 
-    mapRef.current = map; // @TODO unbind events
-
+    // @TODO unbind events
     if (events !== null) {
       Object.keys(events).forEach(function (eventName) {
         if (events[eventName] !== null) {
@@ -330,7 +316,6 @@ function useGoogleMap(_ref) {
         }
       });
     }
-
     setReady(true);
     return function () {};
   }, [client, setReady]);
@@ -412,47 +397,43 @@ var defaultProps$2 = {
   children: null,
   focusable: true
 };
-
 var Map$1 = function Map(_ref) {
   var _ref2;
-
   var center = _ref.center,
-      zoom = _ref.zoom,
-      maxZoom = _ref.maxZoom,
-      bounds = _ref.bounds,
-      draggable = _ref.draggable,
-      withoutStyle = _ref.withoutStyle,
-      events = _ref.events,
-      fitBounds = _ref.fitBounds,
-      zoomControl = _ref.zoomControl,
-      mapTypeControl = _ref.mapTypeControl,
-      scaleControl = _ref.scaleControl,
-      streetViewControl = _ref.streetViewControl,
-      rotateControl = _ref.rotateControl,
-      fullscreenControl = _ref.fullscreenControl,
-      className = _ref.className,
-      children = _ref.children,
-      focusable = _ref.focusable;
-
+    zoom = _ref.zoom,
+    maxZoom = _ref.maxZoom,
+    bounds = _ref.bounds,
+    draggable = _ref.draggable,
+    withoutStyle = _ref.withoutStyle,
+    events = _ref.events,
+    fitBounds = _ref.fitBounds,
+    zoomControl = _ref.zoomControl,
+    mapTypeControl = _ref.mapTypeControl,
+    scaleControl = _ref.scaleControl,
+    streetViewControl = _ref.streetViewControl,
+    rotateControl = _ref.rotateControl,
+    fullscreenControl = _ref.fullscreenControl,
+    className = _ref.className,
+    children = _ref.children,
+    focusable = _ref.focusable;
   var _useGoogleMap = useGoogleMap({
-    zoom: zoom,
-    maxZoom: maxZoom,
-    bounds: bounds,
-    draggable: draggable,
-    fitBounds: fitBounds,
-    center: center,
-    events: events,
-    withoutStyle: withoutStyle,
-    zoomControl: zoomControl,
-    mapTypeControl: mapTypeControl,
-    scaleControl: scaleControl,
-    streetViewControl: streetViewControl,
-    rotateControl: rotateControl,
-    fullscreenControl: fullscreenControl
-  }),
-      map = _useGoogleMap.map,
-      mapRef = _useGoogleMap.ref;
-
+      zoom: zoom,
+      maxZoom: maxZoom,
+      bounds: bounds,
+      draggable: draggable,
+      fitBounds: fitBounds,
+      center: center,
+      events: events,
+      withoutStyle: withoutStyle,
+      zoomControl: zoomControl,
+      mapTypeControl: mapTypeControl,
+      scaleControl: scaleControl,
+      streetViewControl: streetViewControl,
+      rotateControl: rotateControl,
+      fullscreenControl: fullscreenControl
+    }),
+    map = _useGoogleMap.map,
+    mapRef = _useGoogleMap.ref;
   return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     className: classNames__default["default"]([styles$1.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles$1.preventScroll, !draggable), _ref2)])
   }, stopDragEventsPropagation), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -465,7 +446,6 @@ var Map$1 = function Map(_ref) {
     });
   }));
 };
-
 Map$1.propTypes = propTypes$2;
 Map$1.defaultProps = defaultProps$2;
 
@@ -475,20 +455,18 @@ var eventMapping = {
 };
 function useGoogleMapMarker(map) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref$position = _ref.position,
-      position = _ref$position === void 0 ? null : _ref$position,
-      _ref$icon = _ref.icon,
-      icon = _ref$icon === void 0 ? null : _ref$icon,
-      _ref$iconSize = _ref.iconSize,
-      iconSize = _ref$iconSize === void 0 ? null : _ref$iconSize,
-      events = _ref.events,
-      title = _ref.title;
-
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? null : _ref$position,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? null : _ref$icon,
+    _ref$iconSize = _ref.iconSize,
+    iconSize = _ref$iconSize === void 0 ? null : _ref$iconSize,
+    events = _ref.events,
+    title = _ref.title;
   var client = contexts.useGoogleMapsClient();
   var markerRef = React.useRef(null);
   React.useEffect(function () {
     var marker = markerRef.current;
-
     if (marker !== null && position !== null) {
       marker.setPosition(position);
     }
@@ -497,12 +475,10 @@ function useGoogleMapMarker(map) {
     if (client === null) {
       return;
     }
-
     if (isObject__default["default"](newIcon)) {
       var _ref2 = newIcon || {},
-          _ref2$url = _ref2.url,
-          iconUrl = _ref2$url === void 0 ? null : _ref2$url;
-
+        _ref2$url = _ref2.url,
+        iconUrl = _ref2$url === void 0 ? null : _ref2$url;
       marker.setIcon({
         url: iconUrl,
         scaledSize: new client.maps.Size(iconSize.width, iconSize.height)
@@ -513,18 +489,15 @@ function useGoogleMapMarker(map) {
   }, [client, iconSize]);
   React.useEffect(function () {
     var marker = markerRef.current;
-
     if (marker === null || client === null) {
       return;
     }
-
     updateIcon(marker, icon);
   }, [client, icon, updateIcon]);
   React.useEffect(function () {
     if (client === null || map === null || markerRef.current !== null) {
       return function () {};
     }
-
     var marker = new client.maps.Marker({
       position: position,
       map: map,
@@ -578,16 +551,15 @@ var defaultProps$1 = {
     height: 50
   }
 };
-
 var Marker = function Marker(_ref) {
   var map = _ref.map,
-      position = _ref.position,
-      type = _ref.type,
-      events = _ref.events,
-      active = _ref.active,
-      title = _ref.title,
-      image = _ref.image,
-      iconSize = _ref.iconSize;
+    position = _ref.position,
+    type = _ref.type,
+    events = _ref.events,
+    active = _ref.active,
+    title = _ref.title,
+    image = _ref.image,
+    iconSize = _ref.iconSize;
   useGoogleMapMarker(map, {
     position: position,
     type: type,
@@ -598,7 +570,6 @@ var Marker = function Marker(_ref) {
   });
   return null;
 };
-
 Marker.propTypes = propTypes$1;
 Marker.defaultProps = defaultProps$1;
 
@@ -611,7 +582,6 @@ Marker.defaultProps = defaultProps$1;
     lng: PropTypes__default["default"].number
   })).isRequired,
   events: PropTypes__default["default"].object // eslint-disable-line
-
 });
 
 ({
@@ -671,29 +641,28 @@ var defaultProps = {
   fullscreenControl: false,
   focusable: true
 };
-
 var Map = function Map(_ref) {
   var center = _ref.center,
-      zoom = _ref.zoom,
-      draggable = _ref.draggable,
-      markers = _ref.markers,
-      onClickMap = _ref.onClickMap,
-      onClickMarker = _ref.onClickMarker,
-      className = _ref.className,
-      onReady = _ref.onReady,
-      onCenterChanged = _ref.onCenterChanged,
-      onBoundsChanged = _ref.onBoundsChanged,
-      onDrag = _ref.onDrag,
-      onDragEnd = _ref.onDragEnd,
-      withoutStyle = _ref.withoutStyle,
-      fitBounds = _ref.fitBounds,
-      zoomControl = _ref.zoomControl,
-      mapTypeControl = _ref.mapTypeControl,
-      scaleControl = _ref.scaleControl,
-      streetViewControl = _ref.streetViewControl,
-      rotateControl = _ref.rotateControl,
-      fullscreenControl = _ref.fullscreenControl,
-      focusable = _ref.focusable;
+    zoom = _ref.zoom,
+    draggable = _ref.draggable,
+    markers = _ref.markers,
+    onClickMap = _ref.onClickMap,
+    onClickMarker = _ref.onClickMarker,
+    className = _ref.className,
+    onReady = _ref.onReady,
+    onCenterChanged = _ref.onCenterChanged,
+    onBoundsChanged = _ref.onBoundsChanged,
+    onDrag = _ref.onDrag,
+    onDragEnd = _ref.onDragEnd,
+    withoutStyle = _ref.withoutStyle,
+    fitBounds = _ref.fitBounds,
+    zoomControl = _ref.zoomControl,
+    mapTypeControl = _ref.mapTypeControl,
+    scaleControl = _ref.scaleControl,
+    streetViewControl = _ref.streetViewControl,
+    rotateControl = _ref.rotateControl,
+    fullscreenControl = _ref.fullscreenControl,
+    focusable = _ref.focusable;
   var client = contexts.useGoogleMapsClient();
   var onClick = React.useCallback(function (position) {
     if (onClickMap !== null) {
@@ -704,35 +673,28 @@ var Map = function Map(_ref) {
     var correctMarkers = (markers || []).filter(function (it) {
       return it !== null && (it.geoPosition || null) !== null;
     });
-
     if (client === null || correctMarkers === null || correctMarkers.length === 0) {
       return null;
     }
-
     var markersBounds = correctMarkers.reduce(function (newBounds, _ref2) {
       var _ref2$geoPosition = _ref2.geoPosition,
-          geoPosition = _ref2$geoPosition === void 0 ? null : _ref2$geoPosition;
-
+        geoPosition = _ref2$geoPosition === void 0 ? null : _ref2$geoPosition;
       var _ref3 = geoPosition || {},
-          _ref3$lat = _ref3.lat,
-          lat = _ref3$lat === void 0 ? null : _ref3$lat,
-          _ref3$lng = _ref3.lng,
-          lng = _ref3$lng === void 0 ? null : _ref3$lng;
-
+        _ref3$lat = _ref3.lat,
+        lat = _ref3$lat === void 0 ? null : _ref3$lat,
+        _ref3$lng = _ref3.lng,
+        lng = _ref3$lng === void 0 ? null : _ref3$lng;
       if (lat !== null && lng !== null) {
         newBounds.extend(new client.maps.LatLng(lat, lng));
       }
-
       return newBounds;
     }, new client.maps.LatLngBounds());
     return markersBounds;
   }, [client, markers]);
-
   var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      loaded = _useState2[0],
-      setLoaded = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    loaded = _useState2[0],
+    setLoaded = _useState2[1];
   React.useEffect(function () {
     if (client !== null && loaded) {
       if (onReady !== null) {
@@ -772,13 +734,13 @@ var Map = function Map(_ref) {
     focusable: focusable
   }, markers !== null ? markers.map(function (_ref5, index) {
     var _ref5$active = _ref5.active,
-        active = _ref5$active === void 0 ? true : _ref5$active,
-        _ref5$geoPosition = _ref5.geoPosition,
-        geoPosition = _ref5$geoPosition === void 0 ? null : _ref5$geoPosition,
-        _ref5$image = _ref5.image,
-        image = _ref5$image === void 0 ? null : _ref5$image,
-        _ref5$title = _ref5.title,
-        title = _ref5$title === void 0 ? null : _ref5$title;
+      active = _ref5$active === void 0 ? true : _ref5$active,
+      _ref5$geoPosition = _ref5.geoPosition,
+      geoPosition = _ref5$geoPosition === void 0 ? null : _ref5$geoPosition,
+      _ref5$image = _ref5.image,
+      image = _ref5$image === void 0 ? null : _ref5$image,
+      _ref5$title = _ref5.title,
+      title = _ref5$title === void 0 ? null : _ref5$title;
     return geoPosition !== null && (geoPosition.lat || null) !== null && (geoPosition.lng || null) !== null ? /*#__PURE__*/React__default["default"].createElement(Marker, {
       key: "marker-".concat(index),
       active: active,
@@ -791,12 +753,10 @@ var Map = function Map(_ref) {
         } : function () {
           return console.log(index);
         } // eslint-disable-line no-console
-
       }
     }) : /*#__PURE__*/React__default["default"].createElement("div", null);
   }) : null));
 };
-
 Map.propTypes = propTypes;
 Map.defaultProps = defaultProps;
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-map",
-    "version": "0.3.311",
+    "version": "0.3.318",
     "description": "",
     "keywords": [
         "javascript"
@@ -49,15 +49,15 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.311",
+        "@micromag/core": "^0.3.318",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
         "react-intl": "^5.12.1",
-        "uuid": "^8.3.2"
+        "uuid": "^9.0.0"
     },
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "fab297a7ad204611597c749b969f14d992d35d47"
+    "gitHead": "7d1a296e0c0d410e1225279e1f19e3a7715bfa96"
 }