I have an HTML page which reads the data from a data array in an ASP.Net controller. The data is used to create map areas which will then show the data as a tooltip and also fill caption boxes. I have successfully created the areas using a modified version of the code on the ImageMapster Beatles Menu page:
<img id="mainmap" src="/images/1641Map1.jpg" style="width:879px; height:1557px" usemap="#main-map">
@foreach (var item in Model.Areas)
{
<area shape="rect" data-full="@item.Name" data-name="@item.Name,all" coords="@item.Left,@item.Top,@item.Right,@item.Bottom" href="#" />
}
<div style="width:390px; height: 120px; font-size: 12px; ">
<div id="1641-caption" style="clear:both;border: 1px solid black; width: 400px; padding: 6px; display:none;">
<div id="1641-caption-header" style="font-style: italic; font-weight: bold; margin-bottom: 12px;"></div>
<div id="1641-caption-text"></div>
</div>
The following Javascript is where I am having trouble. This is fixed and does not read from the data array provided:
<script>
$(document).ready(function () {
alert("ready")
});
var inArea,
map = $('#mainmap'),
captions = {
area1: ["Area 1 Caption", "Area 1 Text"],
area2: ["Area 2 Caption", "Area 2 Text"],
area3: ["Area 3 Caption", "Area 3 Text"],
area4: ["Area 4 Caption", "Area 4 Text"],
},
//When mouse moves over individual areas:
single_opts = {
fillColor: '000000',
fillOpacity: 0.1,
stroke: true,
strokeColor: 'ff0000',
strokeWidth: 2
},
//When mouse moves over image:
all_opts = {
// fillColor: 'ffffff',
fillColor: '000000',
fillOpacity: 0,
stroke: true,
strokeWidth: 1,
strokeColor: '000000'
},
initial_opts = {
mapKey: 'data-name',
isSelectable: false,
singleSelect: true,
fill: true,
mapkey: 'id',
fillOpacity: 0.3,
fillColor: 'ff0000',
clickNavigate: true,
showToolTip: true,
onMouseover: function (data) {
inArea = true;
$('#1641-caption-header').text(captions[data.key][0]);
$('#1641-caption-text').text(captions[data.key][1]);
$('#1641-caption').show();
},
onMouseout: function (data) {
inArea = false;
$('#1641-caption').hide();
},
areas: [
{
key: "area1",
toolTip: "Area 1 Caption"
},
{
key: "area2",
toolTip: "Area 2 Caption"
},
{
key: "area3",
toolTip: "Area 3 Caption"
},
{
key: "area4",
toolTip: "Area 4 Caption"
}
]
};
opts = $.extend({}, all_opts, initial_opts, single_opts);
map.mapster('unbind')
.mapster(opts)
.bind('mouseover', function () {
if (!inArea) {
// Registers mouse move over image
map.mapster('set_options', all_opts)
.mapster('set', true, 'all')
.mapster('set_options', single_opts);
}
}).bind('mouseout', function () {
if (!inArea) {
map.mapster('set', false, 'all');
}
});
The array being read contains the Name (the name of the area), Left, Top, Right, Bottom, plus the actual data that I would like to display. I found the following code to copy the data into a Javascript array:
var myArray = [];
@foreach (var d in Model.data)
{
@:myArray.push("@d");
}
Changing the Model.data to my own array Model.Areas but my knowledge of Javascript is limited and I couldn’t work out how to take this array and apply it to the areas dynamically.
