116

Product support

Visit this product's website for support.

  • Added on Nov 29, 2016
  • Current version: 1.1.1
  • Platform Compatibility
    v3.x use latest
    v2.x use latest
    v1.x use latest
  • Created by
  • Public repository

Categories

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

  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 October CMS backend.
  2. Create a new map
  3. Choose a provider:
    1. If you use open street map, you have to do nothing
    2. For Mapbox: 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 bottom.
  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.
  5. 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.

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

  1. Create a Mapbox account and create a map.
  2. Create a new map in October CMS backend page.
  3. Copy and paste your mapbox map id and API access token.
  4. Add new Objects to the map.

Display

  1. Insert the Map components to your CMS page.
  2. Select the map that you created before.
  3. Set the parameters
  4. 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.
  • 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));

      }

  • author

    Replied on 19 Sep, 2019

    Thanks for your review. It should be fixed in version 1.0.9

  • 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!

  • 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

  • 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

  • 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