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

Willy Bahuaud

<p>Nearby Map allow you to easily insert a Map into your content. With it, you can show a main location and every interesting places around it.</p>
<p>The map is dynamic. You can show to users the best way to travel from your main location to any other one.<br />
Nearby Map also includes SEO optimisation with Schema.org markup.</p>
<h4>Should I use Nearby Map ?</h4>
<p>Here’s a few example to show you what you can do with Nearby Map</p>
<ul>
<li>You’re planning an event, and you want to show every location involved in it (for example a wedding or a trip)</li>
<li>You own a camping or an hotel, and you want to show to every customer what’s around it</li>
<li>You are planning a seminar, and you want to give to everyone informations about restaurants and hotels for this event.</li>
<li>And everything else involving a map of course…</li>
</ul>
<h4>Features</h4>
<ol>
<li>It creates a custom post type to handle every location, with an easy metabox to enter every information about them.</li>
<li>It creates a nice map with custom markers and informations.</li>
<li>It adds a full interactive list of each place with more information for users.</li>
<li>Users have access to a navigation system betwen every location on the map.</li>
<li>for each place, Nearby Map creates a new page with more detail and geographical information</li>
</ol>
<h4>How does Nearby Map works ?</h4>
<p>Nearby Map does not use Google Map, beacause there is other good librairies :</p>
<ul>
<li><a href="http://leafletjs.com/" rel="nofollow ugc">Leaflet</a>, in order to create the map and every Location (under <a href="http://fr.wikipedia.org/wiki/Licence_BSD" rel="nofollow ugc">BSD open-source licence</a>)</li>
<li><a href="http://www.openstreetmap.org/" rel="nofollow ugc">OpenStreetMap</a>, to gather geograhpical information (under <a href="http://opendatacommons.org/licenses/odbl/" rel="nofollow ugc">Open Data Commons Open Database License</a>)</li>
<li><a href="http://cloudmade.com/" rel="nofollow ugc">CloudMade</a> to retrieve GPS coordinates, and in order to generate every route from one location to another <a href="http://creativecommons.org/licenses/by/2.0/" rel="nofollow ugc">Creative Commons Attribution 2.0 License</a></li>
<li>An <a href="http://fontello.com" rel="nofollow ugc">icon font</a> for every custom Markers (<a href="https://github.com/mapbox/maki/blob/gh-pages/LICENSE.txt" rel="nofollow ugc">maki, by MapBox (BSD)</a>,<a href="http://creativecommons.org/licenses/by-sa/3.0/" rel="nofollow ugc">Typicons, by Stephen Hutchings (CC BY-SA 3.0)</a> and <a href="http://creativecommons.org/licenses/by/3.0/" rel="nofollow ugc">Font Awesome, by Dave Gandy (CC BY 3.0)</a>)</li>
<li>For Pins Maps , i’ve drawn my inspiration from <a href="http://medialoot.com/item/free-vector-map-location-pins/" rel="nofollow ugc">those icons</a></li>
</ul>
<h4>Nearby Map is optimised for SEO</h4>
<p>When a map is displayed, structured data from <a href="http://schema.org/" rel="nofollow ugc">schema.org</a> is included for each location.</p>
<h4>An adaptable plugin</h4>
<p>Nearby Map has been created with custom hooks and filter : you can override every data and action to improve or adapt the plugin to suit your needs. <a href="https://wordpress.org/extend/plugins/nearby-map/faq/" rel="ugc">FAQ</a></p>


Nearby Map by Wabeo

Allow you to insert a map to show activities, places and services around a given geographical point.

Geo Masala vs Nearby Map by Wabeo