react-map4d-map 1.3.5 → 1.3.7

package/dist/index.modern.js

@@ -249,7 +249,8 @@ var MFCircle = function MFCircle(props) {
       elevation = props.elevation,
       userInteractionEnabled = props.userInteractionEnabled,
       map = props.map,
-      onCreated = props.onCreated;
+      onCreated = props.onCreated,
+      onClick = props.onClick;
   var map4dContext = useContext(Map4dContext);
   var theMap = map || map4dContext.map;
   var circleRef = useRef();
@@ -281,8 +282,14 @@ var MFCircle = function MFCircle(props) {
       circleRef.current = new map4d.Circle(option);
       (_circleRef$current = circleRef.current) === null || _circleRef$current === void 0 ? void 0 : _circleRef$current.setMap(theMap);
       onCreated && onCreated(circleRef.current);
+      circleRef.current.onClick = onClick;
     }
   }, [theMap]);
+  useEffect(function () {
+    if (circleRef.current) {
+      circleRef.current.onClick = onClick;
+    }
+  }, [onClick]);
   useEffect(function () {
     if (theMap) {
       var _circleRef$current2;
@@ -761,25 +768,60 @@ var createId = function createId() {
 };
 
 var MFMap = function MFMap(props) {
+  var _options = useRef({
+    options: props.options,
+    mapId: props.mapid,
+    version: props.version,
+    environment: props.environment,
+    accessKey: props.accessKey,
+    sdkDomain: props.sdkDomain
+  });
+
   var callback = useRef("callback");
   var mapDomRef = useRef();
   var mapRef = useRef();
   var scriptElement = useRef();
   var url = useRef();
   var events = useRef([]);
+  var zoom = props.zoom,
+      bearing = props.bearing,
+      center = props.center,
+      tilt = props.tilt;
 
   var _useState = useState(),
       map = _useState[0],
       setMap = _useState[1];
 
+  useEffect(function () {
+    if (map) {
+      var camera = map.getCamera();
+
+      if (zoom != undefined && zoom != null) {
+        camera.setZoom(zoom);
+      }
+
+      if (bearing != undefined && bearing != null) {
+        camera.setBearing(bearing);
+      }
+
+      if (center != undefined && center != null) {
+        camera.setTarget(center);
+      }
+
+      if (tilt != undefined && tilt != null) {
+        camera.setTilt(center);
+      }
+
+      map.moveCamera(camera);
+    }
+  }, [zoom, bearing, center, map]);
   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);
+        mapRef.current = new window.map4d.Map(mapDomRef.current, _options.current.options);
 
         if (props.onMapReady) {
           props.onMapReady(mapRef.current, id);
@@ -790,16 +832,16 @@ var MFMap = function MFMap(props) {
       };
     };
 
-    var domain = "https://api" + (props.environment ? "-" + props.environment : "") + ".map4d.vn";
+    var domain = "https://api" + (props.environment ? "-" + _options.current.environment : "") + ".map4d.vn";
 
-    if (props.sdkDomain) {
-      domain = props.sdkDomain;
+    if (_options.current.sdkDomain) {
+      domain = _options.current.sdkDomain;
     }
 
-    var urlNew = domain + "/sdk/map/js?version=" + props.version + "&key=" + props.accessKey + "&callback=" + callback.current;
+    var urlNew = domain + "/sdk/map/js?version=" + _options.current.version + "&key=" + _options.current.accessKey + "&callback=" + callback.current;
 
-    if (props.mapid) {
-      urlNew += "&mapId=" + props.mapid;
+    if (_options.current.mapId) {
+      urlNew += "&mapId=" + _options.current.mapId;
     }
 
     createCallback();
@@ -829,10 +871,10 @@ var MFMap = function MFMap(props) {
 
       destroy();
     };
-  }, [props.environment, props.version, props.accessKey, props.options]);
+  }, []);
 
   var registerEvent = function registerEvent() {
-    var _mapRef$current2, _mapRef$current3, _mapRef$current4, _mapRef$current5, _mapRef$current6, _mapRef$current7, _mapRef$current8, _mapRef$current9, _mapRef$current10, _mapRef$current11, _mapRef$current12, _mapRef$current13, _mapRef$current14, _mapRef$current15, _mapRef$current16, _mapRef$current17, _mapRef$current18, _mapRef$current19, _mapRef$current20;
+    var _mapRef$current2, _mapRef$current3, _mapRef$current4, _mapRef$current5, _mapRef$current6, _mapRef$current7, _mapRef$current8, _mapRef$current9, _mapRef$current10, _mapRef$current11, _mapRef$current12, _mapRef$current13, _mapRef$current14, _mapRef$current15, _mapRef$current16, _mapRef$current17, _mapRef$current18, _mapRef$current19, _mapRef$current20, _mapRef$current21;
 
     var eventClickMarker = (_mapRef$current2 = mapRef.current) === null || _mapRef$current2 === void 0 ? void 0 : _mapRef$current2.addListener("click", function (args) {
       var _args$marker, _args$marker2;
@@ -967,12 +1009,20 @@ var MFMap = function MFMap(props) {
     }, {
       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]);
+    events.current = events.current.concat([eventClickMarker, eventRightClickMarker, eventDragEndMarker, eventHoverMarker, eventHoverPolygon, eventHoverPolyline, eventHoverDirection, eventClickPolyline, eventMouseOutDirection, eventMouseOverDirection, eventMouseMoveDirection, eventMouseOutPolyline, eventMouseOverPolyline, eventMouseMovePolyline, eventMouseOutMarker, eventMouseOverMarker, eventMouseMoveMarker, eventClickPoi, eventHoverPoi, (_mapRef$current21 = mapRef.current) === null || _mapRef$current21 === void 0 ? void 0 : _mapRef$current21.addListener("click", function (args) {
+      var _args$circle, _args$circle2, _args$polygon3, _args$polygon3$onClic;
+
+      ((_args$circle = args.circle) === null || _args$circle === void 0 ? void 0 : _args$circle.onClick) && ((_args$circle2 = args.circle) === null || _args$circle2 === void 0 ? void 0 : _args$circle2.onClick(args));
+      (_args$polygon3 = args.polygon) === null || _args$polygon3 === void 0 ? void 0 : (_args$polygon3$onClic = _args$polygon3.onClick) === null || _args$polygon3$onClic === void 0 ? void 0 : _args$polygon3$onClic.call(_args$polygon3, args);
+    }, {
+      circle: true,
+      polygon: true
+    })]);
 
     if (props.onClickLocation) {
-      var _mapRef$current21;
+      var _mapRef$current22;
 
-      var onClickLocation = (_mapRef$current21 = mapRef.current) === null || _mapRef$current21 === void 0 ? void 0 : _mapRef$current21.addListener("click", function (args) {
+      var onClickLocation = (_mapRef$current22 = mapRef.current) === null || _mapRef$current22 === void 0 ? void 0 : _mapRef$current22.addListener("click", function (args) {
         props.onClickLocation && props.onClickLocation(args);
       }, {
         location: true
@@ -981,9 +1031,9 @@ var MFMap = function MFMap(props) {
     }
 
     if (props.onRightClickLocation) {
-      var _mapRef$current22;
+      var _mapRef$current23;
 
-      var onRightClickLocation = (_mapRef$current22 = mapRef.current) === null || _mapRef$current22 === void 0 ? void 0 : _mapRef$current22.addListener("rightClick", function (args) {
+      var onRightClickLocation = (_mapRef$current23 = mapRef.current) === null || _mapRef$current23 === void 0 ? void 0 : _mapRef$current23.addListener("rightClick", function (args) {
         props.onRightClickLocation && props.onRightClickLocation(args);
       }, {
         location: true
@@ -992,9 +1042,9 @@ var MFMap = function MFMap(props) {
     }
 
     if (props.onTilesLoaded) {
-      var _mapRef$current23;
+      var _mapRef$current24;
 
-      var onTilesLoaded = (_mapRef$current23 = mapRef.current) === null || _mapRef$current23 === void 0 ? void 0 : _mapRef$current23.addListener("tilesLoaded", function (args) {
+      var onTilesLoaded = (_mapRef$current24 = mapRef.current) === null || _mapRef$current24 === void 0 ? void 0 : _mapRef$current24.addListener("tilesLoaded", function (args) {
         props.onTilesLoaded && props.onTilesLoaded(args);
       }, {
         location: true
@@ -1003,9 +1053,9 @@ var MFMap = function MFMap(props) {
     }
 
     if (props.onCameraChanging) {
-      var _mapRef$current24;
+      var _mapRef$current25;
 
-      var onCameraChanging = (_mapRef$current24 = mapRef.current) === null || _mapRef$current24 === void 0 ? void 0 : _mapRef$current24.addListener("cameraChanging", function (args) {
+      var onCameraChanging = (_mapRef$current25 = mapRef.current) === null || _mapRef$current25 === void 0 ? void 0 : _mapRef$current25.addListener("cameraChanging", function (args) {
         props.onCameraChanging && props.onCameraChanging(args);
       }, {
         location: true
@@ -1599,6 +1649,7 @@ var MFPolygon = function MFPolygon(props) {
       userInteractionEnabled = props.userInteractionEnabled,
       map = props.map,
       onHover = props.onHover,
+      onClick = props.onClick,
       onCreated = props.onCreated;
   var map4dContext = useContext(Map4dContext);
   var theMap = map || map4dContext.map;
@@ -1627,6 +1678,7 @@ var MFPolygon = function MFPolygon(props) {
       polygonRef.current = new map4d.Polygon(option);
       (_polygonRef$current = polygonRef.current) === null || _polygonRef$current === void 0 ? void 0 : _polygonRef$current.setMap(theMap);
       polygonRef.current.onHover = props.onHover;
+      polygonRef.current.onClick = onClick;
       onCreated && onCreated(polygonRef.current);
     }
   }, [theMap]);
@@ -1655,6 +1707,11 @@ var MFPolygon = function MFPolygon(props) {
       polygonRef.current.onHover = onHover;
     }
   }, [onHover]);
+  useEffect(function () {
+    if (polygonRef.current) {
+      polygonRef.current.onClick = onClick;
+    }
+  }, [onClick]);
   useEffect(function () {
     var _polygonRef$current5;