mirror of
https://github.com/librenms/librenms.git
synced 2024-10-07 16:52:45 +00:00
135 lines
2.9 KiB
HTML
135 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery Mapael examples</title>
|
|
<style type="text/css">
|
|
body {
|
|
color:#5d5d5d;
|
|
font-family:Helvetica,Arial,sans-serif;
|
|
}
|
|
|
|
h1 {
|
|
font-size:30px;
|
|
margin:auto;
|
|
margin-top:50px;
|
|
}
|
|
|
|
h2 {
|
|
font-size:22px;
|
|
margin-top:50px;
|
|
}
|
|
|
|
.container {
|
|
min-width: 700px;
|
|
margin:auto;
|
|
}
|
|
|
|
.zoomIn, .zoomOut {
|
|
background-color:#fff;
|
|
border:1px solid #ccc;
|
|
color:#000;
|
|
width:15px;
|
|
height:15px;
|
|
line-height: 15px;
|
|
text-align:center;
|
|
border-radius:3px;
|
|
cursor:pointer;
|
|
position:absolute;
|
|
top : 10px;
|
|
font-weight:bold;
|
|
left : 10px;
|
|
|
|
-webkit-user-select: none; // For Webkit
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none; // For Mozilla
|
|
-o-user-select: none;
|
|
user-select: none; // Default
|
|
}
|
|
|
|
.zoomOut {
|
|
top:30px;
|
|
}
|
|
|
|
.map {
|
|
position:relative;
|
|
}
|
|
|
|
.mapTooltip {
|
|
position : fixed;
|
|
background-color : #fff;
|
|
moz-opacity:0.70;
|
|
opacity: 0.70;
|
|
filter:alpha(opacity=70);
|
|
border-radius:10px;
|
|
padding : 10px;
|
|
z-index: 1000;
|
|
max-width: 200px;
|
|
display:none;
|
|
color:#343434;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
|
|
<h2>Minimal example</h2>
|
|
<div class="container1">
|
|
<div class="map">
|
|
<span>Alternative content for the map</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Map with some custom plots and areas</h2>
|
|
<div class="container2">
|
|
<div class="map" style="background-color:#cddee0;">
|
|
<span>Alternative content for the map</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Map with links between the plots</h2>
|
|
<div class="container3">
|
|
<div class="map">
|
|
<span>Alternative content for the map</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Map with zoom-in, zoom-out buttons and zoom on mousewheel</h2>
|
|
<div class="container4">
|
|
<div class="map">
|
|
<span>Alternative content for the map</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Map with a legend for areas</h2>
|
|
<div class="container5">
|
|
<div class="map">
|
|
<span>Alternative content for the map</span>
|
|
</div>
|
|
<div class="areaLegend">
|
|
<span>Alternative content for the legend</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<b>All example for jQuery Mapael are available <a href="http://www.vincentbroute.fr/mapael/">here</a>.</b>
|
|
|
|
</div>
|
|
|
|
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" charset="utf-8" ></script>
|
|
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js" charset="utf-8" ></script>
|
|
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js" charset="utf-8" ></script>
|
|
<script src="js/jquery.mapael.js" charset="utf-8" ></script>
|
|
<script src="js/maps/france_departments.js" charset="utf-8" ></script>
|
|
<script src="js/maps/world_countries.js" charset="utf-8" ></script>
|
|
<script src="js/maps/usa_states.js" charset="utf-8" ></script>
|
|
<script src="examples.js" charset="utf-8" ></script>
|
|
|
|
</body>
|
|
</html>
|
|
|
|
|