How to disable users from clicking/using map

[PetteriT]

Hi there,

I am building a site for a small company and have added Mapbox to show locations of companies.
The feature is working perfectyl with the site.
Is there an option or snippet to disable users from clicking/using the mapbox? So that it wont zoom in or out. I tried the following snippet but this does not work, it hides the whole listing page.

Thank you for advice allready!

add_filter(
    'hivepress/v1/templates/listing_view_page',
    function( $template ) {
        hivepress()->template->fetch_block( $template, 'location_container' );

        // Add custom CSS to disable pointer events for the map container
        $template .= '<style>.mapboxgl-control-container { pointer-events: none; }</style>';

        return $template;
    },
    1000
);

[andrii]

Hi,

There are two ways to do this:

1. Try using CSS, for example, this code: .hp-map {pointer-events:none!important}

2. Or create a transparent div on top of the map and add position:absolute to it.

​I hope this is helpful to you.

[PetteriT]

Hi Andrii,

Thank you so much for the quick reply! Worked perfectly, just needed to add option that the right-side zoom-options were separately off as well.

.hp-map {
    pointer-events: none !important; /* Disable pointer events for the map container */
}

.hp-map .mapboxgl-ctrl-group {
    pointer-events: none !important; /*right corner buttons not working  */
}