├── .gitignore
├── package.json
├── LICENSE
├── README.md
├── leaflet-canvasicon.js
└── example.html


/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components/
2 | .idea
3 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "leaflet-canvasicon",
 3 |   "version": "0.1.6",
 4 |   "license": "MIT",
 5 |   "description": "Canvas Icon plugin for Leaflet library",
 6 |   "keywords": ["leaflet", "canvas", "marker", "icon"],
 7 |   "author": "ALeksandr Kavun <iam@sashakavun.ru>",
 8 |   "main": "leaflet-canvasicon.js",
 9 |   "bugs": "https://github.com/sashakavun/leaflet-canvasicon/issues",
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git://github.com/sashakavun/leaflet-canvasicon.git"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2014-2016 Aleksandr Kavun
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy
 4 | of this software and associated documentation files (the "Software"),
 5 | to deal in the Software without restriction, including without limitation
 6 | the rights to use, copy, modify, merge, publish, distribute, sublicense,
 7 | and/or sell copies of the Software, and to permit persons to whom the
 8 | Software is furnished to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included
11 | in all copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
14 | OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
16 | THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
19 | IN THE SOFTWARE.
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | L.CanvasIcon
 2 | ============
 3 | 
 4 | Canvas Icon plugin for Leaflet library.
 5 | 
 6 | Check out code and the [example](http://sashakavun.github.io/leaflet-canvasicon/example.html).
 7 | 
 8 | Usage
 9 | -----
10 | 
11 | Simpliest way to use canvas icon is to pass `drawIcon` callback in the options:
12 | 
13 | ```js
14 | var myIcon = L.canvasIcon({
15 |     drawIcon: function (icon, type) {
16 |         ... // drawing code here
17 |     }
18 | });
19 | ```
20 | 
21 | Or, you may extend `L.CanvasIcon` to implement all drawing logic inside it:
22 | 
23 | ```js
24 | L.MyIcon = L.CanvasIcon({
25 |     _setIconStyles: function (icon, type) {
26 |         ... // drawing code here
27 |         L.CanvasIcon.prototype._setIconStyles.apply(this, arguments); // do not forget this line, or icons positioning will break
28 |     }
29 | });
30 | 
31 | var anotherIcon = new L.MyIcon();
32 | ```
33 | 
34 | First argument of the callback will contain canvas DOM element, and second will contain string icon type descriptor ("icon" or "shadow").
35 | 
36 | Pass created icon in the marker options or set it on the already created marker:
37 | 
38 | ```js
39 | var myLatlng = L.latLng(...);
40 | var myMarker = L.marker(myLatlng, { icon: myIcon });
41 | 
42 | var anotherLatlng = L.latLng(...);
43 | var anotherMarker = L.marker(anotherLatlng);
44 | anotherMarker.setIcon(anotherIcon);
45 | ```
46 | 


--------------------------------------------------------------------------------
/leaflet-canvasicon.js:
--------------------------------------------------------------------------------
 1 | /*global L, define */
 2 | (function () {
 3 |     'use strict';
 4 | 
 5 |     /**
 6 |      * Canvas Icon
 7 |      * @type {L.CanvasIcon}
 8 |      * @extends {L.Icon}
 9 |      */
10 |     L.CanvasIcon = L.Icon.extend({
11 |         options: {
12 |             /** @var {L.Point} */
13 |             iconSize: [24, 24],
14 |             /** @var {L.Point} */
15 |             iconAnchor: [12, 12],
16 |             /** @var {Function} */
17 |             drawIcon: null,
18 |             /** @var {string} */
19 |             className: 'leaflet-canvas-icon'
20 |         },
21 | 
22 |         /**
23 |          * @param {HTMLElement} icon
24 |          * @returns {HTMLCanvasElement}
25 |          */
26 |         createIcon: function (icon) {
27 |             var size = L.point(this.options.iconSize);
28 | 
29 |             if (!icon || (icon.tagName != 'CANVAS')) {
30 |                 icon = document.createElement('canvas');
31 |             }
32 | 
33 |             icon.width = size.x;
34 |             icon.height = size.y;
35 | 
36 |             this._setIconStyles(icon, 'icon');
37 | 
38 |             return icon;
39 |         },
40 | 
41 |         /**
42 |          * @param {HTMLElement} icon
43 |          * @returns {null}
44 |          */
45 |         createShadow: function (icon) {
46 |             return null;
47 |         },
48 | 
49 |         /**
50 |          * @param {HTMLElement} icon
51 |          * @param {string} type
52 |          * @private
53 |          */
54 |         _setIconStyles: function (icon, type) {
55 |             if (typeof this.options.drawIcon == 'function') {
56 |                 this.options.drawIcon.apply(this, arguments);
57 |             }
58 | 
59 |             L.Icon.prototype._setIconStyles.apply(this, arguments);
60 |         }
61 |     });
62 | 
63 |     /**
64 |      * Canvas Icon factory
65 |      * @param {Object} options
66 |      * @returns {L.CanvasIcon}
67 |      */
68 |     L.canvasIcon = function (options) {
69 |         return new L.CanvasIcon(options);
70 |     };
71 | 
72 |     /**
73 |      * AMD compatibility
74 |      */
75 |     if ((typeof define == 'function') && define.amd) {
76 |         define(L.CanvasIcon);
77 |     }
78 | })();
79 | 


--------------------------------------------------------------------------------
/example.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <title>L.CanvasIcon</title>
  5 |     <meta charset="utf-8">
  6 |     <link rel="stylesheet" href="https://unpkg.com/leaflet@0.7.7/dist/leaflet.css"/>
  7 |     <style type="text/css">
  8 |         body {
  9 |             margin: 0;
 10 |             padding: 0 1em;
 11 |         }
 12 | 
 13 |         #map {
 14 |             top: 120px;
 15 |             bottom: 0;
 16 |             left: 0;
 17 |             right: 0;
 18 |             position: absolute;
 19 |             background: #fff;
 20 |         }
 21 |     </style>
 22 | </head>
 23 | <body>
 24 | <h1><a href="https://github.com/sashakavun/leaflet-canvasicon">L.CanvasIcon</a></h1>
 25 | <p>Canvas Icon plugin for Leaflet library.</p>
 26 | 
 27 | <div id="map"></div>
 28 | 
 29 | <script src="https://unpkg.com/leaflet@0.7.7/dist/leaflet.js"></script>
 30 | <script type="text/javascript" src="leaflet-canvasicon.js"></script>
 31 | 
 32 | <script type="text/javascript">
 33 |     (function () {
 34 |         'use strict';
 35 | 
 36 |         var map = L.map('map', {
 37 |             zoom: 12,
 38 |             center: [37.7630, -122.4435]
 39 |         });
 40 | 
 41 |         L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
 42 |             attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 43 |         }).addTo(map);
 44 | 
 45 |         L.marker(
 46 |             L.latLng([37.7930, -122.4035]),
 47 |             {
 48 |                 icon: L.canvasIcon({
 49 |                     iconSize: [50, 50],
 50 |                     iconAnchor: [25, 25],
 51 |                     fillStyle: 'rgba(255,0,0,.5)',
 52 |                     drawIcon: function (icon, type) {
 53 |                         if (type == 'icon') {
 54 |                             var ctx = icon.getContext('2d');
 55 |                             var size = L.point(this.options.iconSize);
 56 |                             var center = L.point(Math.floor(size.x / 2), Math.floor(size.y / 2));
 57 |                             ctx.beginPath();
 58 |                             ctx.arc(center.x, center.y, Math.min(center.x, center.y), 0, 2 * Math.PI);
 59 |                             ctx.fillStyle = this.options.fillStyle;
 60 |                             ctx.fill();
 61 |                             ctx.closePath();
 62 |                         }
 63 |                     }
 64 |                 })
 65 |             }
 66 |         ).bindPopup('I have a popup!').addTo(map).openPopup();
 67 | 
 68 |         L.SquareIcon = L.CanvasIcon.extend({
 69 |             options: {
 70 |                 iconSize: [70, 70],
 71 |                 iconAnchor: [35, 35]
 72 |             },
 73 |             _setIconStyles: function (icon, type) {
 74 |                 if (type == 'icon') {
 75 |                     var ctx = icon.getContext('2d');
 76 |                     var size = L.point(this.options.iconSize);
 77 |                     var center = L.point(Math.floor(size.x / 2), Math.floor(size.y / 2));
 78 |                     ctx.beginPath();
 79 |                     ctx.moveTo(0, 0);
 80 |                     ctx.lineTo(size.x, 0);
 81 |                     ctx.lineTo(center.x, center.y);
 82 |                     ctx.lineTo(size.x, size.y);
 83 |                     ctx.lineTo(0, size.y);
 84 |                     ctx.lineTo(center.x, center.y);
 85 |                     ctx.lineTo(0, 0);
 86 |                     ctx.fillStyle = 'rgba(0,255,0,.5)';
 87 |                     ctx.fill();
 88 |                     ctx.closePath();
 89 |                     ctx.beginPath();
 90 |                     ctx.moveTo(0, 0);
 91 |                     ctx.lineTo(0, size.y);
 92 |                     ctx.lineTo(center.x, center.y);
 93 |                     ctx.lineTo(size.x, size.y);
 94 |                     ctx.lineTo(size.x, 0);
 95 |                     ctx.lineTo(center.x, center.y);
 96 |                     ctx.lineTo(0, 0);
 97 |                     ctx.fillStyle = 'yellow';
 98 |                     ctx.fill();
 99 |                     ctx.closePath();
100 |                 }
101 |                 L.CanvasIcon.prototype._setIconStyles.apply(this, arguments);
102 |             }
103 |         });
104 | 
105 |         L.marker(L.latLng([37.683, -122.4536]))
106 |             .setIcon(new L.SquareIcon())
107 |             .bindPopup('I have nice popup too!')
108 |             .addTo(map);
109 | 
110 |     })();
111 | </script>
112 | </body>
113 | </html>
114 | 


--------------------------------------------------------------------------------