react-map4d-map 1.3.2 → 1.3.4

package/dist/index.js

@@ -16,27 +16,28 @@ 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,
-    model = props.model,
-    texture = props.texture,
-    coordinates = props.coordinates,
-    visible = props.visible,
-    draggable = props.draggable,
-    userInteractionEnabled = props.userInteractionEnabled,
-    selected = props.selected,
-    growUp = props.growUp,
-    map = props.map,
-    onCreated = props.onCreated;
+      name = props.name,
+      scale = props.scale,
+      bearing = props.bearing,
+      elevation = props.elevation,
+      height = props.height,
+      model = props.model,
+      texture = props.texture,
+      coordinates = props.coordinates,
+      visible = props.visible,
+      draggable = props.draggable,
+      clickable = props.clickable,
+      selected = props.selected,
+      growUp = props.growUp,
+      map = props.map,
+      onCreated = props.onCreated;
   var map4dContext = React.useContext(Map4dContext);
   var theMap = map || map4dContext.map;
   var buildingRef = React.useRef(null);
   React.useEffect(function () {
     if (theMap && !buildingRef.current && (coordinates && (coordinates === null || coordinates === void 0 ? void 0 : coordinates.length) > 0 || model)) {
       var _buildingRef$current;
+
       var option = {
         position: position || {
           lat: 10.793113,
@@ -52,7 +53,7 @@ var MFBuilding = function MFBuilding(props) {
         coordinates: coordinates,
         visible: visible,
         draggable: draggable,
-        userInteractionEnabled: userInteractionEnabled,
+        clickable: clickable,
         selected: selected,
         growUp: growUp
       };
@@ -69,75 +70,93 @@ var MFBuilding = function MFBuilding(props) {
   React.useEffect(function () {
     if (theMap) {
       var _buildingRef$current2;
+
       (_buildingRef$current2 = buildingRef.current) === null || _buildingRef$current2 === void 0 ? void 0 : _buildingRef$current2.setMap(theMap);
     }
+
     return function () {
       var _buildingRef$current3;
+
       (_buildingRef$current3 = buildingRef.current) === null || _buildingRef$current3 === void 0 ? void 0 : _buildingRef$current3.setMap(null);
     };
   }, [theMap]);
   React.useEffect(function () {
     return function () {
       var _buildingRef$current4;
+
       (_buildingRef$current4 = buildingRef.current) === null || _buildingRef$current4 === void 0 ? void 0 : _buildingRef$current4.setMap(null);
     };
   }, []);
   React.useEffect(function () {
     var _buildingRef$current5;
+
     (_buildingRef$current5 = buildingRef.current) === null || _buildingRef$current5 === void 0 ? void 0 : _buildingRef$current5.setPosition(position);
   }, [position]);
   React.useEffect(function () {
     var _buildingRef$current6;
+
     name != undefined && ((_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));
   }, [scale]);
   React.useEffect(function () {
     if (bearing != undefined) {
       var _buildingRef$current8;
+
       (_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));
   }, [elevation]);
   React.useEffect(function () {
     var _buildingRef$current10;
+
     height != undefined && ((_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));
   }, [model]);
   React.useEffect(function () {
     var _buildingRef$current12;
+
     texture != undefined && ((_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));
   }, [coordinates]);
   React.useEffect(function () {
     var _buildingRef$current14;
+
     visible != undefined && ((_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));
   }, [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]);
+
+    clickable != undefined && ((_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));
   }, [selected]);
   React.useEffect(function () {
     var _buildingRef$current18;
+
     growUp != undefined && ((_buildingRef$current18 = buildingRef.current) === null || _buildingRef$current18 === void 0 ? void 0 : _buildingRef$current18.setGrowUp(growUp));
   }, [growUp]);
   return null;
@@ -145,16 +164,18 @@ var MFBuilding = function MFBuilding(props) {
 
 var MFBuildingOverlay = function MFBuildingOverlay(props) {
   var getUrl = props.getUrl,
-    visible = props.visible,
-    parserData = props.parserData,
-    prefixId = props.prefixId,
-    map = props.map,
-    onCreated = props.onCreated;
+      visible = props.visible,
+      parserData = props.parserData,
+      prefixId = props.prefixId,
+      map = props.map,
+      onCreated = props.onCreated;
   var map4dContext = React.useContext(Map4dContext);
   var theMap = map || map4dContext.map;
   var buildingOverlayRef = React.useRef();
+
   var reCreate = function reCreate() {
     var _buildingOverlayRef$c, _buildingOverlayRef$c2;
+
     (_buildingOverlayRef$c = buildingOverlayRef.current) === null || _buildingOverlayRef$c === void 0 ? void 0 : _buildingOverlayRef$c.setMap(null);
     var option = {
       getUrl: getUrl || {
@@ -174,6 +195,7 @@ var MFBuildingOverlay = function MFBuildingOverlay(props) {
     (_buildingOverlayRef$c2 = buildingOverlayRef.current) === null || _buildingOverlayRef$c2 === void 0 ? void 0 : _buildingOverlayRef$c2.setMap(theMap);
     onCreated && onCreated(buildingOverlayRef.current);
   };
+
   React.useEffect(function () {
     if (theMap && !buildingOverlayRef.current) {
       reCreate();
@@ -182,16 +204,20 @@ var MFBuildingOverlay = function MFBuildingOverlay(props) {
   React.useEffect(function () {
     if (theMap) {
       var _buildingOverlayRef$c3;
+
       (_buildingOverlayRef$c3 = buildingOverlayRef.current) === null || _buildingOverlayRef$c3 === void 0 ? void 0 : _buildingOverlayRef$c3.setMap(theMap);
     }
+
     return function () {
       var _buildingOverlayRef$c4;
+
       (_buildingOverlayRef$c4 = buildingOverlayRef.current) === null || _buildingOverlayRef$c4 === void 0 ? void 0 : _buildingOverlayRef$c4.setMap(null);
     };
   }, [theMap]);
   React.useEffect(function () {
     return function () {
       var _buildingOverlayRef$c5;
+
       (_buildingOverlayRef$c5 = buildingOverlayRef.current) === null || _buildingOverlayRef$c5 === void 0 ? void 0 : _buildingOverlayRef$c5.setMap(null);
     };
   }, []);
@@ -204,33 +230,36 @@ var MFBuildingOverlay = function MFBuildingOverlay(props) {
 };
 
 var VariableTool = function VariableTool() {};
+
 VariableTool.hasValue = function (variable) {
   if (variable != undefined && variable != null) {
     return true;
   }
+
   return false;
 };
 
 var MFCircle = function MFCircle(props) {
   var center = props.center,
-    radius = props.radius,
-    fillColor = props.fillColor,
-    fillOpacity = props.fillOpacity,
-    visible = props.visible,
-    strokeColor = props.strokeColor,
-    strokeWidth = props.strokeWidth,
-    draggable = props.draggable,
-    zIndex = props.zIndex,
-    elevation = props.elevation,
-    userInteractionEnabled = props.userInteractionEnabled,
-    map = props.map,
-    onCreated = props.onCreated;
+      radius = props.radius,
+      fillColor = props.fillColor,
+      fillOpacity = props.fillOpacity,
+      visible = props.visible,
+      strokeColor = props.strokeColor,
+      strokeWidth = props.strokeWidth,
+      draggable = props.draggable,
+      zIndex = props.zIndex,
+      elevation = props.elevation,
+      clickable = props.clickable,
+      map = props.map,
+      onCreated = props.onCreated;
   var map4dContext = React.useContext(Map4dContext);
   var theMap = map || map4dContext.map;
   var circleRef = React.useRef();
   React.useEffect(function () {
     if (theMap && !circleRef.current) {
       var _circleRef$current;
+
       var option = {
         center: center || {
           lat: 10.793113,
@@ -245,7 +274,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) {
@@ -260,104 +289,123 @@ var MFCircle = function MFCircle(props) {
   React.useEffect(function () {
     if (theMap) {
       var _circleRef$current2;
+
       (_circleRef$current2 = circleRef.current) === null || _circleRef$current2 === void 0 ? void 0 : _circleRef$current2.setMap(theMap);
     }
+
     return function () {
       var _circleRef$current3;
+
       (_circleRef$current3 = circleRef.current) === null || _circleRef$current3 === void 0 ? void 0 : _circleRef$current3.setMap(null);
     };
   }, [theMap]);
   React.useEffect(function () {
     return function () {
       var _circleRef$current4;
+
       (_circleRef$current4 = circleRef.current) === null || _circleRef$current4 === void 0 ? void 0 : _circleRef$current4.setMap(null);
     };
   }, []);
   React.useEffect(function () {
     if (VariableTool.hasValue(center)) {
       var _circleRef$current5;
+
       (_circleRef$current5 = circleRef.current) === null || _circleRef$current5 === void 0 ? void 0 : _circleRef$current5.setCenter(center);
     }
   }, [center]);
   React.useEffect(function () {
     if (VariableTool.hasValue(radius)) {
       var _circleRef$current6;
+
       (_circleRef$current6 = circleRef.current) === null || _circleRef$current6 === void 0 ? void 0 : _circleRef$current6.setRadius(radius);
     }
   }, [radius]);
   React.useEffect(function () {
     if (VariableTool.hasValue(fillColor)) {
       var _circleRef$current7;
+
       (_circleRef$current7 = circleRef.current) === null || _circleRef$current7 === void 0 ? void 0 : _circleRef$current7.setFillColor(fillColor);
     }
   }, [fillColor]);
   React.useEffect(function () {
     if (VariableTool.hasValue(fillOpacity)) {
       var _circleRef$current8;
+
       (_circleRef$current8 = circleRef.current) === null || _circleRef$current8 === void 0 ? void 0 : _circleRef$current8.setFillOpacity(fillOpacity);
     }
   }, [fillOpacity]);
   React.useEffect(function () {
     if (VariableTool.hasValue(visible)) {
       var _circleRef$current9;
+
       (_circleRef$current9 = circleRef.current) === null || _circleRef$current9 === void 0 ? void 0 : _circleRef$current9.setVisible(visible);
     }
   }, [visible]);
   React.useEffect(function () {
     if (VariableTool.hasValue(strokeColor)) {
       var _circleRef$current10;
+
       (_circleRef$current10 = circleRef.current) === null || _circleRef$current10 === void 0 ? void 0 : _circleRef$current10.setStrokeColor(strokeColor);
     }
   }, [strokeColor]);
   React.useEffect(function () {
     if (VariableTool.hasValue(strokeWidth)) {
       var _circleRef$current11;
+
       (_circleRef$current11 = circleRef.current) === null || _circleRef$current11 === void 0 ? void 0 : _circleRef$current11.setStrokeWidth(strokeWidth);
     }
   }, [strokeWidth]);
   React.useEffect(function () {
     if (VariableTool.hasValue(draggable)) {
       var _circleRef$current12;
+
       (_circleRef$current12 = circleRef.current) === null || _circleRef$current12 === void 0 ? void 0 : _circleRef$current12.setDraggable(draggable);
     }
   }, [draggable]);
   React.useEffect(function () {
     if (VariableTool.hasValue(zIndex)) {
       var _circleRef$current13;
+
       (_circleRef$current13 = circleRef.current) === null || _circleRef$current13 === void 0 ? void 0 : _circleRef$current13.setZIndex(zIndex);
     }
   }, [zIndex]);
   React.useEffect(function () {
     if (VariableTool.hasValue(elevation)) {
       var _circleRef$current14;
+
       (_circleRef$current14 = circleRef.current) === null || _circleRef$current14 === void 0 ? void 0 : _circleRef$current14.setElevation(elevation);
     }
   }, [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;
 };
 
 var MFDataLayer = function MFDataLayer(props) {
   var geoJsonString = props.geoJsonString,
-    map = props.map,
-    onCreated = props.onCreated;
+      map = props.map,
+      onCreated = props.onCreated;
   var map4dContext = React.useContext(Map4dContext);
   var theMap = map || map4dContext.map;
   var dataLayerRef = React.useRef();
+
   var reCreate = function reCreate() {
     var _dataLayerRef$current, _theMap$data2;
+
     (_dataLayerRef$current = dataLayerRef.current) === null || _dataLayerRef$current === void 0 ? void 0 : _dataLayerRef$current.forEach(function (feature) {
       var _theMap$data;
+
       theMap === null || theMap === void 0 ? void 0 : (_theMap$data = theMap.data) === null || _theMap$data === void 0 ? void 0 : _theMap$data.remove(feature);
     });
     dataLayerRef.current = theMap === null || theMap === void 0 ? void 0 : (_theMap$data2 = theMap.data) === null || _theMap$data2 === void 0 ? void 0 : _theMap$data2.addGeoJson(geoJsonString);
     onCreated && onCreated(dataLayerRef.current);
   };
+
   React.useEffect(function () {
     if (theMap) {
       reCreate();
@@ -366,8 +414,10 @@ var MFDataLayer = function MFDataLayer(props) {
   React.useEffect(function () {
     return function () {
       var _dataLayerRef$current2;
+
       (_dataLayerRef$current2 = dataLayerRef.current) === null || _dataLayerRef$current2 === void 0 ? void 0 : _dataLayerRef$current2.forEach(function (feature) {
         var _theMap$data3;
+
         theMap === null || theMap === void 0 ? void 0 : (_theMap$data3 = theMap.data) === null || _theMap$data3 === void 0 ? void 0 : _theMap$data3.remove(feature);
       });
     };
@@ -377,33 +427,34 @@ var MFDataLayer = function MFDataLayer(props) {
 
 var MFDirectionsRenderer = function MFDirectionsRenderer(props) {
   var routes = props.routes,
-    activedIndex = props.activedIndex,
-    activeStrokeWidth = props.activeStrokeWidth,
-    activeStrokeColor = props.activeStrokeColor,
-    activeOutlineWidth = props.activeOutlineWidth,
-    activeOutlineColor = props.activeOutlineColor,
-    activeStrokePattern = props.activeStrokePattern,
-    inactiveStrokeWidth = props.inactiveStrokeWidth,
-    inactiveStrokeColor = props.inactiveStrokeColor,
-    inactiveOutlineWidth = props.inactiveOutlineWidth,
-    inactiveOutlineColor = props.inactiveOutlineColor,
-    inactiveStrokePattern = props.inactiveStrokePattern,
-    originMarkerOptions = props.originMarkerOptions,
-    destinationMarkerOptions = props.destinationMarkerOptions,
-    waypointMarkerOptions = props.waypointMarkerOptions,
-    onMarkerDragEnd = props.onMarkerDragEnd,
-    map = props.map,
-    onHover = props.onHover,
-    onCreated = props.onCreated,
-    onMouseOut = props.onMouseOut,
-    onMouseOver = props.onMouseOver,
-    onMouseMove = props.onMouseMove;
+      activedIndex = props.activedIndex,
+      activeStrokeWidth = props.activeStrokeWidth,
+      activeStrokeColor = props.activeStrokeColor,
+      activeOutlineWidth = props.activeOutlineWidth,
+      activeOutlineColor = props.activeOutlineColor,
+      activeStrokePattern = props.activeStrokePattern,
+      inactiveStrokeWidth = props.inactiveStrokeWidth,
+      inactiveStrokeColor = props.inactiveStrokeColor,
+      inactiveOutlineWidth = props.inactiveOutlineWidth,
+      inactiveOutlineColor = props.inactiveOutlineColor,
+      inactiveStrokePattern = props.inactiveStrokePattern,
+      originMarkerOptions = props.originMarkerOptions,
+      destinationMarkerOptions = props.destinationMarkerOptions,
+      waypointMarkerOptions = props.waypointMarkerOptions,
+      onMarkerDragEnd = props.onMarkerDragEnd,
+      map = props.map,
+      onHover = props.onHover,
+      onCreated = props.onCreated,
+      onMouseOut = props.onMouseOut,
+      onMouseOver = props.onMouseOver,
+      onMouseMove = props.onMouseMove;
   var map4dContext = React.useContext(Map4dContext);
   var theMap = map || map4dContext.map;
   var directionRef = React.useRef();
   React.useEffect(function () {
     if (theMap && !directionRef.current) {
       var _directionRef$current;
+
       var option = {
         routes: routes,
         activedIndex: activedIndex,
@@ -435,8 +486,10 @@ 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]);
@@ -463,37 +516,46 @@ var MFDirectionsRenderer = function MFDirectionsRenderer(props) {
   React.useEffect(function () {
     if (theMap) {
       var _directionRef$current3;
+
       (_directionRef$current3 = directionRef.current) === null || _directionRef$current3 === void 0 ? void 0 : _directionRef$current3.setMap(theMap);
     }
+
     return function () {
       var _directionRef$current4;
+
       (_directionRef$current4 = directionRef.current) === null || _directionRef$current4 === void 0 ? void 0 : _directionRef$current4.setMap(null);
     };
   }, [theMap]);
   React.useEffect(function () {
     return function () {
       var _directionRef$current5;
+
       (_directionRef$current5 = directionRef.current) === null || _directionRef$current5 === void 0 ? void 0 : _directionRef$current5.setMap(null);
     };
   }, []);
   React.useEffect(function () {
     var _directionRef$current6;
+
     routes != undefined && ((_directionRef$current6 = directionRef.current) === null || _directionRef$current6 === void 0 ? void 0 : _directionRef$current6.setRoutes(routes));
   }, [routes]);
   React.useEffect(function () {
     var _directionRef$current7;
+
     activedIndex != undefined && ((_directionRef$current7 = directionRef.current) === null || _directionRef$current7 === void 0 ? void 0 : _directionRef$current7.setActivedIndex(activedIndex));
   }, [activedIndex]);
   React.useEffect(function () {
     var _directionRef$current8;
+
     activeStrokePattern != undefined && ((_directionRef$current8 = directionRef.current) === null || _directionRef$current8 === void 0 ? void 0 : _directionRef$current8.setActiveStrokePattern(activeStrokePattern));
   }, [activeStrokePattern]);
   React.useEffect(function () {
     var _directionRef$current9;
+
     inactiveStrokePattern != undefined && ((_directionRef$current9 = directionRef.current) === null || _directionRef$current9 === void 0 ? void 0 : _directionRef$current9.setInactiveStrokePattern(inactiveStrokePattern));
   }, [inactiveStrokePattern]);
   React.useEffect(function () {
     var _directionRef$current10;
+
     var option = {
       routes: routes,
       activedIndex: activedIndex,
@@ -524,18 +586,20 @@ var MFDirectionsRenderer = function MFDirectionsRenderer(props) {
 
 var MFGroundOverlay = function MFGroundOverlay(props) {
   var bounds = props.bounds,
-    getUrl = props.getUrl,
-    override = props.override,
-    visible = props.visible,
-    zIndex = props.zIndex,
-    opacity = props.opacity,
-    map = props.map,
-    onCreated = props.onCreated;
+      getUrl = props.getUrl,
+      override = props.override,
+      visible = props.visible,
+      zIndex = props.zIndex,
+      opacity = props.opacity,
+      map = props.map,
+      onCreated = props.onCreated;
   var map4dContext = React.useContext(Map4dContext);
   var theMap = map || map4dContext.map;
   var groundOverlayRef = React.useRef();
+
   var reCreate = function reCreate() {
     var _groundOverlayRef$cur, _groundOverlayRef$cur2;
+
     (_groundOverlayRef$cur = groundOverlayRef.current) === null || _groundOverlayRef$cur === void 0 ? void 0 : _groundOverlayRef$cur.setMap(null);
     var option = {
       bounds: bounds,
@@ -554,6 +618,7 @@ var MFGroundOverlay = function MFGroundOverlay(props) {
     (_groundOverlayRef$cur2 = groundOverlayRef.current) === null || _groundOverlayRef$cur2 === void 0 ? void 0 : _groundOverlayRef$cur2.setMap(theMap);
     onCreated && onCreated(groundOverlayRef.current);
   };
+
   React.useEffect(function () {
     if (theMap && !groundOverlayRef.current) {
       reCreate();
@@ -562,16 +627,20 @@ var MFGroundOverlay = function MFGroundOverlay(props) {
   React.useEffect(function () {
     if (theMap) {
       var _groundOverlayRef$cur3;
+
       (_groundOverlayRef$cur3 = groundOverlayRef.current) === null || _groundOverlayRef$cur3 === void 0 ? void 0 : _groundOverlayRef$cur3.setMap(theMap);
     }
+
     return function () {
       var _groundOverlayRef$cur4;
+
       (_groundOverlayRef$cur4 = groundOverlayRef.current) === null || _groundOverlayRef$cur4 === void 0 ? void 0 : _groundOverlayRef$cur4.setMap(null);
     };
   }, [theMap]);
   React.useEffect(function () {
     return function () {
       var _groundOverlayRef$cur5;
+
       (_groundOverlayRef$cur5 = groundOverlayRef.current) === null || _groundOverlayRef$cur5 === void 0 ? void 0 : _groundOverlayRef$cur5.setMap(null);
     };
   }, []);
@@ -582,14 +651,17 @@ var MFGroundOverlay = function MFGroundOverlay(props) {
   }, [bounds, getUrl, override]);
   React.useEffect(function () {
     var _groundOverlayRef$cur6;
+
     visible != undefined && ((_groundOverlayRef$cur6 = groundOverlayRef.current) === null || _groundOverlayRef$cur6 === void 0 ? void 0 : _groundOverlayRef$cur6.setVisible(visible));
   }, [visible]);
   React.useEffect(function () {
     var _groundOverlayRef$cur7;
+
     zIndex != undefined && ((_groundOverlayRef$cur7 = groundOverlayRef.current) === null || _groundOverlayRef$cur7 === void 0 ? void 0 : _groundOverlayRef$cur7.setZIndex(zIndex));
   }, [zIndex]);
   React.useEffect(function () {
     var _groundOverlayRef$cur8;
+
     opacity != undefined && ((_groundOverlayRef$cur8 = groundOverlayRef.current) === null || _groundOverlayRef$cur8 === void 0 ? void 0 : _groundOverlayRef$cur8.setOpacity(opacity));
   }, [opacity]);
   return null;
@@ -597,17 +669,19 @@ var MFGroundOverlay = function MFGroundOverlay(props) {
 
 var MFImageOverlay = function MFImageOverlay(props) {
   var url = props.url,
-    bounds = props.bounds,
-    visible = props.visible,
-    zIndex = props.zIndex,
-    opacity = props.opacity,
-    map = props.map,
-    onCreated = props.onCreated;
+      bounds = props.bounds,
+      visible = props.visible,
+      zIndex = props.zIndex,
+      opacity = props.opacity,
+      map = props.map,
+      onCreated = props.onCreated;
   var map4dContext = React.useContext(Map4dContext);
   var theMap = map || map4dContext.map;
   var imageOverlayRef = React.useRef();
+
   var reCreate = function reCreate() {
     var _imageOverlayRef$curr, _imageOverlayRef$curr2;
+
     (_imageOverlayRef$curr = imageOverlayRef.current) === null || _imageOverlayRef$curr === void 0 ? void 0 : _imageOverlayRef$curr.setMap(null);
     var option = {
       url: url,
@@ -625,6 +699,7 @@ var MFImageOverlay = function MFImageOverlay(props) {
     (_imageOverlayRef$curr2 = imageOverlayRef.current) === null || _imageOverlayRef$curr2 === void 0 ? void 0 : _imageOverlayRef$curr2.setMap(theMap);
     onCreated && onCreated(imageOverlayRef.current);
   };
+
   React.useEffect(function () {
     if (theMap && !imageOverlayRef.current) {
       reCreate();
@@ -633,16 +708,20 @@ var MFImageOverlay = function MFImageOverlay(props) {
   React.useEffect(function () {
     if (theMap) {
       var _imageOverlayRef$curr3;
+
       (_imageOverlayRef$curr3 = imageOverlayRef.current) === null || _imageOverlayRef$curr3 === void 0 ? void 0 : _imageOverlayRef$curr3.setMap(theMap);
     }
+
     return function () {
       var _imageOverlayRef$curr4;
+
       (_imageOverlayRef$curr4 = imageOverlayRef.current) === null || _imageOverlayRef$curr4 === void 0 ? void 0 : _imageOverlayRef$curr4.setMap(null);
     };
   }, [theMap]);
   React.useEffect(function () {
     return function () {
       var _imageOverlayRef$curr5;
+
       (_imageOverlayRef$curr5 = imageOverlayRef.current) === null || _imageOverlayRef$curr5 === void 0 ? void 0 : _imageOverlayRef$curr5.setMap(null);
     };
   }, []);
@@ -653,10 +732,12 @@ var MFImageOverlay = function MFImageOverlay(props) {
   }, [url, bounds, zIndex]);
   React.useEffect(function () {
     var _imageOverlayRef$curr6;
+
     visible != undefined && ((_imageOverlayRef$curr6 = imageOverlayRef.current) === null || _imageOverlayRef$curr6 === void 0 ? void 0 : _imageOverlayRef$curr6.setVisible(visible));
   }, [visible]);
   React.useEffect(function () {
     var _imageOverlayRef$curr7;
+
     opacity != undefined && ((_imageOverlayRef$curr7 = imageOverlayRef.current) === null || _imageOverlayRef$curr7 === void 0 ? void 0 : _imageOverlayRef$curr7.setOpacity(opacity));
   }, [opacity]);
   return null;
@@ -665,9 +746,11 @@ var MFImageOverlay = function MFImageOverlay(props) {
 function addLibrary(url, id) {
   var scriptId = "script_" + id;
   var exist = document.getElementById(scriptId);
+
   if (exist) {
     return null;
   }
+
   var script = document.createElement('script');
   script.src = url;
   script.defer = true;
@@ -675,6 +758,7 @@ function addLibrary(url, id) {
   document.body.appendChild(script);
   return script;
 }
+
 var createId = function createId() {
   var dt = new Date().getTime();
   var uuid = 'xxxxxxxx_xxxx_4xxx_yxxx_xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
@@ -684,194 +768,239 @@ var createId = function createId() {
   });
   return uuid;
 };
+
 var MFMap = function MFMap(props) {
   var _props$options3, _props$options8;
+
   var callback = React.useRef("callback");
   var mapDomRef = React.useRef();
   var mapRef = React.useRef();
   var scriptElement = React.useRef();
   var url = React.useRef();
   var events = React.useRef([]);
+
   var _useState = React.useState(),
-    map = _useState[0],
-    setMap = _useState[1];
+      map = _useState[0],
+      setMap = _useState[1];
+
   React.useEffect(function () {
     var id = createId();
     callback.current = "callback_" + id;
+
     var createCallback = function createCallback() {
       window[callback.current] = function () {
         var options = props.options;
         mapRef.current = new window.map4d.Map(mapDomRef.current, options);
+
         if (props.onMapReady) {
           props.onMapReady(mapRef.current, id);
         }
+
         registerEvent();
         setMap(mapRef.current);
       };
     };
+
     var domain = "https://api" + (props.environment ? "-" + props.environment : "") + ".map4d.vn";
+
     if (props.sdkDomain) {
       domain = props.sdkDomain;
     }
+
     var urlNew = domain + "/sdk/map/js?version=" + props.version + "&key=" + props.accessKey + "&callback=" + callback.current;
+
     if (props.mapid) {
       urlNew += "&mapId=" + props.mapid;
     }
+
     createCallback();
     var script = addLibrary(urlNew, id);
+
     if (script) {
       scriptElement.current = script;
     }
+
     url.current = urlNew;
     return function () {
       var destroy = function destroy() {
         var _events$current, _mapRef$current;
+
         delete window[callback.current];
+
         if (scriptElement.current != null) {
           scriptElement.current.remove();
         }
+
         (_events$current = events.current) === null || _events$current === void 0 ? void 0 : _events$current.forEach(function (t) {
           t === null || t === void 0 ? void 0 : t.remove();
         });
         (_mapRef$current = mapRef.current) === null || _mapRef$current === void 0 ? void 0 : _mapRef$current.destroy();
         url.current = undefined;
       };
+
       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$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;
+
     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$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$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$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$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$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$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$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$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$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$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$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$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$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$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$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$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$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$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]);
+
     if (props.onClickLocation) {
       var _mapRef$current25;
+
       var onClickLocation = (_mapRef$current25 = mapRef.current) === null || _mapRef$current25 === void 0 ? void 0 : _mapRef$current25.addListener("click", function (args) {
         props.onClickLocation && props.onClickLocation(args);
       }, {
@@ -879,8 +1008,10 @@ var MFMap = function MFMap(props) {
       });
       events.current.push(onClickLocation);
     }
+
     if (props.onRightClickLocation) {
       var _mapRef$current26;
+
       var onRightClickLocation = (_mapRef$current26 = mapRef.current) === null || _mapRef$current26 === void 0 ? void 0 : _mapRef$current26.addListener("rightClick", function (args) {
         props.onRightClickLocation && props.onRightClickLocation(args);
       }, {
@@ -888,8 +1019,10 @@ var MFMap = function MFMap(props) {
       });
       events.current.push(onRightClickLocation);
     }
+
     if (props.onTilesLoaded) {
       var _mapRef$current27;
+
       var onTilesLoaded = (_mapRef$current27 = mapRef.current) === null || _mapRef$current27 === void 0 ? void 0 : _mapRef$current27.addListener("tilesLoaded", function (args) {
         props.onTilesLoaded && props.onTilesLoaded(args);
       }, {
@@ -897,8 +1030,10 @@ var MFMap = function MFMap(props) {
       });
       events.current.push(onTilesLoaded);
     }
+
     if (props.onCameraChanging) {
       var _mapRef$current28;
+
       var onCameraChanging = (_mapRef$current28 = mapRef.current) === null || _mapRef$current28 === void 0 ? void 0 : _mapRef$current28.addListener("cameraChanging", function (args) {
         props.onCameraChanging && props.onCameraChanging(args);
       }, {
@@ -907,6 +1042,7 @@ var MFMap = function MFMap(props) {
       events.current.push(onCameraChanging);
     }
   };
+
   var newContext = {
     map: map
   };
@@ -924,30 +1060,30 @@ var MFMap = function MFMap(props) {
 
 var MFMarker = function MFMarker(props) {
   var position = props.position,
-    _props$visible = props.visible,
-    visible = _props$visible === void 0 ? true : _props$visible,
-    anchor = props.anchor,
-    labelAnchor = props.labelAnchor,
-    icon = props.icon,
-    elevation = props.elevation,
-    rotation = props.rotation,
-    title = props.title,
-    snippet = props.snippet,
-    windowAnchor = props.windowAnchor,
-    zIndex = props.zIndex,
-    label = props.label,
-    draggable = props.draggable,
-    iconView = props.iconView,
-    userInteractionEnabled = props.userInteractionEnabled,
-    map = props.map,
-    onCreated = props.onCreated,
-    onClick = props.onClick,
-    onRightClick = props.onRightClick,
-    onDragEnd = props.onDragEnd,
-    onHover = props.onHover,
-    onMouseOut = props.onMouseOut,
-    onMouseOver = props.onMouseOver,
-    onMouseMove = props.onMouseMove;
+      _props$visible = props.visible,
+      visible = _props$visible === void 0 ? true : _props$visible,
+      anchor = props.anchor,
+      labelAnchor = props.labelAnchor,
+      icon = props.icon,
+      elevation = props.elevation,
+      rotation = props.rotation,
+      title = props.title,
+      snippet = props.snippet,
+      windowAnchor = props.windowAnchor,
+      zIndex = props.zIndex,
+      label = props.label,
+      draggable = props.draggable,
+      iconView = props.iconView,
+      clickable = props.clickable,
+      map = props.map,
+      onCreated = props.onCreated,
+      onClick = props.onClick,
+      onRightClick = props.onRightClick,
+      onDragEnd = props.onDragEnd,
+      onHover = props.onHover,
+      onMouseOut = props.onMouseOut,
+      onMouseOver = props.onMouseOver,
+      onMouseMove = props.onMouseMove;
   var map4dContext = React.useContext(Map4dContext);
   var markerClusterContext = React.useContext(MarkerClusterContext);
   var theMap = map || map4dContext.map;
@@ -971,31 +1107,39 @@ var MFMarker = function MFMarker(props) {
         label: label,
         draggable: draggable,
         iconView: iconView,
-        userInteractionEnabled: userInteractionEnabled
+        clickable: clickable
       };
       Object.keys(option).forEach(function (key) {
         if (option[key] == undefined || option[key] == null) {
           delete option[key];
         }
       });
+
       if (icon) {
         var iconT = new map4d.Icon(icon.width, icon.height, icon.url);
         option.icon = iconT;
       }
+
       markerRef.current = new map4d.Marker(option);
+
       if (props.infoWindow != undefined) {
         markerRef.current.setInfoWindow(props.infoWindow);
       }
+
       if (props.infoContents != undefined) {
         markerRef.current.setInfoContents(props.infoContents);
       }
+
       if (!(markerClusterContext !== null && markerClusterContext !== void 0 && markerClusterContext.addMarker)) {
         markerRef.current.setMap(theMap);
       }
+
       if (props.showInfoWindow != undefined) {
         var _markerRef$current, _markerRef$current2;
+
         props.showInfoWindow ? (_markerRef$current = markerRef.current) === null || _markerRef$current === void 0 ? void 0 : _markerRef$current.showInfoWindow() : (_markerRef$current2 = markerRef.current) === null || _markerRef$current2 === void 0 ? void 0 : _markerRef$current2.hideInfoWindow();
       }
+
       markerRef.current.onClick = onClick;
       markerRef.current.onRightClick = props.onRightClick;
       markerRef.current.onDragEnd = props.onDragEnd;
@@ -1011,12 +1155,15 @@ var MFMarker = function MFMarker(props) {
     if (theMap) {
       if (!(markerClusterContext !== null && markerClusterContext !== void 0 && markerClusterContext.addMarker)) {
         var _markerRef$current3;
+
         (_markerRef$current3 = markerRef.current) === null || _markerRef$current3 === void 0 ? void 0 : _markerRef$current3.setMap(theMap);
       }
     }
+
     return function () {
       if (!(markerClusterContext !== null && markerClusterContext !== void 0 && markerClusterContext.addMarker)) {
         var _markerRef$current4;
+
         (_markerRef$current4 = markerRef.current) === null || _markerRef$current4 === void 0 ? void 0 : _markerRef$current4.setMap(null);
       }
     };
@@ -1025,8 +1172,10 @@ var MFMarker = function MFMarker(props) {
     return function () {
       if (!(markerClusterContext !== null && markerClusterContext !== void 0 && markerClusterContext.addMarker)) {
         var _markerRef$current5;
+
         (_markerRef$current5 = markerRef.current) === null || _markerRef$current5 === void 0 ? void 0 : _markerRef$current5.setMap(null);
       }
+
       markerRef.current && (markerClusterContext === null || markerClusterContext === void 0 ? void 0 : markerClusterContext.removeMarker) && (markerClusterContext === null || markerClusterContext === void 0 ? void 0 : markerClusterContext.removeMarker(markerRef.current));
     };
   }, []);
@@ -1067,79 +1216,98 @@ var MFMarker = function MFMarker(props) {
   }, [onDragEnd]);
   React.useEffect(function () {
     var _markerRef$current6;
+
     (_markerRef$current6 = markerRef.current) === null || _markerRef$current6 === void 0 ? void 0 : _markerRef$current6.setPosition(position);
   }, [position]);
   React.useEffect(function () {
     var _markerRef$current7;
+
     (_markerRef$current7 = markerRef.current) === null || _markerRef$current7 === void 0 ? void 0 : _markerRef$current7.setVisible(visible);
   }, [visible]);
   React.useEffect(function () {
     var _markerRef$current8;
+
     anchor != undefined && ((_markerRef$current8 = markerRef.current) === null || _markerRef$current8 === void 0 ? void 0 : _markerRef$current8.setAnchor(anchor));
   }, [anchor]);
   React.useEffect(function () {
     var _markerRef$current9;
+
     labelAnchor != undefined && ((_markerRef$current9 = markerRef.current) === null || _markerRef$current9 === void 0 ? void 0 : _markerRef$current9.setLabelAnchor(labelAnchor));
   }, [labelAnchor]);
   React.useEffect(function () {
     var _markerRef$current10;
+
     icon != undefined && ((_markerRef$current10 = markerRef.current) === null || _markerRef$current10 === void 0 ? void 0 : _markerRef$current10.setIcon(icon));
   }, [icon]);
   React.useEffect(function () {
     var _markerRef$current11;
+
     elevation != undefined && ((_markerRef$current11 = markerRef.current) === null || _markerRef$current11 === void 0 ? void 0 : _markerRef$current11.setElevation(elevation));
   }, [elevation]);
   React.useEffect(function () {
     var _markerRef$current12;
+
     rotation != undefined && ((_markerRef$current12 = markerRef.current) === null || _markerRef$current12 === void 0 ? void 0 : _markerRef$current12.setRotation(rotation));
   }, [rotation]);
   React.useEffect(function () {
     var _markerRef$current13;
+
     title != undefined && ((_markerRef$current13 = markerRef.current) === null || _markerRef$current13 === void 0 ? void 0 : _markerRef$current13.setTitle(title));
   }, [title]);
   React.useEffect(function () {
     var _markerRef$current14;
+
     snippet != undefined && ((_markerRef$current14 = markerRef.current) === null || _markerRef$current14 === void 0 ? void 0 : _markerRef$current14.setSnippet(snippet));
   }, [snippet]);
   React.useEffect(function () {
     var _markerRef$current15;
+
     windowAnchor != undefined && ((_markerRef$current15 = markerRef.current) === null || _markerRef$current15 === void 0 ? void 0 : _markerRef$current15.setWindowAnchor(windowAnchor));
   }, [windowAnchor]);
   React.useEffect(function () {
     var _markerRef$current16;
+
     zIndex != undefined && ((_markerRef$current16 = markerRef.current) === null || _markerRef$current16 === void 0 ? void 0 : _markerRef$current16.setZIndex(zIndex));
   }, [zIndex]);
   React.useEffect(function () {
     var _markerRef$current17;
+
     label != undefined && ((_markerRef$current17 = markerRef.current) === null || _markerRef$current17 === void 0 ? void 0 : _markerRef$current17.setLabel(label));
   }, [label]);
   React.useEffect(function () {
     var _markerRef$current18;
+
     draggable != undefined && ((_markerRef$current18 = markerRef.current) === null || _markerRef$current18 === void 0 ? void 0 : _markerRef$current18.setDraggable(draggable));
   }, [draggable]);
   React.useEffect(function () {
     var _markerRef$current19;
+
     iconView != undefined && ((_markerRef$current19 = markerRef.current) === null || _markerRef$current19 === void 0 ? void 0 : _markerRef$current19.setIconView(iconView));
   }, [iconView]);
   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;
+
     icon != undefined && ((_markerRef$current21 = markerRef.current) === null || _markerRef$current21 === void 0 ? void 0 : _markerRef$current21.setIcon(new map4d.Icon(icon.width, icon.height, icon.url)));
   }, [icon]);
   React.useEffect(function () {
     var _markerRef$current22;
+
     props.infoWindow != undefined && ((_markerRef$current22 = markerRef.current) === null || _markerRef$current22 === void 0 ? void 0 : _markerRef$current22.setInfoWindow(props.infoWindow));
   }, [props.infoWindow]);
   React.useEffect(function () {
     var _markerRef$current23;
+
     props.infoContents != undefined && ((_markerRef$current23 = markerRef.current) === null || _markerRef$current23 === void 0 ? void 0 : _markerRef$current23.setInfoContents(props.infoContents));
   }, [props.infoContents]);
   React.useEffect(function () {
     if (props.showInfoWindow != undefined) {
       var _markerRef$current24, _markerRef$current25;
+
       props.showInfoWindow ? (_markerRef$current24 = markerRef.current) === null || _markerRef$current24 === void 0 ? void 0 : _markerRef$current24.showInfoWindow() : (_markerRef$current25 = markerRef.current) === null || _markerRef$current25 === void 0 ? void 0 : _markerRef$current25.hideInfoWindow();
     }
   }, [props.showInfoWindow]);
@@ -1148,23 +1316,27 @@ var MFMarker = function MFMarker(props) {
 
 var MFMarkerCluster = function MFMarkerCluster(props) {
   var _props$minZoom = props.minZoom,
-    minZoom = _props$minZoom === void 0 ? 0 : _props$minZoom,
-    _props$maxZoom = props.maxZoom,
-    maxZoom = _props$maxZoom === void 0 ? 22 : _props$maxZoom,
-    _props$radius = props.radius,
-    radius = _props$radius === void 0 ? 100 : _props$radius,
-    zoomOnClick = props.zoomOnClick,
-    map = props.map,
-    onCreated = props.onCreated;
+      minZoom = _props$minZoom === void 0 ? 0 : _props$minZoom,
+      _props$maxZoom = props.maxZoom,
+      maxZoom = _props$maxZoom === void 0 ? 22 : _props$maxZoom,
+      _props$radius = props.radius,
+      radius = _props$radius === void 0 ? 100 : _props$radius,
+      zoomOnClick = props.zoomOnClick,
+      map = props.map,
+      onCreated = props.onCreated;
   var map4dContext = React.useContext(Map4dContext);
   var theMap = map || map4dContext.map;
   var markerRefs = React.useRef([]);
   var markerClusterRef = React.useRef();
+
   var drawCluster = function drawCluster() {
     var _markerClusterRef$cur;
+
     (_markerClusterRef$cur = markerClusterRef.current) === null || _markerClusterRef$cur === void 0 ? void 0 : _markerClusterRef$cur.setMap(null);
+
     if (theMap) {
       var _markerClusterRef$cur2;
+
       var option = {
         minZoom: minZoom,
         maxZoom: maxZoom,
@@ -1181,6 +1353,7 @@ var MFMarkerCluster = function MFMarkerCluster(props) {
       onCreated && onCreated(markerClusterRef.current);
     }
   };
+
   var clusterContext = {
     addMarker: function addMarker(marker) {
       markerRefs.current.push(marker);
@@ -1202,16 +1375,20 @@ var MFMarkerCluster = function MFMarkerCluster(props) {
   React.useEffect(function () {
     if (theMap) {
       var _markerClusterRef$cur3;
+
       (_markerClusterRef$cur3 = markerClusterRef.current) === null || _markerClusterRef$cur3 === void 0 ? void 0 : _markerClusterRef$cur3.setMap(theMap);
     }
+
     return function () {
       var _markerClusterRef$cur4;
+
       (_markerClusterRef$cur4 = markerClusterRef.current) === null || _markerClusterRef$cur4 === void 0 ? void 0 : _markerClusterRef$cur4.setMap(null);
     };
   }, [theMap]);
   React.useEffect(function () {
     return function () {
       var _markerClusterRef$cur5;
+
       (_markerClusterRef$cur5 = markerClusterRef.current) === null || _markerClusterRef$cur5 === void 0 ? void 0 : _markerClusterRef$cur5.setMap(null);
     };
   }, []);
@@ -1222,6 +1399,7 @@ var MFMarkerCluster = function MFMarkerCluster(props) {
   }, [minZoom, maxZoom, radius]);
   React.useEffect(function () {
     var _markerClusterRef$cur6;
+
     zoomOnClick != undefined && ((_markerClusterRef$cur6 = markerClusterRef.current) === null || _markerClusterRef$cur6 === void 0 ? void 0 : _markerClusterRef$cur6.setZoomOnClick(zoomOnClick));
   }, [zoomOnClick]);
   return React__default.createElement(MarkerClusterContext.Provider, {
@@ -1231,26 +1409,27 @@ var MFMarkerCluster = function MFMarkerCluster(props) {
 
 var MFPOI = function MFPOI(props) {
   var position = props.position,
-    title = props.title,
-    subtitle = props.subtitle,
-    color = props.color,
-    type = props.type,
-    icon = props.icon,
-    elevation = props.elevation,
-    zIndex = props.zIndex,
-    visible = props.visible,
-    draggable = props.draggable,
-    userInteractionEnabled = props.userInteractionEnabled,
-    map = props.map,
-    onCreated = props.onCreated,
-    onClick = props.onClick,
-    onHover = props.onHover;
+      title = props.title,
+      subtitle = props.subtitle,
+      color = props.color,
+      type = props.type,
+      icon = props.icon,
+      elevation = props.elevation,
+      zIndex = props.zIndex,
+      visible = props.visible,
+      draggable = props.draggable,
+      clickable = props.clickable,
+      map = props.map,
+      onCreated = props.onCreated,
+      onClick = props.onClick,
+      onHover = props.onHover;
   var map4dContext = React.useContext(Map4dContext);
   var theMap = map || map4dContext.map;
   var poiRef = React.useRef();
   React.useEffect(function () {
     if (theMap && !poiRef.current) {
       var _poiRef$current;
+
       var option = {
         position: position || {
           lat: 10.793113,
@@ -1265,7 +1444,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) {
@@ -1282,63 +1461,78 @@ var MFPOI = function MFPOI(props) {
   React.useEffect(function () {
     if (theMap) {
       var _poiRef$current2;
+
       (_poiRef$current2 = poiRef.current) === null || _poiRef$current2 === void 0 ? void 0 : _poiRef$current2.setMap(theMap);
     }
+
     return function () {
       var _poiRef$current3;
+
       (_poiRef$current3 = poiRef.current) === null || _poiRef$current3 === void 0 ? void 0 : _poiRef$current3.setMap(null);
     };
   }, [theMap]);
   React.useEffect(function () {
     return function () {
       var _poiRef$current4;
+
       (_poiRef$current4 = poiRef.current) === null || _poiRef$current4 === void 0 ? void 0 : _poiRef$current4.setMap(null);
     };
   }, []);
   React.useEffect(function () {
     var _poiRef$current5;
+
     (_poiRef$current5 = poiRef.current) === null || _poiRef$current5 === void 0 ? void 0 : _poiRef$current5.setPosition(position);
   }, [position]);
   React.useEffect(function () {
     var _poiRef$current6;
+
     title != undefined && ((_poiRef$current6 = poiRef.current) === null || _poiRef$current6 === void 0 ? void 0 : _poiRef$current6.setTitle(title));
   }, [title]);
   React.useEffect(function () {
     var _poiRef$current7;
+
     subtitle != undefined && ((_poiRef$current7 = poiRef.current) === null || _poiRef$current7 === void 0 ? void 0 : _poiRef$current7.setSubtitle(subtitle));
   }, [subtitle]);
   React.useEffect(function () {
     var _poiRef$current8;
+
     color != undefined && ((_poiRef$current8 = poiRef.current) === null || _poiRef$current8 === void 0 ? void 0 : _poiRef$current8.setColor(color));
   }, [color]);
   React.useEffect(function () {
     var _poiRef$current9;
+
     type != undefined && ((_poiRef$current9 = poiRef.current) === null || _poiRef$current9 === void 0 ? void 0 : _poiRef$current9.setType(type));
   }, [type]);
   React.useEffect(function () {
     var _poiRef$current10;
+
     icon != undefined && ((_poiRef$current10 = poiRef.current) === null || _poiRef$current10 === void 0 ? void 0 : _poiRef$current10.setIcon(icon));
   }, [icon]);
   React.useEffect(function () {
     var _poiRef$current11;
+
     elevation != undefined && ((_poiRef$current11 = poiRef.current) === null || _poiRef$current11 === void 0 ? void 0 : _poiRef$current11.setElevation(elevation));
   }, [elevation]);
   React.useEffect(function () {
     var _poiRef$current12;
+
     zIndex != undefined && ((_poiRef$current12 = poiRef.current) === null || _poiRef$current12 === void 0 ? void 0 : _poiRef$current12.setZIndex(zIndex));
   }, [zIndex]);
   React.useEffect(function () {
     var _poiRef$current13;
+
     visible != undefined && ((_poiRef$current13 = poiRef.current) === null || _poiRef$current13 === void 0 ? void 0 : _poiRef$current13.setVisible(visible));
   }, [visible]);
   React.useEffect(function () {
     var _poiRef$current14;
+
     draggable != undefined && ((_poiRef$current14 = poiRef.current) === null || _poiRef$current14 === void 0 ? void 0 : _poiRef$current14.setDraggable(draggable));
   }, [draggable]);
   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;
@@ -1354,17 +1548,19 @@ var MFPOI = function MFPOI(props) {
 
 var MFPOIOverlay = function MFPOIOverlay(props) {
   var getUrl = props.getUrl,
-    _props$visible = props.visible,
-    visible = _props$visible === void 0 ? true : _props$visible,
-    parserData = props.parserData,
-    prefixId = props.prefixId,
-    map = props.map,
-    onCreated = props.onCreated;
+      _props$visible = props.visible,
+      visible = _props$visible === void 0 ? true : _props$visible,
+      parserData = props.parserData,
+      prefixId = props.prefixId,
+      map = props.map,
+      onCreated = props.onCreated;
   var map4dContext = React.useContext(Map4dContext);
   var theMap = map || map4dContext.map;
   var poiOverlayRef = React.useRef();
+
   var reCreate = function reCreate() {
     var _poiOverlayRef$curren, _poiOverlayRef$curren2;
+
     (_poiOverlayRef$curren = poiOverlayRef.current) === null || _poiOverlayRef$curren === void 0 ? void 0 : _poiOverlayRef$curren.setMap(null);
     var option = {
       getUrl: getUrl || {
@@ -1384,6 +1580,7 @@ var MFPOIOverlay = function MFPOIOverlay(props) {
     (_poiOverlayRef$curren2 = poiOverlayRef.current) === null || _poiOverlayRef$curren2 === void 0 ? void 0 : _poiOverlayRef$curren2.setMap(theMap);
     onCreated && onCreated(poiOverlayRef.current);
   };
+
   React.useEffect(function () {
     if (theMap && !poiOverlayRef.current) {
       reCreate();
@@ -1392,16 +1589,20 @@ var MFPOIOverlay = function MFPOIOverlay(props) {
   React.useEffect(function () {
     if (theMap) {
       var _poiOverlayRef$curren3;
+
       (_poiOverlayRef$curren3 = poiOverlayRef.current) === null || _poiOverlayRef$curren3 === void 0 ? void 0 : _poiOverlayRef$curren3.setMap(theMap);
     }
+
     return function () {
       var _poiOverlayRef$curren4;
+
       (_poiOverlayRef$curren4 = poiOverlayRef.current) === null || _poiOverlayRef$curren4 === void 0 ? void 0 : _poiOverlayRef$curren4.setMap(null);
     };
   }, [theMap]);
   React.useEffect(function () {
     return function () {
       var _poiOverlayRef$curren5;
+
       (_poiOverlayRef$curren5 = poiOverlayRef.current) === null || _poiOverlayRef$curren5 === void 0 ? void 0 : _poiOverlayRef$curren5.setMap(null);
     };
   }, []);
@@ -1415,19 +1616,19 @@ var MFPOIOverlay = function MFPOIOverlay(props) {
 
 var MFPolygon = function MFPolygon(props) {
   var paths = props.paths,
-    fillColor = props.fillColor,
-    fillOpacity = props.fillOpacity,
-    _props$visible = props.visible,
-    visible = _props$visible === void 0 ? true : _props$visible,
-    strokeColor = props.strokeColor,
-    strokeWidth = props.strokeWidth,
-    draggable = props.draggable,
-    elevation = props.elevation,
-    zIndex = props.zIndex,
-    userInteractionEnabled = props.userInteractionEnabled,
-    map = props.map,
-    onHover = props.onHover,
-    onCreated = props.onCreated;
+      fillColor = props.fillColor,
+      fillOpacity = props.fillOpacity,
+      _props$visible = props.visible,
+      visible = _props$visible === void 0 ? true : _props$visible,
+      strokeColor = props.strokeColor,
+      strokeWidth = props.strokeWidth,
+      draggable = props.draggable,
+      elevation = props.elevation,
+      zIndex = props.zIndex,
+      clickable = props.clickable,
+      map = props.map,
+      onHover = props.onHover,
+      onCreated = props.onCreated;
   var map4dContext = React.useContext(Map4dContext);
   var theMap = map || map4dContext.map;
   var polygonRef = React.useRef();
@@ -1435,6 +1636,7 @@ var MFPolygon = function MFPolygon(props) {
   React.useEffect(function () {
     if (theMap && !polygonRef.current) {
       var _polygonRef$current;
+
       var option = {
         paths: paths,
         fillColor: fillColor,
@@ -1445,7 +1647,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) {
@@ -1463,16 +1665,20 @@ var MFPolygon = function MFPolygon(props) {
   React.useEffect(function () {
     if (theMap) {
       var _polygonRef$current2;
+
       (_polygonRef$current2 = polygonRef.current) === null || _polygonRef$current2 === void 0 ? void 0 : _polygonRef$current2.setMap(theMap);
     }
+
     return function () {
       var _polygonRef$current3;
+
       (_polygonRef$current3 = polygonRef.current) === null || _polygonRef$current3 === void 0 ? void 0 : _polygonRef$current3.setMap(null);
     };
   }, [theMap]);
   React.useEffect(function () {
     return function () {
       var _polygonRef$current4;
+
       (_polygonRef$current4 = polygonRef.current) === null || _polygonRef$current4 === void 0 ? void 0 : _polygonRef$current4.setMap(null);
     };
   }, []);
@@ -1483,78 +1689,91 @@ var MFPolygon = function MFPolygon(props) {
   }, [onHover]);
   React.useEffect(function () {
     var _polygonRef$current6;
+
     if (polygonRef.current) {
       var _polygonRef$current5;
+
       var c = (_polygonRef$current5 = polygonRef.current) === null || _polygonRef$current5 === void 0 ? void 0 : _polygonRef$current5.getMap();
       console.log(c == a.current);
     }
+
     (_polygonRef$current6 = polygonRef.current) === null || _polygonRef$current6 === void 0 ? void 0 : _polygonRef$current6.setPaths(paths);
   }, [paths]);
   React.useEffect(function () {
     var _polygonRef$current7;
+
     fillColor != undefined && ((_polygonRef$current7 = polygonRef.current) === null || _polygonRef$current7 === void 0 ? void 0 : _polygonRef$current7.setFillColor(fillColor));
   }, [fillColor]);
   React.useEffect(function () {
     var _polygonRef$current8;
+
     fillOpacity != undefined && ((_polygonRef$current8 = polygonRef.current) === null || _polygonRef$current8 === void 0 ? void 0 : _polygonRef$current8.setFillOpacity(fillOpacity));
   }, [fillOpacity]);
   React.useEffect(function () {
     var _polygonRef$current9;
+
     (_polygonRef$current9 = polygonRef.current) === null || _polygonRef$current9 === void 0 ? void 0 : _polygonRef$current9.setVisible(visible);
   }, [visible]);
   React.useEffect(function () {
     var _polygonRef$current10;
+
     strokeColor != undefined && ((_polygonRef$current10 = polygonRef.current) === null || _polygonRef$current10 === void 0 ? void 0 : _polygonRef$current10.setStrokeColor(strokeColor));
   }, [strokeColor]);
   React.useEffect(function () {
     var _polygonRef$current11;
+
     strokeWidth != undefined && ((_polygonRef$current11 = polygonRef.current) === null || _polygonRef$current11 === void 0 ? void 0 : _polygonRef$current11.setStrokeWidth(strokeWidth));
   }, [strokeWidth]);
   React.useEffect(function () {
     var _polygonRef$current12;
+
     draggable != undefined && ((_polygonRef$current12 = polygonRef.current) === null || _polygonRef$current12 === void 0 ? void 0 : _polygonRef$current12.setDraggable(draggable));
   }, [draggable]);
   React.useEffect(function () {
     var _polygonRef$current13;
+
     elevation != undefined && ((_polygonRef$current13 = polygonRef.current) === null || _polygonRef$current13 === void 0 ? void 0 : _polygonRef$current13.setElevation(elevation));
   }, [elevation]);
   React.useEffect(function () {
     var _polygonRef$current14;
+
     zIndex != undefined && ((_polygonRef$current14 = polygonRef.current) === null || _polygonRef$current14 === void 0 ? void 0 : _polygonRef$current14.setZIndex(zIndex));
   }, [zIndex]);
   React.useEffect(function () {
     var _polygonRef$current15;
-    userInteractionEnabled != undefined && ((_polygonRef$current15 = polygonRef.current) === null || _polygonRef$current15 === void 0 ? void 0 : _polygonRef$current15.setUserInteraction(userInteractionEnabled));
-  }, [userInteractionEnabled]);
+
+    clickable != undefined && ((_polygonRef$current15 = polygonRef.current) === null || _polygonRef$current15 === void 0 ? void 0 : _polygonRef$current15.setClickable(clickable));
+  }, [clickable]);
   return null;
 };
 
 var MFPolyline = function MFPolyline(props) {
   var path = props.path,
-    strokeWidth = props.strokeWidth,
-    strokeColor = props.strokeColor,
-    strokeOpacity = props.strokeOpacity,
-    _props$visible = props.visible,
-    visible = _props$visible === void 0 ? true : _props$visible,
-    closed = props.closed,
-    draggable = props.draggable,
-    zIndex = props.zIndex,
-    elevation = props.elevation,
-    strokePattern = props.strokePattern,
-    userInteractionEnabled = props.userInteractionEnabled,
-    map = props.map,
-    onClick = props.onClick,
-    onHover = props.onHover,
-    onCreated = props.onCreated,
-    onMouseOut = props.onMouseOut,
-    onMouseOver = props.onMouseOver,
-    onMouseMove = props.onMouseMove;
+      strokeWidth = props.strokeWidth,
+      strokeColor = props.strokeColor,
+      strokeOpacity = props.strokeOpacity,
+      _props$visible = props.visible,
+      visible = _props$visible === void 0 ? true : _props$visible,
+      closed = props.closed,
+      draggable = props.draggable,
+      zIndex = props.zIndex,
+      elevation = props.elevation,
+      strokePattern = props.strokePattern,
+      clickable = props.clickable,
+      map = props.map,
+      onClick = props.onClick,
+      onHover = props.onHover,
+      onCreated = props.onCreated,
+      onMouseOut = props.onMouseOut,
+      onMouseOver = props.onMouseOver,
+      onMouseMove = props.onMouseMove;
   var map4dContext = React.useContext(Map4dContext);
   var theMap = map || map4dContext.map;
   var polylineRef = React.useRef();
   React.useEffect(function () {
     if (theMap && !polylineRef.current) {
       var _polylineRef$current;
+
       var option = {
         path: path || {
           lat: 10.793113,
@@ -1569,7 +1788,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) {
@@ -1589,16 +1808,20 @@ var MFPolyline = function MFPolyline(props) {
   React.useEffect(function () {
     if (theMap) {
       var _polylineRef$current2;
+
       (_polylineRef$current2 = polylineRef.current) === null || _polylineRef$current2 === void 0 ? void 0 : _polylineRef$current2.setMap(theMap);
     }
+
     return function () {
       var _polylineRef$current3;
+
       (_polylineRef$current3 = polylineRef.current) === null || _polylineRef$current3 === void 0 ? void 0 : _polylineRef$current3.setMap(null);
     };
   }, [theMap]);
   React.useEffect(function () {
     return function () {
       var _polylineRef$current4;
+
       (_polylineRef$current4 = polylineRef.current) === null || _polylineRef$current4 === void 0 ? void 0 : _polylineRef$current4.setMap(null);
     };
   }, []);
@@ -1629,64 +1852,77 @@ var MFPolyline = function MFPolyline(props) {
   }, [onClick]);
   React.useEffect(function () {
     var _polylineRef$current5;
+
     (_polylineRef$current5 = polylineRef.current) === null || _polylineRef$current5 === void 0 ? void 0 : _polylineRef$current5.setPath(path);
   }, [path]);
   React.useEffect(function () {
     var _polylineRef$current6;
+
     strokeWidth != undefined && ((_polylineRef$current6 = polylineRef.current) === null || _polylineRef$current6 === void 0 ? void 0 : _polylineRef$current6.setStrokeWidth(strokeWidth));
   }, [strokeWidth]);
   React.useEffect(function () {
     var _polylineRef$current7;
+
     strokeColor != undefined && ((_polylineRef$current7 = polylineRef.current) === null || _polylineRef$current7 === void 0 ? void 0 : _polylineRef$current7.setStrokeColor(strokeColor));
   }, [strokeColor]);
   React.useEffect(function () {
     var _polylineRef$current8;
+
     strokeOpacity != undefined && ((_polylineRef$current8 = polylineRef.current) === null || _polylineRef$current8 === void 0 ? void 0 : _polylineRef$current8.setStrokeOpacity(strokeOpacity));
   }, [strokeOpacity]);
   React.useEffect(function () {
     var _polylineRef$current9;
+
     visible != undefined && ((_polylineRef$current9 = polylineRef.current) === null || _polylineRef$current9 === void 0 ? void 0 : _polylineRef$current9.setVisible(visible));
   }, [visible]);
   React.useEffect(function () {
     var _polylineRef$current10;
+
     closed != undefined && ((_polylineRef$current10 = polylineRef.current) === null || _polylineRef$current10 === void 0 ? void 0 : _polylineRef$current10.setClosed(closed));
   }, [closed]);
   React.useEffect(function () {
     var _polylineRef$current11;
+
     draggable != undefined && ((_polylineRef$current11 = polylineRef.current) === null || _polylineRef$current11 === void 0 ? void 0 : _polylineRef$current11.setDraggable(draggable));
   }, [draggable]);
   React.useEffect(function () {
     var _polylineRef$current12;
+
     zIndex != undefined && ((_polylineRef$current12 = polylineRef.current) === null || _polylineRef$current12 === void 0 ? void 0 : _polylineRef$current12.setZIndex(zIndex));
   }, [zIndex]);
   React.useEffect(function () {
     var _polylineRef$current13;
+
     elevation != undefined && ((_polylineRef$current13 = polylineRef.current) === null || _polylineRef$current13 === void 0 ? void 0 : _polylineRef$current13.setElevation(elevation));
   }, [elevation]);
   React.useEffect(function () {
     var _polylineRef$current14;
+
     strokePattern != undefined && ((_polylineRef$current14 = polylineRef.current) === null || _polylineRef$current14 === void 0 ? void 0 : _polylineRef$current14.setStrokePattern(strokePattern));
   }, [strokePattern]);
   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;
 };
 
 var MFTileOverlay = function MFTileOverlay(props) {
   var getUrl = props.getUrl,
-    _props$visible = props.visible,
-    visible = _props$visible === void 0 ? true : _props$visible,
-    zIndex = props.zIndex,
-    opacity = props.opacity,
-    map = props.map,
-    onCreated = props.onCreated;
+      _props$visible = props.visible,
+      visible = _props$visible === void 0 ? true : _props$visible,
+      zIndex = props.zIndex,
+      opacity = props.opacity,
+      map = props.map,
+      onCreated = props.onCreated;
   var map4dContext = React.useContext(Map4dContext);
   var theMap = map || map4dContext.map;
   var tileOverlayRef = React.useRef();
+
   var reCreate = function reCreate() {
     var _tileOverlayRef$curre, _tileOverlayRef$curre2;
+
     (_tileOverlayRef$curre = tileOverlayRef.current) === null || _tileOverlayRef$curre === void 0 ? void 0 : _tileOverlayRef$curre.setMap(null);
     var option = {
       getUrl: getUrl || {
@@ -1706,6 +1942,7 @@ var MFTileOverlay = function MFTileOverlay(props) {
     (_tileOverlayRef$curre2 = tileOverlayRef.current) === null || _tileOverlayRef$curre2 === void 0 ? void 0 : _tileOverlayRef$curre2.setMap(theMap);
     onCreated && onCreated(tileOverlayRef.current);
   };
+
   React.useEffect(function () {
     if (theMap && !tileOverlayRef.current) {
       reCreate();
@@ -1714,16 +1951,20 @@ var MFTileOverlay = function MFTileOverlay(props) {
   React.useEffect(function () {
     if (theMap) {
       var _tileOverlayRef$curre3;
+
       (_tileOverlayRef$curre3 = tileOverlayRef.current) === null || _tileOverlayRef$curre3 === void 0 ? void 0 : _tileOverlayRef$curre3.setMap(theMap);
     }
+
     return function () {
       var _tileOverlayRef$curre4;
+
       (_tileOverlayRef$curre4 = tileOverlayRef.current) === null || _tileOverlayRef$curre4 === void 0 ? void 0 : _tileOverlayRef$curre4.setMap(null);
     };
   }, [theMap]);
   React.useEffect(function () {
     return function () {
       var _tileOverlayRef$curre5;
+
       (_tileOverlayRef$curre5 = tileOverlayRef.current) === null || _tileOverlayRef$curre5 === void 0 ? void 0 : _tileOverlayRef$curre5.setMap(null);
     };
   }, []);
@@ -1734,14 +1975,17 @@ var MFTileOverlay = function MFTileOverlay(props) {
   }, [getUrl]);
   React.useEffect(function () {
     var _tileOverlayRef$curre6;
+
     (_tileOverlayRef$curre6 = tileOverlayRef.current) === null || _tileOverlayRef$curre6 === void 0 ? void 0 : _tileOverlayRef$curre6.setVisible(visible);
   }, [visible]);
   React.useEffect(function () {
     var _tileOverlayRef$curre7;
+
     zIndex != undefined && ((_tileOverlayRef$curre7 = tileOverlayRef.current) === null || _tileOverlayRef$curre7 === void 0 ? void 0 : _tileOverlayRef$curre7.setZIndex(zIndex));
   }, [zIndex]);
   React.useEffect(function () {
     var _tileOverlayRef$curre8;
+
     opacity != undefined && ((_tileOverlayRef$curre8 = tileOverlayRef.current) === null || _tileOverlayRef$curre8 === void 0 ? void 0 : _tileOverlayRef$curre8.setOpacity(opacity));
   }, [opacity]);
   return null;
@@ -1756,6 +2000,7 @@ function _defineProperties(target, props) {
     Object.defineProperty(target, descriptor.key, descriptor);
   }
 }
+
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
@@ -1764,11 +2009,14 @@ function _createClass(Constructor, protoProps, staticProps) {
   });
   return Constructor;
 }
+
 function _inheritsLoose(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
   subClass.prototype.constructor = subClass;
+
   _setPrototypeOf(subClass, superClass);
 }
+
 function _setPrototypeOf(o, p) {
   _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
@@ -1782,70 +2030,91 @@ var Vector2 = /*#__PURE__*/function () {
     if (x === void 0) {
       x = 0.0;
     }
+
     if (y === void 0) {
       y = 0.0;
     }
+
     this.x = x;
     this.y = y;
   }
+
   var _proto = Vector2.prototype;
+
   _proto.clone = function clone() {
     return new Vector2(this.x, this.y);
   };
+
   _proto.normalize = function normalize() {
     var length = this.length;
     var x = 0.0;
     var y = 0.0;
+
     if (length > 0) {
       x = this.x / length;
       y = this.y / length;
     }
+
     return new Vector2(x, y);
   };
+
   _proto.set = function set(a) {
     this.x = a.x;
     this.y = a.y;
   };
+
   _proto.invert = function invert() {
     return new Vector2(-this.x, -this.y);
   };
+
   _proto.rotate90 = function rotate90() {
     return new Vector2(this.y, -this.x);
   };
+
   _proto.add = function add(a) {
     return new Vector2(a.x + this.x, a.y + this.y);
   };
+
   _proto.subtract = function subtract(a) {
     if (!a) {
       return this.clone();
     }
+
     return new Vector2(this.x - a.x, this.y - a.y);
   };
+
   _proto.multiply = function multiply(a) {
     return new Vector2(a * this.x, a * this.y);
   };
+
   _proto.rotateBy = function rotateBy(a) {
     var cos = Math.cos(a * Math.PI / 180);
     var sin = Math.sin(a * Math.PI / 180);
     return new Vector2(this.x * cos - this.y * sin, this.x * sin + this.y * cos);
   };
+
   _proto.rotateByRadian = function rotateByRadian(a) {
     var cos = Math.cos(a);
     var sin = Math.sin(a);
     return new Vector2(this.x * cos - this.y * sin, this.x * sin + this.y * cos);
   };
+
   _proto.cross = function cross(a) {
     return this.x * a.y - this.y * a.x;
   };
+
   _proto.dot = function dot(a) {
     return a.x * this.x + a.y * this.y;
   };
+
   Vector2.perp = function perp(v1, v2) {
     return new Vector2(v2[1] - v1[1], v1[0] - v2[0]);
   };
+
   Vector2.neg = function neg(v) {
     return new Vector2(-v.x, -v.y);
   };
+
   _createClass(Vector2, [{
     key: "length",
     get: function get() {
@@ -1857,28 +2126,35 @@ var Vector2 = /*#__PURE__*/function () {
       return this.x * this.x + this.y * this.y;
     }
   }]);
+
   return Vector2;
 }();
 
 var MathUtils = /*#__PURE__*/function () {
   function MathUtils() {}
+
   MathUtils.clamp = function clamp(value, min, max) {
     return value < min ? min : value > max ? max : value;
   };
+
   MathUtils.toRadians = function toRadians(angleDegrees) {
     return angleDegrees * Math.PI / 180.0;
   };
+
   MathUtils.distance = function distance(p1, p2) {
     return Math.sqrt((p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y));
   };
+
   MathUtils.findNextPowerOf2 = function findNextPowerOf2(n) {
     n = n - 1;
     var lg = Math.log2(n);
     return 1 << lg + 1;
   };
+
   MathUtils.findPreviousPowerOf2 = function findPreviousPowerOf2(n) {
     return 1 << 31 - Math.clz32(n);
   };
+
   return MathUtils;
 }();
 
@@ -1887,75 +2163,97 @@ var Vector3 = /*#__PURE__*/function () {
     if (x === void 0) {
       x = 0.0;
     }
+
     if (y === void 0) {
       y = 0.0;
     }
+
     if (z === void 0) {
       z = 0.0;
     }
+
     this.x = x;
     this.y = y;
     this.z = z;
   }
+
   var _proto = Vector3.prototype;
+
   _proto.clone = function clone() {
     return new Vector3(this.x, this.y, this.z);
   };
+
   _proto.buffer = function buffer() {
     return new Float32Array([this.x, this.y, this.z]);
   };
+
   _proto.normalize = function normalize() {
     var length = this.length;
     var x = 0.0;
     var y = 0.0;
     var z = 0.0;
+
     if (length > 0) {
       x = this.x / length;
       y = this.y / length;
       z = this.z / length;
     }
+
     return new Vector3(x, y, z);
   };
+
   _proto.set = function set(a) {
     this.x = a.x;
     this.y = a.y;
     this.z = a.z;
   };
+
   _proto.invert = function invert() {
     return new Vector3(-this.x, -this.y, -this.z);
   };
+
   _proto.rotate90 = function rotate90() {
     return new Vector3(this.y, -this.x, this.z);
   };
+
   _proto.add = function add(a) {
     return new Vector3(a.x + this.x, a.y + this.y, a.z + this.z);
   };
+
   _proto.subtract = function subtract(a) {
     if (!a) {
       return this.clone();
     }
+
     return new Vector3(this.x - a.x, this.y - a.y, this.z - a.z);
   };
+
   _proto.multiply = function multiply(a) {
     return new Vector3(a * this.x, a * this.y, a * this.z);
   };
+
   _proto.rotateBy = function rotateBy(a) {
     var cos = Math.cos(a * Math.PI / 180);
     var sin = Math.sin(a * Math.PI / 180);
     return new Vector3(this.x * cos - this.y * sin, this.x * sin + this.y * cos);
   };
+
   _proto.cross = function cross(a) {
     return new Vector3(this.y * a.z - this.z * a.y, this.z * a.x - this.x * a.z, this.x * a.y - this.y * a.x);
   };
+
   _proto.dot = function dot(a) {
     return a.x * this.x + a.y * this.y + a.z * this.z;
   };
+
   Vector3.perp = function perp(v1, v2) {
     return new Vector3(v2[1] - v1[1], v1[0] - v2[0]);
   };
+
   Vector3.neg = function neg(v) {
     return new Vector3(-v.x, -v.y, -v.z);
   };
+
   _createClass(Vector3, [{
     key: "length",
     get: function get() {
@@ -1967,6 +2265,7 @@ var Vector3 = /*#__PURE__*/function () {
       return this.x * this.x + this.y * this.y + this.z * this.z;
     }
   }]);
+
   return Vector3;
 }();
 
@@ -1975,19 +2274,25 @@ var Matrix4 = /*#__PURE__*/function () {
     if (data === void 0) {
       data = new Float32Array([1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0]);
     }
+
     this.data = data;
   }
+
   var _proto = Matrix4.prototype;
+
   _proto.setIdentity = function setIdentity(x, y, z) {
     if (x === void 0) {
       x = 1.0;
     }
+
     if (y === void 0) {
       y = 1.0;
     }
+
     if (z === void 0) {
       z = 1.0;
     }
+
     this.data[0] = x;
     this.data[1] = 0;
     this.data[2] = 0;
@@ -2006,6 +2311,7 @@ var Matrix4 = /*#__PURE__*/function () {
     this.data[15] = 1.0;
     return this;
   };
+
   _proto.copy = function copy(other) {
     this.data[0] = other.data[0];
     this.data[1] = other.data[1];
@@ -2025,27 +2331,33 @@ var Matrix4 = /*#__PURE__*/function () {
     this.data[15] = other.data[15];
     return this;
   };
+
   Matrix4.translate = function translate(x, y, z) {
     if (z === void 0) {
       z = 0.0;
     }
+
     return new Matrix4(new Float32Array([1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0., 0.0, 0.0, 1.0, 0.0, x, y, z, 1.0]));
   };
+
   _proto.translate = function translate(x, y, z) {
     if (z === void 0) {
       z = 0.0;
     }
+
     this.data[12] += x;
     this.data[13] += y;
     this.data[14] += z;
     return this;
   };
+
   Matrix4.rotateX = function rotateX(alpha) {
     alpha *= Math.PI / 180.0;
     var sinA = Math.sin(alpha);
     var cosA = Math.cos(alpha);
     return new Matrix4(new Float32Array([1.0, 0.0, 0.0, 0.0, 0.0, cosA, sinA, 0.0, 0.0, -sinA, cosA, 0.0, 0.0, 0.0, 0.0, 1.0]));
   };
+
   _proto.setRotationX = function setRotationX(alpha) {
     alpha *= Math.PI / 180.0;
     var sinA = Math.sin(alpha);
@@ -2057,6 +2369,7 @@ var Matrix4 = /*#__PURE__*/function () {
     this.data[10] = cosA;
     return this;
   };
+
   _proto.rotateX = function rotateX(alpha) {
     alpha *= Math.PI / 180.0;
     var sinA = Math.sin(alpha);
@@ -2079,12 +2392,14 @@ var Matrix4 = /*#__PURE__*/function () {
     this.data[14] = r1 * sinA + r2 * cosA;
     return this;
   };
+
   Matrix4.rotateY = function rotateY(alpha) {
     alpha *= Math.PI / 180.0;
     var sinA = Math.sin(alpha);
     var cosA = Math.cos(alpha);
     return new Matrix4(new Float32Array([cosA, 0.0, sinA, 0.0, 0.0, 1.0, 0.0, 0.0, -sinA, 0.0, cosA, 0.0, 0.0, 0.0, 0.0, 1.0]));
   };
+
   _proto.setRotationY = function setRotationY(alpha) {
     alpha *= Math.PI / 180.0;
     var sinA = Math.sin(alpha);
@@ -2096,6 +2411,7 @@ var Matrix4 = /*#__PURE__*/function () {
     this.data[10] = cosA;
     return this;
   };
+
   _proto.rotateY = function rotateY(alpha) {
     alpha *= Math.PI / 180.0;
     var sinA = Math.sin(alpha);
@@ -2118,12 +2434,14 @@ var Matrix4 = /*#__PURE__*/function () {
     this.data[14] = r0 * sinA + r2 * cosA;
     return this;
   };
+
   Matrix4.rotateZ = function rotateZ(alpha) {
     alpha *= Math.PI / 180.0;
     var sinA = Math.sin(alpha);
     var cosA = Math.cos(alpha);
     return new Matrix4(new Float32Array([cosA, sinA, 0.0, 0.0, -sinA, cosA, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0]));
   };
+
   _proto.setRotationZ = function setRotationZ(alpha) {
     alpha *= Math.PI / 180.0;
     var sinA = Math.sin(alpha);
@@ -2135,6 +2453,7 @@ var Matrix4 = /*#__PURE__*/function () {
     this.data[5] = cosA;
     return this;
   };
+
   _proto.rotateZ = function rotateZ(alpha) {
     alpha *= Math.PI / 180.0;
     var sinA = Math.sin(alpha);
@@ -2157,11 +2476,14 @@ var Matrix4 = /*#__PURE__*/function () {
     this.data[13] = r0 * sinA + r1 * cosA;
     return this;
   };
+
   _proto.multiply = function multiply(matrix) {
     var result = new Matrix4(new Float32Array([0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]));
+
     if (matrix == null) {
       return result;
     }
+
     for (var i = 0; i < 4; ++i) {
       for (var j = 0; j < 4; ++j) {
         for (var k = 0; k < 4; ++k) {
@@ -2169,24 +2491,31 @@ var Matrix4 = /*#__PURE__*/function () {
         }
       }
     }
+
     return result;
   };
+
   Matrix4.ortho = function ortho(left, right, bottom, top, near, far) {
     if (near === void 0) {
       near = -100.0;
     }
+
     if (far === void 0) {
       far = 100.0;
     }
+
     return new Matrix4(new Float32Array([2.0 / (right - left), 0.0, 0.0, 0.0, 0.0, 2.0 / (top - bottom), 0.0, 0.0, 0.0, 0.0, -2.0 / (far - near), 0.0, -(left + right) / (right - left), -(top + bottom) / (top - bottom), -(near + far) / (near - far), 1.0]));
   };
+
   _proto.setOrtho = function setOrtho(left, right, bottom, top, near, far) {
     if (near === void 0) {
       near = -100.0;
     }
+
     if (far === void 0) {
       far = 100.0;
     }
+
     this.data[0] = 2.0 / (right - left);
     this.data[1] = 0;
     this.data[2] = 0;
@@ -2205,32 +2534,40 @@ var Matrix4 = /*#__PURE__*/function () {
     this.data[15] = 1.0;
     return this;
   };
+
   Matrix4.perspective = function perspective(fov, aspect, near, far) {
     var y = Math.tan(fov / 2.0) * near;
     var x = y * aspect;
     return Matrix4.frustum(-x, x, -y, y, near, far);
   };
+
   _proto.setPerspective = function setPerspective(fov, aspect, near, far) {
     var y = Math.tan(fov / 2.0) * near;
     var x = y * aspect;
     return this.setFrustum(-x, x, -y, y, near, far);
   };
+
   Matrix4.frustum = function frustum(left, right, bottom, top, near, far) {
     if (near === void 0) {
       near = -100.0;
     }
+
     if (far === void 0) {
       far = 100.0;
     }
+
     return new Matrix4(new Float32Array([2 * near / (right - left), 0, 0, 0, 0, 2 * near / (top - bottom), 0, 0, (right + left) / (right - left), (top + bottom) / (top - bottom), -(far + near) / (far - near), -1, 0, 0, -2 * near * far / (far - near), 0]));
   };
+
   _proto.setFrustum = function setFrustum(left, right, bottom, top, near, far) {
     if (near === void 0) {
       near = -100.0;
     }
+
     if (far === void 0) {
       far = 100.0;
     }
+
     this.data[0] = 2 * near / (right - left);
     this.data[1] = 0;
     this.data[2] = 0;
@@ -2248,88 +2585,117 @@ var Matrix4 = /*#__PURE__*/function () {
     this.data[14] = -2 * near * far / (far - near);
     this.data[15] = 0;
   };
+
   _proto.transform = function transform(vector, w) {
     if (w === void 0) {
       w = 0.0;
     }
+
     var x = this.data[0 * 4 + 0] * vector.x + this.data[1 * 4 + 0] * vector.y + this.data[2 * 4 + 0] * vector.z + this.data[3 * 4 + 0] * w;
     var y = this.data[0 * 4 + 1] * vector.x + this.data[1 * 4 + 1] * vector.y + this.data[2 * 4 + 1] * vector.z + this.data[3 * 4 + 1] * w;
     var z = this.data[0 * 4 + 2] * vector.x + this.data[1 * 4 + 2] * vector.y + this.data[2 * 4 + 2] * vector.z + this.data[3 * 4 + 2] * w;
     w = this.data[0 * 4 + 3] * vector.x + this.data[1 * 4 + 3] * vector.y + this.data[2 * 4 + 3] * vector.z + this.data[3 * 4 + 3] * w;
+
     if (w == 0) {
       w = 1;
     }
+
     return new Vector3(x / w, y / w, z / w);
   };
+
   _proto.buffer = function buffer() {
     return this.data;
   };
+
   _proto.inverse = function inverse() {
     var rows = 4;
     var cols = 4;
     var A = this.data.slice();
     var B = new Float32Array([1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0]);
+
     for (var c = 0; c < cols; ++c) {
       var r = c;
+
       while (r < rows && A[r * 4 + c] == 0) {
         ++r;
       }
+
       if (r == rows || A[r * 4 + c] == 0) {
         console.log("Cannot calculate inverse, determinant is zero");
         return this;
       }
+
       if (r != c) {
         var _Ac = A.slice(c * rows, (c + 1) * rows);
+
         var Ar = A.slice(r * rows, (r + 1) * rows);
         A.set(Ar, c * rows);
         A.set(_Ac, r * rows);
+
         var _Bc = B.slice(c * rows, (c + 1) * rows);
+
         var Br = B.slice(r * rows, (r + 1) * rows);
         B.set(Br, c * rows);
         B.set(_Bc, r * rows);
       }
+
       var Ac = A.slice(c * rows, (c + 1) * rows);
       var Bc = B.slice(c * rows, (c + 1) * rows);
+
       for (r = 0; r < rows; ++r) {
         var _Ar = A.slice(r * rows, (r + 1) * rows);
+
         var _Br = B.slice(r * rows, (r + 1) * rows);
+
         if (r != c) {
           if (_Ar[c] != 0) {
             var f = -_Ar[c] / Ac[c];
+
             for (var s = c; s < cols; ++s) {
               _Ar[s] = _Ar[s] + f * Ac[s];
             }
+
             A.set(_Ar, r * rows);
+
             for (var _s = 0; _s < cols; ++_s) {
               _Br[_s] = _Br[_s] + f * Bc[_s];
             }
+
             B.set(_Br, r * rows);
           }
         } else {
           var _f = Ac[c];
+
           if (_f == 0) {
             console.log("Cannot calculate inverse, determinant is zero");
             return this;
           }
+
           for (var _s2 = c; _s2 < cols; ++_s2) {
             _Ar[_s2] = _Ar[_s2] / _f;
           }
+
           A.set(_Ar, r * rows);
+
           for (var _s3 = 0; _s3 < cols; ++_s3) {
             _Br[_s3] = _Br[_s3] / _f;
           }
+
           B.set(_Br, r * rows);
         }
       }
     }
+
     return new Matrix4(B);
   };
+
   _createClass(Matrix4, [{
     key: "position",
     get: function get() {
       return new Vector3(this.data[12], this.data[13], this.data[14]);
     }
   }]);
+
   return Matrix4;
 }();
 
@@ -2338,62 +2704,81 @@ var Color = /*#__PURE__*/function () {
     if (red === void 0) {
       red = 0.0;
     }
+
     if (green === void 0) {
       green = 0.0;
     }
+
     if (blue === void 0) {
       blue = 0.0;
     }
+
     if (alpha === void 0) {
       alpha = 1.0;
     }
+
     this.alpha = alpha;
     this._buffer = new Float32Array([red, green, blue]);
   }
+
   var _proto = Color.prototype;
+
   _proto.rgbBuffer = function rgbBuffer() {
     return this._buffer;
   };
+
   _proto.buffer = function buffer() {
     return new Float32Array([this.red, this.green, this.blue, this.alpha]);
   };
+
   Color.fromHex = function fromHex(hexString) {
     if (hexString === void 0) {
       hexString = "000000";
     }
+
     if (hexString.length == 4 || hexString.length == 7 || hexString.length == 9) {
       hexString = hexString.substring(1, hexString.length);
     }
+
     if (hexString.length == 3) {
       hexString = hexString.split("").map(function (x) {
         return x + x;
       }).join("");
     }
+
     var colorCode = parseInt(hexString, 16);
+
     if (hexString.length == 6) {
       return new Color((colorCode >> 16) / 255, (colorCode >> 8 & 255) / 255, (colorCode & 255) / 255);
     } else {
       return new Color((colorCode >> 24 & 255) / 255, (colorCode >> 16 & 255) / 255, (colorCode >> 8 & 255) / 255, (colorCode & 255) / 255);
     }
   };
+
   Color.fromInt = function fromInt(colorCode) {
     if (colorCode === void 0) {
       colorCode = 0;
     }
+
     if (colorCode < 0) {
       colorCode = 0;
     }
+
     return new Color((colorCode >> 16 & 255) / 255, (colorCode >> 8 & 255) / 255, (colorCode & 255) / 255);
   };
+
   Color.fromVec3 = function fromVec3(color) {
     return new Color(color.x, color.y, color.z);
   };
+
   Color.mix = function mix(a, b, factor) {
     return new Color(a.red * factor + b.red * (1 - factor), a.green * factor + b.green * (1 - factor), a.blue * factor + b.blue * (1 - factor), a.alpha * factor + b.alpha * (1 - factor));
   };
+
   Color.isValid = function isValid(colorString) {
     return /^#?([0-9A-Fa-f]){6,8}$/i.test(colorString);
   };
+
   _createClass(Color, [{
     key: "red",
     get: function get() {
@@ -2423,14 +2808,17 @@ var Color = /*#__PURE__*/function () {
         hex = hex.length > 2 ? hex.substr(0, 2) : hex;
         return hex;
       };
+
       return "#" + float2hex(this.red) + float2hex(this.green) + float2hex(this.blue) + float2hex(this.alpha);
     }
   }]);
+
   return Color;
 }();
 
 var MapConstants = /*#__PURE__*/function () {
   function MapConstants() {}
+
   _createClass(MapConstants, null, [{
     key: "placeFontSize",
     get: function get() {
@@ -2442,6 +2830,7 @@ var MapConstants = /*#__PURE__*/function () {
       return 90.0 - CameraConstants.fov * MathConstants.rad2Deg;
     }
   }]);
+
   return MapConstants;
 }();
 MapConstants.none = -1.0;
@@ -2525,15 +2914,19 @@ CameraConstants.farPlane = 1000;
 CameraConstants.height = 15.5;
 var ColorConstants = /*#__PURE__*/function () {
   function ColorConstants() {}
+
   ColorConstants.getSkyColor = function getSkyColor(name) {
     return ColorConstants.skyColors[name];
   };
+
   ColorConstants.getFogColor = function getFogColor(name) {
     return ColorConstants.fogColors[name];
   };
+
   ColorConstants.getLightColor = function getLightColor(name) {
     return ColorConstants.lightColors[name];
   };
+
   return ColorConstants;
 }();
 ColorConstants.skyColors = {
@@ -2556,6 +2949,7 @@ ColorConstants.lightColors = {
 };
 
 var ClassType;
+
 (function (ClassType) {
   ClassType[ClassType["MARKER"] = 0] = "MARKER";
   ClassType[ClassType["CIRCLE"] = 1] = "CIRCLE";
@@ -2577,52 +2971,67 @@ var ClassType;
   ClassType[ClassType["TILE_FEATURE"] = 17] = "TILE_FEATURE";
   ClassType[ClassType["VECTOR_TILE_FEATURE"] = 18] = "VECTOR_TILE_FEATURE";
 })(ClassType || (ClassType = {}));
+
 var Map4dObject = /*#__PURE__*/function () {
   function Map4dObject(classType) {
     this.classType = classType;
   }
+
   Map4dObject.isClassType = function isClassType(mapObject, classType) {
     var mfClassType = (mapObject || {}).classType;
     return mfClassType == classType;
   };
+
   return Map4dObject;
 }();
 
 var LatLng = /*#__PURE__*/function (_Map4dObject) {
   _inheritsLoose(LatLng, _Map4dObject);
+
   function LatLng(lat, lng) {
     var _this;
+
     _this = _Map4dObject.call(this, ClassType.LATLNG) || this;
     _this.lat = lat;
     _this.lng = lng;
     return _this;
   }
+
   var _proto = LatLng.prototype;
+
   _proto.equals = function equals(other) {
     return this.lat == other.lat && this.lng == other.lng;
   };
+
   _proto.valid = function valid() {
     return isFinite(this.lat) && Math.abs(this.lat) <= 90;
   };
+
   _proto.toString = function toString() {
     return "(" + this.lat + ", " + this.lng + ")";
   };
+
   LatLng.convert = function convert(input) {
     if (Map4dObject.isClassType(input, ClassType.LATLNG)) {
       return input;
     }
+
     if (Array.isArray(input) && input.length === 2) {
       return new LatLng(Number(input[1]), Number(input[0]));
     }
+
     if (!Array.isArray(input) && typeof input === "object" && input !== null && "lat" in input && "lng" in input) {
       return new LatLng(Number(input.lat), Number(input.lng));
     }
+
     throw new Error("`ILngLat` argument must be specified as a LngLat instance, an object " + "{lat: <lat>, lng: <lng>}, or an array of [<lng>, <lat>]");
   };
+
   _proto.distanceTo = function distanceTo(target) {
     if (target == null) {
       return 0;
     }
+
     var desc = LatLng.convert(target);
     var latStartRadian = MathConstants.deg2Rad * this.lat;
     var longStartRadian = MathConstants.deg2Rad * this.lng;
@@ -2632,6 +3041,7 @@ var LatLng = /*#__PURE__*/function (_Map4dObject) {
     var v = Math.sin((longDescRadian - longStartRadian) / 2);
     return 2.0 * MapConstants.radiusEarthMeters * Math.asin(Math.sqrt(u * u + Math.cos(latStartRadian) * Math.cos(latDescRadian) * v * v));
   };
+
   _proto.normalize = function normalize() {
     var sign = this.lat > 0 ? -1 : 1;
     var lat = (this.lat - sign * 90) % 180 + 90 * sign;
@@ -2639,24 +3049,30 @@ var LatLng = /*#__PURE__*/function (_Map4dObject) {
     var lng = (this.lng - sign * 180) % 380 + 180 * sign;
     return new LatLng(lat, lng);
   };
+
   _proto.add = function add(a) {
     return new LatLng(this.lat + a.lat, this.lng + a.lng).normalize();
   };
+
   _proto.subtract = function subtract(a) {
     if (!a) {
       return this;
     }
+
     return new LatLng(this.lat - a.lat, this.lng - a.lng).normalize();
   };
+
   return LatLng;
 }(Map4dObject);
 
 var ProjectionMercator = /*#__PURE__*/function () {
   function ProjectionMercator() {}
+
   ProjectionMercator.projectInternal = function projectInternal(latLng, worldSize) {
     var latitude = MathUtils.clamp(latLng.lat, MapConstants.minLatitude, MapConstants.maxLatitude);
     return new Vector2(MapConstants.maxLongitude + latLng.lng, MapConstants.maxLongitude - MathConstants.rad2Deg * Math.log(Math.tan(Math.PI / 4 + latitude * Math.PI / MapConstants.maxDegrees))).multiply(worldSize / MapConstants.maxDegrees);
   };
+
   ProjectionMercator.convertToMeterFromLatLng = function convertToMeterFromLatLng(latLng) {
     var constrainedLatitude = MathUtils.clamp(latLng.lat, MapConstants.minLatitude, MapConstants.maxLatitude);
     var constrainedLongitude = latLng.lng;
@@ -2666,14 +3082,17 @@ var ProjectionMercator = /*#__PURE__*/function () {
     var northing = 0.5 * MapConstants.radiusEarthMeters * Math.log((1 + f) / (1 - f));
     return new Vector2(easting, northing);
   };
+
   ProjectionMercator.convertToLatLngFromMeter = function convertToLatLngFromMeter(meters) {
     var latitude = (2 * Math.atan(Math.exp(meters.y / MapConstants.radiusEarthMeters)) - Math.PI / 2.0) * MathConstants.rad2Deg;
     var longitude = meters.x * MathConstants.rad2Deg / MapConstants.radiusEarthMeters;
     return new LatLng(latitude, longitude);
   };
+
   ProjectionMercator.projectZoom = function projectZoom(latLng, zoom) {
     return this.projectInternal(latLng, 1 << zoom);
   };
+
   return ProjectionMercator;
 }();
 
@@ -2684,31 +3103,40 @@ var CoordinateTransformer = /*#__PURE__*/function () {
       return LatLng.convert(coordinate);
     });
   }
+
   var _proto = CoordinateTransformer.prototype;
+
   _proto.setCoordinates = function setCoordinates(coordinates) {
     this.coordinates = coordinates.map(function (coordinate) {
       return LatLng.convert(coordinate);
     });
   };
+
   _proto.addCoordinates = function addCoordinates(coordinates) {
     var _this = this;
+
     coordinates.forEach(function (coordinate) {
       return _this.coordinates.push(LatLng.convert(coordinate));
     });
   };
+
   _proto.rotate = function rotate(degree, anchor) {
     if (anchor === void 0) {
       anchor = null;
     }
+
     if (this.coordinates.length <= 1) {
       return this.coordinates.slice();
     }
+
     var center = null;
+
     if (anchor != null) {
       center = LatLng.convert(center);
     } else {
       center = this.center;
     }
+
     var centerInMeters = ProjectionMercator.convertToMeterFromLatLng(center);
     var transformedCoordinates = [];
     var degreeInRadians = MathUtils.toRadians(degree);
@@ -2724,20 +3152,25 @@ var CoordinateTransformer = /*#__PURE__*/function () {
     });
     return transformedCoordinates;
   };
+
   _proto.translate = function translate(target, anchor) {
     if (anchor === void 0) {
       anchor = null;
     }
+
     if (this.coordinates.length <= 0) {
       return [];
     }
+
     var newCenter = LatLng.convert(target);
     var oldCenter = null;
+
     if (anchor != null) {
       oldCenter = LatLng.convert(anchor);
     } else {
       oldCenter = this.center;
     }
+
     var transformedCoordinates = [];
     var translateVectorX = newCenter.lng - oldCenter.lng;
     var translateVectorY = newCenter.lat - oldCenter.lat;
@@ -2746,19 +3179,24 @@ var CoordinateTransformer = /*#__PURE__*/function () {
     });
     return transformedCoordinates;
   };
+
   _proto.scale = function scale(_scale, anchor) {
     if (anchor === void 0) {
       anchor = null;
     }
+
     if (this.coordinates.length <= 1) {
       return this.coordinates.slice();
     }
+
     var center = null;
+
     if (anchor != null) {
       center = LatLng.convert(anchor);
     } else {
       center = this.center;
     }
+
     var centerInMeters = ProjectionMercator.convertToMeterFromLatLng(center);
     var transformedCoordinates = [];
     this.coordinates.forEach(function (coordinate) {
@@ -2771,22 +3209,27 @@ var CoordinateTransformer = /*#__PURE__*/function () {
     });
     return transformedCoordinates;
   };
+
   _createClass(CoordinateTransformer, [{
     key: "center",
     get: function get() {
       if (this.coordinates.length == 0) {
         return null;
       }
+
       var center = new LatLng(0, 0);
+
       for (var i = 0; i < this.coordinates.length; ++i) {
         center.lat += this.coordinates[i].lat;
         center.lng += this.coordinates[i].lng;
       }
+
       center.lat /= this.coordinates.length;
       center.lng /= this.coordinates.length;
       return center;
     }
   }]);
+
   return CoordinateTransformer;
 }();