Locations and Areas – Leaflet Map with Region Tabs

Description

An awesome map with features like: multiple regions as tabs, no API keys needed, frontend location adding, marker clustering & beautiful map and marker styles.

What does it do?

An awesome map with features like: multiple regions as tabs, no API keys needed, frontend location adding, marker clustering & beautiful map and marker styles.

Look at the Demo and use-cases here. You can even add your own locations right away. Give it a try!

Showcase widely distributed locations on a single map with additional navigation tabs for regions. The map is based on Leaflet JS and offers you several free map styles. So you do not need an API Key, Access Token or any other external registration. There are no API request limits.

Adding locations is as simple as dropping a location marker on a map. You can search for addresses worldwide to quickly find the right spots. Use the Gutenberg Block to integrate your map or place the shortcode anywhere on your site. Close by locations will group together in clusters. This is optional.

🎅✨ The PRO Version now has a free 7-day trial period. No credit card required!

Let your visitors «fly» back and forth between widely distributed locations with the additional area navigation

Make use of Areas (Regions) to provide different focus points to your visitor.

Your visitors can add locations directly inside the map (frontend) [PRO Feature]

Just by clicking a «+»-Button a form will popup to let them enter location details the same comfortable way you do it in the backend. After submit the location proposal will be «pending» and wait for your review approval to get published.

List of free Features:

  • based on Leaflet
  • no API Keys
  • multiple map styles
  • multiple marker styles
  • locations with images
  • Shortcode with optional attributes
  • Gutenberg Block
  • marker clustering

PRO Features 🚀🚀🚀:

  • Frontend adding
  • Admin approval for pending locations
  • custom «Thank you»-message
  • More beautiful map styles
  • More marker icon styles
  • Direct support from the developer
  • Access all future PRO features
  • Request for features

A possible use case:

You have offices in Europe, Asia and North America and don‘t want to include a whole world map or three separate maps for that. This plugin let‘s you set multiple focus areas within one map. Your visitors will switch (literally ”fly”) between your focus areas just by clicking the links on top of the map.

Another use case:

You have several stores in different cities. Your site visitors will be able to ”fly” between the cities to get an overview of the exact locations inside every city. You can set the zoom level for every area individually.

…and another use case:

You want to build a map service where your visitors can add locations on their own. This could be a travel blog or a something like our map with 500+ kite and windsurfing spots worldwide.

**The possibilities are endless. We are very curious about what you are building with the help of our plugin. Please don’t hesitate to let us know or ask for feature requests in the support forum. As this plugin is under permanenent development we are keen to know what are the features that you need? Contact us!

Screenshots

  • Lass deine Nutzer zwischen den Regionen (Areas) "hin- und herfliegen" um einen Überblick über deine Locations zu bekommen.
  • Detailinformationen zur Location
  • Nutze Marker-Clustering für Locations die nah beieinander liegen
  • Neue Layout Variante: vertikale Areas Navigation
  • Location bearbeiten
  • Area bearbeiten
  • Plugin Einstellungen
  • Integriere die Karte mit dem Gutenberg Block Editor.
  • Oder wie wäre es mit einem dunklen Map Style?
  • Use-Case: Eine Karte mit 500+ Kite- und Windsurfing Spots weltweit
  • Add locations from the frontend (PRO Version)
  • Let your site visitors submit a location. You will approve it before it's published. (PRO Version)

Blocks

This plugin provides 1 block.

  • Locations and Areas - Leaflet Map with Region Tabs

Installation

Im WordPress Backend

  1. Gehe zu Plugins > Installieren
  2. Suche nach “Locations and Areas”
  3. Installiere und aktiviere Locations and Areas auf deiner Plugins-Seite.
  4. Klicke auf den neuen Menüpunkt «Locations» und erstelle deine erste Location!
  5. Benutze den Gutenberg Block «Locations and Areas Karte» (Kategorie «Widgets») oder nutze einfach den Shortcode [locations-and-areas-map] um die Karte auf deiner Website anzuzeigen.

FAQ

Benötige ich einen API Key oder irgendeine Registrierung?

Nein, das Plugin basiert auf dem freien Kartendienst Leaflet.js und benötigt deshalb keinerlei Art von Registrierung oder API Keys.

Wie integriere ich die Karte?

Nutze den Gutenberg Block «Locations and Areas Karte» oder integrieren einfach den Shortcode [locations-and-areas-map] in deinem Text. Alternativ kannst du den Shortcode auch via PHP in deinem Template einbauen:

echo do_shortcode("[locations-and-areas-map]")

you can also override the initial map focus with shortcode attributes:

[locations-and-areas-map lat="51.50665732176545" long="-0.12752251529432854" zoom="13"]

Can I set the initial map position individualy?

If you want to override the initial map focus (settings) just use the shortcode with attributes:

[locations-and-areas-map lat="51.50665732176545" long="-0.12752251529432854" zoom="13"]

Benötige ich GPS Koordinaten?

No. Add a new location or define an area view simply by droping a marker on the map. You can search for addresses as well. If you want to use GPS coordinates though, there is an option for that.

Kann ich den Gutenberg Block Editor nutzen?

Ja, du findest den «Locations and Areas Karte»-Block unter der Kategorie «Widgets».

Kann ich Areas auch vertikal (als Sidebar) anzeigen?

Ja, du kannst in den Plugin-Einstellungen jetzt aus verschiedenen Layouts wählen.

Kann ich Marker-Clustering nutzen?

Ja, das ist standardmäßig aktiviert. Du kannst es allerdings in den Einstellungen auch deaktivieren.

Kann ich eigene CSS Styles verwenden?

Ja, unbedingt! Unser Plugin wurde von Entwicklern für Entwickler gemacht. Du kannst die .locations-and-areas Klasse einfach überschreiben um dein eigenes Design umzusetzen.

Ich habe einen Vorschlag zur Verbesserung des Plugins.

Unbedingt! Du kannst das Support Forum nutzen um uns deine Ideen mitzuteilen, die das Plugin noch besser machen.

Reviews

26. Oktober 2020
I'm ussing this plugin instead "WP Store Locutor" because the google api restrictions with the payment method, this plugin is using openstreet maps. Is very simple to use, just put latitude and longitude data from your location to make the marker point on the map and that it's all.
29. September 2020
It does what is says without issues. Wish there would be an option for vertical tab display. Sometimes the tabs don't fit, especially when there are too many locations to display.
Read all 5 reviews

Contributors & Developers

“Locations and Areas – Leaflet Map with Region Tabs” is open source software. The following people have contributed to this plugin.

Contributors

“Locations and Areas – Leaflet Map with Region Tabs” has been translated into 8 locales. Thank you to the translators for their contributions.

Translate “Locations and Areas – Leaflet Map with Region Tabs” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.7.0

  • better responsive styles for small screens
  • better initial map position when adding another location
  • better frontend form
  • escaping single quotes from HTML input
  • new feature: use shortcode attributes to set initial map focus
  • Verbesserungen im Code.

1.6.9

  • Code optimization
  • better style & wording for opt in screen

1.6.8

  • Code optimization
  • Style & Wording optimization

1.6.7

  • Add «Getting started» notice

1.6.6

  • Added 7-day trial to PRO version

1.6.5

  • BUGFIX: JS compatibility error with Gravity Forms

1.6.4

  • Textanpassungen

1.6.3

  • Major release of the PRO version
  • Feature: more map styles and visual selector
  • Feature: multiple marker icon styls and visual selector
  • PRO Feature: Let your visitors add locations directly in the map. They will be public after your approval.
  • PRO Feature: More custom map styles
  • PRO Feature: More marker icon styles
  • Basic code refactoring

1.5.6

  • Feature: Add link to Google Maps for address (optional)

1.5.5

  • Bugfix: Location CPT

1.5.4

  • Marker-Cluster Optionen optimiert

1.5.3

  • Feature: Gesture handling für Touch Devices
  • Feature: Marker-Clustering (optional)
  • Neues Standard Marker Icon
  • Stadia maps durch «CartoDB.DarkMatter» Karte ersetzt

1.5.2

  • Bugfix: JS Fehler im Gutenberg Editor

1.5.1

  • Styles optimiert
  • Plugin umbenannt in «Locations and Areas»

1.5.0

  • FEATURE: nutze eine Karte um Locations und Areas visuell hinzuzufügen (GPS Koordinaten gibt es weiterhin als Option)
  • Post Type optimiert
  • Code Struktur optimiert

1.4.6

  • Cache Busting
  • Beheben eines Fehlers mit Pagespeed Optimierungsplugins
  • Verbesserungen im Code.

1.4.5

  • Bugfix Bildvorschau

1.4.4

  • Bugfix Media Uploader

1.4.3

  • FEATURE: Bilderupload für Locations
  • Styleverbesserungen am Location Popup
  • Adresse anzeigen (optional)
  • Bugfix: Startpunkt der Karte

1.4.2

  • Kompatibilität zu WordPress 5.8
  • Default Kartenstil hinzugefügt
  • FEATURE: Hinweis zum Freischalten von drei zusätzlichen Kartenstilen
  • Textanpassungen

1.4.1

  • FEATURE: Gib uns etwas Feedback und schalte damit drei brandneue Kartenstile frei.
  • Vorschau für Kartenstile auf der Einstellungsseite.
  • beheben eines Bugs bei der Gutenberg Block Übersetzung
  • Verbesserungen im Code.

1.4.0

  • FEATURE: nutze den neuen Gutenberg Block um die Karte zu integrieren
  • Verbesserungen im Code.

1.3.0

  • PHP 5.6 Kompatibilität sichergestellt

1.2.1

  • Schreibfehler korrigiert

1.2.0

  • FEATURE: vertikale Areas Navigation ist jetzt verfügbar (neue Einstellung «Layout»)
  • Übersetzungen laufen jetzt vollständig via translate.wordpress.org
  • Verbesserungen im Code.

1.1.0

  • Versehentliches Zoomen durch Scroll-Gesten verhindert
  • Verbesserungen im Code.
  • Stellt die Kompatibilität mit der aktuellen WordPress-Version sicher

1.0.3

  • BUGFIX: Karte lädt nicht, wenn Inline Caching aktiviert ist (Kompatibilität mit Caching Plugins)
  • BUGFIX: fehlende Koordination bei Areas

1.0.2

  • changes in readme, title, icon, description

1.0.1

  • changes in readme and description

1.0

  • manage locations as CPT
  • manage areas as taxonomy
  • choose map style
  • areas are optional
  • provide shortcode