jhotadhari

<ul>
<li>## Deprecated</li>
<li>This project is no longer active and not recommended for use.</li>
<li>It works with WordPress version < 5.0 and the gutenberg plugin. But it doesn’t work with any current version!</li>
<li>It is left here for reference</li>
</ul>
<p>Highly customizable Map Block for Gutenberg, based on Leaflet</p>
<ul>
<li>Customize the Map and its Features directly from within the <strong>Gutenberg Block</strong></li>
<li><strong>Draw and edit Features</strong>. Markers, Lines, Polygons …</li>
<li><strong>Customize Feature-Appearance</strong>. Icon/Shadow, Color, Opacity, Class-Names …</li>
<li>A <strong>Wysiwyg Editor</strong> to Edit the Popup-Content. Use <strong>Images/Videos/Audios</strong> inside the Popup-Content</li>
<li><strong>Customize the Map</strong> itself. Dimensions, Baselayers, Controls …</li>
<li>Map Features are shareable and can be used between users and posts (depending on Features settings)</li>
</ul>
<blockquote>
<p>Geo Masala on <a href="https://github.com/jhotadhari/geo-masala" rel="nofollow ugc">GitHub</a>.<br />It’s open-source, free as freedom, free of cost and it will remain free.</p>
</blockquote>
<h4>How to use</h4>
<p>Edit any Post with gutenberg and add a ‘Geo Masala Map’ block, save post and done. Your post will display a map.</p>
<ul>
<li>Draw some Features or select some from the Feature-Panel.
<ul>
<li>The default Status for a new Feature is draft, only published ones are displayed in frontend.</li>
<li>To get Features from other posts/users, open Feature-Panel and adjust the Filters.</li>
</ul>
</li>
<li>Edit the Feature, change status, icon or color, change the popup content and title.</li>
<li>Open the Map Settings Panel and customize the controls.</li>
<li>Change the Feature sharing settings for a single Feature, and reuse the Feature in other Posts</li>
<li>…</li>
</ul>
<blockquote>
<p>The <a href="https://wordpress.org/plugins/gutenberg/" rel="ugc">Gutenberg Editor Plugin</a> <strong>is required</strong> for WordPress versions prior to 5.0, see <a href="https://wordpress.org/plugins/geo-masala/#installation" rel="ugc">requirements</a></p>
</blockquote>
<h4>What is a Feature?</h4>
<p>The term “Feature” is used in the cartographic context. A representation of a real-world object on a map (<a href="https://support.esri.com/en/other-resources/gis-dictionary/term/dcc335be-78ae-4bd2-b254-b44c37343f75" rel="nofollow ugc">feature|Definition – Esri Support GIS Dictionary</a>).<br />
Within this plugin, a Feature can represent a simple location (Marker), a way/route/track (Polyline) or an Area (Polygon/Rectangle).<br />
A couple of properties are stored with the Feature, eg. appereance and popup-content data.</p>
<h4>How does the Plugin work?</h4>
<p>A Feature is saved as a post type, and not saved to the Block!</p>
<ul>
<li>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.</li>
<li>The geom_feature is registered without wordpress ui (List table and editing screen) or appearance in admin-navigation or admin-bar.</li>
<li>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).</li>
<li>default post_status for geom_feature(s) is ‘draft’.</li>
<li>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.</li>
<li>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.</li>
<li>All attributes related to the map (and not to its features) are stored as block attributes.</li>
</ul>
<h4>In Development</h4>
<p>The Plugin is in early development (and needs a sponsor to go on).<br />
Some ui will change and more options will be added.</p>
<p>Coming soon hopefully:</p>
<ul>
<li>wiki and tutorials</li>
<li>Possibility to draw routes on a map.</li>
<li>Import for gpx/geoJSON/kml</li>
<li>Method to add altitude and slope values for features</li>
<li>Elevation profile for line/routes</li>
<li>Color line/routes by z value or slope</li>
<li>…</li>
</ul>
<p>Known issues:</p>
<ul>
<li>Currently there is a maximum for hundred Features, will be changed in future.</li>
<li>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.</li>
</ul>
<h4>Contribute</h4>
<ul>
<li>Most welcome 🙂</li>
<li>Geo-Masala is free and open source. The source is hosted on <a href="https://github.com/jhotadhari/geo-masala" rel="nofollow ugc">GitHub</a>. So dig the code as you like.</li>
<li>For <strong>support</strong>, to <strong>request new plugin-features</strong> or inform me about <strong>issues and bugs</strong> <a href="https://github.com/jhotadhari/geo-masala/issues/new" rel="nofollow ugc">create a new issue on Github</a> or <a href="https://wordpress.org/support/plugin/geo-masala" rel="ugc">add a new topic to WP’s support forum</a></li>
<li>Love to get your <strong>feedback</strong>, <a href="https://wordpress.org/support/plugin/geo-masala/reviews/#new-post" rel="ugc">Create a new review and rate this Plugin</a>, write a tutorial and tell your friends.</li>
<li><a href="https://waterproof-webdesign.info/en/#contact" rel="nofollow ugc">Tell me</a> your wishes, maybe get me a bowl of rice and some masala: <a href="http://waterproof-webdesign.info/donate" rel="nofollow ugc">Donate</a></li>
</ul>
<blockquote>
<p>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 <a href="http://waterproof-webdesign.info/donate" rel="nofollow ugc">donation</a> or sponsorship.</p>
</blockquote>
<h4>Thanks for beautiful ressoucres</h4>
<ul>
<li>WordPress, the <a href="https://developer.wordpress.org/rest-api/" rel="nofollow ugc">WP REST API</a>, the <a href="https://developer.wordpress.org/rest-api/using-the-rest-api/backbone-javascript-client/" rel="nofollow ugc">Backbone JavaScript Client</a> and the <a href="https://wordpress.org/gutenberg/handbook/" rel="ugc">Gutenberg Editor</a> and its components.</li>
<li><a href="http://backbonejs.org/" rel="nofollow ugc">Backbone</a>, <a href="http://marionettejs.com/" rel="nofollow ugc">Backbone Marionette</a>, <a href="https://www.npmjs.com/package/backbone.deep-model" rel="nofollow ugc">Backbone Deep Model</a> and <a href="https://github.com/onsi/cocktail" rel="nofollow ugc">Backbone Cocktail</a>.</li>
<li><a href="https://reactjs.org/" rel="nofollow ugc">React</a>, <a href="https://github.com/bvaughn/react-virtualized" rel="nofollow ugc">react-virtualized</a> and <a href="https://github.com/khan/react-multi-select" rel="nofollow ugc">react-multi-select</a></li>
<li><a href="http://leafletjs.com/" rel="nofollow ugc">Leaflet</a> and Plugins:
<ul>
<li><a href="https://github.com/Leaflet/Leaflet.draw" rel="nofollow ugc">Leaflet Draw</a></li>
<li><a href="https://github.com/justinmanley/leaflet-draw-toolbar" rel="nofollow ugc">Leaflet Draw Toolbar</a></li>
<li><a href="https://github.com/smeijer/leaflet-geosearch" rel="nofollow ugc">Leaflet Geosearch</a></li>
<li><a href="https://github.com/ebrelsford/Leaflet.loading" rel="nofollow ugc">Leaflet Loading</a></li>
<li><a href="https://github.com/leaflet-extras/leaflet-providers" rel="nofollow ugc">Leaflet Providers</a></li>
<li><a href="https://github.com/brunob/leaflet.fullscreen" rel="nofollow ugc">Leaflet Fullscreen</a></li>
<li><a href="https://github.com/Leaflet/Leaflet.toolbar" rel="nofollow ugc">Leaflet Toolbar</a></li>
</ul>
</li>
<li>This Plugin is generated with <a href="https://github.com/jhotadhari/generator-pluginboilerplate" rel="nofollow ugc">generator-pluginboilerplate version 1.2.3</a></li>
<li>Background for plugin banner and icon <a href="http://opentopomap.org/" rel="nofollow ugc">OpenTopoMap</a></li>
<li>…</li>
</ul>


Geo Masala

Highly customizable Map Block for Gutenberg, based on Leaflet

hupe13

<p>Extends the WordPress Plugin <a href="https://wordpress.org/plugins/leaflet-map/" rel="ugc">Leaflet Map</a> with Leaflet Plugins and other functions.</p>
<h3>Functions</h3>
<ul>
<li>
<p>Create an elevation chart profile of a track. There are also acceleration, slope, speed and tempo chart profiles. You can also place multiple tracks on one map.</p>
</li>
<li>
<p>By default Leaflet Map uses tiles from openstreetmap.org or from the tile servers you configured. You can use more and switch between them.</p>
</li>
<li>
<p>Many markers on a map become confusing. You can cluster and shape them.</p>
</li>
<li>
<p>You can use Awesome markers.</p>
</li>
<li>
<p>You can group the elements on the map by criteria and show/hide them.</p>
</li>
<li>
<p>Create an overview map with geo-locations provided in the pages and posts.</p>
</li>
<li>
<p>Get a tooltip when hovering over an element.</p>
</li>
<li>
<p>You can design a choropleth map.</p>
</li>
<li>
<p>You can display the map in fullscreen mode.</p>
</li>
<li>
<p>Reset the map.</p>
</li>
<li>
<p>Gesture handling</p>
</li>
<li>
<p>Manage your files for Leaflet Map.</p>
</li>
<li>
<p>Help to migrate from <a href="https://wordpress.org/plugins/wp-gpx-maps/" rel="ugc">WP GPX Maps</a>.</p>
</li>
<li>
<p>and more functions.</p>
</li>
</ul>
<h3>Included Leaflet Plugins and fonts</h3>
<h4>Leaflet Plugins</h4>
<ul>
<li><a href="https://github.com/Raruto/leaflet-elevation" rel="nofollow ugc">leaflet-elevation</a>: A Leaflet plugin that allows to add elevation profiles using d3js.</li>
<li><a href="https://github.com/makinacorpus/Leaflet.GeometryUtil" rel="nofollow ugc">Leaflet.GeometryUtil</a></li>
<li><a href="https://github.com/yohanboniface/Leaflet.i18n" rel="nofollow ugc">Leaflet.i18n</a>: Internationalisation module for Leaflet plugins.</li>
<li><a href="https://github.com/Raruto/leaflet-rotate" rel="nofollow ugc">leaflet-rotate</a>: A Leaflet plugin that allows to add rotation functionality to map tiles</li>
<li><a href="https://github.com/makinacorpus/Leaflet.AlmostOver" rel="nofollow ugc">Leaflet.AlmostOver</a>: This plugin allows to detect mouse click and overing events on lines, with a tolerance distance.</li>
<li><a href="https://www.npmjs.com/package/@tmcw/togeojson" rel="nofollow ugc">@tmcw/togeojson</a>: Convert KML, GPX, and TCX to GeoJSON.</li>
<li><a href="https://github.com/d3/d3" rel="nofollow ugc">D3</a>: Data-Driven Documents</li>
<li><a href="https://github.com/leaflet-extras/leaflet-providers" rel="nofollow ugc">Leaflet-providers</a>: An extension that contains configurations for various tile providers.</li>
<li><a href="https://github.com/dayjournal/Leaflet.Control.Opacity" rel="nofollow ugc">Leaflet.Control.Opacity</a>: Makes multiple tile layers transparent.</li>
<li><a href="https://github.com/Leaflet/Leaflet.markercluster" rel="nofollow ugc">Leaflet.markercluster</a>: Provides Beautiful Animated Marker Clustering functionality.</li>
<li><a href="https://github.com/adammertel/Leaflet.MarkerCluster.PlacementStrategies" rel="nofollow ugc">Leaflet.MarkerCluster.PlacementStrategies</a>: Styling Markerclusters.</li>
<li><a href="https://github.com/coryasilva/Leaflet.ExtraMarkers" rel="nofollow ugc">Leaflet.ExtraMarkers</a>: Shameless copy of Awesome-Markers with more shapes and colors.</li>
<li><a href="https://github.com/hupe13/leaflet-list-markers" rel="nofollow ugc">Leaflet List Markers</a>: A Leaflet Control for listing visible markers in the map.</li>
<li><a href="https://github.com/ghybs/Leaflet.FeatureGroup.SubGroup" rel="nofollow ugc">Leaflet.FeatureGroup.SubGroup</a>: Grouping of Leaflet elements by options and features.</li>
<li><a href="https://github.com/jjimenezshaw/Leaflet.Control.Layers.Tree" rel="nofollow ugc">Leaflet.Control.Layers.Tree</a>: A Tree Layers Control for Leaflet.</li>
<li><a href="https://github.com/stefanocudini/leaflet-search" rel="nofollow ugc">Leaflet Control Search</a>: Search Markers/Features location by option or custom property.</li>
<li><a href="https://github.com/timwis/leaflet-choropleth" rel="nofollow ugc">leaflet-choropleth</a>: Choropleth plugin for Leaflet (color scale based on value).</li>
<li><a href="https://github.com/torfsen/leaflet.zoomhome" rel="nofollow ugc">leaflet.zoomhome</a>: Provides a zoom control with a “Home” button to reset the view.</li>
<li><a href="https://github.com/brunob/leaflet.fullscreen" rel="nofollow ugc">leaflet.fullscreen</a>: Simple plugin for Leaflet that adds fullscreen button to your maps.</li>
<li><a href="https://github.com/Raruto/leaflet-gesture-handling" rel="nofollow ugc">Leaflet.GestureHandling</a>: A Leaflet plugin that allows to prevent default map scroll/touch behaviours.</li>
<li><a href="https://github.com/Turfjs/turf" rel="nofollow ugc">turf</a>: Advanced geospatial analysis for browsers and Node.js</li>
</ul>
<h4>Font</h4>
<ul>
<li><a href="https://fontawesome.com/download" rel="nofollow ugc">Font Awesome 6</a></li>
</ul>
<h3>Documentation</h3>
<p>Detailed documentation and examples in <a href="https://leafext.de/" rel="nofollow ugc">German</a> and <a href="https://leafext.de/en/" rel="nofollow ugc">English</a>.</p>
<h3>Thank you</h3>
<p>Many thanks to everyone who found errors and provided ideas for new functions.</p>


Extensions for Leaflet Map

Resolves many issues that come up with using the Leaflet Map plugin.  Developer is highly responsive, knowledgeable, and helpful.  Thanks!

- author of Leaflet Map plugin

Highly recommended!

Extends the WordPress Plugin Leaflet Map with Leaflet Plugins and other functions.

Geo Masala vs Extensions for Leaflet Map