@mint-ui/map 0.4.0-beta → 0.4.1-beta

package/README.md

@@ -2,8 +2,9 @@
 
 - React map library 
 - Control various map with one interface
-- Google, Naver map supported now
+- Google, Naver, Kakao map supported now
 - Typescript supported
+- Canvas marker supported (experimental)
 
 ## Installation
 
@@ -40,6 +41,25 @@ function MyMapComponent(){
       <div style={{width:'10px', height:'10px', background:'red', borderRadius:'10px'}}></div>
       
     </MapMarkerWrapper>
+
+    {/* Overlay canvas */}
+    <MapCanvasWrapper>
+      
+      {/* Canvas marker */}
+      <MapCanvasMarkerWrapper position={new Position(-25.344, 131.031)} 
+      renderer={(renderer:MintMapCanvasRenderer, offset:Offset, _payload?:TestPayload)=>{
+        const {context} = renderer
+        context.fillStyle = `hsl(${(Math.random() * 360).toFixed(0)} 100% 60%)`
+        context.fillRect(Math.floor(offset.x), Math.floor(offset.y), 8, 8)
+      }}
+      boxWidth={8} boxHeight={8}
+      payload={testItem}
+      onClick={(e)=>{
+        alert('marker 1 clicked!!!'+e.x+','+e.y)
+      }}
+      ></MapCanvasMarkerWrapper>
+      
+    </MapCanvasWrapper>
     
   </MintMap>
 

package/dist/components/mint-map/core/MintMapCanvasRenderer.d.ts

@@ -0,0 +1,4 @@
+export declare class MintMapCanvasRenderer {
+    context: CanvasRenderingContext2D;
+    constructor(context: CanvasRenderingContext2D);
+}

package/dist/components/mint-map/core/MintMapCanvasRenderer.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MintMapCanvasRenderer = function () {
+  function MintMapCanvasRenderer(context) {
+    this.context = context;
+  }
+
+  return MintMapCanvasRenderer;
+}();
+
+exports.MintMapCanvasRenderer = MintMapCanvasRenderer;

package/dist/components/mint-map/core/MintMapController.d.ts

@@ -1,4 +1,4 @@
-import { Bounds, Drawable, MapType, MapVendorType, Marker, MarkerOptions, MintMapProps, Polygon, PolygonOptions, Polyline, PolylineOptions, Position } from "../MintMap";
+import { Bounds, Drawable, MapType, MapVendorType, Marker, MarkerOptions, MintMapProps, Offset, Polygon, PolygonOptions, Polyline, PolylineOptions, Position } from "../MintMap";
 export declare abstract class MintMapController {
     abstract type: MapType;
     abstract map: MapVendorType | null;
@@ -26,9 +26,12 @@ export declare abstract class MintMapController {
     mapProps: MintMapProps;
     mapApiLoaded: boolean;
     mapInitialized: boolean;
+    mapDivElement: HTMLDivElement;
     constructor(props: MintMapProps);
     getMap(): MapVendorType | null;
     getMapType(): MapType;
+    positionToOffset(position: Position): Offset;
+    offsetToPosition(offset: Offset): Position;
     loadScript(url: string, id?: string): Promise<void>;
     buildUrl(baseUrl: string, param: {
         [key: string]: string | string[];

package/dist/components/mint-map/core/MintMapController.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var MintMap = require('../MintMap.js');
 
 var MintMapController = function () {
   function MintMapController(props) {
@@ -20,6 +21,38 @@ var MintMapController = function () {
     return this.type;
   };
 
+  MintMapController.prototype.positionToOffset = function (position) {
+    var div = this.mapDivElement;
+    var w = div === null || div === void 0 ? void 0 : div.offsetWidth;
+    var h = div === null || div === void 0 ? void 0 : div.offsetHeight;
+    var bounds = this.getCurrBounds();
+    var maxLng = bounds.ne.lng;
+    var minLng = bounds.sw.lng;
+    var lng = Math.abs(maxLng - minLng);
+    var x = w * (position.lng - minLng) / lng;
+    var maxLat = bounds.ne.lat;
+    var minLat = bounds.sw.lat;
+    var lat = Math.abs(maxLat - minLat);
+    var y = h * (maxLat - position.lat) / lat;
+    return new MintMap.Offset(x, y);
+  };
+
+  MintMapController.prototype.offsetToPosition = function (offset) {
+    var div = this.mapDivElement;
+    var w = div === null || div === void 0 ? void 0 : div.offsetWidth;
+    var h = div === null || div === void 0 ? void 0 : div.offsetHeight;
+    var bounds = this.getCurrBounds();
+    var maxLng = bounds.ne.lng;
+    var minLng = bounds.sw.lng;
+    var lng = Math.abs(maxLng - minLng);
+    var lngVal = offset.x * lng / w + minLng;
+    var maxLat = bounds.ne.lat;
+    var minLat = bounds.sw.lat;
+    var lat = Math.abs(maxLat - minLat);
+    var latVal = (offset.y * lat / h - maxLat) * -1;
+    return new MintMap.Position(latVal, lngVal);
+  };
+
   MintMapController.prototype.loadScript = function (url, id) {
     return tslib.__awaiter(this, void 0, void 0, function () {
       return tslib.__generator(this, function (_a) {

package/dist/components/mint-map/core/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./MintMapCore";
 export * from "./MintMapController";
+export * from './MintMapCanvasRenderer';
 export * from "./advanced";
 export * from "./hooks";
 export * from "./provider";

package/dist/components/mint-map/core/wrapper/MapCanvasMarkerWrapper.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { MarkerOptions, Offset } from "../../MintMap";
+import { MintMapCanvasRenderer } from "../MintMapCanvasRenderer";
+export declare type CanvasMarkerRenderer<T> = (ctx: MintMapCanvasRenderer, offset: Offset, payload?: T) => void;
+export interface CanvasMarkerMouseEvent {
+    x: number;
+    y: number;
+}
+export declare type CanvasMarkerMouseEventCallback = (e: CanvasMarkerMouseEvent) => boolean | undefined | void;
+export interface MapCanvasMarkerWrapperProps<T> extends MarkerOptions {
+    renderer: CanvasMarkerRenderer<T>;
+    payload?: T;
+    boxWidth: number;
+    boxHeight: number;
+    onClick?: CanvasMarkerMouseEventCallback;
+    onMouseOver?: CanvasMarkerMouseEventCallback;
+    onMouseOut?: CanvasMarkerMouseEventCallback;
+}
+export declare function MapCanvasMarkerWrapper<T>(_props: MapCanvasMarkerWrapperProps<T>): JSX.Element;

package/dist/components/mint-map/core/wrapper/MapCanvasMarkerWrapper.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function MapCanvasMarkerWrapper(_props) {
+  return React__default["default"].createElement(React__default["default"].Fragment, null);
+}
+
+exports.MapCanvasMarkerWrapper = MapCanvasMarkerWrapper;

package/dist/components/mint-map/core/wrapper/MapCanvasWrapper.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export interface MapCanvasWrapperProps {
+}
+export declare function MapCanvasWrapper<T>({ children, ...props }: React.PropsWithChildren<MapCanvasWrapperProps>): JSX.Element;

package/dist/components/mint-map/core/wrapper/MapCanvasWrapper.js

@@ -0,0 +1,271 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var MintMapProvider = require('../provider/MintMapProvider.js');
+var MintMapCanvasRenderer = require('../MintMapCanvasRenderer.js');
+var MintMap = require('../../MintMap.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var console = {
+  log: function () {
+  }
+};
+function MapCanvasWrapper(_a) {
+  var children = _a.children;
+      tslib.__rest(_a, ["children"]);
+  var controller = MintMapProvider.useMintMapController();
+
+  var _b = React.useState(false),
+      renderFlag = _b[0],
+      setRenderFlag = _b[1];
+
+  var invokeRender = React.useCallback(function () {
+    setRenderFlag(!renderFlag);
+  }, []);
+  var renderer = React.useRef();
+  var containerRef = React.useRef(null);
+  var canvasRef = React.useRef(null);
+  var contextRef = React.useRef();
+  var clearRect = React.useCallback(function () {
+    if (contextRef.current && canvasRef.current) {
+      contextRef.current.clearRect(canvasRef.current.width * -1, canvasRef.current.height * -1, canvasRef.current.width * 3, canvasRef.current.height * 3);
+    }
+
+    return true;
+  }, []);
+  var scaleCanvas = React.useCallback(function (containerRef, canvasElement, canvasContext) {
+    var devicePixelRatio = window.devicePixelRatio;
+    var width = containerRef.offsetWidth;
+    var height = containerRef.offsetHeight;
+    canvasElement.width = width * devicePixelRatio;
+    canvasElement.height = height * devicePixelRatio;
+    canvasElement.style.width = "".concat(width, "px");
+    canvasElement.style.height = "".concat(height, "px");
+    canvasContext.scale(devicePixelRatio, devicePixelRatio);
+  }, []);
+  var parseClickParamToPosition = React.useCallback(function (mapType, e) {
+    var latlng = e.latlng || e.latLng;
+
+    if (!latlng) {
+      throw new Error("Map Type ".concat(mapType, " canvas marker click not supported (latlng not found)"));
+    }
+
+    var clickPosition = new MintMap.Position(0, 0);
+
+    if (mapType === 'naver') {
+      clickPosition.lat = latlng._lat;
+      clickPosition.lng = latlng._lng;
+    } else if (mapType === 'google') {
+      clickPosition.lat = latlng.lat();
+      clickPosition.lng = latlng.lng();
+    } else if (mapType === 'kakao') {
+      clickPosition.lat = latlng.Ma;
+      clickPosition.lng = latlng.La;
+    } else {
+      throw new Error("Map Type ".concat(mapType, " canvas marker click not supported"));
+    }
+
+    return clickPosition;
+  }, []);
+
+  var includes = function (point, targetPoint, width, height) {
+    if (point.x >= targetPoint.x && point.x <= targetPoint.x + width && point.y >= targetPoint.y && point.y <= targetPoint.y + height) {
+      return true;
+    }
+
+    return false;
+  };
+
+  var processMouseEvent = React.useCallback(function (clickedOffset, eventName) {
+    var items = renderItemsOnView.current;
+    var hitSet = new Set();
+
+    for (var i = items.length - 1; i >= 0; i--) {
+      var item = items[i];
+
+      if (item.visible === undefined || item.visible) {
+        var event_1 = item[eventName];
+
+        if (!event_1) {
+          continue;
+        }
+
+        var pos = item.position;
+
+        if (pos && !pos.offset) {
+          pos.offset = controller.positionToOffset(pos);
+        }
+
+        if (!pos || !pos.offset || !includes(clickedOffset, pos.offset, item.boxWidth, item.boxHeight)) {
+          continue;
+        }
+
+        event_1(clickedOffset);
+        hitSet.add(item);
+        break;
+      }
+    }
+
+    return hitSet;
+  }, []);
+  React.useEffect(function () {
+    var resizeObserver;
+
+    if (canvasRef.current && containerRef.current) {
+      resizeObserver = new ResizeObserver(function (entries) {
+        var elem = entries[0];
+        canvasRef.current && contextRef.current && scaleCanvas(elem.target, canvasRef.current, contextRef.current);
+        renderMain();
+      });
+      resizeObserver.observe(containerRef.current);
+      var map = controller.getMap();
+
+      if (map) {
+        map.addListener('zooming', function () {
+          clearRect();
+        });
+        map.addListener('zoom_start', function () {
+          clearRect();
+        });
+        map.addListener('center_changed', function () {
+
+          if (containerRef.current) {
+            containerRef.current.style.visibility = 'hidden';
+          }
+        });
+        map.addListener('idle', function () {
+
+          if (containerRef.current) {
+            containerRef.current.style.visibility = '';
+          }
+
+          clearRect();
+          invokeRender();
+        });
+        map.addListener('mousemove', function (e) {
+          var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
+          var clickedOffset = controller.positionToOffset(clickPosition);
+          var hitSet = processMouseEvent(clickedOffset, 'onMouseOver');
+          renderItemsMouseOverStatus.current.forEach(function (item) {
+            if (!hitSet.has(item)) {
+              item.onMouseOut && item.onMouseOut(clickedOffset);
+            }
+          });
+          renderItemsMouseOverStatus.current = hitSet;
+        });
+        map.addListener('click', function (e) {
+          var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
+          var clickedOffset = controller.positionToOffset(clickPosition);
+          processMouseEvent(clickedOffset, 'onClick');
+        });
+      }
+
+      contextRef.current = canvasRef.current.getContext('2d');
+
+      if (contextRef.current) {
+        scaleCanvas(containerRef.current, canvasRef.current, contextRef.current);
+        renderer.current = new MintMapCanvasRenderer.MintMapCanvasRenderer(contextRef.current);
+      }
+    }
+
+    return function () {
+      resizeObserver && resizeObserver.disconnect();
+    };
+  }, []);
+  var renderItems = React.useRef([]);
+  var renderItemsOnView = React.useRef([]);
+  var renderItemsMouseOverStatus = React.useRef(new Set());
+  React.useEffect(function () {
+    renderItems.current = (Array.isArray(children) ? children : [children]).map(function (item) {
+      return item.props;
+    });
+    var zIndexList = [];
+    var undefinedList = [];
+
+    for (var _i = 0, _a = renderItems.current; _i < _a.length; _i++) {
+      var item = _a[_i];
+
+      if (item.zIndex !== undefined) {
+        zIndexList.push(item);
+      } else {
+        undefinedList.push(item);
+      }
+    }
+
+    renderItems.current = undefinedList;
+    zIndexList.sort(function (a, b) {
+      return a > b ? 1 : -1;
+    }).forEach(function (item) {
+      renderItems.current.push(item);
+    });
+  }, [children]);
+  var renderMain = React.useCallback(function () {
+    var ctx = contextRef.current;
+    var container = containerRef.current;
+
+    if (!ctx || !container || !renderer.current) {
+      return;
+    }
+
+    clearRect();
+    var t = new Date().getTime();
+    var items = renderItems.current;
+    renderItemsOnView.current.length = 0;
+    var newSet = new Set();
+
+    for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+      var item = items_1[_i];
+
+      if (item.visible === undefined || item.visible) {
+        var pos = item.position;
+        pos.offset = controller.positionToOffset(pos);
+
+        if (item.anchor) {
+          pos.offset.x += item.anchor.x;
+          pos.offset.y += item.anchor.y;
+        }
+
+        console.log('canvas marker', pos.offset);
+
+        if (pos.offset.x < 0 || pos.offset.x > container.offsetWidth || pos.offset.y < 0 || pos.offset.y > container.offsetHeight) {
+          continue;
+        }
+
+        item.renderer(renderer.current, pos.offset, item.payload);
+        renderItemsOnView.current.push(item);
+        newSet.add(item);
+      }
+    }
+
+    renderItemsMouseOverStatus.current.forEach(function (item) {
+      if (!newSet.has(item)) {
+        renderItemsMouseOverStatus.current.delete(item);
+      }
+    });
+    console.log("[render ends] ".concat(new Date().getTime() - t, " ms"));
+  }, []);
+  renderMain();
+  return React__default["default"].createElement("div", {
+    ref: containerRef,
+    style: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      zIndex: 2,
+      pointerEvents: 'none'
+    }
+  }, React__default["default"].createElement("canvas", {
+    ref: canvasRef,
+    style: {
+      pointerEvents: 'revert-layer'
+    }
+  }), renderFlag && React__default["default"].createElement(React__default["default"].Fragment, null));
+}
+
+exports.MapCanvasWrapper = MapCanvasWrapper;

package/dist/components/mint-map/core/wrapper/index.d.ts

@@ -2,3 +2,5 @@ export * from './MapControlWrapper';
 export * from './MapMarkerWrapper';
 export * from './MapPolygonWrapper';
 export * from './MapPolylineWrapper';
+export * from './MapCanvasWrapper';
+export * from './MapCanvasMarkerWrapper';

package/dist/components/mint-map/google/GoogleMintMapController.js

@@ -372,6 +372,7 @@ var GoogleMintMapController = function (_super) {
       var _this = this;
 
       return tslib.__generator(this, function (_a) {
+        this.mapDivElement = divElement;
         return [2, new Promise(function (resolve) {
           return tslib.__awaiter(_this, void 0, void 0, function () {
             var map;

package/dist/components/mint-map/kakao/KakaoMintMapController.js

@@ -356,6 +356,7 @@ var KakaoMintMapController = function (_super) {
       var _this = this;
 
       return tslib.__generator(this, function (_a) {
+        this.mapDivElement = divElement;
         return [2, new Promise(function (resolve) {
           return tslib.__awaiter(_this, void 0, void 0, function () {
             var options, maxZoom, minZoom, map;

package/dist/components/mint-map/naver/NaverMintMapController.js

@@ -362,6 +362,7 @@ var NaverMintMapController = function (_super) {
       var _this = this;
 
       return tslib.__generator(this, function (_a) {
+        this.mapDivElement = divElement;
         return [2, new Promise(function (resolve) {
           return tslib.__awaiter(_this, void 0, void 0, function () {
             var options, maxZoom, minZoom, map;

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import { __awaiter, __generator, __extends, __assign, __rest, __spreadArray } from 'tslib';
-import React, { createContext, useContext, useRef, useState, useEffect, useMemo } from 'react';
+import React, { createContext, useContext, useRef, useState, useEffect, useMemo, useCallback } from 'react';
 import classNames from 'classnames/bind';
 import styleInject from 'style-inject';
 import { ObjectPool } from '@mint-ui/tools';
@@ -341,6 +341,38 @@ var MintMapController = function () {
     return this.type;
   };
 
+  MintMapController.prototype.positionToOffset = function (position) {
+    var div = this.mapDivElement;
+    var w = div === null || div === void 0 ? void 0 : div.offsetWidth;
+    var h = div === null || div === void 0 ? void 0 : div.offsetHeight;
+    var bounds = this.getCurrBounds();
+    var maxLng = bounds.ne.lng;
+    var minLng = bounds.sw.lng;
+    var lng = Math.abs(maxLng - minLng);
+    var x = w * (position.lng - minLng) / lng;
+    var maxLat = bounds.ne.lat;
+    var minLat = bounds.sw.lat;
+    var lat = Math.abs(maxLat - minLat);
+    var y = h * (maxLat - position.lat) / lat;
+    return new Offset(x, y);
+  };
+
+  MintMapController.prototype.offsetToPosition = function (offset) {
+    var div = this.mapDivElement;
+    var w = div === null || div === void 0 ? void 0 : div.offsetWidth;
+    var h = div === null || div === void 0 ? void 0 : div.offsetHeight;
+    var bounds = this.getCurrBounds();
+    var maxLng = bounds.ne.lng;
+    var minLng = bounds.sw.lng;
+    var lng = Math.abs(maxLng - minLng);
+    var lngVal = offset.x * lng / w + minLng;
+    var maxLat = bounds.ne.lat;
+    var minLat = bounds.sw.lat;
+    var lat = Math.abs(maxLat - minLat);
+    var latVal = (offset.y * lat / h - maxLat) * -1;
+    return new Position(latVal, lngVal);
+  };
+
   MintMapController.prototype.loadScript = function (url, id) {
     return __awaiter(this, void 0, void 0, function () {
       return __generator(this, function (_a) {
@@ -985,6 +1017,7 @@ var NaverMintMapController = function (_super) {
       var _this = this;
 
       return __generator(this, function (_a) {
+        this.mapDivElement = divElement;
         return [2, new Promise(function (resolve) {
           return __awaiter(_this, void 0, void 0, function () {
             var options, maxZoom, minZoom, map;
@@ -1519,6 +1552,7 @@ var GoogleMintMapController = function (_super) {
       var _this = this;
 
       return __generator(this, function (_a) {
+        this.mapDivElement = divElement;
         return [2, new Promise(function (resolve) {
           return __awaiter(_this, void 0, void 0, function () {
             var map;
@@ -1987,6 +2021,7 @@ var KakaoMintMapController = function (_super) {
       var _this = this;
 
       return __generator(this, function (_a) {
+        this.mapDivElement = divElement;
         return [2, new Promise(function (resolve) {
           return __awaiter(_this, void 0, void 0, function () {
             var options, maxZoom, minZoom, map;
@@ -2421,6 +2456,14 @@ function PointLoading(_a) {
   }, "".concat(text, " ").concat(pointString)));
 }
 
+var MintMapCanvasRenderer = function () {
+  function MintMapCanvasRenderer(context) {
+    this.context = context;
+  }
+
+  return MintMapCanvasRenderer;
+}();
+
 var AnimationPlayer = function () {
   function AnimationPlayer(drawFunction, fps) {
     this.prevtime = 0;
@@ -3196,4 +3239,264 @@ function MapPolylineWrapper(_a) {
   return React.createElement(React.Fragment, null, options && children);
 }
 
-export { AnimationPlayer, Bounds, Drawable, GeoCalulator, GoogleMintMapController, MapBuildingProjection, MapControlWrapper, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, Marker, MintMap, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, Polygon, PolygonCalculator, Polyline, Position, getClusterInfo, useMarkerMoving, useMintMapController, waiting };
+var console$1 = {
+  log: function () {
+  }
+};
+function MapCanvasWrapper(_a) {
+  var children = _a.children;
+      __rest(_a, ["children"]);
+  var controller = useMintMapController();
+
+  var _b = useState(false),
+      renderFlag = _b[0],
+      setRenderFlag = _b[1];
+
+  var invokeRender = useCallback(function () {
+    setRenderFlag(!renderFlag);
+  }, []);
+  var renderer = useRef();
+  var containerRef = useRef(null);
+  var canvasRef = useRef(null);
+  var contextRef = useRef();
+  var clearRect = useCallback(function () {
+    if (contextRef.current && canvasRef.current) {
+      contextRef.current.clearRect(canvasRef.current.width * -1, canvasRef.current.height * -1, canvasRef.current.width * 3, canvasRef.current.height * 3);
+    }
+
+    return true;
+  }, []);
+  var scaleCanvas = useCallback(function (containerRef, canvasElement, canvasContext) {
+    var devicePixelRatio = window.devicePixelRatio;
+    var width = containerRef.offsetWidth;
+    var height = containerRef.offsetHeight;
+    canvasElement.width = width * devicePixelRatio;
+    canvasElement.height = height * devicePixelRatio;
+    canvasElement.style.width = "".concat(width, "px");
+    canvasElement.style.height = "".concat(height, "px");
+    canvasContext.scale(devicePixelRatio, devicePixelRatio);
+  }, []);
+  var parseClickParamToPosition = useCallback(function (mapType, e) {
+    var latlng = e.latlng || e.latLng;
+
+    if (!latlng) {
+      throw new Error("Map Type ".concat(mapType, " canvas marker click not supported (latlng not found)"));
+    }
+
+    var clickPosition = new Position(0, 0);
+
+    if (mapType === 'naver') {
+      clickPosition.lat = latlng._lat;
+      clickPosition.lng = latlng._lng;
+    } else if (mapType === 'google') {
+      clickPosition.lat = latlng.lat();
+      clickPosition.lng = latlng.lng();
+    } else if (mapType === 'kakao') {
+      clickPosition.lat = latlng.Ma;
+      clickPosition.lng = latlng.La;
+    } else {
+      throw new Error("Map Type ".concat(mapType, " canvas marker click not supported"));
+    }
+
+    return clickPosition;
+  }, []);
+
+  var includes = function (point, targetPoint, width, height) {
+    if (point.x >= targetPoint.x && point.x <= targetPoint.x + width && point.y >= targetPoint.y && point.y <= targetPoint.y + height) {
+      return true;
+    }
+
+    return false;
+  };
+
+  var processMouseEvent = useCallback(function (clickedOffset, eventName) {
+    var items = renderItemsOnView.current;
+    var hitSet = new Set();
+
+    for (var i = items.length - 1; i >= 0; i--) {
+      var item = items[i];
+
+      if (item.visible === undefined || item.visible) {
+        var event_1 = item[eventName];
+
+        if (!event_1) {
+          continue;
+        }
+
+        var pos = item.position;
+
+        if (pos && !pos.offset) {
+          pos.offset = controller.positionToOffset(pos);
+        }
+
+        if (!pos || !pos.offset || !includes(clickedOffset, pos.offset, item.boxWidth, item.boxHeight)) {
+          continue;
+        }
+
+        event_1(clickedOffset);
+        hitSet.add(item);
+        break;
+      }
+    }
+
+    return hitSet;
+  }, []);
+  useEffect(function () {
+    var resizeObserver;
+
+    if (canvasRef.current && containerRef.current) {
+      resizeObserver = new ResizeObserver(function (entries) {
+        var elem = entries[0];
+        canvasRef.current && contextRef.current && scaleCanvas(elem.target, canvasRef.current, contextRef.current);
+        renderMain();
+      });
+      resizeObserver.observe(containerRef.current);
+      var map = controller.getMap();
+
+      if (map) {
+        map.addListener('zooming', function () {
+          clearRect();
+        });
+        map.addListener('zoom_start', function () {
+          clearRect();
+        });
+        map.addListener('center_changed', function () {
+
+          if (containerRef.current) {
+            containerRef.current.style.visibility = 'hidden';
+          }
+        });
+        map.addListener('idle', function () {
+
+          if (containerRef.current) {
+            containerRef.current.style.visibility = '';
+          }
+
+          clearRect();
+          invokeRender();
+        });
+        map.addListener('mousemove', function (e) {
+          var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
+          var clickedOffset = controller.positionToOffset(clickPosition);
+          var hitSet = processMouseEvent(clickedOffset, 'onMouseOver');
+          renderItemsMouseOverStatus.current.forEach(function (item) {
+            if (!hitSet.has(item)) {
+              item.onMouseOut && item.onMouseOut(clickedOffset);
+            }
+          });
+          renderItemsMouseOverStatus.current = hitSet;
+        });
+        map.addListener('click', function (e) {
+          var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
+          var clickedOffset = controller.positionToOffset(clickPosition);
+          processMouseEvent(clickedOffset, 'onClick');
+        });
+      }
+
+      contextRef.current = canvasRef.current.getContext('2d');
+
+      if (contextRef.current) {
+        scaleCanvas(containerRef.current, canvasRef.current, contextRef.current);
+        renderer.current = new MintMapCanvasRenderer(contextRef.current);
+      }
+    }
+
+    return function () {
+      resizeObserver && resizeObserver.disconnect();
+    };
+  }, []);
+  var renderItems = useRef([]);
+  var renderItemsOnView = useRef([]);
+  var renderItemsMouseOverStatus = useRef(new Set());
+  useEffect(function () {
+    renderItems.current = (Array.isArray(children) ? children : [children]).map(function (item) {
+      return item.props;
+    });
+    var zIndexList = [];
+    var undefinedList = [];
+
+    for (var _i = 0, _a = renderItems.current; _i < _a.length; _i++) {
+      var item = _a[_i];
+
+      if (item.zIndex !== undefined) {
+        zIndexList.push(item);
+      } else {
+        undefinedList.push(item);
+      }
+    }
+
+    renderItems.current = undefinedList;
+    zIndexList.sort(function (a, b) {
+      return a > b ? 1 : -1;
+    }).forEach(function (item) {
+      renderItems.current.push(item);
+    });
+  }, [children]);
+  var renderMain = useCallback(function () {
+    var ctx = contextRef.current;
+    var container = containerRef.current;
+
+    if (!ctx || !container || !renderer.current) {
+      return;
+    }
+
+    clearRect();
+    var t = new Date().getTime();
+    var items = renderItems.current;
+    renderItemsOnView.current.length = 0;
+    var newSet = new Set();
+
+    for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+      var item = items_1[_i];
+
+      if (item.visible === undefined || item.visible) {
+        var pos = item.position;
+        pos.offset = controller.positionToOffset(pos);
+
+        if (item.anchor) {
+          pos.offset.x += item.anchor.x;
+          pos.offset.y += item.anchor.y;
+        }
+
+        console$1.log('canvas marker', pos.offset);
+
+        if (pos.offset.x < 0 || pos.offset.x > container.offsetWidth || pos.offset.y < 0 || pos.offset.y > container.offsetHeight) {
+          continue;
+        }
+
+        item.renderer(renderer.current, pos.offset, item.payload);
+        renderItemsOnView.current.push(item);
+        newSet.add(item);
+      }
+    }
+
+    renderItemsMouseOverStatus.current.forEach(function (item) {
+      if (!newSet.has(item)) {
+        renderItemsMouseOverStatus.current.delete(item);
+      }
+    });
+    console$1.log("[render ends] ".concat(new Date().getTime() - t, " ms"));
+  }, []);
+  renderMain();
+  return React.createElement("div", {
+    ref: containerRef,
+    style: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      zIndex: 2,
+      pointerEvents: 'none'
+    }
+  }, React.createElement("canvas", {
+    ref: canvasRef,
+    style: {
+      pointerEvents: 'revert-layer'
+    }
+  }), renderFlag && React.createElement(React.Fragment, null));
+}
+
+function MapCanvasMarkerWrapper(_props) {
+  return React.createElement(React.Fragment, null);
+}
+
+export { AnimationPlayer, Bounds, Drawable, GeoCalulator, GoogleMintMapController, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, Polygon, PolygonCalculator, Polyline, Position, getClusterInfo, useMarkerMoving, useMintMapController, waiting };

package/dist/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var MintMap = require('./components/mint-map/MintMap.js');
 var MintMapCore = require('./components/mint-map/core/MintMapCore.js');
 var MintMapController = require('./components/mint-map/core/MintMapController.js');
+var MintMapCanvasRenderer = require('./components/mint-map/core/MintMapCanvasRenderer.js');
 var MapBuildingProjection = require('./components/mint-map/core/advanced/MapBuildingProjection.js');
 var MarkerMovingHook = require('./components/mint-map/core/hooks/MarkerMovingHook.js');
 var MintMapProvider = require('./components/mint-map/core/provider/MintMapProvider.js');
@@ -16,6 +17,8 @@ var MapControlWrapper = require('./components/mint-map/core/wrapper/MapControlWr
 var MapMarkerWrapper = require('./components/mint-map/core/wrapper/MapMarkerWrapper.js');
 var MapPolygonWrapper = require('./components/mint-map/core/wrapper/MapPolygonWrapper.js');
 var MapPolylineWrapper = require('./components/mint-map/core/wrapper/MapPolylineWrapper.js');
+var MapCanvasWrapper = require('./components/mint-map/core/wrapper/MapCanvasWrapper.js');
+var MapCanvasMarkerWrapper = require('./components/mint-map/core/wrapper/MapCanvasMarkerWrapper.js');
 var NaverMintMapController = require('./components/mint-map/naver/NaverMintMapController.js');
 var GoogleMintMapController = require('./components/mint-map/google/GoogleMintMapController.js');
 
@@ -31,6 +34,7 @@ exports.Polyline = MintMap.Polyline;
 exports.Position = MintMap.Position;
 exports.MintMapCore = MintMapCore.MintMapCore;
 exports.MintMapController = MintMapController.MintMapController;
+exports.MintMapCanvasRenderer = MintMapCanvasRenderer.MintMapCanvasRenderer;
 exports.MapBuildingProjection = MapBuildingProjection.MapBuildingProjection;
 exports.useMarkerMoving = MarkerMovingHook.useMarkerMoving;
 exports.MintMapProvider = MintMapProvider.MintMapProvider;
@@ -44,5 +48,7 @@ exports.MapControlWrapper = MapControlWrapper.MapControlWrapper;
 exports.MapMarkerWrapper = MapMarkerWrapper.MapMarkerWrapper;
 exports.MapPolygonWrapper = MapPolygonWrapper.MapPolygonWrapper;
 exports.MapPolylineWrapper = MapPolylineWrapper.MapPolylineWrapper;
+exports.MapCanvasWrapper = MapCanvasWrapper.MapCanvasWrapper;
+exports.MapCanvasMarkerWrapper = MapCanvasMarkerWrapper.MapCanvasMarkerWrapper;
 exports.NaverMintMapController = NaverMintMapController.NaverMintMapController;
 exports.GoogleMintMapController = GoogleMintMapController.GoogleMintMapController;

package/dist/index.umd.js

@@ -346,6 +346,38 @@
       return this.type;
     };
 
+    MintMapController.prototype.positionToOffset = function (position) {
+      var div = this.mapDivElement;
+      var w = div === null || div === void 0 ? void 0 : div.offsetWidth;
+      var h = div === null || div === void 0 ? void 0 : div.offsetHeight;
+      var bounds = this.getCurrBounds();
+      var maxLng = bounds.ne.lng;
+      var minLng = bounds.sw.lng;
+      var lng = Math.abs(maxLng - minLng);
+      var x = w * (position.lng - minLng) / lng;
+      var maxLat = bounds.ne.lat;
+      var minLat = bounds.sw.lat;
+      var lat = Math.abs(maxLat - minLat);
+      var y = h * (maxLat - position.lat) / lat;
+      return new Offset(x, y);
+    };
+
+    MintMapController.prototype.offsetToPosition = function (offset) {
+      var div = this.mapDivElement;
+      var w = div === null || div === void 0 ? void 0 : div.offsetWidth;
+      var h = div === null || div === void 0 ? void 0 : div.offsetHeight;
+      var bounds = this.getCurrBounds();
+      var maxLng = bounds.ne.lng;
+      var minLng = bounds.sw.lng;
+      var lng = Math.abs(maxLng - minLng);
+      var lngVal = offset.x * lng / w + minLng;
+      var maxLat = bounds.ne.lat;
+      var minLat = bounds.sw.lat;
+      var lat = Math.abs(maxLat - minLat);
+      var latVal = (offset.y * lat / h - maxLat) * -1;
+      return new Position(latVal, lngVal);
+    };
+
     MintMapController.prototype.loadScript = function (url, id) {
       return tslib.__awaiter(this, void 0, void 0, function () {
         return tslib.__generator(this, function (_a) {
@@ -990,6 +1022,7 @@
         var _this = this;
 
         return tslib.__generator(this, function (_a) {
+          this.mapDivElement = divElement;
           return [2, new Promise(function (resolve) {
             return tslib.__awaiter(_this, void 0, void 0, function () {
               var options, maxZoom, minZoom, map;
@@ -1524,6 +1557,7 @@
         var _this = this;
 
         return tslib.__generator(this, function (_a) {
+          this.mapDivElement = divElement;
           return [2, new Promise(function (resolve) {
             return tslib.__awaiter(_this, void 0, void 0, function () {
               var map;
@@ -1992,6 +2026,7 @@
         var _this = this;
 
         return tslib.__generator(this, function (_a) {
+          this.mapDivElement = divElement;
           return [2, new Promise(function (resolve) {
             return tslib.__awaiter(_this, void 0, void 0, function () {
               var options, maxZoom, minZoom, map;
@@ -2426,6 +2461,14 @@
     }, "".concat(text, " ").concat(pointString)));
   }
 
+  var MintMapCanvasRenderer = function () {
+    function MintMapCanvasRenderer(context) {
+      this.context = context;
+    }
+
+    return MintMapCanvasRenderer;
+  }();
+
   var AnimationPlayer = function () {
     function AnimationPlayer(drawFunction, fps) {
       this.prevtime = 0;
@@ -3201,18 +3244,281 @@
     return React__default["default"].createElement(React__default["default"].Fragment, null, options && children);
   }
 
+  var console$1 = {
+    log: function () {
+    }
+  };
+  function MapCanvasWrapper(_a) {
+    var children = _a.children;
+        tslib.__rest(_a, ["children"]);
+    var controller = useMintMapController();
+
+    var _b = React.useState(false),
+        renderFlag = _b[0],
+        setRenderFlag = _b[1];
+
+    var invokeRender = React.useCallback(function () {
+      setRenderFlag(!renderFlag);
+    }, []);
+    var renderer = React.useRef();
+    var containerRef = React.useRef(null);
+    var canvasRef = React.useRef(null);
+    var contextRef = React.useRef();
+    var clearRect = React.useCallback(function () {
+      if (contextRef.current && canvasRef.current) {
+        contextRef.current.clearRect(canvasRef.current.width * -1, canvasRef.current.height * -1, canvasRef.current.width * 3, canvasRef.current.height * 3);
+      }
+
+      return true;
+    }, []);
+    var scaleCanvas = React.useCallback(function (containerRef, canvasElement, canvasContext) {
+      var devicePixelRatio = window.devicePixelRatio;
+      var width = containerRef.offsetWidth;
+      var height = containerRef.offsetHeight;
+      canvasElement.width = width * devicePixelRatio;
+      canvasElement.height = height * devicePixelRatio;
+      canvasElement.style.width = "".concat(width, "px");
+      canvasElement.style.height = "".concat(height, "px");
+      canvasContext.scale(devicePixelRatio, devicePixelRatio);
+    }, []);
+    var parseClickParamToPosition = React.useCallback(function (mapType, e) {
+      var latlng = e.latlng || e.latLng;
+
+      if (!latlng) {
+        throw new Error("Map Type ".concat(mapType, " canvas marker click not supported (latlng not found)"));
+      }
+
+      var clickPosition = new Position(0, 0);
+
+      if (mapType === 'naver') {
+        clickPosition.lat = latlng._lat;
+        clickPosition.lng = latlng._lng;
+      } else if (mapType === 'google') {
+        clickPosition.lat = latlng.lat();
+        clickPosition.lng = latlng.lng();
+      } else if (mapType === 'kakao') {
+        clickPosition.lat = latlng.Ma;
+        clickPosition.lng = latlng.La;
+      } else {
+        throw new Error("Map Type ".concat(mapType, " canvas marker click not supported"));
+      }
+
+      return clickPosition;
+    }, []);
+
+    var includes = function (point, targetPoint, width, height) {
+      if (point.x >= targetPoint.x && point.x <= targetPoint.x + width && point.y >= targetPoint.y && point.y <= targetPoint.y + height) {
+        return true;
+      }
+
+      return false;
+    };
+
+    var processMouseEvent = React.useCallback(function (clickedOffset, eventName) {
+      var items = renderItemsOnView.current;
+      var hitSet = new Set();
+
+      for (var i = items.length - 1; i >= 0; i--) {
+        var item = items[i];
+
+        if (item.visible === undefined || item.visible) {
+          var event_1 = item[eventName];
+
+          if (!event_1) {
+            continue;
+          }
+
+          var pos = item.position;
+
+          if (pos && !pos.offset) {
+            pos.offset = controller.positionToOffset(pos);
+          }
+
+          if (!pos || !pos.offset || !includes(clickedOffset, pos.offset, item.boxWidth, item.boxHeight)) {
+            continue;
+          }
+
+          event_1(clickedOffset);
+          hitSet.add(item);
+          break;
+        }
+      }
+
+      return hitSet;
+    }, []);
+    React.useEffect(function () {
+      var resizeObserver;
+
+      if (canvasRef.current && containerRef.current) {
+        resizeObserver = new ResizeObserver(function (entries) {
+          var elem = entries[0];
+          canvasRef.current && contextRef.current && scaleCanvas(elem.target, canvasRef.current, contextRef.current);
+          renderMain();
+        });
+        resizeObserver.observe(containerRef.current);
+        var map = controller.getMap();
+
+        if (map) {
+          map.addListener('zooming', function () {
+            clearRect();
+          });
+          map.addListener('zoom_start', function () {
+            clearRect();
+          });
+          map.addListener('center_changed', function () {
+
+            if (containerRef.current) {
+              containerRef.current.style.visibility = 'hidden';
+            }
+          });
+          map.addListener('idle', function () {
+
+            if (containerRef.current) {
+              containerRef.current.style.visibility = '';
+            }
+
+            clearRect();
+            invokeRender();
+          });
+          map.addListener('mousemove', function (e) {
+            var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
+            var clickedOffset = controller.positionToOffset(clickPosition);
+            var hitSet = processMouseEvent(clickedOffset, 'onMouseOver');
+            renderItemsMouseOverStatus.current.forEach(function (item) {
+              if (!hitSet.has(item)) {
+                item.onMouseOut && item.onMouseOut(clickedOffset);
+              }
+            });
+            renderItemsMouseOverStatus.current = hitSet;
+          });
+          map.addListener('click', function (e) {
+            var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
+            var clickedOffset = controller.positionToOffset(clickPosition);
+            processMouseEvent(clickedOffset, 'onClick');
+          });
+        }
+
+        contextRef.current = canvasRef.current.getContext('2d');
+
+        if (contextRef.current) {
+          scaleCanvas(containerRef.current, canvasRef.current, contextRef.current);
+          renderer.current = new MintMapCanvasRenderer(contextRef.current);
+        }
+      }
+
+      return function () {
+        resizeObserver && resizeObserver.disconnect();
+      };
+    }, []);
+    var renderItems = React.useRef([]);
+    var renderItemsOnView = React.useRef([]);
+    var renderItemsMouseOverStatus = React.useRef(new Set());
+    React.useEffect(function () {
+      renderItems.current = (Array.isArray(children) ? children : [children]).map(function (item) {
+        return item.props;
+      });
+      var zIndexList = [];
+      var undefinedList = [];
+
+      for (var _i = 0, _a = renderItems.current; _i < _a.length; _i++) {
+        var item = _a[_i];
+
+        if (item.zIndex !== undefined) {
+          zIndexList.push(item);
+        } else {
+          undefinedList.push(item);
+        }
+      }
+
+      renderItems.current = undefinedList;
+      zIndexList.sort(function (a, b) {
+        return a > b ? 1 : -1;
+      }).forEach(function (item) {
+        renderItems.current.push(item);
+      });
+    }, [children]);
+    var renderMain = React.useCallback(function () {
+      var ctx = contextRef.current;
+      var container = containerRef.current;
+
+      if (!ctx || !container || !renderer.current) {
+        return;
+      }
+
+      clearRect();
+      var t = new Date().getTime();
+      var items = renderItems.current;
+      renderItemsOnView.current.length = 0;
+      var newSet = new Set();
+
+      for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+        var item = items_1[_i];
+
+        if (item.visible === undefined || item.visible) {
+          var pos = item.position;
+          pos.offset = controller.positionToOffset(pos);
+
+          if (item.anchor) {
+            pos.offset.x += item.anchor.x;
+            pos.offset.y += item.anchor.y;
+          }
+
+          console$1.log('canvas marker', pos.offset);
+
+          if (pos.offset.x < 0 || pos.offset.x > container.offsetWidth || pos.offset.y < 0 || pos.offset.y > container.offsetHeight) {
+            continue;
+          }
+
+          item.renderer(renderer.current, pos.offset, item.payload);
+          renderItemsOnView.current.push(item);
+          newSet.add(item);
+        }
+      }
+
+      renderItemsMouseOverStatus.current.forEach(function (item) {
+        if (!newSet.has(item)) {
+          renderItemsMouseOverStatus.current.delete(item);
+        }
+      });
+      console$1.log("[render ends] ".concat(new Date().getTime() - t, " ms"));
+    }, []);
+    renderMain();
+    return React__default["default"].createElement("div", {
+      ref: containerRef,
+      style: {
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        zIndex: 2,
+        pointerEvents: 'none'
+      }
+    }, React__default["default"].createElement("canvas", {
+      ref: canvasRef,
+      style: {
+        pointerEvents: 'revert-layer'
+      }
+    }), renderFlag && React__default["default"].createElement(React__default["default"].Fragment, null));
+  }
+
+  function MapCanvasMarkerWrapper(_props) {
+    return React__default["default"].createElement(React__default["default"].Fragment, null);
+  }
+
   exports.AnimationPlayer = AnimationPlayer;
   exports.Bounds = Bounds;
   exports.Drawable = Drawable;
   exports.GeoCalulator = GeoCalulator;
   exports.GoogleMintMapController = GoogleMintMapController;
   exports.MapBuildingProjection = MapBuildingProjection;
+  exports.MapCanvasMarkerWrapper = MapCanvasMarkerWrapper;
+  exports.MapCanvasWrapper = MapCanvasWrapper;
   exports.MapControlWrapper = MapControlWrapper;
   exports.MapMarkerWrapper = MapMarkerWrapper;
   exports.MapPolygonWrapper = MapPolygonWrapper;
   exports.MapPolylineWrapper = MapPolylineWrapper;
   exports.Marker = Marker;
   exports.MintMap = MintMap;
+  exports.MintMapCanvasRenderer = MintMapCanvasRenderer;
   exports.MintMapController = MintMapController;
   exports.MintMapCore = MintMapCore;
   exports.MintMapProvider = MintMapProvider;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@mint-ui/map",
-  "version": "0.4.0-beta",
+  "version": "0.4.1-beta",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
   "browser": "./dist/index.umd.js",
   "types": "./dist/index.d.ts",
   "repository": "https://github.com/dev-rsquare/mint-ui-map",
   "author": "RSQUARE",
-  "keywords": ["react", "map", "google", "naver", "library", "typescript"],
+  "keywords": ["react", "map", "google", "naver", "kakao", "library", "typescript", "canvas", "marker"],
   "license": "MIT",
   "private": false,
   "devDependencies": {