MapLab Demo
MapLab is a lightweight location map extension for Joomla 5 and 6. Display an interactive, filterable map with a location card grid — dealers, agents, stockists, offices, or any collection of locations your visitors need to find. No Google API key, no jQuery, no dependencies.
Key Features
- Leaflet map — Interactive OpenStreetMap-powered map with no API key or billing account required
- Group filter buttons — Organise locations into groups and let visitors filter the map and card grid with a single click
- Location card grid — Responsive 4-column card grid below the map showing logo, company, address, phone, email, and website
- Marker popups — Click any pin to see full location details including a Google Maps link; markers change colour on hover and selection
- Module and menu item — Display your map as a module in any page position or as a full-page Joomla menu item
- Live database dropdowns — Map and default group selectors in module and menu item settings are populated directly from your data
- Marker colour picker — Choose your brand colour; pin hover and active states are generated automatically
- Fully responsive — Cards reflow from 4 columns down to 1 on mobile; map height is configurable
- Vanilla CSS and JS — No jQuery, no Bootstrap dependencies in the frontend output; all styles scoped to the map wrapper
Demo Login
Username
demo
Password
demo#1234
Getting Started
Using the Map (Front-end)
- Click View Front-end Demo above to see the map with sample locations
- Click a group filter button to filter the map markers and card grid simultaneously
- Click any marker on the map to open a popup with the location's full details
- Click Visit website or View on Google Maps in the popup to follow through
- Click All to return to the full location set
Managing Locations (Admin)
- Click Open Admin Panel and log in with the demo credentials
- Go to MapLab → Locations to see all locations — click a title to edit
- Go to MapLab → Groups to manage filter groups — the Locations column shows how many locations are in each group and links to the filtered list
Adding a Group
- Go to MapLab → Groups and click New
- Enter a Title (e.g. “North Island”) — the slug auto-fills and is used by the map filter
- Click Save & Close
- Reorder groups using the drag handle — the order here controls the order of filter buttons on the frontend
Adding a Location
- Go to MapLab → Locations and click New
- Enter a Title and assign a Group
- Fill in any contact details — Company, Contact, Phone, Email, Address, Website — all fields are optional
- Add a Logo by selecting an image from the Joomla media library
- Click the Coordinates tab and enter the decimal Latitude and Longitude (right-click any point in Google Maps to copy coordinates)
- Click Save & Close — the location will appear on the map immediately
Displaying the Map
- Go to System → Site Modules, click New, and choose MapLab — Map
- Select your map from the Map dropdown and configure height, card layout, and marker colour
- Assign the module to a position and choose which pages it appears on
- Alternatively, create a menu item and choose MapLab → Location Map as the type for a full-page map view