mirror of
https://github.com/quentin-g-dev/afup.git
synced 2026-03-25 17:52:13 +01:00
261 lines
8.7 KiB
HTML
261 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Map with zoom-in, zoom-out buttons and zoom on mousewheel</title>
|
|
<style type="text/css">
|
|
body {
|
|
color: #5d5d5d;
|
|
font-family: Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 30px;
|
|
margin: auto;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 800px;
|
|
margin: auto;
|
|
}
|
|
|
|
/* Specific mapael css class are below
|
|
* 'mapael' class is added by plugin
|
|
*/
|
|
|
|
.mapael .map {
|
|
background-color: #cddee0;
|
|
margin-bottom: 10px;
|
|
position: relative;
|
|
}
|
|
|
|
/* For all zoom buttons */
|
|
.mapael .zoomButton {
|
|
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: 0;
|
|
font-weight: bold;
|
|
left: 10px;
|
|
|
|
-webkit-user-select: none;
|
|
-khtml-user-select : none;
|
|
-moz-user-select: none;
|
|
-o-user-select : none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Reset Zoom button first */
|
|
.mapael .zoomReset {
|
|
top: 10px;
|
|
}
|
|
|
|
/* Then Zoom In button */
|
|
.mapael .zoomIn {
|
|
top: 30px;
|
|
}
|
|
|
|
/* Then Zoom Out button */
|
|
.mapael .zoomOut {
|
|
top: 50px;
|
|
}
|
|
|
|
.mapael .mapTooltip {
|
|
position: absolute;
|
|
background-color: #474c4b;
|
|
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: #fff;
|
|
}
|
|
</style>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js" charset="utf-8"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"
|
|
charset="utf-8"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.0/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 type="text/javascript">
|
|
$(function () {
|
|
$(".mapcontainer").mapael({
|
|
map: {
|
|
name: "france_departments"
|
|
// Enable zoom on the map
|
|
, zoom: {
|
|
enabled: true,
|
|
maxLevel: 10
|
|
}
|
|
// Set default plots and areas style
|
|
, defaultPlot: {
|
|
attrs: {
|
|
fill: "#004a9b"
|
|
, opacity: 0.6
|
|
}
|
|
, attrsHover: {
|
|
opacity: 1
|
|
}
|
|
, text: {
|
|
attrs: {
|
|
fill: "#505444"
|
|
}
|
|
, attrsHover: {
|
|
fill: "#000"
|
|
}
|
|
}
|
|
}
|
|
, defaultArea: {
|
|
attrs: {
|
|
fill: "#f4f4e8"
|
|
, stroke: "#ced8d0"
|
|
}
|
|
, attrsHover: {
|
|
fill: "#a4e100"
|
|
}
|
|
, text: {
|
|
attrs: {
|
|
fill: "#505444"
|
|
}
|
|
, attrsHover: {
|
|
fill: "#000"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// Customize some areas of the map
|
|
areas: {
|
|
"department-56": {
|
|
text: {content: "Morbihan", attrs: {"font-size": 10}},
|
|
tooltip: {content: "Morbihan (56)"}
|
|
},
|
|
"department-21": {
|
|
attrs: {
|
|
fill: "#488402"
|
|
}
|
|
, attrsHover: {
|
|
fill: "#a4e100"
|
|
}
|
|
}
|
|
},
|
|
|
|
// Add some plots on the map
|
|
plots: {
|
|
// Image plot
|
|
'paris': {
|
|
type: "image",
|
|
url: "http://www.neveldo.fr/mapael/assets/img/marker.png",
|
|
width: 12,
|
|
height: 40,
|
|
latitude: 48.86,
|
|
longitude: 2.3444,
|
|
attrs: {
|
|
opacity: 1
|
|
},
|
|
attrsHover: {
|
|
transform: "s1.5"
|
|
}
|
|
},
|
|
// SVG plot
|
|
'Limoge': {
|
|
type: "svg",
|
|
path: "M 24.267286,27.102843 15.08644,22.838269 6.3686216,27.983579 7.5874348,17.934248 0,11.2331 9.9341158,9.2868473 13.962641,0 l 4.920808,8.8464793 10.077199,0.961561 -6.892889,7.4136777 z",
|
|
width: 30,
|
|
height: 30,
|
|
latitude: 45.8188276,
|
|
longitude: 1.1060351,
|
|
attrs: {
|
|
opacity: 1
|
|
}
|
|
},
|
|
// Circle plot
|
|
'lyon': {
|
|
type: "circle",
|
|
size: 50,
|
|
latitude: 45.758888888889,
|
|
longitude: 4.8413888888889,
|
|
value: 700000,
|
|
tooltip: {content: "<span style=\"font-weight:bold;\">City :</span> Lyon"},
|
|
text: {content: "Lyon"}
|
|
},
|
|
// Square plot
|
|
'rennes': {
|
|
type: "square",
|
|
size: 20,
|
|
latitude: 48.114166666667,
|
|
longitude: -1.6808333333333,
|
|
tooltip: {content: "<span style=\"font-weight:bold;\">City :</span> Rennes"},
|
|
text: {content: "Rennes"}
|
|
},
|
|
// Plot positioned by x and y instead of latitude, longitude
|
|
'myplot': {
|
|
x: 300,
|
|
y: 200,
|
|
text: {
|
|
content: "My plot"
|
|
, position: "bottom"
|
|
, attrs: {"font-size": 10, fill: "#004a9b", opacity: 0.6}
|
|
, attrsHover: {fill: "#004a9b", opacity: 1}
|
|
},
|
|
},
|
|
'Bordeaux': {
|
|
type: "circle",
|
|
size: 30,
|
|
latitude: 44.834763,
|
|
longitude: -0.580991,
|
|
attrs: {
|
|
opacity: 1
|
|
},
|
|
text: {
|
|
content: "33",
|
|
position: "inner",
|
|
attrs: {
|
|
"font-size": 16
|
|
, "font-weight": "bold"
|
|
, fill: "#fff"
|
|
},
|
|
attrsHover: {
|
|
"font-size": 16
|
|
, "font-weight": "bold"
|
|
, fill: "#fff"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container">
|
|
<h1>Map with zoom-in, zoom-out buttons and zoom on mousewheel</h1>
|
|
|
|
<div class="mapcontainer">
|
|
<div class="map">
|
|
<span>Alternative content for the map</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p><b>All example for jQuery Mapael are available <a href="http://www.vincentbroute.fr/mapael/">here</a>.</b></p>
|
|
</div>
|
|
</body>
|
|
</html> |