#85

Product support

Get help in the plugin support forum.

Categories

  • Developer Tools

H3 Leafletwidgets plugin

This is a Leaflet (http://leafletjs.com/) based map and geocoding plugin for OctoberCMS. The plugin uses OpenStreetMap tiles to render the map, and Google Maps API services for geocoding.

Description

  • This plugin is for developers, who need interactive (zoomable, searchable) map type backend fields in their plugins.
  • This plugin provides a new formwidget, which renders as an interactive (zoomable) map widget with an autocomplete search field, and returns a location information string in JSON format which can be saved and processed easily in the Model.
  • Apart from the latitude-longitude data the formwidget also stores reverse geocoding information about the placed marker (country, city, etc) both in a textual representation and a structured one.
  • It is possible to use any number of this formwidget on a backend form.
  • It is possible to copy and paste marker (and map zoom level) settings from one instance of the map widget to another

Installation

The plugin can be installed from the OctoberCMS Marketplace.

Settings

The plugin installs a new module in the Settings section, where the Google Maps API key (for the geocoding functionality, you can learn more about it and obtain one here) and the initial location that the map widget displays can be configured.

Usage

The formwidget can be defined in fields.yaml files using the h3locationselector type.

birth_location:
   label: 'myvendor.myplugin::lang.general.birth_location'
   type: h3locationselector

The field generates a JSON string upon save, similar to the following example (the language of the "components" and "text" sections depend on the browser settings, as Google Maps detects it automatically):

{
   "lat":47.5145057,
   "lng":19.078356600000006,
   "zoom":14,
   "components":{
      "route":"Hősök tere",
      "political":"VI. kerület",
      "locality":"Budapest",
      "country":"HU",
      "postal_code":"1068",
      "neighborhood":"Városliget",
      "administrative_area_level_2":"Budapest",
      "administrative_area_level_1":"Budapest",
      "establishment":"Hősök Tere"
   },
   "text":"Budapest, Hősök tere, 1146 Magyarország"
}

Notes

  • Due to technical limitations of the Leaflet JS library the map widgets only work correctly when placed on the first tab of backend forms (in case tabs are used).
1.0.1

Initialize plugin.

Oct 27, 2017