Toolset Maps – custom layers and styles for OpenStreetMap
Toolset has officially introduced OpenStreetMap (OSM) integration in its latest Toolset Maps plugin release (version 1.6.19). According to their official announcement, this long-awaited update allows WordPress developers to break free from costly mapping platforms like Google Maps or Azure Maps.
Instant Activation, No API Keys Needed
One of the biggest advantages of this update is the simplicity of activation. With just one click—by selecting OpenStreetMap as your provider in Toolset Maps settings—you’re ready to go. There’s no need to register for APIs, configure billing accounts, or navigate complicated credential systems. It’s an instant plug-and-play experience, and your existing maps will automatically begin using OSM without needing to modify your Views or page configurations.
Pros: Free, Open, and Easy
Here’s why this change is great news for WordPress users:
-
Completely free: No hidden fees or usage limits like those imposed by Google Maps.
-
No API key hassle: Eliminate long and boring setup procedures.
-
Immediate activation: Just change the provider and it works right away.
-
More privacy-friendly: Avoid using corporate tracking-based services.
Cons: Fewer Features Out of the Box
However, the integration isn’t without limitations. Compared to Google Maps, some advanced features are not available by default:
-
No satellite view toggle.
-
No configurable default zoom level.
-
No styled map themes or roadmaps.
-
Limited built-in customization options.
At the time of writing, Toolset has not yet released official documentation on how to customize OSM maps within Toolset Maps. While OpenStreetMap is a flexible platform with plenty of third-party tutorials, the main issue lies in accessing the map instance created by Toolset in order to apply those customizations.
How to Customize Toolset’s OSM Maps
Toolset support has addressed this challenge directly. In this forum post, they explain how to “capture” the Leaflet.js map instance used by Toolset, which is essential for adding custom layers or features like a satellite toggle button or road overlays.
Example: Satellite, Towns, Borders and Road Layers Toggle
Here’s a practical example of how to implement a custom map with both satellite view and a road layer toggle:
Below is the code example, which you can include in a Custom Template or directly within a Toolset View:
[wpv-map-render map_id="map-1" map_width="100%" map_height="550" marker_icon="https://wp-customtypes.com/wp-content/uploads/my-marker.png"][/wpv-map-render] <button class="btn-satellite" type="button">Satellite</button>
jQuery(document).ready(function () {
let satelliteLayer = null;
let labelsLayer = null;
let roadsLayer = null;
let satelliteVisible = false;
// Create satellite, labels, and roads layers (but do not add them to the map yet)
function createMapLayers(map) {
satelliteLayer = L.tileLayer(
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri'
});
labelsLayer = L.tileLayer(
'https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Labels © Esri',
pane: 'overlayPane'
});
roadsLayer = L.tileLayer(
'https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Roads © Esri',
pane: 'overlayPane'
});
}
// Toggle between satellite and default map view
function toggleSatellite(map) {
if (!satelliteLayer || !labelsLayer || !roadsLayer) {
createMapLayers(map);
}
if (satelliteVisible) {
map.removeLayer(satelliteLayer);
map.removeLayer(roadsLayer);
map.removeLayer(labelsLayer);
jQuery('.btn-satellite').removeClass('active');
jQuery('.leaflet-pane.leaflet-tile-pane').removeClass('satellite-gray');
satelliteVisible = false;
} else {
satelliteLayer.addTo(map);
roadsLayer.addTo(map);
labelsLayer.addTo(map);
jQuery('.btn-satellite').addClass('active');
jQuery('.leaflet-pane.leaflet-tile-pane').addClass('satellite-gray');
satelliteVisible = true;
}
}
// Get the Toolset map object by map ID
function getMap() {
return WPViews?.view_addon_maps?.maps?.['map-1'] || null;
}
// Handle satellite toggle button click
jQuery('.btn-satellite').on('click', function () {
const map = getMap();
if (map) toggleSatellite(map);
});
// Restore satellite view if it was active after AJAX update
function restoreSatelliteIfActive() {
const map = getMap();
if (map && satelliteVisible) {
if (!satelliteLayer || !labelsLayer || !roadsLayer) {
createMapLayers(map);
}
satelliteLayer.addTo(map);
labelsLayer.addTo(map);
roadsLayer.addTo(map);
jQuery('.btn-satellite').addClass('active');
}
}
// When Toolset View filters update
jQuery(document).on("js_event_wpv_parametric_search_results_updated", restoreSatelliteIfActive);
// When Toolset pagination completes
jQuery(document).on("js_event_wpv_pagination_completed", function () {
restoreSatelliteIfActive();
jQuery('html, body').animate({ scrollTop: 900 }, 'fast');
});
// Wait for map to load before doing anything
setTimeout(() => {
if (getMap()) {
// Map is ready
}
}, 1000);
});
/* btn-satellite CSS */
.btn-satellite, .btn-satelite:focus {
position: absolute;
bottom: 10px;
left: 10px;
background: white !important;
color: black !important;
z-index: 999;
padding: 15px;
}
.btn-satellite.active {
background-color: lightgray !important;
}
.btn-satellite:hover {
background-color: #f4f4f4 !important;
}
You can also easily style the map with custom CSS, giving you greater control over its appearance to match your website’s branding or design.
For example, you can apply a “silver style” effect using a grayscale filter:
/* Map Style */
.leaflet-pane.leaflet-tile-pane {
filter: grayscale(1);
}
.leaflet-pane.leaflet-tile-pane.satellite-gray {
filter: grayscale(0.7);
}
This allows you to desaturate the map tiles, creating a more neutral or elegant visual tone.
Conclusion
Toolset’s integration with OpenStreetMap is a game-changer for developers looking for a cost-effective, simple, and open-source alternative to Google Maps. While it still lacks some advanced features, the flexibility of Leaflet.js and the growing community support make it a promising direction. With just a bit of customization, you can build beautiful and powerful maps—without the cost or complexity of proprietary services.
