%PDF- %PDF-
Direktori : /home/opti/workflow/src/public/app-assets/js/scripts/charts/mapael/basic/ |
Current File : /home/opti/workflow/src/public/app-assets/js/scripts/charts/mapael/basic/zoom.js |
/*========================================================================================= 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" } } } } }); });