Skip to content

IvanSanchez/Leaflet.Marker.Stack

gh-pages
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

L.Marker.Stack & L.Icon.Chip

A client-side implementation of @CartoDB's idea of a stacked chips symbolizer.

Image of a few chip stacks with random data

This is composed of two parts:

  • L.Marker.Stack allows displaying several L.Icons on a stack top of each other, at the same L.LatLng.
  • L.Icon.Chip is a ellipse-shaped L.Icon.

L.Marker.Stack reference

Behaves like a L.Marker, but has the following options:

  • icons: Must be an Array of L.Icons. The order of the icons in the array defines the stacking order. This deprecates the icon property.
  • stackOffset: An instance of L.Point. Defines how many pixels each icon is offset from the previous one. The default is [0, -5], which means each icon is offset 5 pixels vertically towards the top (it is possible to make downward-facing stacks).
  • stackZOffset: An integer, affecting the z-index of the icons. Positive values display the last icon on top, negative values display the first icon on top. The default is a positive 1.

L.Icon.Chip reference

Behaves like a L.DivIcon, but has the following extra options:

Example

var stack = L.marker.stack(myCenter, {
	icons: [
		L.icon.chip({ color: 'red' }),
		L.icon.chip({ color: 'red' }),
		L.icon.chip({ color: 'blue' }),
		L.icon.chip({ color: 'lime' }),
	],
	stackOffset: [0, -5]
});

map.addLayer(stack);

Check out the live demos:

Legalese

"THE BEER-WARE LICENSE": ivan@sanchezortega.es wrote this file. As long as you retain this notice you can do whatever you want with this stuff. If we meet some day, and you think this stuff is worth it, you can buy me a beer in return.

About

A client-side implementation of CartoDB's "stacked chips" symbolizer

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published