react-map4d-map 1.3.8 → 1.3.9

package/dist/index.js

@@ -17,18 +17,27 @@ var MarkerClusterContext = React.createContext(markerClusterDefaultContext);
 var MFBuilding = function MFBuilding(props) {
   var position = props.position,
       name = props.name,
-      scale = props.scale,
-      bearing = props.bearing,
-      elevation = props.elevation,
-      height = props.height,
+      _props$scale = props.scale,
+      scale = _props$scale === void 0 ? 1 : _props$scale,
+      _props$bearing = props.bearing,
+      bearing = _props$bearing === void 0 ? 0 : _props$bearing,
+      _props$elevation = props.elevation,
+      elevation = _props$elevation === void 0 ? 0 : _props$elevation,
+      _props$height = props.height,
+      height = _props$height === void 0 ? 1 : _props$height,
       model = props.model,
       texture = props.texture,
       coordinates = props.coordinates,
-      visible = props.visible,
-      draggable = props.draggable,
-      userInteractionEnabled = props.userInteractionEnabled,
-      selected = props.selected,
-      growUp = props.growUp,
+      _props$visible = props.visible,
+      visible = _props$visible === void 0 ? true : _props$visible,
+      _props$draggable = props.draggable,
+      draggable = _props$draggable === void 0 ? false : _props$draggable,
+      _props$clickable = props.clickable,
+      clickable = _props$clickable === void 0 ? true : _props$clickable,
+      _props$selected = props.selected,
+      selected = _props$selected === void 0 ? false : _props$selected,
+      _props$growUp = props.growUp,
+      growUp = _props$growUp === void 0 ? true : _props$growUp,
       map = props.map,
       onCreated = props.onCreated;
   var map4dContext = React.useContext(Map4dContext);
@@ -53,7 +62,7 @@ var MFBuilding = function MFBuilding(props) {
         coordinates: coordinates,
         visible: visible,
         draggable: draggable,
-        userInteractionEnabled: userInteractionEnabled,
+        clickable: clickable,
         selected: selected,
         growUp: growUp
       };
@@ -95,69 +104,67 @@ var MFBuilding = function MFBuilding(props) {
   React.useEffect(function () {
     var _buildingRef$current6;
 
-    name != undefined && ((_buildingRef$current6 = buildingRef.current) === null || _buildingRef$current6 === void 0 ? void 0 : _buildingRef$current6.setName(name));
+    (_buildingRef$current6 = buildingRef.current) === null || _buildingRef$current6 === void 0 ? void 0 : _buildingRef$current6.setName(name);
   }, [name]);
   React.useEffect(function () {
     var _buildingRef$current7;
 
-    scale != undefined && ((_buildingRef$current7 = buildingRef.current) === null || _buildingRef$current7 === void 0 ? void 0 : _buildingRef$current7.setScale(scale));
+    (_buildingRef$current7 = buildingRef.current) === null || _buildingRef$current7 === void 0 ? void 0 : _buildingRef$current7.setScale(scale);
   }, [scale]);
   React.useEffect(function () {
-    if (bearing != undefined) {
-      var _buildingRef$current8;
+    var _buildingRef$current8;
 
-      (_buildingRef$current8 = buildingRef.current) === null || _buildingRef$current8 === void 0 ? void 0 : _buildingRef$current8.setBearing(bearing);
-    }
+    (_buildingRef$current8 = buildingRef.current) === null || _buildingRef$current8 === void 0 ? void 0 : _buildingRef$current8.setBearing(bearing);
   }, [bearing]);
   React.useEffect(function () {
     var _buildingRef$current9;
 
-    elevation != undefined && ((_buildingRef$current9 = buildingRef.current) === null || _buildingRef$current9 === void 0 ? void 0 : _buildingRef$current9.setElevation(elevation));
+    (_buildingRef$current9 = buildingRef.current) === null || _buildingRef$current9 === void 0 ? void 0 : _buildingRef$current9.setElevation(elevation);
   }, [elevation]);
   React.useEffect(function () {
     var _buildingRef$current10;
 
-    height != undefined && ((_buildingRef$current10 = buildingRef.current) === null || _buildingRef$current10 === void 0 ? void 0 : _buildingRef$current10.setHeight(height));
+    (_buildingRef$current10 = buildingRef.current) === null || _buildingRef$current10 === void 0 ? void 0 : _buildingRef$current10.setHeight(height);
   }, [height]);
   React.useEffect(function () {
     var _buildingRef$current11;
 
-    model != undefined && ((_buildingRef$current11 = buildingRef.current) === null || _buildingRef$current11 === void 0 ? void 0 : _buildingRef$current11.setModel(model));
+    (_buildingRef$current11 = buildingRef.current) === null || _buildingRef$current11 === void 0 ? void 0 : _buildingRef$current11.setModel(model);
   }, [model]);
   React.useEffect(function () {
     var _buildingRef$current12;
 
-    texture != undefined && ((_buildingRef$current12 = buildingRef.current) === null || _buildingRef$current12 === void 0 ? void 0 : _buildingRef$current12.setTexture(texture));
+    (_buildingRef$current12 = buildingRef.current) === null || _buildingRef$current12 === void 0 ? void 0 : _buildingRef$current12.setTexture(texture);
   }, [texture]);
   React.useEffect(function () {
     var _buildingRef$current13;
 
-    coordinates != undefined && ((_buildingRef$current13 = buildingRef.current) === null || _buildingRef$current13 === void 0 ? void 0 : _buildingRef$current13.setCoordinates(coordinates));
+    (_buildingRef$current13 = buildingRef.current) === null || _buildingRef$current13 === void 0 ? void 0 : _buildingRef$current13.setCoordinates(coordinates);
   }, [coordinates]);
   React.useEffect(function () {
     var _buildingRef$current14;
 
-    visible != undefined && ((_buildingRef$current14 = buildingRef.current) === null || _buildingRef$current14 === void 0 ? void 0 : _buildingRef$current14.setVisible(visible));
+    (_buildingRef$current14 = buildingRef.current) === null || _buildingRef$current14 === void 0 ? void 0 : _buildingRef$current14.setVisible(visible);
   }, [visible]);
   React.useEffect(function () {
     var _buildingRef$current15;
 
-    draggable != undefined && ((_buildingRef$current15 = buildingRef.current) === null || _buildingRef$current15 === void 0 ? void 0 : _buildingRef$current15.setDraggable(draggable));
+    (_buildingRef$current15 = buildingRef.current) === null || _buildingRef$current15 === void 0 ? void 0 : _buildingRef$current15.setDraggable(draggable);
   }, [draggable]);
   React.useEffect(function () {
     var _buildingRef$current16;
 
-    userInteractionEnabled != undefined && ((_buildingRef$current16 = buildingRef.current) === null || _buildingRef$current16 === void 0 ? void 0 : _buildingRef$current16.setUserInteraction(userInteractionEnabled));
-  }, [userInteractionEnabled]);
+    (_buildingRef$current16 = buildingRef.current) === null || _buildingRef$current16 === void 0 ? void 0 : _buildingRef$current16.setClickable(clickable);
+  }, [clickable]);
   React.useEffect(function () {
     var _buildingRef$current17;
 
-    selected != undefined && ((_buildingRef$current17 = buildingRef.current) === null || _buildingRef$current17 === void 0 ? void 0 : _buildingRef$current17.setSelected(selected));
+    (_buildingRef$current17 = buildingRef.current) === null || _buildingRef$current17 === void 0 ? void 0 : _buildingRef$current17.setSelected(selected);
   }, [selected]);
   React.useEffect(function () {
     var _buildingRef$current18;
 
-    growUp != undefined && ((_buildingRef$current18 = buildingRef.current) === null || _buildingRef$current18 === void 0 ? void 0 : _buildingRef$current18.setGrowUp(growUp));
+    (_buildingRef$current18 = buildingRef.current) === null || _buildingRef$current18 === void 0 ? void 0 : _buildingRef$current18.setGrowUp(growUp);
   }, [growUp]);
   return null;
 };
@@ -242,15 +249,19 @@ VariableTool.hasValue = function (variable) {
 var MFCircle = function MFCircle(props) {
   var center = props.center,
       radius = props.radius,
-      fillColor = props.fillColor,
-      fillOpacity = props.fillOpacity,
-      visible = props.visible,
-      strokeColor = props.strokeColor,
+      _props$fillColor = props.fillColor,
+      fillColor = _props$fillColor === void 0 ? "#0000FF" : _props$fillColor,
+      _props$fillOpacity = props.fillOpacity,
+      fillOpacity = _props$fillOpacity === void 0 ? 1 : _props$fillOpacity,
+      _props$visible = props.visible,
+      visible = _props$visible === void 0 ? true : _props$visible,
+      _props$strokeColor = props.strokeColor,
+      strokeColor = _props$strokeColor === void 0 ? "#00FF00" : _props$strokeColor,
       strokeWidth = props.strokeWidth,
       draggable = props.draggable,
       zIndex = props.zIndex,
       elevation = props.elevation,
-      userInteractionEnabled = props.userInteractionEnabled,
+      clickable = props.clickable,
       map = props.map,
       onCreated = props.onCreated,
       onClick = props.onClick;
@@ -275,7 +286,7 @@ var MFCircle = function MFCircle(props) {
         draggable: draggable,
         zIndex: zIndex,
         elevation: elevation,
-        userInteractionEnabled: userInteractionEnabled
+        clickable: clickable
       };
       Object.keys(option).forEach(function (key) {
         if (option[key] == undefined || option[key] == null) {
@@ -384,12 +395,12 @@ var MFCircle = function MFCircle(props) {
     }
   }, [elevation]);
   React.useEffect(function () {
-    if (VariableTool.hasValue(userInteractionEnabled)) {
+    if (VariableTool.hasValue(clickable)) {
       var _circleRef$current15;
 
-      (_circleRef$current15 = circleRef.current) === null || _circleRef$current15 === void 0 ? void 0 : _circleRef$current15.setUserInteraction(userInteractionEnabled);
+      (_circleRef$current15 = circleRef.current) === null || _circleRef$current15 === void 0 ? void 0 : _circleRef$current15.setClickable(clickable);
     }
-  }, [userInteractionEnabled]);
+  }, [clickable]);
   return null;
 };
 
@@ -493,6 +504,12 @@ var MFDirectionsRenderer = function MFDirectionsRenderer(props) {
       directionRef.current.onMouseMove = onMouseMove;
       onCreated && onCreated(directionRef.current);
     }
+
+    return function () {
+      var _directionRef$current2;
+
+      (_directionRef$current2 = directionRef.current) === null || _directionRef$current2 === void 0 ? void 0 : _directionRef$current2.setMap(null);
+    };
   }, [theMap]);
   React.useEffect(function () {
     if (directionRef.current) {
@@ -516,46 +533,46 @@ var MFDirectionsRenderer = function MFDirectionsRenderer(props) {
   }, [onMouseMove]);
   React.useEffect(function () {
     if (theMap) {
-      var _directionRef$current2;
+      var _directionRef$current3;
 
-      (_directionRef$current2 = directionRef.current) === null || _directionRef$current2 === void 0 ? void 0 : _directionRef$current2.setMap(theMap);
+      (_directionRef$current3 = directionRef.current) === null || _directionRef$current3 === void 0 ? void 0 : _directionRef$current3.setMap(theMap);
     }
 
     return function () {
-      var _directionRef$current3;
+      var _directionRef$current4;
 
-      (_directionRef$current3 = directionRef.current) === null || _directionRef$current3 === void 0 ? void 0 : _directionRef$current3.setMap(null);
+      (_directionRef$current4 = directionRef.current) === null || _directionRef$current4 === void 0 ? void 0 : _directionRef$current4.setMap(null);
     };
   }, [theMap]);
   React.useEffect(function () {
     return function () {
-      var _directionRef$current4;
+      var _directionRef$current5;
 
-      (_directionRef$current4 = directionRef.current) === null || _directionRef$current4 === void 0 ? void 0 : _directionRef$current4.setMap(null);
+      (_directionRef$current5 = directionRef.current) === null || _directionRef$current5 === void 0 ? void 0 : _directionRef$current5.setMap(null);
     };
   }, []);
   React.useEffect(function () {
-    var _directionRef$current5;
+    var _directionRef$current6;
 
-    routes != undefined && ((_directionRef$current5 = directionRef.current) === null || _directionRef$current5 === void 0 ? void 0 : _directionRef$current5.setRoutes(routes));
+    routes != undefined && ((_directionRef$current6 = directionRef.current) === null || _directionRef$current6 === void 0 ? void 0 : _directionRef$current6.setRoutes(routes));
   }, [routes]);
   React.useEffect(function () {
-    var _directionRef$current6;
+    var _directionRef$current7;
 
-    activedIndex != undefined && ((_directionRef$current6 = directionRef.current) === null || _directionRef$current6 === void 0 ? void 0 : _directionRef$current6.setActivedIndex(activedIndex));
+    activedIndex != undefined && ((_directionRef$current7 = directionRef.current) === null || _directionRef$current7 === void 0 ? void 0 : _directionRef$current7.setActivedIndex(activedIndex));
   }, [activedIndex]);
   React.useEffect(function () {
-    var _directionRef$current7;
+    var _directionRef$current8;
 
-    activeStrokePattern != undefined && ((_directionRef$current7 = directionRef.current) === null || _directionRef$current7 === void 0 ? void 0 : _directionRef$current7.setActiveStrokePattern(activeStrokePattern));
+    activeStrokePattern != undefined && ((_directionRef$current8 = directionRef.current) === null || _directionRef$current8 === void 0 ? void 0 : _directionRef$current8.setActiveStrokePattern(activeStrokePattern));
   }, [activeStrokePattern]);
   React.useEffect(function () {
-    var _directionRef$current8;
+    var _directionRef$current9;
 
-    inactiveStrokePattern != undefined && ((_directionRef$current8 = directionRef.current) === null || _directionRef$current8 === void 0 ? void 0 : _directionRef$current8.setInactiveStrokePattern(inactiveStrokePattern));
+    inactiveStrokePattern != undefined && ((_directionRef$current9 = directionRef.current) === null || _directionRef$current9 === void 0 ? void 0 : _directionRef$current9.setInactiveStrokePattern(inactiveStrokePattern));
   }, [inactiveStrokePattern]);
   React.useEffect(function () {
-    var _directionRef$current9;
+    var _directionRef$current10;
 
     var option = {
       routes: routes,
@@ -580,7 +597,7 @@ var MFDirectionsRenderer = function MFDirectionsRenderer(props) {
         delete option[key];
       }
     });
-    (_directionRef$current9 = directionRef.current) === null || _directionRef$current9 === void 0 ? void 0 : _directionRef$current9.setOptions(option);
+    (_directionRef$current10 = directionRef.current) === null || _directionRef$current10 === void 0 ? void 0 : _directionRef$current10.setOptions(option);
   }, [activeStrokeWidth, activeStrokeColor, activeOutlineWidth, activeOutlineColor, inactiveStrokeColor, inactiveOutlineWidth, inactiveOutlineColor, originMarkerOptions, destinationMarkerOptions, waypointMarkerOptions, onMarkerDragEnd]);
   return null;
 };
@@ -771,6 +788,8 @@ var createId = function createId() {
 };
 
 var MFMap = function MFMap(props) {
+  var _props$options3, _props$options8;
+
   var _options = React.useRef({
     options: props.options,
     mapId: props.mapid,
@@ -874,145 +893,163 @@ var MFMap = function MFMap(props) {
 
       destroy();
     };
-  }, []);
+  }, [props.environment, props.version, props.accessKey]);
+  React.useEffect(function () {
+    var _props$options, _mapRef$current2, _props$options2;
+
+    ((_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.mapType) != undefined && ((_mapRef$current2 = mapRef.current) === null || _mapRef$current2 === void 0 ? void 0 : _mapRef$current2.setMapType((_props$options2 = props.options) === null || _props$options2 === void 0 ? void 0 : _props$options2.mapType));
+  }, [(_props$options3 = props.options) === null || _props$options3 === void 0 ? void 0 : _props$options3.mapType]);
+  React.useEffect(function () {
+    var _props$options4, _props$options6, _mapRef$current5, _props$options7;
+
+    if (((_props$options4 = props.options) === null || _props$options4 === void 0 ? void 0 : _props$options4.center) != undefined) {
+      var _mapRef$current3, _props$options5, _mapRef$current4;
+
+      var camera = (_mapRef$current3 = mapRef.current) === null || _mapRef$current3 === void 0 ? void 0 : _mapRef$current3.getCamera();
+      camera === null || camera === void 0 ? void 0 : camera.setTarget((_props$options5 = props.options) === null || _props$options5 === void 0 ? void 0 : _props$options5.center);
+      (_mapRef$current4 = mapRef.current) === null || _mapRef$current4 === void 0 ? void 0 : _mapRef$current4.moveCamera(camera);
+    }
+
+    ((_props$options6 = props.options) === null || _props$options6 === void 0 ? void 0 : _props$options6.mapType) != undefined && ((_mapRef$current5 = mapRef.current) === null || _mapRef$current5 === void 0 ? void 0 : _mapRef$current5.setMapType((_props$options7 = props.options) === null || _props$options7 === void 0 ? void 0 : _props$options7.mapType));
+  }, [(_props$options8 = props.options) === null || _props$options8 === void 0 ? void 0 : _props$options8.center]);
 
   var registerEvent = function registerEvent() {
-    var _mapRef$current2, _mapRef$current3, _mapRef$current4, _mapRef$current5, _mapRef$current6, _mapRef$current7, _mapRef$current8, _mapRef$current9, _mapRef$current10, _mapRef$current11, _mapRef$current12, _mapRef$current13, _mapRef$current14, _mapRef$current15, _mapRef$current16, _mapRef$current17, _mapRef$current18, _mapRef$current19, _mapRef$current20, _mapRef$current21;
+    var _mapRef$current6, _mapRef$current7, _mapRef$current8, _mapRef$current9, _mapRef$current10, _mapRef$current11, _mapRef$current12, _mapRef$current13, _mapRef$current14, _mapRef$current15, _mapRef$current16, _mapRef$current17, _mapRef$current18, _mapRef$current19, _mapRef$current20, _mapRef$current21, _mapRef$current22, _mapRef$current23, _mapRef$current24, _mapRef$current25;
 
-    var eventClickMarker = (_mapRef$current2 = mapRef.current) === null || _mapRef$current2 === void 0 ? void 0 : _mapRef$current2.addListener("click", function (args) {
+    var eventClickMarker = (_mapRef$current6 = mapRef.current) === null || _mapRef$current6 === void 0 ? void 0 : _mapRef$current6.addListener("click", function (args) {
       var _args$marker, _args$marker2;
 
       ((_args$marker = args.marker) === null || _args$marker === void 0 ? void 0 : _args$marker.onClick) && ((_args$marker2 = args.marker) === null || _args$marker2 === void 0 ? void 0 : _args$marker2.onClick(args));
     }, {
       marker: true
     });
-    var eventRightClickMarker = (_mapRef$current3 = mapRef.current) === null || _mapRef$current3 === void 0 ? void 0 : _mapRef$current3.addListener("rightClick", function (args) {
+    var eventRightClickMarker = (_mapRef$current7 = mapRef.current) === null || _mapRef$current7 === void 0 ? void 0 : _mapRef$current7.addListener("rightClick", function (args) {
       var _args$marker3, _args$marker4;
 
       ((_args$marker3 = args.marker) === null || _args$marker3 === void 0 ? void 0 : _args$marker3.onRightClick) && ((_args$marker4 = args.marker) === null || _args$marker4 === void 0 ? void 0 : _args$marker4.onRightClick(args));
     }, {
       marker: true
     });
-    var eventDragEndMarker = (_mapRef$current4 = mapRef.current) === null || _mapRef$current4 === void 0 ? void 0 : _mapRef$current4.addListener("dragEnd", function (args) {
+    var eventDragEndMarker = (_mapRef$current8 = mapRef.current) === null || _mapRef$current8 === void 0 ? void 0 : _mapRef$current8.addListener("dragEnd", function (args) {
       var _args$marker5, _args$marker6;
 
       ((_args$marker5 = args.marker) === null || _args$marker5 === void 0 ? void 0 : _args$marker5.onDragEnd) && ((_args$marker6 = args.marker) === null || _args$marker6 === void 0 ? void 0 : _args$marker6.onDragEnd(args));
     }, {
       marker: true
     });
-    var eventHoverMarker = (_mapRef$current5 = mapRef.current) === null || _mapRef$current5 === void 0 ? void 0 : _mapRef$current5.addListener("hover", function (args) {
+    var eventHoverMarker = (_mapRef$current9 = mapRef.current) === null || _mapRef$current9 === void 0 ? void 0 : _mapRef$current9.addListener("hover", function (args) {
       var _args$marker7, _args$marker8;
 
       ((_args$marker7 = args.marker) === null || _args$marker7 === void 0 ? void 0 : _args$marker7.onHover) && ((_args$marker8 = args.marker) === null || _args$marker8 === void 0 ? void 0 : _args$marker8.onHover(args));
     }, {
       marker: true
     });
-    var eventHoverPolygon = (_mapRef$current6 = mapRef.current) === null || _mapRef$current6 === void 0 ? void 0 : _mapRef$current6.addListener("hover", function (args) {
+    var eventHoverPolygon = (_mapRef$current10 = mapRef.current) === null || _mapRef$current10 === void 0 ? void 0 : _mapRef$current10.addListener("hover", function (args) {
       var _args$polygon, _args$polygon2;
 
       ((_args$polygon = args.polygon) === null || _args$polygon === void 0 ? void 0 : _args$polygon.onHover) && ((_args$polygon2 = args.polygon) === null || _args$polygon2 === void 0 ? void 0 : _args$polygon2.onHover(args));
     }, {
       polygon: true
     });
-    var eventHoverPolyline = (_mapRef$current7 = mapRef.current) === null || _mapRef$current7 === void 0 ? void 0 : _mapRef$current7.addListener("hover", function (args) {
+    var eventHoverPolyline = (_mapRef$current11 = mapRef.current) === null || _mapRef$current11 === void 0 ? void 0 : _mapRef$current11.addListener("hover", function (args) {
       var _args$polyline, _args$polyline2;
 
       ((_args$polyline = args.polyline) === null || _args$polyline === void 0 ? void 0 : _args$polyline.onHover) && ((_args$polyline2 = args.polyline) === null || _args$polyline2 === void 0 ? void 0 : _args$polyline2.onHover(args));
     }, {
       polyline: true
     });
-    var eventHoverDirection = (_mapRef$current8 = mapRef.current) === null || _mapRef$current8 === void 0 ? void 0 : _mapRef$current8.addListener("hover", function (args) {
+    var eventHoverDirection = (_mapRef$current12 = mapRef.current) === null || _mapRef$current12 === void 0 ? void 0 : _mapRef$current12.addListener("hover", function (args) {
       var _args$renderer, _args$renderer2;
 
       ((_args$renderer = args.renderer) === null || _args$renderer === void 0 ? void 0 : _args$renderer.onHover) && ((_args$renderer2 = args.renderer) === null || _args$renderer2 === void 0 ? void 0 : _args$renderer2.onHover(args));
     }, {
       directions: true
     });
-    var eventClickPolyline = (_mapRef$current9 = mapRef.current) === null || _mapRef$current9 === void 0 ? void 0 : _mapRef$current9.addListener("click", function (args) {
+    var eventClickPolyline = (_mapRef$current13 = mapRef.current) === null || _mapRef$current13 === void 0 ? void 0 : _mapRef$current13.addListener("click", function (args) {
       var _args$polyline3, _args$polyline4;
 
       ((_args$polyline3 = args.polyline) === null || _args$polyline3 === void 0 ? void 0 : _args$polyline3.onClick) && ((_args$polyline4 = args.polyline) === null || _args$polyline4 === void 0 ? void 0 : _args$polyline4.onClick(args));
     }, {
       polyline: true
     });
-    var eventMouseOutDirection = (_mapRef$current10 = mapRef.current) === null || _mapRef$current10 === void 0 ? void 0 : _mapRef$current10.addListener("mouseOut", function (args) {
+    var eventMouseOutDirection = (_mapRef$current14 = mapRef.current) === null || _mapRef$current14 === void 0 ? void 0 : _mapRef$current14.addListener("mouseOut", function (args) {
       var _args$renderer3, _args$renderer4;
 
       ((_args$renderer3 = args.renderer) === null || _args$renderer3 === void 0 ? void 0 : _args$renderer3.onMouseOut) && ((_args$renderer4 = args.renderer) === null || _args$renderer4 === void 0 ? void 0 : _args$renderer4.onMouseOut(args));
     }, {
       directions: true
     });
-    var eventMouseOverDirection = (_mapRef$current11 = mapRef.current) === null || _mapRef$current11 === void 0 ? void 0 : _mapRef$current11.addListener("mouseOver", function (args) {
+    var eventMouseOverDirection = (_mapRef$current15 = mapRef.current) === null || _mapRef$current15 === void 0 ? void 0 : _mapRef$current15.addListener("mouseOver", function (args) {
       var _args$renderer5, _args$renderer6;
 
       ((_args$renderer5 = args.renderer) === null || _args$renderer5 === void 0 ? void 0 : _args$renderer5.onMouseOver) && ((_args$renderer6 = args.renderer) === null || _args$renderer6 === void 0 ? void 0 : _args$renderer6.onMouseOver(args));
     }, {
       directions: true
     });
-    var eventMouseMoveDirection = (_mapRef$current12 = mapRef.current) === null || _mapRef$current12 === void 0 ? void 0 : _mapRef$current12.addListener("mouseMove", function (args) {
+    var eventMouseMoveDirection = (_mapRef$current16 = mapRef.current) === null || _mapRef$current16 === void 0 ? void 0 : _mapRef$current16.addListener("mouseMove", function (args) {
       var _args$renderer7, _args$renderer8;
 
       ((_args$renderer7 = args.renderer) === null || _args$renderer7 === void 0 ? void 0 : _args$renderer7.onMouseMove) && ((_args$renderer8 = args.renderer) === null || _args$renderer8 === void 0 ? void 0 : _args$renderer8.onMouseMove(args));
     }, {
       directions: true
     });
-    var eventMouseOutPolyline = (_mapRef$current13 = mapRef.current) === null || _mapRef$current13 === void 0 ? void 0 : _mapRef$current13.addListener("mouseOut", function (args) {
+    var eventMouseOutPolyline = (_mapRef$current17 = mapRef.current) === null || _mapRef$current17 === void 0 ? void 0 : _mapRef$current17.addListener("mouseOut", function (args) {
       var _args$polyline5, _args$polyline6;
 
       ((_args$polyline5 = args.polyline) === null || _args$polyline5 === void 0 ? void 0 : _args$polyline5.onMouseOut) && ((_args$polyline6 = args.polyline) === null || _args$polyline6 === void 0 ? void 0 : _args$polyline6.onMouseOut(args));
     }, {
       polyline: true
     });
-    var eventMouseOverPolyline = (_mapRef$current14 = mapRef.current) === null || _mapRef$current14 === void 0 ? void 0 : _mapRef$current14.addListener("mouseOver", function (args) {
+    var eventMouseOverPolyline = (_mapRef$current18 = mapRef.current) === null || _mapRef$current18 === void 0 ? void 0 : _mapRef$current18.addListener("mouseOver", function (args) {
       var _args$polyline7, _args$polyline8;
 
       ((_args$polyline7 = args.polyline) === null || _args$polyline7 === void 0 ? void 0 : _args$polyline7.onMouseOver) && ((_args$polyline8 = args.polyline) === null || _args$polyline8 === void 0 ? void 0 : _args$polyline8.onMouseOver(args));
     }, {
       polyline: true
     });
-    var eventMouseMovePolyline = (_mapRef$current15 = mapRef.current) === null || _mapRef$current15 === void 0 ? void 0 : _mapRef$current15.addListener("mouseMove", function (args) {
+    var eventMouseMovePolyline = (_mapRef$current19 = mapRef.current) === null || _mapRef$current19 === void 0 ? void 0 : _mapRef$current19.addListener("mouseMove", function (args) {
       var _args$polyline9, _args$polyline10;
 
       ((_args$polyline9 = args.polyline) === null || _args$polyline9 === void 0 ? void 0 : _args$polyline9.onMouseMove) && ((_args$polyline10 = args.polyline) === null || _args$polyline10 === void 0 ? void 0 : _args$polyline10.onMouseMove(args));
     }, {
       polyline: true
     });
-    var eventMouseOutMarker = (_mapRef$current16 = mapRef.current) === null || _mapRef$current16 === void 0 ? void 0 : _mapRef$current16.addListener("mouseOut", function (args) {
+    var eventMouseOutMarker = (_mapRef$current20 = mapRef.current) === null || _mapRef$current20 === void 0 ? void 0 : _mapRef$current20.addListener("mouseOut", function (args) {
       var _args$marker9, _args$marker10;
 
       ((_args$marker9 = args.marker) === null || _args$marker9 === void 0 ? void 0 : _args$marker9.onMouseOut) && ((_args$marker10 = args.marker) === null || _args$marker10 === void 0 ? void 0 : _args$marker10.onMouseOut(args));
     }, {
       marker: true
     });
-    var eventMouseOverMarker = (_mapRef$current17 = mapRef.current) === null || _mapRef$current17 === void 0 ? void 0 : _mapRef$current17.addListener("mouseOver", function (args) {
+    var eventMouseOverMarker = (_mapRef$current21 = mapRef.current) === null || _mapRef$current21 === void 0 ? void 0 : _mapRef$current21.addListener("mouseOver", function (args) {
       var _args$marker11, _args$marker12;
 
       ((_args$marker11 = args.marker) === null || _args$marker11 === void 0 ? void 0 : _args$marker11.onMouseOver) && ((_args$marker12 = args.marker) === null || _args$marker12 === void 0 ? void 0 : _args$marker12.onMouseOver(args));
     }, {
       marker: true
     });
-    var eventMouseMoveMarker = (_mapRef$current18 = mapRef.current) === null || _mapRef$current18 === void 0 ? void 0 : _mapRef$current18.addListener("mouseMove", function (args) {
+    var eventMouseMoveMarker = (_mapRef$current22 = mapRef.current) === null || _mapRef$current22 === void 0 ? void 0 : _mapRef$current22.addListener("mouseMove", function (args) {
       var _args$marker13, _args$marker14;
 
       ((_args$marker13 = args.marker) === null || _args$marker13 === void 0 ? void 0 : _args$marker13.onMouseMove) && ((_args$marker14 = args.marker) === null || _args$marker14 === void 0 ? void 0 : _args$marker14.onMouseMove(args));
     }, {
       marker: true
     });
-    var eventClickPoi = (_mapRef$current19 = mapRef.current) === null || _mapRef$current19 === void 0 ? void 0 : _mapRef$current19.addListener("click", function (args) {
+    var eventClickPoi = (_mapRef$current23 = mapRef.current) === null || _mapRef$current23 === void 0 ? void 0 : _mapRef$current23.addListener("click", function (args) {
       var _args$poi, _args$poi2;
 
       ((_args$poi = args.poi) === null || _args$poi === void 0 ? void 0 : _args$poi.onClick) && ((_args$poi2 = args.poi) === null || _args$poi2 === void 0 ? void 0 : _args$poi2.onClick(args));
     }, {
       poi: true
     });
-    var eventHoverPoi = (_mapRef$current20 = mapRef.current) === null || _mapRef$current20 === void 0 ? void 0 : _mapRef$current20.addListener("hover", function (args) {
+    var eventHoverPoi = (_mapRef$current24 = mapRef.current) === null || _mapRef$current24 === void 0 ? void 0 : _mapRef$current24.addListener("hover", function (args) {
       var _args$poi3, _args$poi4;
 
       ((_args$poi3 = args.poi) === null || _args$poi3 === void 0 ? void 0 : _args$poi3.onHover) && ((_args$poi4 = args.poi) === null || _args$poi4 === void 0 ? void 0 : _args$poi4.onHover(args));
     }, {
       poi: true
     });
-    events.current = events.current.concat([eventClickMarker, eventRightClickMarker, eventDragEndMarker, eventHoverMarker, eventHoverPolygon, eventHoverPolyline, eventHoverDirection, eventClickPolyline, eventMouseOutDirection, eventMouseOverDirection, eventMouseMoveDirection, eventMouseOutPolyline, eventMouseOverPolyline, eventMouseMovePolyline, eventMouseOutMarker, eventMouseOverMarker, eventMouseMoveMarker, eventClickPoi, eventHoverPoi, (_mapRef$current21 = mapRef.current) === null || _mapRef$current21 === void 0 ? void 0 : _mapRef$current21.addListener("click", function (args) {
+    events.current = events.current.concat([eventClickMarker, eventRightClickMarker, eventDragEndMarker, eventHoverMarker, eventHoverPolygon, eventHoverPolyline, eventHoverDirection, eventClickPolyline, eventMouseOutDirection, eventMouseOverDirection, eventMouseMoveDirection, eventMouseOutPolyline, eventMouseOverPolyline, eventMouseMovePolyline, eventMouseOutMarker, eventMouseOverMarker, eventMouseMoveMarker, eventClickPoi, eventHoverPoi, (_mapRef$current25 = mapRef.current) === null || _mapRef$current25 === void 0 ? void 0 : _mapRef$current25.addListener("click", function (args) {
       var _args$circle, _args$circle2, _args$polygon3, _args$polygon3$onClic;
 
       ((_args$circle = args.circle) === null || _args$circle === void 0 ? void 0 : _args$circle.onClick) && ((_args$circle2 = args.circle) === null || _args$circle2 === void 0 ? void 0 : _args$circle2.onClick(args));
@@ -1023,9 +1060,9 @@ var MFMap = function MFMap(props) {
     })]);
 
     if (props.onClickLocation) {
-      var _mapRef$current22;
+      var _mapRef$current26;
 
-      var onClickLocation = (_mapRef$current22 = mapRef.current) === null || _mapRef$current22 === void 0 ? void 0 : _mapRef$current22.addListener("click", function (args) {
+      var onClickLocation = (_mapRef$current26 = mapRef.current) === null || _mapRef$current26 === void 0 ? void 0 : _mapRef$current26.addListener("click", function (args) {
         props.onClickLocation && props.onClickLocation(args);
       }, {
         location: true
@@ -1034,9 +1071,9 @@ var MFMap = function MFMap(props) {
     }
 
     if (props.onRightClickLocation) {
-      var _mapRef$current23;
+      var _mapRef$current27;
 
-      var onRightClickLocation = (_mapRef$current23 = mapRef.current) === null || _mapRef$current23 === void 0 ? void 0 : _mapRef$current23.addListener("rightClick", function (args) {
+      var onRightClickLocation = (_mapRef$current27 = mapRef.current) === null || _mapRef$current27 === void 0 ? void 0 : _mapRef$current27.addListener("rightClick", function (args) {
         props.onRightClickLocation && props.onRightClickLocation(args);
       }, {
         location: true
@@ -1045,9 +1082,9 @@ var MFMap = function MFMap(props) {
     }
 
     if (props.onTilesLoaded) {
-      var _mapRef$current24;
+      var _mapRef$current28;
 
-      var onTilesLoaded = (_mapRef$current24 = mapRef.current) === null || _mapRef$current24 === void 0 ? void 0 : _mapRef$current24.addListener("tilesLoaded", function (args) {
+      var onTilesLoaded = (_mapRef$current28 = mapRef.current) === null || _mapRef$current28 === void 0 ? void 0 : _mapRef$current28.addListener("tilesLoaded", function (args) {
         props.onTilesLoaded && props.onTilesLoaded(args);
       }, {
         location: true
@@ -1056,9 +1093,9 @@ var MFMap = function MFMap(props) {
     }
 
     if (props.onCameraChanging) {
-      var _mapRef$current25;
+      var _mapRef$current29;
 
-      var onCameraChanging = (_mapRef$current25 = mapRef.current) === null || _mapRef$current25 === void 0 ? void 0 : _mapRef$current25.addListener("cameraChanging", function (args) {
+      var onCameraChanging = (_mapRef$current29 = mapRef.current) === null || _mapRef$current29 === void 0 ? void 0 : _mapRef$current29.addListener("cameraChanging", function (args) {
         props.onCameraChanging && props.onCameraChanging(args);
       }, {
         location: true
@@ -1098,7 +1135,7 @@ var MFMarker = function MFMarker(props) {
       label = props.label,
       draggable = props.draggable,
       iconView = props.iconView,
-      userInteractionEnabled = props.userInteractionEnabled,
+      clickable = props.clickable,
       map = props.map,
       onCreated = props.onCreated,
       onClick = props.onClick,
@@ -1114,6 +1151,7 @@ var MFMarker = function MFMarker(props) {
   var markerRef = React.useRef();
   React.useEffect(function () {
     if (theMap && !markerRef.current) {
+      var markerLabel = typeof label == "string" ? label : new map4d.MarkerLabel(label);
       var option = {
         position: position || {
           lat: 10.793113,
@@ -1128,10 +1166,10 @@ var MFMarker = function MFMarker(props) {
         snippet: snippet,
         windowAnchor: windowAnchor,
         zIndex: zIndex,
-        label: label,
+        label: markerLabel,
         draggable: draggable,
         iconView: iconView,
-        userInteractionEnabled: userInteractionEnabled
+        clickable: clickable
       };
       Object.keys(option).forEach(function (key) {
         if (option[key] == undefined || option[key] == null) {
@@ -1294,9 +1332,12 @@ var MFMarker = function MFMarker(props) {
     zIndex != undefined && ((_markerRef$current16 = markerRef.current) === null || _markerRef$current16 === void 0 ? void 0 : _markerRef$current16.setZIndex(zIndex));
   }, [zIndex]);
   React.useEffect(function () {
-    var _markerRef$current17;
+    if (theMap && VariableTool.hasValue(label)) {
+      var _markerRef$current17;
 
-    label != undefined && ((_markerRef$current17 = markerRef.current) === null || _markerRef$current17 === void 0 ? void 0 : _markerRef$current17.setLabel(label));
+      var markerLabel = typeof label == "string" ? label : new map4d.MarkerLabel(label);
+      (_markerRef$current17 = markerRef.current) === null || _markerRef$current17 === void 0 ? void 0 : _markerRef$current17.setLabel(markerLabel);
+    }
   }, [label]);
   React.useEffect(function () {
     var _markerRef$current18;
@@ -1311,8 +1352,8 @@ var MFMarker = function MFMarker(props) {
   React.useEffect(function () {
     var _markerRef$current20;
 
-    userInteractionEnabled != undefined && ((_markerRef$current20 = markerRef.current) === null || _markerRef$current20 === void 0 ? void 0 : _markerRef$current20.setUserInteraction(userInteractionEnabled));
-  }, [userInteractionEnabled]);
+    clickable != undefined && ((_markerRef$current20 = markerRef.current) === null || _markerRef$current20 === void 0 ? void 0 : _markerRef$current20.setClickable(clickable));
+  }, [clickable]);
   React.useEffect(function () {
     var _markerRef$current21;
 
@@ -1346,6 +1387,7 @@ var MFMarkerCluster = function MFMarkerCluster(props) {
       _props$radius = props.radius,
       radius = _props$radius === void 0 ? 100 : _props$radius,
       zoomOnClick = props.zoomOnClick,
+      clusterIcon = props.clusterIcon,
       map = props.map,
       onCreated = props.onCreated;
   var map4dContext = React.useContext(Map4dContext);
@@ -1365,7 +1407,8 @@ var MFMarkerCluster = function MFMarkerCluster(props) {
         minZoom: minZoom,
         maxZoom: maxZoom,
         radius: radius,
-        zoomOnClick: zoomOnClick
+        zoomOnClick: zoomOnClick,
+        clusterIcon: clusterIcon
       };
       Object.keys(option).forEach(function (key) {
         if (option[key] == undefined || option[key] == null) {
@@ -1425,7 +1468,7 @@ var MFMarkerCluster = function MFMarkerCluster(props) {
     if (theMap) {
       drawCluster();
     }
-  }, [minZoom, maxZoom, radius]);
+  }, [minZoom, maxZoom, radius, clusterIcon]);
   React.useEffect(function () {
     var _markerClusterRef$cur6;
 
@@ -1447,7 +1490,7 @@ var MFPOI = function MFPOI(props) {
       zIndex = props.zIndex,
       visible = props.visible,
       draggable = props.draggable,
-      userInteractionEnabled = props.userInteractionEnabled,
+      clickable = props.clickable,
       map = props.map,
       onCreated = props.onCreated,
       onClick = props.onClick,
@@ -1473,7 +1516,7 @@ var MFPOI = function MFPOI(props) {
         zIndex: zIndex,
         visible: visible,
         draggable: draggable,
-        userInteractionEnabled: userInteractionEnabled
+        clickable: clickable
       };
       Object.keys(option).forEach(function (key) {
         if (option[key] == undefined || option[key] == null) {
@@ -1560,8 +1603,8 @@ var MFPOI = function MFPOI(props) {
   React.useEffect(function () {
     var _poiRef$current15;
 
-    userInteractionEnabled != undefined && ((_poiRef$current15 = poiRef.current) === null || _poiRef$current15 === void 0 ? void 0 : _poiRef$current15.setUserInteraction(userInteractionEnabled));
-  }, [userInteractionEnabled]);
+    clickable != undefined && ((_poiRef$current15 = poiRef.current) === null || _poiRef$current15 === void 0 ? void 0 : _poiRef$current15.setClickable(clickable));
+  }, [clickable]);
   React.useEffect(function () {
     if (poiRef.current) {
       poiRef.current.onClick = onClick;
@@ -1654,7 +1697,7 @@ var MFPolygon = function MFPolygon(props) {
       draggable = props.draggable,
       elevation = props.elevation,
       zIndex = props.zIndex,
-      userInteractionEnabled = props.userInteractionEnabled,
+      clickable = props.clickable,
       map = props.map,
       onHover = props.onHover,
       onClick = props.onClick,
@@ -1662,6 +1705,7 @@ var MFPolygon = function MFPolygon(props) {
   var map4dContext = React.useContext(Map4dContext);
   var theMap = map || map4dContext.map;
   var polygonRef = React.useRef();
+  var a = React.useRef();
   React.useEffect(function () {
     if (theMap && !polygonRef.current) {
       var _polygonRef$current;
@@ -1676,7 +1720,7 @@ var MFPolygon = function MFPolygon(props) {
         draggable: draggable,
         elevation: elevation,
         zIndex: zIndex,
-        userInteractionEnabled: userInteractionEnabled
+        clickable: clickable
       };
       Object.keys(option).forEach(function (key) {
         if (option[key] == undefined || option[key] == null) {
@@ -1684,6 +1728,8 @@ var MFPolygon = function MFPolygon(props) {
         }
       });
       polygonRef.current = new map4d.Polygon(option);
+      a.current = theMap;
+      console.log(a.current);
       (_polygonRef$current = polygonRef.current) === null || _polygonRef$current === void 0 ? void 0 : _polygonRef$current.setMap(theMap);
       polygonRef.current.onHover = props.onHover;
       polygonRef.current.onClick = onClick;
@@ -1768,8 +1814,8 @@ var MFPolygon = function MFPolygon(props) {
   React.useEffect(function () {
     var _polygonRef$current14;
 
-    userInteractionEnabled != undefined && ((_polygonRef$current14 = polygonRef.current) === null || _polygonRef$current14 === void 0 ? void 0 : _polygonRef$current14.setUserInteraction(userInteractionEnabled));
-  }, [userInteractionEnabled]);
+    clickable != undefined && ((_polygonRef$current14 = polygonRef.current) === null || _polygonRef$current14 === void 0 ? void 0 : _polygonRef$current14.setClickable(clickable));
+  }, [clickable]);
   return null;
 };
 
@@ -1785,7 +1831,7 @@ var MFPolyline = function MFPolyline(props) {
       zIndex = props.zIndex,
       elevation = props.elevation,
       strokePattern = props.strokePattern,
-      userInteractionEnabled = props.userInteractionEnabled,
+      clickable = props.clickable,
       map = props.map,
       onClick = props.onClick,
       onHover = props.onHover,
@@ -1814,7 +1860,7 @@ var MFPolyline = function MFPolyline(props) {
         zIndex: zIndex,
         elevation: elevation,
         strokePattern: strokePattern,
-        userInteractionEnabled: userInteractionEnabled
+        clickable: clickable
       };
       Object.keys(option).forEach(function (key) {
         if (option[key] == undefined || option[key] == null) {
@@ -1929,8 +1975,8 @@ var MFPolyline = function MFPolyline(props) {
   React.useEffect(function () {
     var _polylineRef$current15;
 
-    userInteractionEnabled != undefined && ((_polylineRef$current15 = polylineRef.current) === null || _polylineRef$current15 === void 0 ? void 0 : _polylineRef$current15.setUserInteraction(userInteractionEnabled));
-  }, [userInteractionEnabled]);
+    clickable != undefined && ((_polylineRef$current15 = polylineRef.current) === null || _polylineRef$current15 === void 0 ? void 0 : _polylineRef$current15.setClickable(clickable));
+  }, [clickable]);
   return null;
 };