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

Nashir Uddin

Tarekul Islam

<p>Add a map on WordPress site with <a href="http://leafletjs.com/" rel="nofollow ugc">LeafletJS</a>: a leading  open-source JavaScript library for mobile-friendly interactive maps.<br />
Easy Map tiles are provided by default through <a href="http://www.openstreetmap.org/" rel="nofollow ugc">OpenStreetMap</a>, do not need an API Key.  or <a href="https://www.google.com/maps" rel="nofollow ugc">Google Map</a> with API Key or <a href="https://www.bing.com/maps" rel="nofollow ugc">Bing Map</a> with an API Key.<br />
Can be set map with manual and auto generated shortcode based on the dashboard settings.</p>
<h4>Easy Map</h4>
<p><strong>How to Add or Create Map with Multiple Locations,Polyline and Ploygons – Video Tutorial</strong></p>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/6aPZ3kxlQsg?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<h4>Key Features</h4>
<ol>
<li><strong>Zoom Control:</strong> Allow users to manage zoom control.</li>
<li><strong>Height:</strong> Allow users to adjust map height as per their preference.</li>
<li><strong>Popup Message:</strong> Users can added HTML and Media supported Marker Popup message.</li>
<li><strong>Zoom Control Position:</strong> Allow users to manage zoom control position.</li>
<li><strong>Scroll Wheel Zoom:</strong> Allow users to manage Scroll Wheel Zoom.</li>
<li><strong>Full Screen Control:</strong> Allow users to manage Full Screen Control.</li>
<li><strong>Tile Layer:</strong> Multiple tile layer supported.</li>
<li><strong>Locations:</strong> Unlimited location support.</li>
<li><strong>Drawings:</strong> Multiple Drawings option supported.</li>
<li><strong>Store Locator:</strong> Unlimited Store locator support.</li>
<li><strong>Gutenberg Block :</strong> Gutenberg Block editor supported.</li>
</ol>
<h4>Use Cases – Map Solution and Integration  for Every Business</h4>
<p>Easy Map helps you build advanced location maps for any industry/business. Here are some popular use cases powered by Google Maps or OpenStreetMap via Leaflet:</p>
<ul>
<li>Retail Store Locator – Showcase nearby outlets, branches, or chain locations  </li>
<li>Restaurant Locator – Help users find your cafes, diners, or food franchises  </li>
<li>Real Estate Property Map – Display properties locaions </li>
<li>Hospital & Clinic Map – Show medical centers, diagnostic labs & walk-ins  </li>
<li>Gym & Fitness Center Locator – Promote local gyms, yoga studios & wellness hubs  </li>
<li>Shopping Mall Directory – Build interactive directories with category filters  </li>
<li>Hotel & Resort Locator – List resorts, Hotel and vacation rentals by location  </li>
<li>Car Dealership Map – Map showrooms, service centers, and authorized dealers  </li>
<li>Bank & ATM Locator – Help customers locate ATMs and branches  </li>
<li>Pharmacy Finder – Display medical stores and pharmacy locations  </li>
<li>Salon & Spa Locator – Show salons, nail bars, and beauty spas nearby  </li>
<li>Barber Shop Locator – Map grooming centers, barbershops, and hair stylists  </li>
<li>School & University Maps – Display educational institutions  </li>
<li>Event Venue Locator – Help users find event halls, venues, and stadiums  </li>
<li>Cinema & Entertainment Map – List theaters, gaming zones, and arcades  </li>
<li>Museum & Art Gallery Locator – Showcase local exhibitions and museums  </li>
<li>Government Office Map – Map municipal offices, courts, or embassies  </li>
<li>Toy Store Locator – Promote branded or local toy stores  </li>
<li>Garden Center & Nursery Map – Help users find garden shops and nurseries  </li>
<li>Bookstore Locator – Showcase independent and chain bookstores  </li>
<li>Electronics Store Map – Map mobile, computer, and appliance retailers  </li>
<li>Clothing Store Locator – Help users find fashion outlets and boutiques  </li>
<li>Service Center Locator – Map repair centers for electronics, cars, or devices  </li>
<li>Legal & Consultancy Locator – List law firms, advisors, and service offices  </li>
<li>Insurance Office Map – Show agents, offices, and policy assistance centers  </li>
<li>Dealer & Warehouse Locator – Display regional warehouses and distributors  </li>
<li>Childcare & Preschool Finder – Help parents locate daycares and nurseries  </li>
<li>Supermarket & Grocery Store Map – Show supermarkets, mini-markets, or organic stores</li>
<li>Post Office & Courier Center Locator – Find shipping centers and drop boxes  </li>
<li>Religious Center Locator – Show churches, mosques, temples, or community halls  </li>
<li>Library Map – Display public and academic library locations  </li>
<li>Veterinary & Pet Store Map – Highlight vets, clinics, or pet supply stores  </li>
<li>Hardware & Home Services Map – Show electricians, repair centers, or hardware stores  </li>
<li>Co-working Space Locator – Help users find shared office spaces or business hubs  </li>
<li>Construction & Project Map – Showcase new projects or development plots  </li>
<li>Wine & Liquor Store Map – Find wine shops and liquor outlets</li>
<li>Outdoor & Sports Store Map – Locate gear shops, bike rental points, etc.</li>
</ul>
<h4>Pro Features</h4>
<ol>
<li><strong>Different Marker Icon:</strong> Add different color marker icon to map.</li>
<li><strong>Dynamic Locations:</strong> Select multiple locations from dropdown .</li>
<li><strong>Dynamic Drawing:</strong> Select multiple drawing from dropdown.</li>
<li><strong>Marker Cluster:</strong> Add Marker cluster in store locator.</li>
</ol>
<h4>Why Choose This Plugin?</h4>
<p><strong>Whether you are running a local shop or a global brand shop, Easy Map helps you build responsive maps for your business.</strong></p>
<ol>
<li><strong>User-Friendly Interface:</strong> Simple to configure and customize.</li>
<li><strong>Optimized for Performance:</strong> Lightweight and built to ensure fast loading times.</li>
<li><strong>Responsive Design:</strong> Fully compatible with all devices and screen sizes.</li>
</ol>
<p>Easily create a <strong>map</strong> with auto generated shortcode like:</p>
<pre><code>[easy-map ID="168"]
[easy-map-store-locator ID="1"]
[easy-map-marker ID="1"]
[easy-map-marker ID="2"]
[easy-map-drawing ID="1"]
</code></pre>
<p>Easily create a <strong>map</strong> with manual shortcode like:</p>
<pre><code>[easy-map]
[easy-map lat='37.2811806' lon='-122.0569443' ]
[easy-map lat='37.2811806' lon='-122.0569443' zoom='12']
[easy-map lat='37.2811806' lon='-122.0569443' zoom='12' popup='Silicon Valley']
[easy-map lat='37.2811806' lon='-122.0569443' zoom='12' tilelayer='google']
</code></pre>
<p>Easily create a <strong>map marker</strong> with latitude , longitude :</p>
<pre><code>[easy-map lat='23.010228300829105' lon='91.38879596106436' ]
[easy-map-marker lat=23.010228300829105 lon=91.38879596106436 popup='Dhaka']
</code></pre>
<h3>Support</h3>
<p>For support, feature request, or any inquiries, please email at <a href="nashirbabu@gmail.com" rel="nofollow ugc">nashirbabu@gmail.com</a></p>


Easy Map – Store Locator,Google Maps,OpenStreetMap,Leaflet

Interactive WordPress map plugin for OpenStreetMap and Google Maps with markers,store locator,polylines and polygons with auto generated Shortcodes.

Geo Masala vs Easy Map – Store Locator,Google Maps,OpenStreetMap,Leaflet