@silen/leaflet-canvas 7.1.0

package/README.md

@@ -0,0 +1,212 @@
+# @silen/leaflet-canvas
+
+Allows rendering to canvas using custom HtmlElement elements.
+
+# install
+
+```bash
+npm i @silen/leaflet-canvas
+```
+
+or
+
+```bash
+yarn add @silen/leaflet-canvas
+```
+
+or
+
+```bash
+pnpm add @silen/leaflet-canvas
+```
+
+# usage
+
+## options
+
+- `tolerance`: `Number` The default value is `0`. How much to extend the click tolerance around a path/object on the map.
+
+for test
+
+```js
+const features = [
+  {
+    type: 'Feature',
+    properties: {},
+    geometry: {
+      type: 'Polygon',
+      coordinates: [
+        [
+          [19.458847045898438, 51.75944673648409],
+          [19.46846008300781, 51.760296746815754],
+          [19.475669860839844, 51.745738110429116],
+          [19.462108612060547, 51.742868336510526],
+          [19.458847045898438, 51.75944673648409],
+        ],
+      ],
+    },
+  },
+  {
+    type: 'Feature',
+    properties: {},
+    geometry: {
+      type: 'Polygon',
+      coordinates: [
+        [
+          [19.475669860839844, 51.745738110429116],
+          [19.489574432373047, 51.74765119176804],
+          [19.489402770996094, 51.75604653513805],
+          [19.485111236572266, 51.76157173231003],
+          [19.46846008300781, 51.760296746815754],
+          [19.475669860839844, 51.745738110429116],
+        ],
+      ],
+    },
+  },
+];
+```
+
+This is an image for test.
+
+```js
+const imgSrc =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMsAAAAYCAYAAABUUQmyAAAAAXNSR0IArs4c6QAAHOdJREFUeF7tXHl4G9W1n9FIM5KlkbVZki3Zlh0viR0vsQ0hCYnjELMvAZq2QGgCtEBfoW1KW7ZX1tLtlbK8Aq+BUgdaUupQmhIITQg4gSSExAlxnIAdy5YcS5ZkraN9RsvzmU/jb6xIdszXfk2/j/tXbN+5c++553fO7ywTVKFQ3Oz3+19BEARZtGjRW4WFhdf19PQk4OdzfAg0Gk2VXC7/ZTKZvNRqtYphv+Xl5UgsFns7EolsCAaDOgRB9iMIIm9oaNiG4/iNvb29kXP8XF9u7xyVAKrVau9wuVz/B/tbvnz5HgzDVv8HgAVVKpUNKIru8nq92hyy9SEI0oQgiH7yWLsRBCHb2treTafT138JlnNUE/8DtoXq9fpvOxyO52Gvq1at2p9KpdrPdbBoNBoSQZBDbre7Fvbd3t4evfTSSxm9Xi+0WCyC3t5e+/j4+GKz2bzC7/e/iiBIwbJlyz4IBoNX9fX1hf+F94Jm1k7/C9/x5dL/JgmgJSUld9nt9v+F93d2dn7s9XpX9Pb2Mv+m/ZzNawU4jtfSNH0QPEZFRcUpDMPahoaGKN7DaFVVFW6z2a6IRqMsWJYsWbI7HA5f8y8CC0aS5PnBYPDd8vJySiQS1Wft52zO9eWcc1wCaFlZ2fdGR0efhn1ecsklB91u9/JzHCxEYWHh9wOBwCMIgoiXL1++PxKJdOagV7hEIrkuGo3+HsBy4YUX9lAUdeW/Aiwmk0mcSqV+MTo6emdVVZUbQZC6L8Fyjmv+F9jeNLBcfPHFBz0ezzkNFqPRKMEwbLPVal0L512yZMlfEATZcODAgWjW+XGpVPrVcDi8CUEQSUdHx0cikejSnTt3/tNpWFFRkYwkyQ+Hh4ebKyoqTmMYtvBLsHwBbTzHH5lGw1avXn3A5/O1z+JZgJdz3Jw7HnD0ufB07vlc68CaeddqbGyU0jT9h88//5wFS3l5+YMMwzxtt9tjvOfgeUIqla7lwNLe3r4XRdErenp6QjPcSb6zzbQnrKCgoCUSifSAByssLPwMRdGlfr+fTwvnKp98W8y1P/7eZrqDmWQ+290JMhtK8anuHPWAv3f+OjNBhHsvzMn3zBfWpawX89/F1+sp+Z4RsygUivbu7m46+wQrV64URiKRK9Vq9a8ikUi1xWJBrFYrm6pVKBShRCLRFQgEfjw2NpZt4aeWWrt2LWa1WlcbDIb/RlF0UW9vrxTWyCg9uw7DMH+SSCR3ZwN2yZIlEqlU2p1Op1fs3r0bAvypAXvIDFqpVJ6IRqPtAwMDNEEQl8Tj8S0ZGvYBRVH5AnyssbGxU6lUPoEgyEKLxYJzZ5PL5VQikXgVRdEfnDx5ki8XQUVFxcJ0Or3JYrEsnunGy8rKRiKRSJPb7Q5+UeMJVK+oqGhvQUFBE7c/Tm719fUBhmHeD4VCN2V7WLi3VCq1Sq/XP5JMJhsPHz48TeYkSVKxWAyo6v1DQ0Nx/v7gWZvNtvHUqVO/mvx73Gg0NjQ0NIwODg5WS6XSZwOBwDKr1Ypz+zAYDDaKop4KhULPWSwWMF7sqKurk8Xj8X6z2QwXRa9atWpTKpX6UU9Pz9ScbLnU1dXhbrfb63K5pAiCxMRicW0sFhvjQAN7o2l6jdFo/JFEImno6emR8HXJZDJFY7HYjmg0+o2ZqDfIVSKRPIXj+Dq/3y/LWgP02wMx/Xvvvff4NLBccskln8jl8uXZYKmqqiJSqdQtqVTqVxaLZZqi8g85b948ezKZvMlkMn2UnVFrbW0VEQTx2/37998+m8JoNBrg/Ze63e6jIJzW1tYChmF+39fXdx2CIOzl5Bs1NTUfi8Xi1X19fQyO45fRNP0agGX58uU9gUAgV8yCFRcX34Bh2PNjY2N5z1ZaWjqEoujXR0dHj4AHAw/HMMyLn3322fWz7em8886z4DjeuG/fvjmDBeRmt9vvHR8ff3ymc8vl8pBcLl82NjZ2AkGQJMy96qqrCgiCeH3r1q1XziZzrVZLCQSCTofDcZhnxbH6+vr7T5w4wb57xYoVm+Ry+eXbt283znIHh1AUvWhgYIA9Lxi6SCTSdezYsa/Czx0dHYdpml41gzyEZWVlN46Ojm6G+Uaj8ZOxsbELOOZw2WWXERRFPbdv377bZjuXXq/3pNPpK51OJ5yLXz8UyOXyeQKB4EO/3w/1uBlHU1PTw9NSxxdffPEBj8czjYYBwmOx2Mbh4eFHgdrAiuvXr4+tXLkS3CJqsVjQrq4uMYdIvV7fl0wml01MTEyjO3DpQqHwvoMHDz6WWSO+cuXKpEqlSqfT6dSuXbsE27dvn7J6crn8MEVRF4JFg/k1NTUat9utE4lEpEQied5isSyC35tMph0ej2djMBh0EwRRWFJSEh4ZGXEhCCLEcfxKmqb/OEOAjxUVFV0/MTHxOiep9evXw75YWmKxWNJdXV1TFkun0x1DEGSZ0+mEuAdtampqlsvl3xIIBIY9e/ZcDc+0t7eDklKtra2srCaNg72/v/+hRCKxpbu7m1XiOQyhyWR61mKxfJt7BrzoypUraZPJxBqNnp4eZM+ePUhlZaVZLBY3nzx5ckrua9eulQiFwt9u2bLlVk7mTU1NjMlkSsbj8cT7778v2rlzp5y7O5VK1e/1ekGurFIBEzCbzY8dOXLkAe5s8C5uLZPJlFapVEmfzyf84IMPCO5vcGdlZWW/EQgEj2U8DFZSUtLodrv30DRNqlQqh0wmqxsdHYV62BkDdCUWi/WfOHGiBv6o0WjWud1uMHrsvYBOqtXqez/88ENOl0AmcdgPzOnp6cG6urpYdpB5/iSKoov5OqlSqeSpVGrI7/cXZc5Gb9iwAXSaLW4Dc7JYLPTmzZvx0tJS9+nTp/WoRqP5ptvtfhEmXHTRRfv9fv9KHgUSGI3GeoZhPnA6nWqRSBRWKBS3tLW1/X3Hjh2cy0aLioqkGIa95XA4VsI6lZWVb8ZisXV2u31atRyEABY8EAh0ff3rXz/w6KOPTvHQhx9+WPDSSy+V2Gw2c8ZSx0Qi0QUMwxzn81UI8MVi8eahoSE2ZqmsrLxPIBA8nU0hYA2JRHJ9JhsmWbp06e5QKMRPHYOhKGcY5qjH41HAWkaj8VtVVVVdPK+I1tXVSf1+/za73b4K5sybN29bPB6/gUc3BZWVlS3Dw8N7M4mEkaamppann37aPwdQ5JoqKC4ubhkfHz/E/dFkMv0NQZAbLBYLyJ6LM9g0uVAovLihoeGdbECuXbtWJhKJtjscjs1VVVV/3LRp01RZAMDQ29u7aHh4mHtHFMfxVpqmP8+sj5lMprssFgubLYVRWFjoFYlEnR0dHce6u7vh/mAfrJzC4fDzVqv1ZphXXFw8yDBMG0c9wRPHYrH9g4ODjUDFKisrHxGLxU9mUVv2HcBkhoaGWIqmVqv9Ho9HnR2zgHeRSCS73W73JoFA8BqfycC5Dh061GaxWN4HQ4kgSFAkEi1nGKYP9gtgi8fj3zObzUAvwRBzbISf/GFjobq6OpFGo3li796996IqlepWr9cLnJWt4GfSsKxAgc9hGPaa2Wy+Fn4uLS3dAVXwHHGJoLCwsCIQCPSCPAsKCk4TBNHg8/kCObQANpEvoBQajcZdY2NjADp60gLd6fV6wTNMXXDGpf/l2LFjLLVYtGjRY8Fg8Ge5wILj+BpIBoDAFi9evCsajV7L46/wrs1jY2M3wjparfZPLpfrGzkCSVSn0y12Op0fgNVRKBROgiDmZbwLPIqKRKJFDMN8BGCpqKiwYBjW9E/IhgnKy8u7rVYrUE/EYDAcEIlEq/ixwBzAmFfmoJg4jn988uTJZpC5VCrdEA6HIcMIXhDTarW3uVyu32XeRcvl8lspigJPfEZLlMlkUkQiEbPL5VIhCAJ3X4YgCJvoAEPp8Xi+Y7FYnoKfKyoqDsbj8VXZBhViEY/H88rx48dvgHm1tbU7BwYGLs2jM3nPBUaVIIj3zGbzUoh5pFLpbZlzJUCHYrHYC0ePHl0P75g/f/4fYrHYf80m22lgaWtrAzBcw3kWqJSnUimL1+uFw0dJkuwMBoMHcmUmYK5EIuk/ffo0CCiuUqm+4/V6gXPOpc8M3PVLdrt9Q8bC/BZBkB/ygQDxSzqd3nrkyJHLYE57e/tTKIo+kCNYxPlgaWlpeTuRSHyNBxa8qKjIMzExIQMlIQiiMR6PD+a6FJ1OJ5XJZENmsxnaZ8CIbFSr1c9l5AQXBq01+wCUJpPJIhAImoeHh3MZijnoNyLUaDR+t9sNAS6iVCqX+3w+6HM720zSWb0LlDgUCm0ZGBiA2AvR6/WPOxwOoNwsWDQazS0c85DL5RMURcH95gzM4W5SqdQnR48erUcQBFjFMgRBgLqyxhGoTzqdHvL5fEVCoTCgVCqN2XQdrD7DMKdPnTrFtjEVFRW1TExMfDrHbCuwBAlJkq999tlna+B+9Xr9L2QyGWtU4R2pVOqezz///GfwDoVC4cIw7EqPxwPxaF6qjCoUim/4/X42kKqrq3tTq9V+lefSChEEGYVGRAzDbMlksg5cWq5b0Gg0MoIgPrDZbK2wubKysmdwHP9JDovPPZ6dNobfQ21kYzgchsvCFyxY8AzDMPdmgwVF0TcPHz58MTxw9dVXv0gQxPe6u7vPqLPgOH4tTdMvgxLnaKSEmIK9dLFY7I7FYiX5gK3T6QowDOux2+1tGSu5ORAI3JHZF5yjYbKmC0akoKyszCIUCs8AC9AGgiA2Hz169Gu55BeLxcIYht1ot9vfyiiGaZJyDYAc5HK5j6KoYi5+OysU5J6ULXP4GS8sLLwnEAj8NAOWRx0OBwT0LFh0Ot2tTqcTalWgH8e0Wm1bvnYoAEsymTzw6aefAtWKikSidoZhgG2wAAemEo1GX3Y6nazXqK+v3xoOh2/mWXR0UsFrgsEgAIwoLy+3Wa1WAOdsBiKXLkmUSuUDPp/vh7BWdXX10wzD3M+9CwwghmG9drudbZmCUV1dfSIcDn+/uLh4T67yCSqXy9dRFAUtIcAVXzcajet4wpg/mVSBwwLvm9OAzaXT6fuywALcFuKWHxQXF6+Lx+NggdhgCgYXkHEvWrp06Z9wHP8m32vAhYjF4rf37dvHxkc33XTTFpqmb8sFlklP95VoNPoS0KP6+vptYrGY6zoG4YKXsM/pUJnJ7e3tf0ZR9JbMvjga9mEGLCM4jjdn0zAASzAYfOujjz7qzPNOuqCg4O5IJALxI1hiSLOCp8MrKyvHxGLxvFz8/iz2jxqNRnFpaelDarX62mAwyCpHPpmXlJQ8ZrfbIXBmwVJSUnKn3W4HD480NTV9qlQqz5sJLDRNf3T8+HFIEtAkSd4RDAaBRnPsAjJQlRRFQYykKC0ttRAEMUVZwcs5nc4tY2NjrJerqqp6eWho6Ft5wIKaTCbCYDA8Vl5efovNZtPMpkvxePx2fqcHAGaSBfxtfHx8NV+OCxYsCNA0/WoymfwRPz6cCSyQTbqOpmnwOmyGYA4jVlpa+hRBEI9yYAHXFw6Hwe3dZbVa2UzRbOP888/fXFBQcGcOsGzft29fRwYsr9E0/c1cYOFX8BsaGv6O4/gNGWFhEonkmmg0+sZse8j199WrV78oEonuziQ5ACwtDMNAgF9gNBqHxWLxomywrF27Fo9EIr/v7+9fl2vNSCQSRlH0WpfL9R78XSgUrk4kEjvh383NzSdpml40V7CUlJQUKJXKZ0Kh0DruE4bZzqvRaB5yu91QbwJrjun1+jscDsdz8Nx55523SyqVXj4TWBKJxP5jx44BLYWY8y6v1wsx4xQVBwUVCoV9NputEryPVCq9IBwO98P7wPNMeuxxn88HCRfw+nJ+vMrtPRP/PJZMJu8+ffo0S1NnG6tWreoOBAIbstuiQC8jkcitMpnsnv7+/qrsdSorK99SKpXQrc4AWG6iKArQD5meP5eWlt7MEwbQrk8QBJEqFIqTiUSiIxQKebkMCD8jk6nmgsWGSqi6sLAwEggEICOUhiAyHA6/Oz4+znoDGEaj8WAwGHwjEAhAE6cIQRDIRAgJgvh2PB6HLAXe2tr6e5Ik78oGC47jfz9w4MBFsM511133BwzDvpMLLGKxeO0kvQIKUQAUUyKRrMsIC52kRBXxeBwyb0hDQ4NXJpO9WVNTIzWZTPP0er1KLBaLMkOIZUY4HE6cOHFiaGxs7OHKyspdmWwegKU1AxZJaWnpMEEQZ4CFdwn5gtLs34MyfQZyqK6uHk+n0xUzUNozdAWAMnm0N+x2OwTH7KioqDjq9/u3+Hw+CNjBcwB1FUml0rvD4TAABNfr9XwaJlCpVOu9Xi9QWQDLu1Kp9KqzBYtGo/mu2+2G5NEUWEAXksnksyMjI2y9TalUvujz+e6GOXK5vJOiqB3w+8rKyiPDw8PnZ8cQkACw2+1HBgcHgfqyo6GhYSQQCGwNBoNP+Hw+SAYB0MRarfZxl8t1F5yrs7Pzr2Kx+Oa33nor3/dMkPlrIEnyKYqilnLFVli/uLj4xPj4eBOA5WaKotiPv6qrq7sNBsONPGFAnhsKg1DcssfjcaBlcy2sCbRa7UKXywU8FCFJ0jlZHlgZDAa5YJqfGRPpdLrfOZ3OW2DukiVLXp187+3ZYBEKhdsOHjzIus4rrrjid8AzcwX4mdQx0LAzwAIyQBDEBmvodDrvggULdD09PWxwl07n7/5AUZYe8yfALyCTBNmwvJ7lDG2e/RelCIIMfcGYRaBWq1s9Hg/XguMSCoVXeTweLn6Y2n8mjfq62WyGQBiybk/YbLaHM0oqyHwc2HW2YGEYZl9fXx/IA4Em3aKiohey+b9SqSwMhUI2hmGkIpHIyjAMGOVEUVHRuxMTEyxjMBqN3x0bG4NPR6YF3Gq1er7H44GAn1AqlV4URVd4vV5IdXNpbFayEOAXFhZ2nzhx4gr4eenSpa/G4/E7z+J7JjZUoCjqcQzDvsexoPLy8q0Q4K/3+/2sMDJU5Svc4SB7QdP00GT7AhRuIpls2MdnEXBNqQJcRiKReHNwcPBy+GV9ff2uoqKinK4c3Kvb7e6xWq2Q7kMuvPDC14RC4W3ZYAGeeejQIZb7d3Z2PgtJgDxgmeo6bmxs/LtIJOJoGDyKT9IEt9frhao98OuGYDB4aq5Zl8xBgTZABUxuMBjM0Wi0xev18nvDZofGmTMwlUrl93q9kK0DC3yhz+fLmYnMfhS8ilAofHl0dJRNJjQ0NOxOJpNr+AVL7hmw9BKJ5PDx48cXwu9MJhN0aUAREpQUQPcNj8cDVArSv++QJHlNPs8CKdlwOLyfA8u8efN+pFAonskGCyiyQCD4aHR0tGUy2xmCuEWtVjsikYjd7/cXyuVyVybrNq39BvZjNBr/ODY2xqWV38Ew7Npc9BTeIZVK9w4MDLBJmZaWFjYRlKPhNt/doBKJxBCNRkEnxGDkp2XDFi1a9I5AIFjDHQ44JBSaJiYmWEtfUlLy8aTl6MxO982kCQAWkiTf5jxBc3Pzjurq6qtyVbPhkuPx+GimCAXWYAuO47dmg4WfDevo6HhKLBbfzyuSctuZ1qLf0tKyI5FIrOXXWbRa7Ysul4tNU2u12r0ulwus2myZl1zHnQKLTCYbx3F8/j8BLAKDwbDfZrOxfWfFxcX7Jy9/1dlQMZCjVCrtOnXqFFu4bWtr20XTNL/GNHUGmJtIJMZdLhfEB0DFnzSbzffmAktzc/N2hUJx7UxgiUQiBzIxC9C+H6pUqmdzZJZEcrn8IoqitgINlMlkvxQIBK9QFAUsRmYwGP5qs9mgNSY7jSuoqanpHhwcZGtPjY2N7yQSiZxgAe+FIIjZ5/NBQRPqNU/H4/GpbBivCXSmJlLIyHmtVis0yHqngSXz6e3V/Aq+Wq2uZRgGvgVh894lJSV/SiaTd/CKctO8CIqiV5eVlV0gk8kegB4zAItAIHiuv7//mzDRYDAc1+v1rdkChHmBQOC4zWZjWxxg1NfXPxePx+/JTh0LBIK/Hjp06BKYs2LFiielUumDucDCr7MA355s5vsKDyxQYzJOWtxPA4EA1JGg6PpXkiRvyGWpMr1tG5qamjrdbvd6fowEHphhGHMwGISMDFSn76utrX0+x57m4mGAIldRFAV0lR06ne4JkiQfzwYMGDWCIO4oLi5+DhQZfqZp+uHJTuz7Mt7ipE6nW3Lw4MFp3i4z74jdbl/AvcNgMPw0Q8PAaMD/c3ArV2cBsFRXV6/J17YDniUej39y5MgR1kvl8yzwN6jLMQwDsYa6srLSn0wmgVEAFYzKZLLWUCgE8Vr2EOh0ugecTifbq5b58K8hWx5VVVVyiqI+dLlckMJmh8FgeFwikTwBczdu3ChRq9Vvj4yMYKdPn748z2cbmFgsXhKLxXaBZykuLv4QFOYWLoA7//zzdyaTySuzFBmKd9+amJj4H0jBwosz/UnQjwM/0larNT0yMkJAnxKkf2tra3cTBMG1lggAHA6HAxIF7Ghvb493dHQEjEZj3O/3S0dHR0Xbtm0jM52+sB7b9zSZ8vyFWCx+JEed5Y3Dhw+zgevixYt/4fF4ps3JvAaKktfQNA0UswDOFovFrsvqQMUKCwu/EggE/sztLetsXI8Q24MF+7vgggv6GIZZwue+YJ2TyeR2p9PJ8m0YjzzySLy8vJzN+h09ehQaKRf++te/nuu3NJhCoXjQ7/c/yDVrwv42bGCdITsgBQx7czqdPpIkyzJeH4Xeq0gkcjCVSrHZIuhZu/zyy8PV1dXpQCCAwXNc3xusyaXtM2CBD+vY1LFer7+d++wcjKlMJpsxwIeEUG9vL1sSqKmpuZ8kySdz1SwAqLFYbLPD4WCbK7k9yGSyo6FQCLxpzq91ZTLZglAoBMVDNkPb3t5OL1u2zF1bWytIpVLyTK8i28/HOxet1Wp/qtFofgmGEEAtl8v/8I9//ONrMKesrGx8YmKie2JiAjKrQpVKdS1BEJcNDg5CLMXquFqtvgH6um6bmJiAIBgUb1cikbgix+GA369BUfQFj8fDWuGZRklJydvJZPJrPO8jUigUd/n9fkgd501D63S69+Px+A/8fj9wcwFJkj8JBoPPwGa590GdJZFIvM61u0A3aDgc/mWedpdpYAmFQtfn4O2gkFcIhcIut9utnO1s8+fPPxAKhS7KavkBbl872UC6y+/3G7LX0Ol0EyRJVn3BFhiRWq3+scfjYYuG+cZkMOpLJpNQwOMaKQmSJKHB9Ccz1cmUSuW2dDr9fb/fD93KBZk6CxSFWc9SVFR0C6cfcwVLbW3tfTKZ7Dd5vo/iCpDQr8V1kkPseHumNpOvko4plcr7Jps3Z5THZAz6hkAg+HEgEABqJ4dYTCgUPgR6AnGaVCr9+bFjxzbOdt/w98lm34e9Xu8T0xopswP87IXAgmq12uc0Gs2aU6dOKfhFRECoyWTyuFyuV4LB4IO5+sdkMtl8mUz2AkEQF/C+g4hjGNYfDocfczqd7xiNRlE6ne632WwGo9H4jFgsZg/I7SXT89PFZW+qqqoewnH8qRzUCTwLdB1Dpk9aV1f3N6FQuG6Gbxuw5ubmlzUazdW5zlZeXg6tHltDodDGPHEDBvRToVD8PBAILOd9F0GXlpYejEajl55FJibf3QlKS0tbjUbjJih48r8lggeMRqODpukXU6nU41mKyYKYJMkt6XS6if+txqSRPO3xeB4cGRn5s8lkwpLJ5AC0Ks2bN+8Zs9l8DxezFBcX3z4+Pv4CvKepqeltpVK5Jl/MAndTUFCwd3BwEIJquqKi4kGVSnVGgM+/S5qm+1wuF1vfkMlkXolEUn4WMTF8WlJDkuS2WCxWyz8XiqIfh0KhJ9xu906VSiXGcfyQw+EwLVy48BW/3w8ZNrbTI9Pmc41SqXySIIgyTqaclzOZTDGLxfI3iqIgHQ2GJP3/zVS1zL0h/HAAAAAASUVORK5CYII=';
+```
+
+This is the interface for implementing custom rendering using canvas.
+
+```js
+const onFillContent = (ctx, layer) => {
+  const img = document.createElement('img');
+  img.src = imgSrc;
+
+  const { _pxBounds } = layer;
+  const minX = _pxBounds.min.x;
+  const minY = _pxBounds.min.y;
+  const maxX = _pxBounds.max.x;
+  const maxY = _pxBounds.max.y;
+
+  const width = maxX - minX;
+  const height = maxY - minY;
+
+  img.onload = () => {
+    ctx.drawImage(img, minX, minY, width, height);
+  };
+};
+```
+
+## es
+
+For example.
+
+```js
+import L from 'leaflet';
+import { customCanvas, CustomCanvas } from '@silen/leaflet-canvas';
+
+const map = L.map('map', {
+  // renderer: customCanvas(),
+  renderer: new CustomCanvas(),
+});
+
+const renderGroup = new L.FeatureGroup();
+map.addLayer(renderGroup);
+
+const geoJson = L.geoJson(
+  {
+    type: 'FeatureCollection',
+    features,
+  },
+  {
+    onFillContent,
+    onEachFeature: (feature, layer) => {
+      renderGroup.addLayer(layer);
+    },
+  },
+);
+```
+
+## browser
+
+Introduce external dependencies
+
+```html
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css"
+/>
+<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet-src.js"></script>
+```
+
+Introduce this plugin.
+
+```html
+<script src="https://unpkg.com/@silen/leaflet-canvas@latest"></script>
+```
+
+You can also download this plugin locally and then import it.
+
+```html
+<script src="/path/@silen/leaflet-canvas/umd/index.js"></script>
+```
+
+Create a dom container to load the map
+
+```html
+<div id="map" style="height: 300px;"></div>
+```
+
+Use it.
+
+```js
+let selectedLayer;
+const map = L.map('map', {
+  renderer: L.customCanvas(),
+});
+
+map.setView(new L.LatLng(51.75, 19.46667), 12);
+map.addLayer(
+  new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    minZoom: 8,
+    maxZoom: 20,
+  }),
+);
+
+const renderGroup = new L.FeatureGroup();
+map.addLayer(renderGroup);
+
+const geoJson = L.geoJson(
+  {
+    type: 'FeatureCollection',
+    features,
+  },
+  {
+    onFillContent,
+    onEachFeature: (feature, layer) => {
+      layer.on('click', handleLayerClick);
+      renderGroup.addLayer(layer);
+    },
+  },
+);
+
+function highlightFeature(layer) {
+  if (selectedLayer) {
+    geoJson.resetStyle(selectedLayer);
+  }
+  selectedLayer = layer;
+
+  layer.setStyle({
+    weight: 5,
+    color: '#666',
+    dashArray: '',
+    fillOpacity: 0.7,
+  });
+
+  layer.bringToFront();
+}
+
+function handleLayerClick(event) {
+  const layer = event.target;
+
+  highlightFeature(layer);
+}
+```

package/dist/cjs/index.js

@@ -0,0 +1,368 @@
+/**
+* leaflet-canvas v7.1.0 by sunshmo
+* @license MIT
+**/
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    customCanvas: ()=>customCanvas,
+    default: ()=>src,
+    CustomCanvas: ()=>CustomCanvas
+});
+const external_leaflet_namespaceObject = require("leaflet");
+var external_leaflet_default = /*#__PURE__*/ __webpack_require__.n(external_leaflet_namespaceObject);
+const CustomCanvas = external_leaflet_namespaceObject.Renderer.extend({
+    options: {
+        tolerance: 0,
+        attribution: ''
+    },
+    getEvents () {
+        const events = external_leaflet_namespaceObject.Renderer.prototype.getEvents.call(this);
+        events.viewprereset = this._onViewPreReset;
+        return events;
+    },
+    _onViewPreReset () {
+        this._postponeUpdatePaths = true;
+    },
+    onAdd (map) {
+        external_leaflet_namespaceObject.Renderer.prototype.onAdd.call(this, map);
+        this._draw();
+    },
+    _initContainer () {
+        const container = this._container = document.createElement('canvas');
+        external_leaflet_namespaceObject.DomEvent.on(container, 'mousemove', this._onMouseMove, this);
+        external_leaflet_namespaceObject.DomEvent.on(container, 'click dblclick mousedown mouseup contextmenu', this._onClick, this);
+        external_leaflet_namespaceObject.DomEvent.on(container, 'mouseout', this._handleMouseOut, this);
+        container._leaflet_disable_events = true;
+        this._ctx = container.getContext('2d');
+    },
+    _destroyContainer () {
+        external_leaflet_namespaceObject.Util.cancelAnimFrame(this._redrawRequest);
+        delete this._ctx;
+        external_leaflet_namespaceObject.DomUtil.remove(this._container);
+        external_leaflet_namespaceObject.DomEvent.off(this._container);
+        delete this._container;
+    },
+    _updatePaths () {
+        if (this._postponeUpdatePaths) return;
+        let layer;
+        this._redrawBounds = null;
+        for(const id in this._layers){
+            layer = this._layers[id];
+            layer._update();
+        }
+        this._redraw();
+    },
+    _update () {
+        if (this._map._animatingZoom && this._bounds) return;
+        external_leaflet_namespaceObject.Renderer.prototype._update.call(this);
+        const b = this._bounds, container = this._container, size = b.getSize(), m = external_leaflet_namespaceObject.Browser.retina ? 2 : 1;
+        external_leaflet_namespaceObject.DomUtil.setPosition(container, b.min);
+        container.width = m * size.x;
+        container.height = m * size.y;
+        container.style.width = `${size.x}px`;
+        container.style.height = `${size.y}px`;
+        if (external_leaflet_namespaceObject.Browser.retina) this._ctx.scale(2, 2);
+        this._ctx.translate(-b.min.x, -b.min.y);
+        this.fire('update');
+    },
+    _reset () {
+        external_leaflet_namespaceObject.Renderer.prototype._reset.call(this);
+        if (this._postponeUpdatePaths) {
+            this._postponeUpdatePaths = false;
+            this._updatePaths();
+        }
+    },
+    _initPath (layer) {
+        this._updateDashArray(layer);
+        this._layers[external_leaflet_namespaceObject.Util.stamp(layer)] = layer;
+        const order = layer._order = {
+            layer: layer,
+            prev: this._drawLast,
+            next: null
+        };
+        if (this._drawLast) this._drawLast.next = order;
+        this._drawLast = order;
+        this._drawFirst = this._drawFirst || this._drawLast;
+    },
+    _addPath (layer) {
+        this._requestRedraw(layer);
+    },
+    _removePath (layer) {
+        const order = layer._order;
+        const next = order.next;
+        const prev = order.prev;
+        if (next) next.prev = prev;
+        else this._drawLast = prev;
+        if (prev) prev.next = next;
+        else this._drawFirst = next;
+        delete layer._order;
+        delete this._layers[external_leaflet_namespaceObject.Util.stamp(layer)];
+        this._requestRedraw(layer);
+    },
+    _updatePath (layer) {
+        this._extendRedrawBounds(layer);
+        layer._project();
+        layer._update();
+        this._requestRedraw(layer);
+    },
+    _updateStyle (layer) {
+        this._updateDashArray(layer);
+        this._requestRedraw(layer);
+    },
+    _updateDashArray (layer) {
+        if ('string' == typeof layer.options.dashArray) {
+            const parts = layer.options.dashArray.split(/[, ]+/), dashArray = [];
+            let dashValue, i;
+            for(i = 0; i < parts.length; i++){
+                dashValue = Number(parts[i]);
+                if (isNaN(dashValue)) return;
+                dashArray.push(dashValue);
+            }
+            layer.options._dashArray = dashArray;
+        } else layer.options._dashArray = layer.options.dashArray;
+    },
+    _requestRedraw (layer) {
+        if (!this._map) return;
+        this._extendRedrawBounds(layer);
+        this._redrawRequest = this._redrawRequest || external_leaflet_namespaceObject.Util.requestAnimFrame(this._redraw, this);
+    },
+    _extendRedrawBounds (layer) {
+        if (layer._pxBounds) {
+            const padding = (layer.options.weight || 0) + 1;
+            this._redrawBounds = this._redrawBounds || new external_leaflet_namespaceObject.Bounds();
+            this._redrawBounds.extend(layer._pxBounds.min.subtract([
+                padding,
+                padding
+            ]));
+            this._redrawBounds.extend(layer._pxBounds.max.add([
+                padding,
+                padding
+            ]));
+        }
+    },
+    _redraw () {
+        this._redrawRequest = null;
+        if (this._redrawBounds) {
+            this._redrawBounds.min._floor();
+            this._redrawBounds.max._ceil();
+        }
+        this._clear();
+        this._draw();
+        this._redrawBounds = null;
+    },
+    _clear () {
+        const bounds = this._redrawBounds;
+        if (bounds) {
+            const size = bounds.getSize();
+            this._ctx.clearRect(bounds.min.x, bounds.min.y, size.x, size.y);
+        } else {
+            this._ctx.save();
+            this._ctx.setTransform(1, 0, 0, 1, 0, 0);
+            this._ctx.clearRect(0, 0, this._container.width, this._container.height);
+            this._ctx.restore();
+        }
+    },
+    _draw () {
+        let layer;
+        const bounds = this._redrawBounds;
+        this._ctx.save();
+        if (bounds) {
+            const size = bounds.getSize();
+            this._ctx.beginPath();
+            this._ctx.rect(bounds.min.x, bounds.min.y, size.x, size.y);
+            this._ctx.clip();
+        }
+        this._drawing = true;
+        for(let order = this._drawFirst; order; order = order.next){
+            layer = order.layer;
+            if (!bounds || layer._pxBounds && layer._pxBounds.intersects(bounds)) layer._updatePath();
+        }
+        this._drawing = false;
+        this._ctx.restore();
+    },
+    _updatePoly (layer, closed) {
+        if (!this._drawing) return;
+        let i, j, len2, p;
+        const parts = layer._parts, len = parts.length, ctx = this._ctx;
+        if (!len) return;
+        ctx.beginPath();
+        for(i = 0; i < len; i++){
+            for(j = 0, len2 = parts[i].length; j < len2; j++){
+                p = parts[i][j];
+                ctx[j ? 'lineTo' : 'moveTo'](p.x, p.y);
+            }
+            if (closed) ctx.closePath();
+        }
+        this._fillStroke(ctx, layer);
+    },
+    _updateCircle (layer) {
+        if (!this._drawing || layer._empty()) return;
+        const p = layer._point, ctx = this._ctx, r = Math.max(Math.round(layer._radius), 1), s = (Math.max(Math.round(layer._radiusY), 1) || r) / r;
+        if (1 !== s) {
+            ctx.save();
+            ctx.scale(1, s);
+        }
+        ctx.beginPath();
+        ctx.arc(p.x, p.y / s, r, 0, 2 * Math.PI, false);
+        if (1 !== s) ctx.restore();
+        this._fillStroke(ctx, layer);
+    },
+    _fillStroke (ctx, layer) {
+        const options = layer.options;
+        if (options.fill) {
+            ctx.globalAlpha = options.fillOpacity;
+            ctx.fillStyle = options.fillColor || options.color;
+            ctx.fill(options.fillRule || 'evenodd');
+        }
+        if (options.stroke && 0 !== options.weight) {
+            if (ctx.setLineDash) ctx.setLineDash(layer.options && layer.options._dashArray || []);
+            ctx.globalAlpha = options.opacity;
+            ctx.lineWidth = options.weight;
+            ctx.strokeStyle = options.color;
+            ctx.lineCap = options.lineCap;
+            ctx.lineJoin = options.lineJoin;
+            ctx.stroke();
+        }
+        if ('function' == typeof options.onFillContent) options.onFillContent(ctx, layer);
+    },
+    _onClick (e) {
+        const point = this._map.mouseEventToLayerPoint(e);
+        let layer, clickedLayer;
+        for(let order = this._drawFirst; order; order = order.next){
+            layer = order.layer;
+            if (layer.options.interactive && layer._containsPoint(point)) {
+                if (!('click' === e.type || 'preclick' === e.type) || !this._map._draggableMoved(layer)) clickedLayer = layer;
+            }
+        }
+        this._fireEvent(clickedLayer ? [
+            clickedLayer
+        ] : false, e);
+    },
+    _onMouseMove (e) {
+        if (!this._map || this._map.dragging.moving() || this._map._animatingZoom) return;
+        const point = this._map.mouseEventToLayerPoint(e);
+        this._handleMouseHover(e, point);
+    },
+    _handleMouseOut (e) {
+        const layer = this._hoveredLayer;
+        if (layer) {
+            external_leaflet_namespaceObject.DomUtil.removeClass(this._container, 'leaflet-interactive');
+            this._fireEvent([
+                layer
+            ], e, 'mouseout');
+            this._hoveredLayer = null;
+            this._mouseHoverThrottled = false;
+        }
+    },
+    _handleMouseHover (e, point) {
+        if (this._mouseHoverThrottled) return;
+        let layer, candidateHoveredLayer;
+        for(let order = this._drawFirst; order; order = order.next){
+            layer = order.layer;
+            if (layer.options.interactive && layer._containsPoint(point)) candidateHoveredLayer = layer;
+        }
+        if (candidateHoveredLayer !== this._hoveredLayer) {
+            this._handleMouseOut(e);
+            if (candidateHoveredLayer) {
+                external_leaflet_namespaceObject.DomUtil.addClass(this._container, 'leaflet-interactive');
+                this._fireEvent([
+                    candidateHoveredLayer
+                ], e, 'mouseover');
+                this._hoveredLayer = candidateHoveredLayer;
+            }
+        }
+        this._fireEvent(this._hoveredLayer ? [
+            this._hoveredLayer
+        ] : false, e);
+        this._mouseHoverThrottled = true;
+        setTimeout(external_leaflet_namespaceObject.Util.bind(function() {
+            this._mouseHoverThrottled = false;
+        }, this), 32);
+    },
+    _fireEvent (layers, e, type) {
+        this._map._fireDOMEvent(e, type || e.type, layers);
+    },
+    _bringToFront (layer) {
+        const order = layer._order;
+        if (!order) return;
+        const next = order.next;
+        const prev = order.prev;
+        if (!next) return;
+        next.prev = prev;
+        if (prev) prev.next = next;
+        else if (next) this._drawFirst = next;
+        order.prev = this._drawLast;
+        this._drawLast.next = order;
+        order.next = null;
+        this._drawLast = order;
+        this._requestRedraw(layer);
+    },
+    _bringToBack (layer) {
+        const order = layer._order;
+        if (!order) return;
+        const next = order.next;
+        const prev = order.prev;
+        if (!prev) return;
+        prev.next = next;
+        if (next) next.prev = prev;
+        else if (prev) this._drawLast = prev;
+        order.prev = null;
+        order.next = this._drawFirst;
+        this._drawFirst.prev = order;
+        this._drawFirst = order;
+        this._requestRedraw(layer);
+    },
+    getAttribution () {
+        return this.options.attribution;
+    }
+});
+external_leaflet_default().CustomCanvas = CustomCanvas;
+function customCanvas(options) {
+    return external_leaflet_namespaceObject.Browser.canvas ? new CustomCanvas(options) : null;
+}
+external_leaflet_default().customCanvas = customCanvas;
+const src = external_leaflet_default();
+exports.CustomCanvas = __webpack_exports__.CustomCanvas;
+exports.customCanvas = __webpack_exports__.customCanvas;
+exports["default"] = __webpack_exports__["default"];
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CustomCanvas",
+    "customCanvas",
+    "default"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});