UNPKG

leaflet-canvas-markers-impr

Version:

Adding new image marker type CanvasMarker that is drawn directly onto HTML5 canvas.

39 lines (33 loc) 1.47 kB
> 一 A JavaScript Integrated [Leaflet](https://github.com/Leaflet/Leaflet) Map API # Leaflet-canvas-markers Adding all images to one canvas, together with the base L.CircleMarker! Fork of https://github.com/lipton-ice-tea/leaflet-canvas-markers with small modifications tailored to my needs. Differences: - usage of iconAnchor instead of offset - thereby rotating in respect to the iconAnchor, instead of the icon center - removal of the "direction arrow" functionality - es6 compatible syntax ## Base Usage ```javascript const map = L.map('map', {preferCanvas: true}).setView([51.505, -0.09], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); L.canvasMarker(L.latLng(51.495, -0.06), { radius: 20, img: { url: 'icon.png', //image link size: [40, 40], //image size ( default [40, 40] ) rotate: 10, //image base rotate ( default 0 ) iconAnchor: { x: 0, y: 0 }, //image offset ( default { x: 20, y: 20 } ) }, }).addTo(map); ## Options | Option | Type | Description | | --- | --- | --- | | `img` | `Object` | Image properties | ## Options img | Option | Type | Default | Description | | --- | --- | --- | --- | | `url` | `String` | | Image link | | `size` | `Array` | `[40, 40]` | Image size in map | | `rotate` | `Number` | `0` | Image rotate in map | | `iconAnchor` | `Object` | `{ x: 20, y: 20 }` | Image offset in Canvas |