October CMS Leaflet Integration Plugin. This plugin allows you to place objects on a map with popup functionality.
Introduction
Leaflet is "an open-source JavaScript library for mobile-friendly interactive maps"
Supported
- Map
- Provider:
- Open Street Map
- Mapbox
- Layers:
- Marker
- Circle
- Polygon
- Popups
Example
This example is build on quick start example from leaflet.
You have to choose a provider (open street map or mapbox).
Open Street Maps
No configuration or special setup needed, just continue with create a new map
Mapbox
- You require an Mapbox account.
- Navigate to Classic -> Mapbox Editor Projects
- Create a new Mapbox Editor project
- After you choose the style, save the project
- In the projects overview, you'll see your project id, that is required later
- You also need an API access token. You can find it under Account -> API access token
Create a new map
- Navigate to Maps, in October CMS backend.
- Create a new map
- Choose a provider:
- If you use open street map, you have to do nothing
- For Mapbox: Insert a name and copy and paste your Mapbox project id and your API access token.
- After that you can add objects at the bottom.
- Possible parameters for objects can be found on Leaflet documentation.
Display map
- Open a cms page
- Add map component
- Select the map, that you want to display and set the properties.
- Include the
{% component 'map' %}in the CMS page. - Make sure to have
{% styles %}and{% scripts %}in template/layout.
Extending/Missing features
Feel free to ask for new features and object types. Additional providers are possible on request.
Installation via Command Line
php artisan plugin:install TimFoerster.Leaflet
Leaflet provides backend users the functionality to create maps and place objects on it with popups.
Usage
Choose a provider
Provider: Open Street Maps
No configuration needed
Provider: Mapbox
- Create a Mapbox account and create a map.
- Create a new map in October CMS backend page.
- Copy and paste your mapbox map id and API access token.
- Add new Objects to the map.
Display
- Insert the Map components to your CMS page.
- Select the map that you created before.
- Set the parameters
- Insert `{% component 'map' %} into your CMS page.
Models
Maps
Represents a single map with one provider with overlay objects on it.
Objects
Objects are related to a single map. Each object has one type. At this point of time, only three types are possible:
- Marker: Represents a single point on the map. The marker position is one LangLat attribute.
- Circle: It's an approximation and starts to diverge from a real circle closer to poles (due to projection distortion). It's important to set the radius parameter.
- Polygon: A class for drawing polygon overlays on a map. The position parameter is an array of LangLat coordinates for example
[-111.03, 41],[-111.04, 45],[-104.05, 45],[-104.05, 41]For all objects it is possible to attach an popup by leave the popup field not empty.
Component
The Map component has following attributes:
- Map: The map that will be displayed
- FieldId: Is the id of the div container in that the leaflet map will be initialized. This is useful to assign additional css rules.
- Height: The height of the div map container. Height can be in pixel or % value.
- Latitude / Longitude / Zoom: Defines the initial view of the map, more information can be found here.
-
nawt
Found the plugin useful on 18 Sep, 2019
Very very usefull app. I make 2 difference to work this plugin. 1st is change icon-marker path with add "." before url path in \plugins\timfoerster\leaflet\components\map\default.htm
var defaultIcon = L.icon({ iconUrl: './plugins/timfoerster/leaflet/assets/leaflet/images/marker-icon.png', iconRetinaUrl: './plugins/timfoerster/leaflet/assets/leaflet/images/marker-icon-2x.png', shadowUrl: './plugins/timfoerster/leaflet/assets/leaflet/images/marker-shadow.png',
second I had an error because of a relation not exeed. I add "else" in "if" part in core list.htm /**
-
Process a custom list types registered by plugins. */ protected function evalCustomListType($type, $record, $column, $value) { $plugins = PluginManager::instance()->getRegistrationMethodValues('registerListColumnTypes');
foreach ($plugins as $availableTypes) { if (!isset($availableTypes[$type])) { continue; } $callback = $availableTypes[$type]; if (is_callable($callback)) { return call_user_func_array($callback, [$value, $column, $record]); } } $customMessage = ''; if ($type === 'relation') { $customMessage = "Type: relation is not supported, instead use the relation property to specify a relationship to pull the value from and set the type to the type of the value expected."; }else throw new ApplicationException(sprintf('List column type "%s" could not be found. %s', $type, $customMessage));}
-
-
Tim author
Replied on 19 Sep, 2019
Thanks for your review. It should be fixed in version 1.0.9
-
Gibon
Found the plugin useful on 8 Jan, 2017
Hi, can you tell me how can I change this wonderful plugin to display one marker per page displayed?
I aim to have directory with companies, and want to display a map next to description on a single company listing page.
Now all the marks are displayed on one map, and making loads of maps is pointless i think.
Many thanks!
-
Tim author
Replied on 10 Jan, 2017
Hello Gibon,
I added for you the functionality to display only a single object on a map in the component. I hope it fits your needs.
Cheers, Tim
-
Hessel
Found the plugin useful on 30 Nov, 2016
Thank you this is great! I have one question, the marker image is not loaded, the path to the marker icon is incorrect. it is: example.com/marker-icon.png can you change the path to the plugin assets map?
Kind regards,
Hessel
-
Tim author
Replied on 1 Dec, 2016
Hey Hessel,
thanks for your review. Can you create a support ticket and include an image, because I'm unable to reproduce this problem.
Cheers, Tim
-
| 1.1.1 |
Updating to leaflet v1.9.3 Feb 16, 2023 |
|---|---|
| 1.1.0 |
Added option to disable scroll wheel zoom Feb 01, 2022 |
| 1.0.10 |
Swap out single quotes for backticks Feb 01, 2022 |
| 1.0.9 |
Fixing bug list column type "relation" Feb 01, 2022 |
| 1.0.8 |
Fixed bug that a map was not displayed when a table was added to a popup. Sep 07, 2017 |
| 1.0.7 |
Added Open Street Maps provider (new default provider) May 31, 2017 |
| 1.0.6 |
Added the option to display only one object on the map. Jan 10, 2017 |
| 1.0.5 |
!!! Added permissions to manage maps. Make sure to add the specifc permission to your users. Dec 13, 2016 |
| 1.0.4 |
Changed default marker icon Dec 01, 2016 |
| 1.0.3 |
Created table timfoerster_leaflet_objects Nov 25, 2016 |
| 1.0.2 |
Created table timfoerster_leaflet_maps Nov 25, 2016 |
| 1.0.1 |
Initialize plugin. Nov 25, 2016 |



