WordPress plugin to create awesome marker cluster maps with OpenStreetMap (Leaflet)
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
_screenshots
gulp
src
.gitignore
CHANGELOG.md
LICENSE.txt
README.md
awesome-cluster-map.helper.php
awesome-cluster-map.pages.php
awesome-cluster-map.php
awesome-cluster-map.shortcodes.php
gulpfile.js
package.json

README.md

WordPress Plugin Awesome Cluster Map (OpenStreetMap, Leaflet)

WordPress plugin to create awesome marker cluster maps with OpenStreetMap (OSM). This plugin is build with Leaflet as OSM JavaScript library and Leaflet.markercluster and Leaflet.awesome-markers to cluster pretty markers. Additionally Leaflet-MiniMap is used for showing an overview map.

Setup

  • Install requirements requirements: npm install
  • Build JavaScript and CSS: gulp

Usage

Lets create a map with the initial center of the location 60.628 latitude and 6.41 longitude and add three markers to this map:

[cluster_map center="60.628,6.41" zoom=12 height="500px"]
60.62888,6.41035,glass,red,Beach Bar
60.62849,6.414089,leaf,blue,The new <a href="#example">Central Park</a>!
60.62919,6.41716,wrench,green,My first marker
[/cluster_map]

The markers are in CSV format:

  1. Latitude
  2. Longitude
  3. Icon (Bootstraps glyphicons, e.g. use glass)
  4. Color of the marker (e.g. red)
  5. Text for the popup

The three defined markers:

example_cluster_map

Clustered markers:

example_cluster_map

Options

Name Default Description
center "0,0" Initial center (latitude, longitude) of the map
zoom 3 Initial zoom of the map
height "500px" Height (CSS value) of the map
width "100%" Width (CSS value) of the map
line "false" "true" to connect markers by a line
minimap "true" "false" to hide overview map
ignoreDuplicates "true" Add only one marker instead of two identical