leaflet-canvas-markers-impr

一 A JavaScript Integrated 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

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 |