Skip to content

Vectorial1024/leaflet-color-markers

 
 

Repository files navigation

leaflet-color-markers

npm version npm downloads github link github stars github forks

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 marker icon available in more colors.

Install

via NPM:

npm install @vectorial1024/leaflet-color-markers

Special Notice

This library is a successor of leaflet-color-markers. That NPM library, for the lack of better words, actually does nothing.

Demo

A demo is included in the same repo. It showcases a simple Leaflet map with a colored marker 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 colored marker in it

demo image

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);

What about require()?

We recommend using the more modern ESM style (import) to handle dependencies, but 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

Color Marker Color Inside Color Outside
Blue Marker Blue #2A81CB #3274A3
Gold Marker Gold #FFD326 #C1A32D
Red Marker Red #CB2B3E #982E40
Green Marker Green #2AAD27 #31882A
Orange Marker Orange #CB8427 #98652E
Yellow Marker Yellow #CAC428 #988F2E
Violet Marker Violet #9C2BCB #742E98
Grey Marker Grey #7B7B7B #6B6B6B
Black Marker Black #3D3D3D #313131

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 92.4%
  • HTML 7.6%