react-map4d-map 1.3.0 → 1.3.1

package/dist/index.js

@@ -16,28 +16,27 @@ var MarkerClusterContext = React.createContext(markerClusterDefaultContext);
 
 var MFBuilding = function MFBuilding(props) {
   var position = props.position,
-      name = props.name,
-      scale = props.scale,
-      bearing = props.bearing,
-      elevation = props.elevation,
-      height = props.height,
-      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,
+    userInteractionEnabled = props.userInteractionEnabled,
+    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,
@@ -70,93 +69,75 @@ 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]);
   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;
@@ -164,18 +145,16 @@ 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 || {
@@ -195,7 +174,6 @@ 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();
@@ -204,20 +182,16 @@ 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);
     };
   }, []);
@@ -230,36 +204,33 @@ 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,
+    userInteractionEnabled = props.userInteractionEnabled,
+    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,
@@ -289,97 +260,82 @@ 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)) {
       var _circleRef$current15;
-
       (_circleRef$current15 = circleRef.current) === null || _circleRef$current15 === void 0 ? void 0 : _circleRef$current15.setUserInteraction(userInteractionEnabled);
     }
   }, [userInteractionEnabled]);
@@ -388,24 +344,20 @@ var MFCircle = function MFCircle(props) {
 
 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();
@@ -414,10 +366,8 @@ 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);
       });
     };
@@ -427,34 +377,33 @@ 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,
@@ -486,6 +435,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]);
   React.useEffect(function () {
     if (directionRef.current) {
@@ -509,47 +462,38 @@ var MFDirectionsRenderer = function MFDirectionsRenderer(props) {
   }, [onMouseMove]);
   React.useEffect(function () {
     if (theMap) {
-      var _directionRef$current2;
-
-      (_directionRef$current2 = directionRef.current) === null || _directionRef$current2 === void 0 ? void 0 : _directionRef$current2.setMap(theMap);
+      var _directionRef$current3;
+      (_directionRef$current3 = directionRef.current) === null || _directionRef$current3 === void 0 ? void 0 : _directionRef$current3.setMap(theMap);
     }
-
     return function () {
-      var _directionRef$current3;
-
-      (_directionRef$current3 = directionRef.current) === null || _directionRef$current3 === void 0 ? void 0 : _directionRef$current3.setMap(null);
+      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$current4;
-
-      (_directionRef$current4 = directionRef.current) === null || _directionRef$current4 === void 0 ? void 0 : _directionRef$current4.setMap(null);
+      var _directionRef$current5;
+      (_directionRef$current5 = directionRef.current) === null || _directionRef$current5 === void 0 ? void 0 : _directionRef$current5.setMap(null);
     };
   }, []);
   React.useEffect(function () {
-    var _directionRef$current5;
-
-    routes != undefined && ((_directionRef$current5 = directionRef.current) === null || _directionRef$current5 === void 0 ? void 0 : _directionRef$current5.setRoutes(routes));
+    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$current6;
-
-    activedIndex != undefined && ((_directionRef$current6 = directionRef.current) === null || _directionRef$current6 === void 0 ? void 0 : _directionRef$current6.setActivedIndex(activedIndex));
+    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$current7;
-
-    activeStrokePattern != undefined && ((_directionRef$current7 = directionRef.current) === null || _directionRef$current7 === void 0 ? void 0 : _directionRef$current7.setActiveStrokePattern(activeStrokePattern));
+    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$current8;
-
-    inactiveStrokePattern != undefined && ((_directionRef$current8 = directionRef.current) === null || _directionRef$current8 === void 0 ? void 0 : _directionRef$current8.setInactiveStrokePattern(inactiveStrokePattern));
+    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$current9;
-
+    var _directionRef$current10;
     var option = {
       routes: routes,
       activedIndex: activedIndex,
@@ -573,27 +517,25 @@ var MFDirectionsRenderer = function MFDirectionsRenderer(props) {
         delete option[key];
       }
     });
-    (_directionRef$current9 = directionRef.current) === null || _directionRef$current9 === void 0 ? void 0 : _directionRef$current9.setOptions(option);
+    (_directionRef$current10 = directionRef.current) === null || _directionRef$current10 === void 0 ? void 0 : _directionRef$current10.setOptions(option);
   }, [activeStrokeWidth, activeStrokeColor, activeOutlineWidth, activeOutlineColor, inactiveStrokeColor, inactiveOutlineWidth, inactiveOutlineColor, originMarkerOptions, destinationMarkerOptions, waypointMarkerOptions, onMarkerDragEnd]);
   return null;
 };
 
 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,
@@ -612,7 +554,6 @@ 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();
@@ -621,20 +562,16 @@ 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);
     };
   }, []);
@@ -645,17 +582,14 @@ 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;
@@ -663,19 +597,17 @@ 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,
@@ -693,7 +625,6 @@ 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();
@@ -702,20 +633,16 @@ 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);
     };
   }, []);
@@ -726,12 +653,10 @@ 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;
@@ -740,11 +665,9 @@ 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;
@@ -752,7 +675,6 @@ 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) {
@@ -762,239 +684,194 @@ 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);
       }, {
@@ -1002,10 +879,8 @@ 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);
       }, {
@@ -1013,10 +888,8 @@ 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);
       }, {
@@ -1024,10 +897,8 @@ 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);
       }, {
@@ -1036,7 +907,6 @@ var MFMap = function MFMap(props) {
       events.current.push(onCameraChanging);
     }
   };
-
   var newContext = {
     map: map
   };
@@ -1054,30 +924,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,
+    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;
   var map4dContext = React.useContext(Map4dContext);
   var markerClusterContext = React.useContext(MarkerClusterContext);
   var theMap = map || map4dContext.map;
@@ -1108,32 +978,24 @@ var MFMarker = function MFMarker(props) {
           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;
@@ -1149,15 +1011,12 @@ 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);
       }
     };
@@ -1166,10 +1025,8 @@ 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));
     };
   }, []);
@@ -1210,98 +1067,79 @@ 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]);
   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]);
@@ -1310,27 +1148,23 @@ 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,
@@ -1347,7 +1181,6 @@ var MFMarkerCluster = function MFMarkerCluster(props) {
       onCreated && onCreated(markerClusterRef.current);
     }
   };
-
   var clusterContext = {
     addMarker: function addMarker(marker) {
       markerRefs.current.push(marker);
@@ -1369,20 +1202,16 @@ 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);
     };
   }, []);
@@ -1393,7 +1222,6 @@ 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, {
@@ -1403,27 +1231,26 @@ 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,
+    userInteractionEnabled = props.userInteractionEnabled,
+    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,
@@ -1455,76 +1282,61 @@ 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]);
   React.useEffect(function () {
@@ -1542,19 +1354,17 @@ 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 || {
@@ -1574,7 +1384,6 @@ 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();
@@ -1583,20 +1392,16 @@ 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);
     };
   }, []);
@@ -1610,26 +1415,26 @@ 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,
+    userInteractionEnabled = props.userInteractionEnabled,
+    map = props.map,
+    onHover = props.onHover,
+    onCreated = props.onCreated;
   var map4dContext = React.useContext(Map4dContext);
   var theMap = map || map4dContext.map;
   var polygonRef = React.useRef();
+  var a = React.useRef();
   React.useEffect(function () {
     if (theMap && !polygonRef.current) {
       var _polygonRef$current;
-
       var option = {
         paths: paths,
         fillColor: fillColor,
@@ -1648,6 +1453,8 @@ var MFPolygon = function MFPolygon(props) {
         }
       });
       polygonRef.current = new map4d.Polygon(option);
+      a.current = theMap;
+      console.log(a.current);
       (_polygonRef$current = polygonRef.current) === null || _polygonRef$current === void 0 ? void 0 : _polygonRef$current.setMap(theMap);
       polygonRef.current.onHover = props.onHover;
       onCreated && onCreated(polygonRef.current);
@@ -1656,20 +1463,16 @@ 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);
     };
   }, []);
@@ -1679,85 +1482,79 @@ var MFPolygon = function MFPolygon(props) {
     }
   }, [onHover]);
   React.useEffect(function () {
-    var _polygonRef$current5;
-
-    (_polygonRef$current5 = polygonRef.current) === null || _polygonRef$current5 === void 0 ? void 0 : _polygonRef$current5.setPaths(paths);
+    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$current6;
-
-    fillColor != undefined && ((_polygonRef$current6 = polygonRef.current) === null || _polygonRef$current6 === void 0 ? void 0 : _polygonRef$current6.setFillColor(fillColor));
+    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$current7;
-
-    fillOpacity != undefined && ((_polygonRef$current7 = polygonRef.current) === null || _polygonRef$current7 === void 0 ? void 0 : _polygonRef$current7.setFillOpacity(fillOpacity));
+    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$current8;
-
-    (_polygonRef$current8 = polygonRef.current) === null || _polygonRef$current8 === void 0 ? void 0 : _polygonRef$current8.setVisible(visible);
+    var _polygonRef$current9;
+    (_polygonRef$current9 = polygonRef.current) === null || _polygonRef$current9 === void 0 ? void 0 : _polygonRef$current9.setVisible(visible);
   }, [visible]);
   React.useEffect(function () {
-    var _polygonRef$current9;
-
-    strokeColor != undefined && ((_polygonRef$current9 = polygonRef.current) === null || _polygonRef$current9 === void 0 ? void 0 : _polygonRef$current9.setStrokeColor(strokeColor));
+    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$current10;
-
-    strokeWidth != undefined && ((_polygonRef$current10 = polygonRef.current) === null || _polygonRef$current10 === void 0 ? void 0 : _polygonRef$current10.setStrokeWidth(strokeWidth));
+    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$current11;
-
-    draggable != undefined && ((_polygonRef$current11 = polygonRef.current) === null || _polygonRef$current11 === void 0 ? void 0 : _polygonRef$current11.setDraggable(draggable));
+    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$current12;
-
-    elevation != undefined && ((_polygonRef$current12 = polygonRef.current) === null || _polygonRef$current12 === void 0 ? void 0 : _polygonRef$current12.setElevation(elevation));
+    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$current13;
-
-    zIndex != undefined && ((_polygonRef$current13 = polygonRef.current) === null || _polygonRef$current13 === void 0 ? void 0 : _polygonRef$current13.setZIndex(zIndex));
+    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$current14;
-
-    userInteractionEnabled != undefined && ((_polygonRef$current14 = polygonRef.current) === null || _polygonRef$current14 === void 0 ? void 0 : _polygonRef$current14.setUserInteraction(userInteractionEnabled));
+    var _polygonRef$current15;
+    userInteractionEnabled != undefined && ((_polygonRef$current15 = polygonRef.current) === null || _polygonRef$current15 === void 0 ? void 0 : _polygonRef$current15.setUserInteraction(userInteractionEnabled));
   }, [userInteractionEnabled]);
   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,
+    userInteractionEnabled = props.userInteractionEnabled,
+    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,
@@ -1792,20 +1589,16 @@ 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);
     };
   }, []);
@@ -1836,57 +1629,46 @@ 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]);
   return null;
@@ -1894,19 +1676,17 @@ var MFPolyline = function MFPolyline(props) {
 
 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 || {
@@ -1926,7 +1706,6 @@ 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();
@@ -1935,20 +1714,16 @@ 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);
     };
   }, []);
@@ -1959,17 +1734,14 @@ 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;
@@ -1984,7 +1756,6 @@ 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);
@@ -1993,14 +1764,11 @@ 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;
@@ -2014,91 +1782,70 @@ 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() {
@@ -2110,35 +1857,28 @@ 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;
 }();
 
@@ -2147,97 +1887,75 @@ 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() {
@@ -2249,7 +1967,6 @@ var Vector3 = /*#__PURE__*/function () {
       return this.x * this.x + this.y * this.y + this.z * this.z;
     }
   }]);
-
   return Vector3;
 }();
 
@@ -2258,25 +1975,19 @@ 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;
@@ -2295,7 +2006,6 @@ 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];
@@ -2315,33 +2025,27 @@ 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);
@@ -2353,7 +2057,6 @@ 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);
@@ -2376,14 +2079,12 @@ 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);
@@ -2395,7 +2096,6 @@ 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);
@@ -2418,14 +2118,12 @@ 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);
@@ -2437,7 +2135,6 @@ 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);
@@ -2460,14 +2157,11 @@ 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) {
@@ -2475,31 +2169,24 @@ 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;
@@ -2518,40 +2205,32 @@ 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;
@@ -2569,117 +2248,88 @@ 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;
 }();
 
@@ -2688,81 +2338,62 @@ 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() {
@@ -2792,17 +2423,14 @@ 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() {
@@ -2814,7 +2442,6 @@ var MapConstants = /*#__PURE__*/function () {
       return 90.0 - CameraConstants.fov * MathConstants.rad2Deg;
     }
   }]);
-
   return MapConstants;
 }();
 MapConstants.none = -1.0;
@@ -2898,19 +2525,15 @@ 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 = {
@@ -2933,7 +2556,6 @@ ColorConstants.lightColors = {
 };
 
 var ClassType;
-
 (function (ClassType) {
   ClassType[ClassType["MARKER"] = 0] = "MARKER";
   ClassType[ClassType["CIRCLE"] = 1] = "CIRCLE";
@@ -2955,67 +2577,52 @@ 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;
@@ -3025,7 +2632,6 @@ 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;
@@ -3033,30 +2639,24 @@ 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;
@@ -3066,17 +2666,14 @@ 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;
 }();
 
@@ -3087,40 +2684,31 @@ 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);
@@ -3136,25 +2724,20 @@ 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;
@@ -3163,24 +2746,19 @@ 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) {
@@ -3193,27 +2771,22 @@ 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;
 }();