How to click to change highlight colour with jQuery maphilight

Question

I program an online booking system for a scout campsite. What I'm trying to create is an interactive site map where people wishing to book can simply click the pitch they wish to camp on.

So far, I've got the image map extracting the coordinates from my SQL Database and colouring the AREA according to whether the pitch is already booked for that date range or not.

https://www.drumhill.org.uk/test-map.asp?startDate=2021-11-05&endDate=2021-11-08

What I'm struggling with is that, for the green (=available) pitches, I'd like these to change to yellow or something when clicked (=selected) and then back to green again if clicked again (=deselected).

I've seen that there's an example in the documentation that does exactly what I want: https://projects.davidlynch.org/maphilight/docs/demo_features.html The "star" shows exactly the behavior that I want... but I think my lack of JavaScript (or jQuery) knowledge is holding me back a bit.

Answer 1

You are very close to receiving the desired result.

Pass the options to the method when initializing the plugin for that element, on the current page.

<script>
$("img.map").maphilight( {
    fill: true,
    fillColor: '000000',
    fillOpacity: 0.2,
    stroke: true,
    strokeColor: 'ff0000',
    strokeOpacity: 1,
    strokeWidth: 1,
    fade: true,
    alwaysOn: false,
    neverOn: false,
    groupBy: false,
    wrapClass: true,
    shadow: false,
    shadowX: 0,
    shadowY: 0,
    shadowRadius: 6,
    shadowColor: '000000',
    shadowOpacity: 0.8,
    shadowPosition: 'outside',
    shadowFrom: false
} );
</script>

This initialize the maphilight plugin for all img elements on the current page, with a class "map". Remember to tweak the colours to your liking :-)

Just tried it on your website, by running inside the developer console:

$("img.map").maphighlight();

All your custom colours appear to be working when selecting elements.