-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
136 lines (124 loc) · 6.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<html>
<head>
<link rel="stylesheet" href="node_modules/MapifyCustom/build/jquery.mapify.css">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/MapifyCustom/src/mapify.js"></script>
<script>
jQuery(function() {
$("img[usemap]").mapify({
popOver: {
content: function(zone){
// Build the content for the popOver
var data = zone.attr("data-zone").split(/\|/);
var data_html = "<ul>";
data_html += "<li><b>Mars Area Location:</b> " + data[0] + "</li>";
data_html += "<li><b>Site Position:</b> " + data[1] + "</li>";
data_html += "<li><b>Distance to Bradbury (m):</b> " + data[2] + "</li>";
data_html += "</ul>";
return "<strong>" + zone.attr("data-title") + "</strong>" + data_html;
},
delay: 0.7,
margin: "15px",
height: "130px",
width: "260px"
}
})
// Prevent clicks on the mapify polygons
$(".mapify-svg polygon").click(function(e) {
e.preventDefault()
})
// Add click listener for the Map Areas
$(".clickable").click(function(e) {
e.preventDefault()
// Get index
// Highlight index in svg
$(".mapify-svg polygon:nth-child(" + ($(this).index()*1 + 1) + ")").toggleClass("mapify-selected")
// Show "search" button if selected > 1
if($(".mapify-selected").length >= 1) {
var base_url = "http://localhost/chemin#/search/render/dt_id=43|gen="
var search_link = "<div class='search-link'><a target='_blank' href='" + base_url;
// Get selected names separated by pipes
var search_string = "";
$(".mapify-svg").find(".mapify-selected").each(function() {
var search_term = $(".clickable:nth-child(" + ($(this).index() + 1) + ")").attr("data-searchterm")
search_string += '"' + search_term + '" || '
})
search_string = search_string.replace(/\s\|\|\s$/,'')
search_link += encodeURIComponent(search_string) + "/1'>Click to search</a></div>"
console.log(search_link)
$("#search-link").html(search_link)
$("#search-link").show()
}
else {
$("#search-link").html("")
$("#search-link").hide()
}
})
})
</script>
<style>
.mapify-hover {
opacity: 0.5;
}
.mapify-selected {
fill: #0f0;
opacity: 0.5;
}
#search-link {
display: none;
background: rgba(255,255,255,0.9);
border: 2px solid rgb(0,0,255,0.7);
border-radius: 8px;
position: absolute;
min-width: 200px;
right: 15px;
top: 15px;
z-index: 100;
padding: 8px;
}
#search-link a {
text-decoration: none;
margin-left: 50px;
margin-right: 50px;
font-size: 24px;
font-family: sans;
font-weight: 400;
}
.mapify-popOver {
padding: 16px 10px 10px 10px;
}
.mapify-popOver strong {
font-size: 18px;
}
.mapify-popOver-content ul {
list-style-type: none;
}
.mapify-popOver-content ul li {
margin-left: -50px;
}
</style>
</head>
<body>
<img src="images/msl-drill-targets-sol1495-pia21254-full.jpg" width="3300" height="2550" border="0" usemap="#Map" />
<!-- The map MUST use polygons only due to the Mapify Plugin -->
<map name="Map" id="Map">
<area class="clickable" data-zone="1" href="#" shape="poly" coords="87,7,688,7,688,450,87,450,87,7" data-title="John Klein" data-searchterm="john klein">
<area class="clickable" data-zone="2" href="#" shape="poly" coords="87,458,688,458,688,902,87,902,87,458" data-title="Confidence Hills" data-searchterm="confidence hills">
<area class="clickable" data-zone="3" href="#" shape="poly" coords="87,904,688,904,688,1352,87,1352,87,904" data-title="Buckskin" data-searchterm="buckskin">
<area class="clickable" data-zone="4" href="#" shape="poly" coords="87,1348,688,1348,688,1802,87,1802,87,1348" data-title="Lubango" data-searchterm="lubango">
<area class="clickable" data-zone="5" href="#" shape="poly" coords="87,1800,688,1800,688,2242,87,2242,87,1800" data-title="Marimba" data-searchterm="marimba">
<area class="clickable" data-zone="Yellowknife Bay|6_82|443.34" href="#" shape="poly" coords="689,7,1290,7,1290,450,689,450,689,7" data-title="Cumberland" data-searchterm="cumberland">
<area class="clickable" data-zone="7" href="#" shape="poly" coords="689,458,1290,458,1290,902,689,902,689,458" data-title="Mojave" data-searchterm="mojave">
<area class="clickable" data-zone="8" href="#" shape="poly" coords="689,904,1290,904,1290,1352,689,1352,689,904" data-title="Big Sky" data-searchterm="big sky">
<area class="clickable" data-zone="9" href="#" shape="poly" coords="689,1348,1290,1348,1290,1802,689,1802,689,1348" data-title="Okoruso" data-searchterm="okoruso">
<area class="clickable" data-zone="10" href="#" shape="poly" coords="689,1800,1290,1800,1290,2242,689,2242,689,1800" data-title="Quela" data-searchterm="quela">
<area class="clickable" data-zone="11" href="#" shape="poly" coords="1291,7,1886,7,1886,450,1291,450,1291,7" data-title="Windjana" data-searchterm="windjana">
<area class="clickable" data-zone="12" href="#" shape="poly" coords="1291,458,1886,458,1886,902,1291,902,1291,458" data-title="Telegraph Peak" data-searchterm="telegraph peak">
<area class="clickable" data-zone="13" href="#" shape="poly" coords="1291,904,1886,904,1886,1352,1291,1352,1291,904" data-title="Greenhorn" data-searchterm="greenhorn">
<area class="clickable" data-zone="14" href="#" shape="poly" coords="1291,1348,1886,1348,1886,1802,1291,1802,1291,1348" data-title="Oudam" data-searchterm="oudam">
<area class="clickable" data-zone="15" href="#" shape="poly" coords="1291,1800,1886,1800,1886,2242,1291,2242,1291,1800" data-title="Sebina" data-searchterm="sebina">
</map>
<!-- The search link appears when one or more items are selected. -->
<div id="search-link"></div>
</body>
</html>