Gathering detailed insights and metrics for @rich-devtools/ts-overlapping-marker-spiderfier-leaflet
Gathering detailed insights and metrics for @rich-devtools/ts-overlapping-marker-spiderfier-leaflet
Typescript fork of https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet
1.0.11
TypeScript
33.34 kB
Installations
npm install @rich-devtools/ts-overlapping-marker-spiderfier-leafletDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
12.22.12
NPM Version
6.14.16
Releases
Unable to fetch releases
Languages
2
TypeScript
JavaScript
TypeScript (95.15%)
JavaScript (4.85%)
Developer
Draxare
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
9 Commits
1 Forks
1 Watchers
2 Branches
1 Contributors
Updated on Dec 26, 2024
Maintainers
1
Package Meta Information
Latest Version
1.0.11
Package Id
@rich-devtools/ts-overlapping-marker-spiderfier-leaflet@1.0.11
Unpacked Size
33.34 kB
Size
9.27 kB
File Count
11
NPM Version
6.14.16
Node Version
12.22.12
Published on
Dec 27, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Dev Dependencies
3
ts-overlapping-marker-spiderfier-leaflet
This is a fork of jawj's OverlappingMarkerSpiderfier-Leaflet, rewritten in TypeScript. It is inspired by chancezeus's ts-overlapping-marker-spiderfier but for leaflet. This version is designed for use with Angular and other Webpack-based systems. Added new listeners: mouseenter, mouseover
Table of Contents
Installation
To install this package, use npm:
1npm install ts-overlapping-marker-spiderfier-leaflet
Usage
Instead of binding itself to window you can
import {OverlappingMarkerSpiderfier} from 'ts-overlapping-marker-spiderfier-leaflet' and use the module as you would normally.
Other variants (umd, cjs, amd and browser) are provided using rollup and can be found in the dist folder. For
umd and browser the module will bind itself to the omsleaflet namespace, so accessing the module code can be done using
new omsleaflet.OverlappingMarkerSpiderfier... instead of new OverlappingMarkerSpiderfier....
Original Readme
Ever noticed how, in Google Earth, marker pins that overlap each other spring apart gracefully when you click them, so you can pick the one you meant?
And ever noticed how, when using the Leaflet API, the same thing doesn't happen?
This code makes Leaflet map markers behave in that Google Earth way (minus the animation). Small numbers of markers (yes, up to 8) spiderfy into a circle. Larger numbers fan out into a more space-efficient spiral.
The compiled code has no dependencies beyond Leaflet. And it's under 3K when compiled out of CoffeeScript, minified with Google's Closure Compiler and gzipped.
It's a port of my original library for the Google Maps API. (Since the Leaflet API doesn't let us observe all the event types that the Google one does, the main difference between the original and the port is this: you must first call unspiderfy if and when you want to move a marker in the Leaflet version).
Doesn't clustering solve this problem?
You may have seen the marker clustering libraries, which also help deal with markers that are close together.
That might be what you want. However, it probably isn't what you want (or isn't the only thing you want) if you have markers that could be in the exact same location, or close enough to overlap even at the maximum zoom level. In that case, clustering won't help your users see and/or click on the marker they're looking for.
Demo
See the demo map (the data is random: reload the map to reposition the markers).
Download
Download the compiled, minified JS source.
Or use it straight from cdnjs <script src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier-Leaflet/0.2.6/oms.min.js"></script>.
How to use
See the demo map source, or follow along here for a slightly simpler usage with commentary.
Create your map like normal (using the beautiful "Stamen watercolour OSM map":http://maps.stamen.com/#watercolor):
1var map = new L.Map('map_canvas', {center: new L.LatLng(51.505, -0.09), zoom: 13}); 2var layer = new L.StamenTileLayer('watercolor'); 3map.addLayer(layer);
Create an OverlappingMarkerSpiderfier instance:
1var oms = new OverlappingMarkerSpiderfier(map);
Instead of adding click listeners to your markers directly via marker.addEventListener or marker.on, add a global listener on the OverlappingMarkerSpiderfier instance instead. The listener will be passed the clicked marker as its first argument.
1var popup = new L.Popup();
2oms.addListener('click', function(marker) {
3 popup.setContent(marker.desc);
4 popup.setLatLng(marker.getLatLng());
5 map.openPopup(popup);
6});You can also add listeners on the spiderfy and unspiderfy events, which will be passed an array of the markers affected. In this example, we observe only the spiderfy event, using it to close any open InfoWindow:
1oms.addListener('spiderfy', function(markers) {
2 map.closePopup();
3});Finally, tell the OverlappingMarkerSpiderfier instance about each marker as you add it, using the addMarker method:
1for (var i = 0; i < window.mapData.length; i ++) { 2 var datum = window.mapData[i]; 3 var loc = new L.LatLng(datum.lat, datum.lon); 4 var marker = new L.Marker(loc); 5 marker.desc = datum.d; 6 map.addLayer(marker); 7 oms.addMarker(marker); // <-- here 8}
Docs
Loading
The Leaflet L object must be available when this code runs -- i.e. put the Leaflet API
Construction
1new OverlappingMarkerSpiderfier(map, options)`Creates an instance associated with map (an L.Map).
The options argument is an optional Object specifying any options you want changed from their defaults. The available options are:
1keepSpiderfied`* (default: `false`)
By default, the OverlappingMarkerSpiderfier works like Google Earth, in that when you click a spiderfied marker, the markers unspiderfy before any other action takes place.
Since this can make it tricky for the user to work through a set of markers one by one, you can override this behaviour by setting the keepSpiderfied option to true.
1nearbyDistance`* (default: `20`)
This is the pixel radius within which a marker is considered to be overlapping a clicked marker.
1circleSpiralSwitchover`* (default: `9`)
This is the lowest number of markers that will be fanned out into a spiral instead of a circle. Set this to 0 to always get spirals, or Infinity for all circles.
1legWeight`* (default: `1.5`)
This determines the thickness of the lines joining spiderfied markers to their original locations.
1Instance methods: managing markers`
Note: methods that have no obvious return value return the OverlappingMarkerSpiderfier instance they were called on, in case you want to chain method calls.
1addMarker(marker)
Adds marker (an L.Marker) to be tracked.
1removeMarker(marker)
Removes marker from those being tracked.
1clearMarkers()`
Removes every marker from being tracked. Much quicker than calling removeMarker in a loop, since that has to search the markers array every time.
1getMarkers()
Returns an Array of all the markers that are currently being tracked. This is a copy of the one used internally, so you can do what you like with it.
Instance methods: managing listeners
1addListener(event, listenerFunc)Adds a listener to react to one of three events.
event may be 'click', 'format', 'spiderfy' or 'unspiderfy'.
For 'click' events, listenerFunc receives one argument: the clicked marker object. You'll probably want to use this listener to do something like show an L.Popup.
For 'spiderfy' or 'unspiderfy' events, listenerFunc receives two arguments: first, an Array of the markers that were spiderfied or unspiderfied; second, an Array of the markers that were not. One use for these listeners is to make some distinction between spiderfied and non-spiderfied markers when some markers are spiderfied -- e.g. highlighting those that are spiderfied, or dimming out those that aren't.
1removeListener(event, listenerFunc)
Removes the specified listener on the specified event.
1clearListeners(event)
Removes all listeners on the specified event.
1unspiderfy()
Returns any spiderfied markers to their original positions, and triggers any listeners you may have set for this event. Unless no markers are spiderfied, in which case it does nothing. Be sure to call this before you call setLatLng on any tracked marker.
Properties
You can set the following properties on an OverlappingMarkerSpiderfier instance:
legColors.usual[mapType] and legColors.highlighted[mapType]
These determine the usual and highlighted colours of the lines.
You can also get and set any of the options noted in the constructor function documentation above as properties on an OverlappingMarkerSpiderfier instance.
License
This software is released under the MIT licence
No vulnerabilities found.
No security vulnerabilities found.