leaflet-color-markers

The standard Leaflet marker icon, but in different color variations, for simple use cases.

This is a modernized fork of patrickp-rthinfo/leaflet-color-markers, which is in turn a fork of pointhi/leaflet-color-markers. With this, the first commit to this project can be traced back to late 2013.

Note that the Leaflet marker icon is originally contributed to the Leaflet project, and is not the work of this library. The work here is to make that colored marker icon available in some additional colors for easier simple multi-color marker usages.

Install

via NPM:

npm install @vectorial1024/leaflet-color-markers

✔️ TypeScript definitions available as of 3.0.0.

Special Notice

This library is a successor of leaflet-color-markers. In particular, this library supports modern NodeJS import syntax, which is not supported by that library.

Demo

A demo is included in the same repo. It showcases a simple Leaflet map with colored markers from this package.

You may try it locally with the following steps:

1. Clone this repo
2. npm run build-demo
3. Open demo.html in your internet browser
4. See a minimally usable Leaflet map with a ring of colored markers in it

Example Code

Add a simple marker using the green icon template to a Leaflet map:

import { greenIcon } from "@vectorial1024/leaflet-color-markers";

// we assume the map is already defined
const map = L.map('theMap');

L.marker([51.5, -0.09], { icon: greenIcon }).addTo(map);

No extra CSS mess; it just works!

It even works with existing NodeJS frameworks very easily:

React Example with react-leaflet

import { greenIcon } from '@vectorial1024/leaflet-color-markers';

return (
    <MapContainer>
        <Marker position={[51.505, -0.09]} icon={greenIcon} />
    </MapContainer>
)

Angular Example with @bluehalo/ngx-leaflet

import { Component } from '@angular/core';
import { greenIcon } from '@vectorial1024/leaflet-color-markers';

@Component({
    imports: [LeafletDirective, LeafletLayersDirective],
})
export class AngularLeafletDemoMap {
    layers = [
        L.marker([51.505, -0.09], {
            icon: greenIcon
        })
    ];
}

Vue 3 Example with @vue-leaflet/vue-leaflet

<script setup>
import { greenIcon } from '@vectorial1024/leaflet-color-markers';
</script>

<template>
    <l-map>
        <l-marker :lat-lng="[51.505, -0.09]" :icon="greenIcon" />
    </l-map>
</template>

What about require()?

As of 3.0.0, support for CJS (require()) has been removed. We strongly recommend you migrate to use the standard ESM style (import, available since 2018) to handle dependencies.

For 2.x, if CJS (require()) is required, you can still do this:

// require() also works, but we recommend using the import if possible
const LCM = require("@vectorial1024/leaflet-color-markers");
const greenIcon = LCM.greenIcon;

Colors

Preset Colors

The color table for 3.x.

Note that some preset color names are reassigned during the 2.x to 3.x upgrade.

Legacy Name	Current Name	Preview	Color Availability	Notes
N/A	defaultIcon		3.0.0	Default color of the Leaflet marker
N/A	pinkIcon		3.0.0	-
redIcon	redIcon		2.0.0	-
orangeIcon	copperIcon		2.0.0	Reassigned because not actually orange
N/A	orangeIcon		3.0.0	Recolored for color accuracy
goldIcon	N/A	N/A	Deprecated	Ambiguous color; use yellowIcon instead
yellowIcon	yellowIcon		2.0.0	Recolored for color accuracy
N/A	limeIcon		3.0.0	-
greenIcon	greenIcon		2.0.0	-
N/A	turquoiseIcon		3.0.0	-
N/A	cyanIcon		3.0.0	-
blueIcon	blueIcon		2.0.0	-
N/A	ultramarineIcon		3.0.0	-
N/A	royalIcon		3.0.0	-
violetIcon	violetIcon		2.0.0	-
N/A	whiteIcon		3.0.0	-
N/A	lightGreyIcon		3.0.0	-
greyIcon	greyIcon		2.0.0	-
blackIcon	darkGreyIcon		2.0.0	Reassigned because not actually black
N/A	blackIcon		3.0.0	Recolored for color accuracy