databaseimagemapster

ImageMapster - Preselect states from a db; anchor link within the page


I'm working with the plugin ImageMapster and I'm having difficulty with the JavaScript. I'm trying to get states determined by database to display an alternate image. Those states then link to an anchor on that same page. It appears that what I currently have is merely breaking the JavaScript altogether. Here is the code I have right now:

<script type="application/json" id="map-data">["ID","CA"]</script>

<script>
    var data = $.parseJSON($('#map-data').text());

$('img').mapster({
    mapKey: 'state',
    clickNavigate: true,
onConfigured: function () {
        var csv = data.join(',');
        $('img').mapster('set', true, csv)
        .mapster('snapshot')
        .mapster('unbind', false);
        altImage: '../Images/map_outline_blackStrokeDot.png'
    }
});
</script>

Solution

  • I finally got all the requirements I needed. Final code here:

    <map id="idaho" name="idahomap">
        <area alt="mushroom" href="#idaho" state="ID" full="Idaho" shape="poly" coords="364,150,337,264,346,268,317,316,320,327,304,407,473,442,485,347,475,335,437,341,414,285,406,296,410,247,383,215,380,191,388,157,376,153">
    </map>
    
    <script type="application/json" id="map-data">["ID","CA"]</script>
    
    <script>
        var data = $.parseJSON($('#map-data').text());
    
    
        $('img').mapster({
            mapKey: 'state',
            clickNavigate: true,
            isSelectable: false,
            highlight: false,
            onConfigured: function () {
    
                // make the array into a comma-sparated list
                var csv = data.join(',');
    
                // the 'set' activates the areas
                $('img').mapster('set', true, csv, options = { fillColor:'ffffff' });
            }
        });
    </script>