%PDF-
%PDF-
Mini Shell
Mini Shell
/*=========================================================================================
File Name: zoom.js
Description: zoom mapael vector map example
----------------------------------------------------------------------------------------
Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
Version: 1.0
Author: PIXINVENT
Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/
// Zoom mapael vector map
// ------------------------------
$(window).on("load", function(){
$(".zoom").mapael({
map: {
name: "france_departments",
// Enable zoom on the map
zoom: {
enabled: true,
maxLevel: 10
},
// Set default plots and areas style
defaultPlot: {
attrs: {
fill: "#E84A5F",
opacity: 0.8
},
attrsHover: {
opacity: 1
},
text: {
attrs: {
fill: "#2A363B"
},
attrsHover: {
fill: "#000"
}
}
},
defaultArea: {
attrs: {
fill: "#FECEA8",
stroke: "#FFFFFF"
},
attrsHover: {
fill: "#99B898"
},
text: {
attrs: {
fill: "#2A363B"
},
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: "#FF847C"
},
attrsHover: {
fill: "#99B898"
}
}
},
// 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: "#E84A5F", opacity: 0.8},
attrsHover: {fill: "#E84A5F", 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"
}
}
}
}
});
});
Zerion Mini Shell 1.0