maplibre-randomize-overlapping-markers
v1.0.17
Published
A MapLibre GL plugin to randomize overlapping markers on the map.
Downloads
28
Maintainers
albertmapsReadme
maplibre-randomize-overlapping-markers
Overview
maplibre-randomize-overlapping-markers is a module designed to handle the randomization of overlapping markers on a MapLibre map. This helps in improving the visualization of densely packed markers by spreading them out randomly to avoid overlap.
Features
- Randomizes the position of overlapping markers.
- Easy integration with MapLibre maps.
- Customizable randomization parameters.
Installation
You can include the module directly in your HTML file using a CDN.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.js"></script>
<script src="https://www.npmjs.com/package/[email protected]"></script>Usage
Here is a simple example of how to use the maplibre-randomize-overlapping-markers script in vanilla JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MapLibre Randomize Overlapping Markers Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.js"></script>
<script src="https://www.npmjs.com/package/[email protected]"></script>
<style>
#map {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// Initialize the map
const map = new maplibregl.Map({
container: 'map', // container ID
style: 'https://demotiles.maplibre.org/style.json', // style URL
center: [0, 0], // starting position [lng, lat]
zoom: 2 // starting zoom
});
// Add markers to the map
const markers = [
new maplibregl.Marker().setLngLat([0, 0]).addTo(map),
new maplibregl.Marker().setLngLat([0.001, 0.001]).addTo(map),
new maplibregl.Marker().setLngLat([0.002, 0.002]).addTo(map)
];
// Randomize overlapping markers
randomizeMarkers(markers);
</script>
</body>
</html>This example demonstrates how to initialize a MapLibre map, add markers to it, and then use the randomizeMarkers function to randomize the positions of overlapping markers.