Bawbab Interactive Maps

Bawbab Interactive Maps lets you build intuitive, explorable digital maps for campuses, residential communities, commercial facilities, and business parks. Move beyond static images and let visitors search locations, explore layouts, and view detailed building or amenity information instantly.

The plugin integrates seamlessly with WordPress, allowing administrators to manage map content using familiar dashboard tools. Eliminate duplicate work by linking existing WordPress pages directly to map features to reuse your content automatically.

Features

• Explorable Interface: Search locations and view detailed building or amenity data.
• WordPress Integration: Manage all map content within your own website using standard WordPress tools. You own the data 100% in Bawbab Interactive Maps.
• Zero Duplication: Link existing pages directly to map markers to sync content.
• Highly Customizable: Complete control over installation, styling, and administration.
• External Links: A direct link at the bottom of the information panel routes users to the corresponding full WordPress page for deeper exploration.
• Fully Responsive: The interface fluidly adapts layout, menus, and controls across desktops, laptops, tablets, and phones.
• Future Roadmap: Planned updates include advanced campus routing, multi-floor indoor navigation, and native Google Maps directions integration.

External Services

This plugin relies on the third-party Google Maps JavaScript API to function. Below is the required disclosure regarding the data transmitted, its purpose, and the applicable legal agreements.

• Service Name: Google Maps JavaScript API
• Provider: Google LLC
• Purpose: This service is used to render interactive maps, geocode addresses, and handle map configurations within both the WordPress admin dashboard (block editor / admin screens) and on the public-facing frontend of your website.
• Data Transmitted: When a map is loaded, the user’s browser connects directly to Google’s servers. This transmits the user’s IP address, browser user-agent string, the URL of the page where the map is embedded, and any API keys configuration details.
• When Data is Sent: Data is sent automatically whenever a user interacts with the map block editor in the WordPress dashboard, or visits a webpage on the frontend that displays an interactive map generated by this plugin.
• Terms of Service: Read
• Privacy Policy: Read

User Guide

1. Data Importing & Maintenance

• How to Import: Select your target layer (Parcels, Buildings, Roads, or Land Use), choose your local GeoJSON file, and click import.
• Safe Updates: Re-importing updated GeoJSON files is non-destructive. It refreshes geometries and identifiers while preserving your custom descriptions, images, and linked pages.
• Clearing Layers: Warning! The “Clear Layer” button permanently wipes all geographic features and custom metadata linked to that specific layer.

2. Advanced Map Configuration

• Visual Styling: Toggle the global background map style (Road Map, Satellite, or Hybrid) and select an interface highlight accent color (Green, Blue, or Yellow).
• Google API Credentials: The plugin requires a Google Maps API Key and a Map ID. Generating your own via the Google Cloud Console offers independent quota management, usage tracking, and domain restriction security.

3. The Feature Editor (Edit Tools)

Manage individual feature metadata using a split-screen dashboard featuring a searchable directory on the left and an editing form on the right.
* Smart Organization: Map features are dynamically categorized into custom layout groups (e.g., specific apartment floor plans, studio models, or cottage styles).
* Advanced Filtering: Narrow down your assets using search bars or attribute filters to isolate specific unit types instantly.
* WordPress Page Syncing: Link any map feature directly to an existing WordPress page. The plugin automatically syncs the page title, text, image galleries, and embedded videos to eliminate duplicate content updates.
* Content Filtering: The plugin automatically sanitizes synchronized WordPress content. It strips layout-heavy elements like tables, buttons, forms, scripts, and iframes to keep the interactive map side drawer clean and focused.
* Display Overrides: Customize titles independently for the map interface without modifying the linked parent WordPress page name.
* Property Metadata: Input custom unit data including square footage, fireplace options, sunroom availability, and precise bathroom counts to display across map popups.
* Advanced Media Overrides: While Advanced Custom Fields (ACF) parameters pull media automatically, administrators can manually force custom video paths, swap specific floor plans from the Media Library, or toggle media visibility off entirely for individual markers.
* Dynamic Descriptions: Choose whether a marker’s custom summary completely overwrites the synchronized WordPress page text, or appends cleanly to the top of it for temporary promotions and renovation notes.
* Batch Processing: Edit multiple locations, adjust individual unit fields, and preview live location pins on a miniature embedded map simultaneously before pushing your changes live via a single batch save.

4. Shortcode & Block Integration

• Classic Editor Integration: Adds a dedicated “Map” utility icon directly into the tinyMCE editor toolbar to auto-inject your map shortcode configuration instantly.
• Layout Scaling: Maps display out-of-the-box at 100% available container width with an adjustable default viewport canvas profile height of 640px.
• Gutenberg Compatibility: Fully supports modern Block Editor placements alongside the legacy shortcode engine for seamless multi-theme integration.

5. Visitor Front-End Experience

The interactive map provides a modern, responsive layout that adapts to desktops, tablets, and mobile devices. Instead of navigating multiple webpages, visitors can visually browse your facility and view real-time building or amenity data.
* Multi-Method Search: Visitors can search directly by name via the top search bar to auto-center the map, or browse features grouped by custom categories (e.g., residential units, amenities, services).
* Familiar Map Controls: Supports standard panning, zooming, and selection.
* Geofencing Safeguards: Includes built-in geographic boundaries to prevent users from panning or zooming away from the designated campus extent.
* Multi-Level Buildings: Built-in floor selector allows users to switch between levels using buttons or mouse-wheel scrolling to filter floor-specific features.
* Layer Management: Visitors can toggle layers (buildings, roads, land use, markers) and adjust transparency to focus on specific data.
* Collapsible Legend: Explains map symbols and color-coding without cluttering the screen.
* Map Styles: Users can toggle freely between standard road maps and satellite views.
* Google Integration: Built-in support for native zoom, compass, and Street View.

6. The Information Panel Side-Drawer

Selecting any map feature opens a rich information panel compiled from custom map data and synced WordPress pages:
* Media Gallery: Supports full-screen photographs, floor plans, and promotional videos.
* Quick Specifications: Displays key property metadata like square footage, room counts, or specific amenities.
* Dynamic Descriptions: Merges map-specific notes with imported WordPress content seamlessly.

Technical Details

This plugin is built using modern WordPress block development standards and advanced GIS rendering engines. It utilizes the following core libraries and technologies:
* WordPress Block Editor (@wordpress/block-editor): Powers the user interface, block configurations, and side-panel inspector controls inside Gutenberg.
* WordPress Element (@wordpress/element): Provides the React abstraction layer used to mount map configurations and live preview engines seamlessly.
* WordPress Scripts (@wordpress/scripts): Drives the asset packaging, CSS/JS bundling, linting, and build system automation.
* Google Maps JavaScript API: Powers the dynamic front-end canvas layout, vector polygon renderings, layer overlays, and street views.
* View on GitHub
* Report Issues
* Follow Co-developer – Marcel Oketch
* Follow Co-developer – Corentin Sanchez

For deep technical setups, see the developer guide at the end of this documentation.

Developer Guide

Follow these steps to set up, modify, and run this plugin environment locally.

Prerequisites

Ensure you have the following installed on your machine:
* Node.js (LTS version recommended)
* NPM (comes packaged with Node.js)
* A local WordPress development environment (e.g., LocalWP, DevKinsta, or wp-env)
* A valid Google Maps JavaScript API Key and Map ID configured for domain-level testing

Dev Installation & Setup

1. Clone or move this plugin folder into your local WordPress installation directory:
   /wp-content/plugins/bawbab-interactive-maps
2. Open your terminal and navigate to the plugin root directory:
   cd /path/to/wp-content/plugins/bawbab-interactive-maps
3. Install the required development dependencies and packaging tools:
   npm install

Development Workflow

• Start Local Development Server: Run the watch script to automatically track and compile your code changes in real-time as you edit block sources.
  npm start
• Build for Production: Minify build distributions, optimize stylesheets, and prepare your plugin production package for deployment.
  npm run build
• Format Code: Automatically fix script formatting layout structures to align strictly with WordPress core styling standards.
  npm run format
• Lint JavaScript & CSS: Audit your code modules for warnings, logical bugs, and style violations before shipping updates.
  npm run lint:js
  npm run lint:css

Testing Changes

1. Activate the plugin via your local WordPress Admin Dashboard.
2. Add your Google Maps credentials under Map Settings → Settings.
3. Head to the Importer tab and run a test upload using a standard sample facility GeoJSON block file.
4. Open a post or page in the Gutenberg Editor, open the block inserter, and search for “Bawbab Interactive Map” to check the canvas preview rendering.