I have a 7446x1800 image that I need to map. I used maphilight jQuery plugin to achieve this. I was able to make it work(see here ) but what I want to achieve is to make it work inside a Bootstrap modal. I'm guessing it has something to do with z-index but I can't make it work.
The process is, when the user clicks on the smaller version of the image, a bootstrap modal will pop up where he/she could view the whole image and choose a 'lot' to make a reservation. Different colors are used to indicate whether a lot is already taken, reserved, or still available.
Here's my whole code:
<style type="text/css">
.modal.modal-wide .modal-dialog {
width: 90%;
}
.modal-wide .modal-body {
overflow-y: auto;
}
#tallModal .modal-body p { margin-bottom: 900px }
</style>
<div class="row">
<div class="zoomTarget" data-debug="true">
<img src ="../../assets/images/uploads/map-1.png" alt="map 1" width="755px" height="200px" data-toggle="modal" data-target="#showmapModal-1">
<div class="modal modal-wide fade" id="showmapModal-1" tabindex="-1" role="dialog" aria-labelledby="showmapModal-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="showmapModal-1">Reserve Lot</h4>
</div>
<div class="modal-body">
<div id="veg_demo">
<img class="map" id="map-<?php echo $_GET['map']; ?>" src="../../assets/images/uploads/map-1.png" usemap="#map-1" >
<div style="clear:both; height:8px;"></div>
<div id="selections" style="clear:both;"></div>
</div>
<map pid="map-1" name="map-1">
<?php
$plot_map = SelectAll('pmp_lot_map');
if($plot_map){
$counter = 1;
if(mysqli_num_rows($plot_map) > 0) {
while($row = mysqli_fetch_assoc($plot_map)) {
$lot_map_uuid = $row['uuid'];
$block_no = $row['block_no'];
$lot_no = $row['lot_no'];
$coordinates = $row['coords'];
$lot_status = $row['status'];
if($lot_status == 'available') {
$fillColor = '87D37C';
$message = "This lot is available. Do you really want to reserve this Block # ".$block_no.", Lot # ".$lot_no.".";
} else if($lot_status == 'reserved') {
$fillColor = 'F4D03F';
$message = "This lot is already reserved.";
} else if($lot_status == 'taken') {
$fillColor = '96281B';
$message = "This lot is not available.";
}
?>
<area data-toggle="modal" data-target="#mapModal_<?php echo $counter; ?>" data-maphilight='{"strokeColor":"000000","strokeWidth":3,"fillColor":"<?php echo $fillColor; ?>","fillOpacity":1}' href="#" shape="poly" coords="<?php echo $coordinates; ?>" data-alt="Block <?php echo $block_no; ?> Lot <?php echo $lost_no; ?>" data-title="Block <?php echo $block_no; ?> Lot <?php echo $lot_no; ?>">
<div class="modal fade" id="mapModal_<?php echo $counter; ?>" tabindex="-1" role="dialog" aria-labelledby="mapModalLabel-<?php echo $counter; ?>">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="mapModalLabel-<?php echo $counter; ?>">Reserve Lot</h4>
</div>
<div class="modal-body">
<p style="text-indent:0;">
<?php echo $message; ?>
</p>
</div>
<div class="modal-footer">
<?php if($lot_status == 'available') {?><button type="button" class="btn btn-success" onclick="saveMapModal('<?php echo $lot_map_uuid; ?>','mapModal_<?php echo $counter; ?>','<?php echo $uuid; ?>');">Continue</button><?php } ?>
<?php if($lot_status == 'available') {?><button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button><?php } ?>
<?php if($lot_status != 'available') {?><button type="button" class="btn btn-default" data-dismiss="modal">Ok</button><?php } ?>
</div>
</div>
</div>
</div>
<?php
$counter++;
}
}
}
?>
</map>
</div>
<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.map').maphilight();
});
$(".modal-wide").on("show.bs.modal", function() {
var height = $(window).height() - 100;
$(this).find(".modal-body").css("max-height", height);
});
</script>
Or if it's not possible, are there any other ways to achieve it?
Any help is highly appreciated.
P.S. I can't tag "maphilight" plugin because it says it needs to have 1500 reputation.
style="position:absolute;"
is the culprit. I removed it when I use the maphilight in modal and everything seems to work!