react-map4d-map 1.0.1 → 1.0.3

package/dist/components/MFMap.d.ts

@@ -1,12 +1,32 @@
 import React from 'react';
 export declare function addLibrary(url: string, id: string): HTMLScriptElement | null;
+interface MapOptions {
+    center?: any;
+    zoom?: number;
+    minZoom?: number;
+    maxZoom?: number;
+    maxNativeZoom?: number;
+    geolocate?: boolean;
+    tilt?: number;
+    bearing?: number;
+    controls?: boolean;
+    mapType?: any;
+    controlOptions?: any;
+    restrictionBounds?: any;
+    shouldChangeMapMode?: Function;
+    cooperativeGestures?: boolean;
+}
 interface MapProps {
     mapid?: string;
-    options: map4d.MapOptions;
+    options: MapOptions;
     version: string;
     accessKey: string;
     environment?: "dev" | "test" | undefined | null;
-    onMapReady: (map: map4d.Map, key?: string) => void;
+    onMapReady: (map: any, key?: string) => void;
+    onClickLocation?: (args: any) => void;
+    onRightClickLocation?: (args: any) => void;
+    onCameraChanging?: (args: any) => void;
+    onTilesLoaded?: (args: any) => void;
 }
 declare class MFMap extends React.Component<MapProps, any> {
     mapKey: string;
@@ -15,10 +35,12 @@ declare class MFMap extends React.Component<MapProps, any> {
     mapRef: map4d.Map;
     scriptElement: any;
     url: string | null;
+    events: any[];
     constructor(props: MapProps);
     setMapDomRef(e: any): void;
     componentWillUnmount(): void;
     destroy(): void;
+    registerEvent(): void;
     createCallback(): void;
     render(): JSX.Element;
 }

package/dist/components/MFMarker.d.ts

@@ -1,6 +1,24 @@
 interface MarkerProps extends map4d.MarkerOptions {
-    map?: map4d.Map;
-    onCreated: (marker: map4d.Marker) => void;
+    position: any;
+    visible?: boolean;
+    anchor?: any;
+    labelAnchor?: any;
+    icon?: any;
+    elevation?: number;
+    rotation?: number;
+    title?: string;
+    snippet?: string;
+    windowAnchor?: any;
+    zIndex?: number;
+    label?: any;
+    draggable?: boolean;
+    iconView?: string | Node;
+    userInteractionEnabled?: boolean;
+    map?: any;
+    onClick: (marker: any) => void;
+    onCreated: (marker: any) => void;
+    onRightClick: (marker: any) => void;
+    onDragEnd: (marker: any) => void;
 }
 declare const MFMarker: (props: MarkerProps) => null;
 export default MFMarker;

package/dist/enum/index.d.ts

@@ -0,0 +1,2 @@
+import { MapEventEnum } from "./mapEventEnum";
+export { MapEventEnum };

package/dist/enum/mapEventEnum.d.ts

@@ -0,0 +1,7 @@
+export declare const enum MapEventEnum {
+    click = "click",
+    rightClick = "rightClick",
+    dragEnd = "dragEnd",
+    cameraChanging = "cameraChanging",
+    tilesLoaded = "tilesLoaded"
+}

package/dist/index.js

@@ -709,23 +709,6 @@ var MFImageOverlay = function MFImageOverlay(props) {
   return null;
 };
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
 function _inheritsLoose(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
   subClass.prototype.constructor = subClass;
@@ -782,6 +765,7 @@ var MFMap = /*#__PURE__*/function (_React$Component) {
     var _this;
 
     _this = _React$Component.call(this, props) || this;
+    _this.events = [];
     _this.state = {
       map: null
     };
@@ -802,7 +786,7 @@ var MFMap = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.destroy = function destroy() {
-    var _this$mapRef;
+    var _this$events, _this$mapRef;
 
     delete window[this.callback];
 
@@ -810,24 +794,103 @@ var MFMap = /*#__PURE__*/function (_React$Component) {
       this.scriptElement.remove();
     }
 
+    (_this$events = this.events) === null || _this$events === void 0 ? void 0 : _this$events.forEach(function (t) {
+      t === null || t === void 0 ? void 0 : t.remove();
+    });
     ((_this$mapRef = this.mapRef) === null || _this$mapRef === void 0 ? void 0 : _this$mapRef.destroy) && this.mapRef.destroy();
     this.url = null;
   };
 
+  _proto.registerEvent = function registerEvent() {
+    var _this$mapRef2,
+        _this$mapRef3,
+        _this$mapRef4,
+        _this2 = this;
+
+    var eventClickMarker = (_this$mapRef2 = this.mapRef) === null || _this$mapRef2 === void 0 ? void 0 : _this$mapRef2.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());
+    }, {
+      marker: true
+    });
+    var eventRightClickMarker = (_this$mapRef3 = this.mapRef) === null || _this$mapRef3 === void 0 ? void 0 : _this$mapRef3.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());
+    }, {
+      marker: true
+    });
+    var eventDragEndMarker = (_this$mapRef4 = this.mapRef) === null || _this$mapRef4 === void 0 ? void 0 : _this$mapRef4.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());
+    }, {
+      marker: true
+    });
+    this.events.push([eventClickMarker, eventRightClickMarker, eventDragEndMarker]);
+
+    if (this.props.onClickLocation) {
+      var _this$mapRef5;
+
+      var onClickLocation = (_this$mapRef5 = this.mapRef) === null || _this$mapRef5 === void 0 ? void 0 : _this$mapRef5.addListener("click", function (args) {
+        _this2.props.onClickLocation && _this2.props.onClickLocation(args);
+      }, {
+        location: true
+      });
+      this.events.push(onClickLocation);
+    }
+
+    if (this.props.onRightClickLocation) {
+      var _this$mapRef6;
+
+      var onRightClickLocation = (_this$mapRef6 = this.mapRef) === null || _this$mapRef6 === void 0 ? void 0 : _this$mapRef6.addListener("rightClick", function (args) {
+        _this2.props.onRightClickLocation && _this2.props.onRightClickLocation(args);
+      }, {
+        location: true
+      });
+      this.events.push(onRightClickLocation);
+    }
+
+    if (this.props.onTilesLoaded) {
+      var _this$mapRef7;
+
+      var onTilesLoaded = (_this$mapRef7 = this.mapRef) === null || _this$mapRef7 === void 0 ? void 0 : _this$mapRef7.addListener("tilesLoaded", function (args) {
+        _this2.props.onTilesLoaded && _this2.props.onTilesLoaded(args);
+      }, {
+        location: true
+      });
+      this.events.push(onTilesLoaded);
+    }
+
+    if (this.props.onCameraChanging) {
+      var _this$mapRef8;
+
+      var onCameraChanging = (_this$mapRef8 = this.mapRef) === null || _this$mapRef8 === void 0 ? void 0 : _this$mapRef8.addListener("cameraChanging", function (args) {
+        _this2.props.onCameraChanging && _this2.props.onCameraChanging(args);
+      }, {
+        location: true
+      });
+      this.events.push(onCameraChanging);
+    }
+  };
+
   _proto.createCallback = function createCallback() {
-    var _this2 = this;
+    var _this3 = this;
 
     window[this.callback] = function () {
-      if (_this2.mapDomRef) {
-        var options = _this2.props.options;
-        _this2.mapRef = new window.map4d.Map(_this2.mapDomRef, options);
+      if (_this3.mapDomRef) {
+        var options = _this3.props.options;
+        _this3.mapRef = new window.map4d.Map(_this3.mapDomRef, options);
 
-        if (_this2.props.onMapReady) {
-          _this2.props.onMapReady(_this2.mapRef, _this2.mapKey);
+        if (_this3.props.onMapReady) {
+          _this3.props.onMapReady(_this3.mapRef, _this3.mapKey);
         }
 
-        _this2.setState({
-          map: _this2.mapRef
+        _this3.registerEvent();
+
+        _this3.setState({
+          map: _this3.mapRef
         });
       } else {
         console.error("MFMap: map element is NOT found");
@@ -853,10 +916,9 @@ var MFMap = /*#__PURE__*/function (_React$Component) {
     }
 
     this.url = url;
-
-    var newContext = _extends({}, this.context);
-
-    newContext.map = this.state.map;
+    var newContext = {
+      map: this.state.map
+    };
     return React__default.createElement(Map4dContext.Provider, {
       value: newContext
     }, React__default.createElement("div", {
@@ -893,7 +955,8 @@ var MFMarker = function MFMarker(props) {
       iconView = props.iconView,
       userInteractionEnabled = props.userInteractionEnabled,
       map = props.map,
-      onCreated = props.onCreated;
+      onCreated = props.onCreated,
+      onClick = props.onClick;
   var map4dContext = React.useContext(Map4dContext);
   var markerClusterContext = React.useContext(MarkerClusterContext);
   var theMap = map || map4dContext.map;
@@ -928,11 +991,12 @@ var MFMarker = function MFMarker(props) {
       markerRef.current = new map4d.Marker(option);
 
       if (!(markerClusterContext !== null && markerClusterContext !== void 0 && markerClusterContext.addMarker)) {
-        var _markerRef$current;
-
-        (_markerRef$current = markerRef.current) === null || _markerRef$current === void 0 ? void 0 : _markerRef$current.setMap(theMap);
+        markerRef.current.setMap(theMap);
       }
 
+      markerRef.current.onClick = onClick;
+      markerRef.current.onRightClick = props.onRightClick;
+      markerRef.current.onDragEnd = props.onDragEnd;
       onCreated && onCreated(markerRef.current);
       (markerClusterContext === null || markerClusterContext === void 0 ? void 0 : markerClusterContext.addMarker) && (markerClusterContext === null || markerClusterContext === void 0 ? void 0 : markerClusterContext.addMarker(markerRef.current));
     }
@@ -940,105 +1004,105 @@ var MFMarker = function MFMarker(props) {
   React.useEffect(function () {
     if (theMap) {
       if (!(markerClusterContext !== null && markerClusterContext !== void 0 && markerClusterContext.addMarker)) {
-        var _markerRef$current2;
+        var _markerRef$current;
 
-        (_markerRef$current2 = markerRef.current) === null || _markerRef$current2 === void 0 ? void 0 : _markerRef$current2.setMap(theMap);
+        (_markerRef$current = markerRef.current) === null || _markerRef$current === void 0 ? void 0 : _markerRef$current.setMap(theMap);
       }
     }
 
     return function () {
       if (!(markerClusterContext !== null && markerClusterContext !== void 0 && markerClusterContext.addMarker)) {
-        var _markerRef$current3;
+        var _markerRef$current2;
 
-        (_markerRef$current3 = markerRef.current) === null || _markerRef$current3 === void 0 ? void 0 : _markerRef$current3.setMap(null);
+        (_markerRef$current2 = markerRef.current) === null || _markerRef$current2 === void 0 ? void 0 : _markerRef$current2.setMap(null);
       }
     };
   }, [theMap]);
   React.useEffect(function () {
     return function () {
       if (!(markerClusterContext !== null && markerClusterContext !== void 0 && markerClusterContext.addMarker)) {
-        var _markerRef$current4;
+        var _markerRef$current3;
 
-        (_markerRef$current4 = markerRef.current) === null || _markerRef$current4 === void 0 ? void 0 : _markerRef$current4.setMap(null);
+        (_markerRef$current3 = markerRef.current) === null || _markerRef$current3 === void 0 ? void 0 : _markerRef$current3.setMap(null);
       }
 
       markerRef.current && (markerClusterContext === null || markerClusterContext === void 0 ? void 0 : markerClusterContext.removeMarker) && (markerClusterContext === null || markerClusterContext === void 0 ? void 0 : markerClusterContext.removeMarker(markerRef.current));
     };
   }, []);
   React.useEffect(function () {
-    var _markerRef$current5;
+    var _markerRef$current4;
 
-    (_markerRef$current5 = markerRef.current) === null || _markerRef$current5 === void 0 ? void 0 : _markerRef$current5.setPosition(position);
+    (_markerRef$current4 = markerRef.current) === null || _markerRef$current4 === void 0 ? void 0 : _markerRef$current4.setPosition(position);
   }, [position]);
   React.useEffect(function () {
-    var _markerRef$current6;
+    var _markerRef$current5;
 
-    (_markerRef$current6 = markerRef.current) === null || _markerRef$current6 === void 0 ? void 0 : _markerRef$current6.setVisible(visible);
+    (_markerRef$current5 = markerRef.current) === null || _markerRef$current5 === void 0 ? void 0 : _markerRef$current5.setVisible(visible);
   }, [visible]);
   React.useEffect(function () {
-    var _markerRef$current7;
+    var _markerRef$current6;
 
-    anchor != undefined && ((_markerRef$current7 = markerRef.current) === null || _markerRef$current7 === void 0 ? void 0 : _markerRef$current7.setAnchor(anchor));
+    anchor != undefined && ((_markerRef$current6 = markerRef.current) === null || _markerRef$current6 === void 0 ? void 0 : _markerRef$current6.setAnchor(anchor));
   }, [anchor]);
   React.useEffect(function () {
-    var _markerRef$current8;
+    var _markerRef$current7;
 
-    labelAnchor != undefined && ((_markerRef$current8 = markerRef.current) === null || _markerRef$current8 === void 0 ? void 0 : _markerRef$current8.setLabelAnchor(labelAnchor));
+    labelAnchor != undefined && ((_markerRef$current7 = markerRef.current) === null || _markerRef$current7 === void 0 ? void 0 : _markerRef$current7.setLabelAnchor(labelAnchor));
   }, [labelAnchor]);
   React.useEffect(function () {
-    var _markerRef$current9;
+    var _markerRef$current8;
 
-    icon != undefined && ((_markerRef$current9 = markerRef.current) === null || _markerRef$current9 === void 0 ? void 0 : _markerRef$current9.setIcon(icon));
+    icon != undefined && ((_markerRef$current8 = markerRef.current) === null || _markerRef$current8 === void 0 ? void 0 : _markerRef$current8.setIcon(icon));
   }, [icon]);
   React.useEffect(function () {
-    var _markerRef$current10;
+    var _markerRef$current9;
 
-    elevation != undefined && ((_markerRef$current10 = markerRef.current) === null || _markerRef$current10 === void 0 ? void 0 : _markerRef$current10.setElevation(elevation));
+    elevation != undefined && ((_markerRef$current9 = markerRef.current) === null || _markerRef$current9 === void 0 ? void 0 : _markerRef$current9.setElevation(elevation));
   }, [elevation]);
   React.useEffect(function () {
-    var _markerRef$current11;
+    var _markerRef$current10;
 
-    rotation != undefined && ((_markerRef$current11 = markerRef.current) === null || _markerRef$current11 === void 0 ? void 0 : _markerRef$current11.setRotation(rotation));
+    rotation != undefined && ((_markerRef$current10 = markerRef.current) === null || _markerRef$current10 === void 0 ? void 0 : _markerRef$current10.setRotation(rotation));
   }, [rotation]);
   React.useEffect(function () {
-    var _markerRef$current12;
+    var _markerRef$current11;
 
-    title != undefined && ((_markerRef$current12 = markerRef.current) === null || _markerRef$current12 === void 0 ? void 0 : _markerRef$current12.setTitle(title));
+    title != undefined && ((_markerRef$current11 = markerRef.current) === null || _markerRef$current11 === void 0 ? void 0 : _markerRef$current11.setTitle(title));
   }, [title]);
   React.useEffect(function () {
-    var _markerRef$current13;
+    var _markerRef$current12;
 
-    snippet != undefined && ((_markerRef$current13 = markerRef.current) === null || _markerRef$current13 === void 0 ? void 0 : _markerRef$current13.setSnippet(snippet));
+    snippet != undefined && ((_markerRef$current12 = markerRef.current) === null || _markerRef$current12 === void 0 ? void 0 : _markerRef$current12.setSnippet(snippet));
   }, [snippet]);
   React.useEffect(function () {
-    var _markerRef$current14;
+    var _markerRef$current13;
 
-    windowAnchor != undefined && ((_markerRef$current14 = markerRef.current) === null || _markerRef$current14 === void 0 ? void 0 : _markerRef$current14.setWindowAnchor(windowAnchor));
+    windowAnchor != undefined && ((_markerRef$current13 = markerRef.current) === null || _markerRef$current13 === void 0 ? void 0 : _markerRef$current13.setWindowAnchor(windowAnchor));
   }, [windowAnchor]);
   React.useEffect(function () {
-    var _markerRef$current15;
+    var _markerRef$current14;
 
-    zIndex != undefined && ((_markerRef$current15 = markerRef.current) === null || _markerRef$current15 === void 0 ? void 0 : _markerRef$current15.setZIndex(zIndex));
+    zIndex != undefined && ((_markerRef$current14 = markerRef.current) === null || _markerRef$current14 === void 0 ? void 0 : _markerRef$current14.setZIndex(zIndex));
   }, [zIndex]);
   React.useEffect(function () {
-    var _markerRef$current16;
+    var _markerRef$current15;
 
-    label != undefined && ((_markerRef$current16 = markerRef.current) === null || _markerRef$current16 === void 0 ? void 0 : _markerRef$current16.setLabel(label));
+    label != undefined && ((_markerRef$current15 = markerRef.current) === null || _markerRef$current15 === void 0 ? void 0 : _markerRef$current15.setLabel(label));
   }, [label]);
   React.useEffect(function () {
-    var _markerRef$current17;
+    var _markerRef$current16;
 
-    draggable != undefined && ((_markerRef$current17 = markerRef.current) === null || _markerRef$current17 === void 0 ? void 0 : _markerRef$current17.setDraggable(draggable));
+    draggable != undefined && ((_markerRef$current16 = markerRef.current) === null || _markerRef$current16 === void 0 ? void 0 : _markerRef$current16.setDraggable(draggable));
   }, [draggable]);
   React.useEffect(function () {
-    var _markerRef$current18;
+    var _markerRef$current17;
 
-    iconView != undefined && ((_markerRef$current18 = markerRef.current) === null || _markerRef$current18 === void 0 ? void 0 : _markerRef$current18.setIconView(iconView));
+    iconView != undefined && ((_markerRef$current17 = markerRef.current) === null || _markerRef$current17 === void 0 ? void 0 : _markerRef$current17.setIconView(iconView));
   }, [iconView]);
   React.useEffect(function () {
-    var _markerRef$current19;
+    var _markerRef$current18;
 
-    userInteractionEnabled != undefined && ((_markerRef$current19 = markerRef.current) === null || _markerRef$current19 === void 0 ? void 0 : _markerRef$current19.setUserInteraction(userInteractionEnabled));
+    userInteractionEnabled != undefined && ((_markerRef$current18 = markerRef.current) === null || _markerRef$current18 === void 0 ? void 0 : _markerRef$current18.setUserInteraction(userInteractionEnabled));
   }, [userInteractionEnabled]);
   return null;
 };