Plugin / Geo Masala

Description

Highly customizable Map Block for Gutenberg, based on Leaflet

• Customize the Map and its Features directly from within the Gutenberg Block
• Draw and edit Features. Markers, Lines, Polygons …
• Customize Feature-Appearance. Icon/Shadow, Color, Opacity, Class-Names …
• A Wysiwyg Editor to Edit the Popup-Content. Use Images/Videos/Audios inside the Popup-Content
• Customize the Map itself. Dimensions, Baselayers, Controls …
• Map Features are shareable and can be used between users and posts (depending on Features settings)

Geo Masala on GitHub.
It’s open-source, free as freedom, free of cost and it will remain free.

How to use

Edit any Post with gutenberg and add a ‘Geo Masala Map’ block, save post and done. Your post will display a map.

• Draw some Features or select some from the Feature-Panel.
  • The default Status for a new Feature is draft, only published ones are displayed in frontend.
  • To get Features from other posts/users, open Feature-Panel and adjust the Filters.
• Edit the Feature, change status, icon or color, change the popup content and title.
• Open the Map Settings Panel and customize the controls.
• Change the Feature sharing settings for a single Feature, and reuse the Feature in other Posts
• …

The Gutenberg Editor Plugin is required for WordPress versions prior to 5.0, see requirements

What is a Feature?

The term “Feature” is used in the cartographic context. A representation of a real-world object on a map (feature|Definition – Esri Support GIS Dictionary).
Within this plugin, a Feature can represent a simple location (Marker), a way/route/track (Polyline) or an Area (Polygon/Rectangle).
A couple of properties are stored with the Feature, eg. appereance and popup-content data.

How does the Plugin work?

A Feature is saved as a post type, and not saved to the Block!

• The Plugin registered a new custom-post-type ‘geom_feature’. Each geom_feature is used to store a single cartographic Feature, formatted in geoJSON. The cartographic Feature and other data (appearance, popup-content …) are stored as post-meta.
• The geom_feature is registered without wordpress ui (List table and editing screen) or appearance in admin-navigation or admin-bar.
• When editing any post with gutenberg, the ‘Geo Masala Map’ block displays a leaflet map and some settings-panels beneath it. All crud actions (create, read, update, delete) for geom_feature(s) are handled within the editor block using the wp rest api and its backbone client. All geom_feature crud actions are saved immediately (Some ui elements have reset/save buttons).
• default post_status for geom_feature(s) is ‘draft’.
• The Features-Panel lists geom_features. Features on Map are highlighted. If a Feature gets removed from map, the geom_feature is still saved and available to use.
• Therefor a Feature created by one post can be used in another post as well (depending on the individual feature settings). All changes made to a geom_feature are saved immediately and will effect all posts where the Feature is displayed.
• All attributes related to the map (and not to its features) are stored as block attributes.

In Development

The Plugin is in early development (and needs a sponsor to go on).
Some ui will change and more options will be added.

Coming soon hopefully:

• wiki and tutorials
• Possibility to draw routes on a map.
• Import for gpx/geoJSON/kml
• Method to add altitude and slope values for features
• Elevation profile for line/routes
• Color line/routes by z value or slope
• …

Known issues:

• Currently there is a maximum for hundred Features, will be changed in future.
• Feature Sharing: The popover control controls if the Feature appears in a Feature-Pool. If it is already in use somwhere, it will still be used, but just not displayed in Feature-Panel.

Contribute

• Most welcome 🙂
• Geo-Masala is free and open source. The source is hosted on GitHub. So dig the code as you like.
• For support, to request new plugin-features or inform me about issues and bugs create a new issue on Github or add a new topic to WP’s support forum
• Love to get your feedback, Create a new review and rate this Plugin, write a tutorial and tell your friends.
• Tell me your wishes, maybe get me a bowl of rice and some masala: Donate

I’m hungry, cycling around the world and Geo-Masala is coded while sitting wet in a tent during Monsoon somwhere in south himalaya. I appreaciate any kind of donation or sponsorship.

Thanks for beautiful ressoucres

• WordPress, the WP REST API, the Backbone JavaScript Client and the Gutenberg Editor and its components.
• Backbone, Backbone Marionette, Backbone Deep Model and Backbone Cocktail.
• React, react-virtualized and react-multi-select
• Leaflet and Plugins:
  • Leaflet Draw
  • Leaflet Draw Toolbar
  • Leaflet Geosearch
  • Leaflet Loading
  • Leaflet Providers
  • Leaflet Fullscreen
  • Leaflet Toolbar
• This Plugin is generated with generator-pluginboilerplate version 1.2.3
• Background for plugin banner and icon OpenTopoMap
• …