diff --git a/README.md b/README.md index 34f18b2..62b044b 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,55 @@ # LeafletPro - Embed a Leaflet map (OpenStreetMap) on your website with ease + ![LeafletPro banner](https://raw.githubusercontent.com/initbiz/leafletpro-plugin/master/docs/leaflet-pro.png) -This is a repo of OctoberCMS plugin by [InIT.biz](https://init.biz). +## Introduction + +[OpenStreetMap](https://www.openstreetmap.org) is a collaborative project to create a free editable map of the world while [Leaflet](https://leafletjs.com/) is the leading open-source JavaScript library for mobile-friendly interactive maps. Quickly enhance the contact and location pages on your site with an informative and colourful map. + +## Installation + +You can install the plugin using any of the following methods: + +1. Install using [OctoberCMS marketplace](https://octobercms.com/plugin/initbiz-leafletpro) +1. Install using composer: `composer require initbiz/oc-leafletpro-plugin` +1. Clone the [GitHub repo](https://github.com/initbiz/oc-leafletpro-plugin) to `plugins/initbiz/leafletpro` directory of your project and run composer install in your project's directory + +The plugin will automatically install [maxhelias/php-nominatim](https://github.com/maxhelias/php-nominatim), which is used to query [Nominatim](https://wiki.openstreetmap.org/wiki/Nominatim) service. If you are going to use the Nominatim service, recall the [Nominatim usage policy](https://operations.osmfoundation.org/policies/nominatim/). + +## Embed the map + +You can embed a map using the Leaflet map component. + +![Leaflet map component](assets/img/leafletmap_component.png) + +As you see in the above screenshot you can specify a few parameters: + +- Longitude and latitude of the center of the map that is shown +- Initial zoom of the map +- Scroll protection to start zooming with scroll only after clicking the map +- Leaflet plugins - checkboxes for enabling Leaflet plugins for the component + +## Customize popup content + +![Custom marker popup with inIT.biz logo](assets/img/marker_with_initbiz_popup.png) + +The popup content is defined individually for every marker. By default, it's seeded with the content of `plugins/initbiz/leafletpro/models/marker/_default_popup_content.htm`. + +The partial can be easily overridden by creating the `_default_popup_content.htm` file in your theme in the `partials` directory. Remember that overriding the partial will not change current marker popups. This partial is used only as a seeder when popup content is empty while saving marker. + +## Cumulus integration + +The plugin is nicely integrated with the [Initbiz.CumulusCore](https://octobercms.com/plugin/initbiz-cumuluscore) plugin. + +1. When the cluster is created or updated (address changed), a marker is created or updated +1. When the cluster is selected in create marker view address is refreshed from cluster's address + +## Future plans -For full documentation visit [https://docs.init.biz/article/leaflet-pro](https://docs.init.biz/article/leaflet-pro) or go to [OctoberCMS's marketplace](https://octobercms.com/plugin/initbiz-leafletpro). +- Marker categories to filter markers on maps +- Single marker map +- Backend form widget for current lon / lat preview and for setting lon / lat using the map marker +- Easily configurable marker icons for markers and categories from the backend +- Add possibility to manage more than one marker by Cumulus clusters +- Pop up in backend with other possibilities for the same address (right now getting only the first element) +- Support Leaflet plugins diff --git a/assets/img/leafletmap_component.png b/assets/img/leafletmap_component.png new file mode 100644 index 0000000..8cd2d3f Binary files /dev/null and b/assets/img/leafletmap_component.png differ diff --git a/assets/img/marker_with_initbiz_popup.png b/assets/img/marker_with_initbiz_popup.png new file mode 100644 index 0000000..19baf04 Binary files /dev/null and b/assets/img/marker_with_initbiz_popup.png differ