wpgmp_map_styles

The wpgmp_map_styles hook in WP Maps Pro allows developers to alter the style of maps dynamically. This hook is particularly useful when you need to apply custom styles to the map, such as changing colors or visibility of map features, at runtime.

Usage

Developers can implement this hook in their theme’s functions.php file or a custom plugin. It is used to modify the map styles by accessing and changing the $map_data[‘styles’] parameter. The hook provides flexibility to apply different styles based on specific conditions or user preferences.

Example 1

This example demonstrates how to change the color of administrative features on the map.

add_filter('wpgmp_map_styles', 'custom_admin_color_style', 10, 2);

function custom_admin_color_style($styles, $map) {
    $styles[] = [
        "featureType" => "administrative",
        "elementType" => "all",
        "stylers" => [
            ["color" => "#0000ff", "visibility" => "on"]
        ]
    ];
    return $styles;
}

Example 2

In this example, we are setting the visibility of road features to ‘off’ to create a cleaner map layout.

add_filter('wpgmp_map_styles', 'hide_road_features', 10, 2);

function hide_road_features($styles, $map) {
    $styles[] = [
        "featureType" => "road",
        "elementType" => "all",
        "stylers" => [
            ["visibility" => "off"]
        ]
    ];
    return $styles;
}

Example 3

This example shows how to apply a grayscale effect to all map features for a minimalist design.

add_filter('wpgmp_map_styles', 'apply_grayscale_style', 10, 2);

function apply_grayscale_style($styles, $map) {
    $styles[] = [
        "featureType" => "all",
        "elementType" => "all",
        "stylers" => [
            ["saturation" => -100]
        ]
    ];
    return $styles;
}

Tip: Always test your map styles to ensure they enhance user experience without compromising map readability. Use the Google Maps Styling Wizard for previewing styles before applying them.