Octobercms Leaflet Integration Plugin

Introduction

Leaflet is "an open-source JavaScript library for mobile-friendly interactive maps"

Supported

• Map
• Provider:
  • Open Street Maps
  • Mapbox
• Layers:
  • Marker
  • Circle
  • Polygon
• Popups

Example

This example is build on quick start example from leaflet.

Open Street Maps

No configuration needed, continue with create a new map.

Mapbox

1. You require an Mapbox account.
2. Navigate to Classic -> Mapbox Editor Projects
3. Create a new Mapbox Editor project
4. After you choose the style, save the project
5. In the projects overview, you'll see your project id, that is required later
6. You also need an API access token. You can find it under Account -> API access token

Create a new map

1. Navigate to Maps, in Octobercms backend.
2. Create a new map
3. Insert a name and copy and paste your Mapbox project id and your API access token.
4. After that you can add objects at the buttom.
5. Possible parameters for objects can be found on Leaflet documentation.

Display map

1. Open a cms page
2. Add map component
3. Select the map, that you want to display and set the properties.
4. Include the {% component 'map' %} in the cms page.