react-map4d-map 1.3.5 → 1.3.7

package/dist/components/MFCircle.d.ts

@@ -12,6 +12,7 @@ interface CircleProps {
     userInteractionEnabled?: boolean;
     map?: map4d.Map;
     onCreated?: (circle: map4d.Circle) => void;
+    onClick?: (args: any) => void;
 }
 declare const MFCircle: (props: CircleProps) => null;
 export default MFCircle;

package/dist/components/MFMap.d.ts

@@ -19,6 +19,10 @@ interface MapOptions {
 interface MapProps {
     mapid?: string;
     options: MapOptions;
+    zoom?: number;
+    bearing?: number;
+    center?: any;
+    tilt?: number;
     version: string;
     accessKey: string;
     environment?: "dev" | "test" | undefined | null;

package/dist/components/MFPolygon.d.ts

@@ -12,6 +12,7 @@ interface PolygonProps {
     map?: map4d.Map;
     onCreated?: (polygon: map4d.Polygon) => void;
     onHover?: (args: any) => void;
+    onClick?: (args: any) => void;
 }
 declare const MFPolygon: (props: PolygonProps) => null;
 export default MFPolygon;

package/dist/index.js

@@ -252,7 +252,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 = React.useContext(Map4dContext);
   var theMap = map || map4dContext.map;
   var circleRef = React.useRef();
@@ -284,8 +285,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]);
+  React.useEffect(function () {
+    if (circleRef.current) {
+      circleRef.current.onClick = onClick;
+    }
+  }, [onClick]);
   React.useEffect(function () {
     if (theMap) {
       var _circleRef$current2;
@@ -764,25 +771,60 @@ var createId = function createId() {
 };
 
 var MFMap = function MFMap(props) {
+  var _options = React.useRef({
+    options: props.options,
+    mapId: props.mapid,
+    version: props.version,
+    environment: props.environment,
+    accessKey: props.accessKey,
+    sdkDomain: props.sdkDomain
+  });
+
   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 zoom = props.zoom,
+      bearing = props.bearing,
+      center = props.center,
+      tilt = props.tilt;
 
   var _useState = React.useState(),
       map = _useState[0],
       setMap = _useState[1];
 
+  React.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]);
   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);
+        mapRef.current = new window.map4d.Map(mapDomRef.current, _options.current.options);
 
         if (props.onMapReady) {
           props.onMapReady(mapRef.current, id);
@@ -793,16 +835,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();
@@ -832,10 +874,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;
@@ -970,12 +1012,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
@@ -984,9 +1034,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
@@ -995,9 +1045,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
@@ -1006,9 +1056,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
@@ -1602,6 +1652,7 @@ var MFPolygon = function MFPolygon(props) {
       userInteractionEnabled = props.userInteractionEnabled,
       map = props.map,
       onHover = props.onHover,
+      onClick = props.onClick,
       onCreated = props.onCreated;
   var map4dContext = React.useContext(Map4dContext);
   var theMap = map || map4dContext.map;
@@ -1630,6 +1681,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]);
@@ -1658,6 +1710,11 @@ var MFPolygon = function MFPolygon(props) {
       polygonRef.current.onHover = onHover;
     }
   }, [onHover]);
+  React.useEffect(function () {
+    if (polygonRef.current) {
+      polygonRef.current.onClick = onClick;
+    }
+  }, [onClick]);
   React.useEffect(function () {
     var _polygonRef$current5;