{"id":47040,"date":"2023-10-03T21:02:14","date_gmt":"2023-10-03T19:02:14","guid":{"rendered":"https:\/\/limes-int.com\/?page_id=47040"},"modified":"2025-05-06T09:06:59","modified_gmt":"2025-05-06T07:06:59","slug":"interactive-social-security-map","status":"publish","type":"page","link":"https:\/\/limes-int.com\/nl\/interactive-social-security-map\/","title":{"rendered":"SOCIAL SECURITY MAP 2025"},"content":{"rendered":"<div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container has-pattern-background has-mask-background hundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-padding-top:0px;--awb-padding-bottom:0px;--awb-background-color:#ffffff;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"width:104% !important;max-width:104% !important;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:15px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:15px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\" data-scroll-devices=\"small-visibility,medium-visibility,large-visibility\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-text fusion-text-1 fusion-no-medium-visibility fusion-no-large-visibility\" style=\"--awb-content-alignment:center;\"><p>This is our most basic version of the Social Security Map, please switch to a larger screen for a more complete version.<\/p>\n<\/div><script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/proj4js\/2.3.15\/proj4.js\"><\/script>\n<script src=\"https:\/\/limes-int.com\/wp-content\/uploads\/2024\/03\/anychart-limes.min_.js\"><\/script>\n\n<link href=\"https:\/\/cdn.anychart.com\/releases\/v8\/css\/anychart-ui.min.css\" rel=\"stylesheet\" type=\"text\/css\">\n<link href=\"https:\/\/cdn.anychart.com\/releases\/v8\/fonts\/css\/anychart-font.min.css\" rel=\"stylesheet\" type=\"text\/css\">\n\n  <script src=\"https:\/\/limes-int.com\/wp-content\/uploads\/2025\/01\/globaldataset.js\" defer><\/script>\n  <script src=\"https:\/\/limes-int.com\/wp-content\/uploads\/2023\/11\/limes-af.js\" defer><\/script>\n  <script src=\"https:\/\/limes-int.com\/wp-content\/uploads\/2023\/11\/limes-eu-1.js\"><\/script>\n  <script src=\"https:\/\/limes-int.com\/wp-content\/uploads\/2023\/11\/limes-na.js\" defer><\/script>\n  <script src=\"https:\/\/limes-int.com\/wp-content\/uploads\/2023\/11\/limes-oc.js\" defer><\/script>\n  <script src=\"https:\/\/limes-int.com\/wp-content\/uploads\/2023\/11\/limes-as.js\" defer><\/script>\n  <script src=\"https:\/\/limes-int.com\/wp-content\/uploads\/2023\/11\/limes-sa.js\" defer><\/script><!-- ====================================================== -->\n<!-- ========= Start: Javascript Includes - Code ========== -->\n<!-- ====================================================== -->\n  <script type=\"text\/javascript\">\n      jQuery(document).ready(function ($) {\n        var mapSeries;\n        var mapChart;\n        var dataSet;\n        var combo;\n        var tableChart;\n        var infoChart;\n        var flag;\n        var headerText;\n        var headerTextShadow;\n        var salary = 30000;\n        var grosssalary;\n        var contributions;\n        var dataWO = globalDataSetAll;\n        var currentContinent = \"EU\";\n        const allContinents = [\"AS\", \"AF\", \"EU\", \"NA\", \"SA\", \"OC\"];\n        var continent1, continent2, continent3, continent4, continent5;\n        const fixedColorScale = [\n          \"#006837\",\n          \"#1a9850\",\n          \"#66bd63\",\n          \"#a6d96a\",\n          \"#d9ef8b\",\n          \"#ffffbf\",\n          \"#fee08b\",\n          \"#fdae61\",\n          \"#f46d43\",\n          \"#d73027\",\n          \"#A50026\",\n        ];\n        var equalscale, evenscale;\n        var dataAccess;\n        var lowestValue = Number.POSITIVE_INFINITY; \/\/ Initialize with a high value\n        var highestValue = Number.NEGATIVE_INFINITY; \/\/ Initialize with a low value\n        anychart.licenseKey(\"$bedrijfsnaam-c2b45812-c2c50db8\");\n\n        anychart.onDocumentReady(function () {\n          \/\/ Disable initially until a continent is selected\n          $(\".disableme\").prop(\"disabled\", true);\n          \/\/ Initial processing and continent flashing effect\n          globalDataSet = globalDataSetAll;\n          processData(globalDataSet, \"world\");\n          flashElement(\".disableme\");\n          $(\".disableme\").prop(\"disabled\", false); \/\/Enable\n        });\n\n        $(\"select\").on(\"change\", handleSelectChange);\n\n        function handleSelectChange() {\n          switch (this.id) {\n            case \"grosssalary\":\n              handleGrossSalaryChange(this.value);\n              break;\n            case \"contributions\":\n              handleContributionsChange(this.value);\n              break;\n            case \"continent\":\n              handleContinentChange(this.value);\n              break;\n          }\n          updateCombo();\n          if (currentContinent) {\n            updateGlobalDataSets();\n          }\n          $(\"#container\").html(\"\"); \/\/ Wipe container clean\n          processData(globalDataSet, combo);\n        }\n\n        function handleGrossSalaryChange(value) {\n          grosssalary = value.toString();\n          if (grosssalary !== \"argh\") {\n            $(\"#grosssalary option[value='argh']\").remove();\n          }\n          salary = getSalaryByType(grosssalary);\n        }\n\n        function getSalaryByType(type) {\n          const salaryMapping = {\n            blue: 30000,\n            white: 75000,\n            executive: 200000,\n          };\n          return salaryMapping[type] || 0; \/\/ Default to 0 if not found\n        }\n\n        function handleContributionsChange(value) {\n          contributions = value;\n          if (contributions !== \"argh\") {\n            $(\"#contributions option[value='argh']\").remove();\n          }\n        }\n\n        function handleContinentChange(value) {\n          currentContinent = value.toString().toUpperCase();\n          $(\".disableme\").prop(\"disabled\", currentContinent === \"WO\");\n        }\n        function updateCombo() {\n          if (grosssalary !== undefined && contributions !== undefined) {\n            combo = contributions + \"_\" + grosssalary;\n            console.log(\"COMBO COMBO BREAKER \" + combo);\n          }\n        }\n        function updateGlobalDataSets() {\n          const dataMapping = {\n            EU: { countries: [\"NL\"], data: dataEU, svg: svgDataEU },\n            NA: { countries: [\"US\"], data: dataNA, svg: svgDataNA },\n            AS: { countries: [\"JP\"], data: dataAS, svg: svgDataAS },\n            OC: { countries: [\"NZ\"], data: dataOC, svg: svgDataOC },\n            AF: { countries: [\"ZA\"], data: dataAF, svg: svgDataAF },\n            SA: { countries: [\"BR\"], data: dataSA, svg: svgDataSA },\n          };\n          const continentData = dataMapping[currentContinent];\n          if (continentData) {\n            continentCountries = continentData.countries;\n            globalDataSet = continentData.data;\n            svgData = continentData.svg;\n          } else {\n            \/\/ Handle case where continent does not match any key in dataMapping\n            console.log(\"Invalid continent\");\n          }\n        }\n\n        \/\/ Utility function to flash an element\n        function flashElement(selector) {\n          $(selector)\n            .fadeTo(300, 0.1)\n            .fadeTo(300, 1.0)\n            .delay(300)\n            .fadeTo(300, 0.1)\n            .fadeTo(300, 1.0)\n            .delay(300)\n            .fadeTo(300, 0.1)\n            .fadeTo(300, 1.0);\n        }\n\n        \/\/ Finds the lowest and highest values in the dataset for a given type\n        function findLowestAndHighestValues(data, dataType) {\n          let lowestValue = Number.POSITIVE_INFINITY,\n            highestValue = Number.NEGATIVE_INFINITY;\n          data.forEach((element) => {\n            if (element[dataType] != null) {\n              let value = parseFloat(element[dataType]);\n              if (!isNaN(value)) {\n                lowestValue = Math.min(lowestValue, value);\n                highestValue = Math.max(highestValue, value);\n              }\n            }\n          });\n          return { lowestValue, highestValue };\n        }\n\n        function AdaptiveOrdinalColorScale(data, dataType = \"employee_blue\") {\n          let values = data\n            .map((element) => parseFloat(element[dataType]))\n            .filter((value) => !isNaN(value));\n          let uniqueValues = [...new Set(values)].sort((a, b) => a - b); \/\/ Unique, sorted values\n\n          \/\/ Determine segment boundaries based on unique values\n          let segments = Math.min(11, uniqueValues.length); \/\/ No more segments than unique values\n          let scaleParts = [];\n          for (let i = 0; i < segments - 1; i++) {\n            let index = Math.floor((uniqueValues.length \/ (segments - 1)) * i);\n            let nextIndex = Math.floor(\n              (uniqueValues.length \/ (segments - 1)) * (i + 1)\n            );\n            scaleParts.push({\n              from: uniqueValues[index],\n              to: uniqueValues[nextIndex],\n            });\n          }\n\n          \/\/ Ensure covering the range fully\n          if (segments < 11) {\n            scaleParts.push({ greater: uniqueValues[uniqueValues.length - 1] });\n          } else {\n            \/\/ Adjust the last segment to ensure it covers any maximum value\n            scaleParts[segments - 2] = {\n              from: scaleParts[segments - 2].from,\n              to: uniqueValues[uniqueValues.length - 1],\n            };\n            scaleParts.push({ greater: uniqueValues[uniqueValues.length - 1] });\n          }\n\n          \/\/ Log the scale in the desired format\n          evenscale = JSON.stringify(scaleParts);\n        }\n\n        function processData(data, dataType = \"employee_blue\") {\n          AdaptiveOrdinalColorScale(data, dataType);\n\n          \/\/ pre-processing of the data\n          if (dataType != \"world\") {\n            data.forEach(function (element) {\n              if (element[dataType] != null) {\n                element.value = element[dataType];\n                var value = parseFloat(element.value); \/\/ Convert the value to a number\n                if (!isNaN(value)) {\n                  \/\/ Ensure it's a valid number\n                  lowestValue = Math.min(lowestValue, value);\n                  highestValue = Math.max(highestValue, value);\n                }\n              }\n            });\n          } else {\n            \/\/ Dataset blank for no selected datapoint\n          }\n          dataSet = anychart.data.set(data);\n\n          mapChart = drawMap();\n          contactInfo = getContactInfo();\n          limesLogo = getLimesLogo();\n\n          if (currentContinent != \"WO\") {\n            \/\/ Get remaining continents\n            let remainingContinents = [...allContinents];\n            let index = remainingContinents.indexOf(currentContinent);\n            remainingContinents.splice(index, 1);\n            continent1 = drawContinent(remainingContinents[0]);\n            continent2 = drawContinent(remainingContinents[1]);\n            continent3 = drawContinent(remainingContinents[2]);\n            continent4 = drawContinent(remainingContinents[3]);\n            continent5 = drawContinent(remainingContinents[4]);\n          }\n\n          var layoutTable = anychart.standalones.table();\n          layoutTable.cellBorder(null);\n          layoutTable.container(\"container\");\n          layoutTable.draw();\n\n          function commafy(num) {\n            var str = num.toString().split(\".\");\n            if (str[0].length >= 4) {\n              str[0] = str[0].replace(\/(\\d)(?=(\\d{3})+$)\/g, \"$1,\");\n            }\n            if (str[1] && str[1].length >= 4) {\n              str[1] = str[1].replace(\/(\\d{3})\/g, \"$1 \");\n            }\n            return str.join(\".\");\n          }\n\n          \/\/   ____               _                _\n          \/\/  \/ ___| ___   _ __  | |_  __ _   ___ | |_\n          \/\/ | |    \/ _ \\ | '_ \\ | __|\/ _` | \/ __|| __|\n          \/\/ | |___| (_) || | | || |_| (_| || (__ | |_\n          \/\/  \\____|\\___\/ |_| |_| \\__|\\__,_| \\___| \\__|\n\n          function getContactInfo() {\n            title = anychart.standalones.title();\n            title.useHtml(true);\n            title.listen(\"click\", function () {\n              window.open(\"https:\/\/limes-int.com\/contact-limes\/\", \"_blank\");\n            });\n            title.text(\n              \"<span style='font-size: 200%; font-family: Raleway;'>How can we assist you?<\/span>\" +\n                \"<br><a href='https:\/\/limes-int.com\/contact-limes\/' style='color:#fc6b21;font-family: \\\"Raleway\\\";font-size: 180%;text-decoration: underline;'>\" +\n                \"Let's talk social security!<\/a>\"\n            );\n            return title;\n          }\n          \n          function getLimesLogo() {\n            var chart = anychart.line();\n            chart.background().enabled(true);\n            chart.xGrid().enabled(false);\n            chart.yGrid().enabled(false);\n            chart.xAxis().enabled(false);\n            chart.yAxis().enabled(false);\n            chart.background().fill({\n              src: \"https:\/\/limes-int.com\/wp-content\/uploads\/2025\/05\/LEAN-LIMES-Tooling-an-activpayroll-company.png\",\n              mode: \"fit\",\n            });\n\n            return chart;\n          }\n\n          \/\/  __  __   _           _     __  __      _      ____    ____\n          \/\/ |  \\\/  | (_)  _ __   (_)   |  \\\/  |    \/ \\    |  _ \\  \/ ___|\n          \/\/ | |\\\/| | | | | '_ \\  | |   | |\\\/| |   \/ _ \\   | |_) | \\___ \\\n          \/\/ | |  | | | | | | | | | |   | |  | |  \/ ___ \\  |  __\/   ___) |\n          \/\/ |_|  |_| |_| |_| |_| |_|   |_|  |_| \/_\/   \\_\\ |_|     |____\/\n\n          \/\/ Function to draw a continent map using AnyChart\n          function drawContinent(continent) {\n            \/\/ Create a new map instance\n            var map = anychart.map();\n            \/\/ Disable the default context menu\n            map.contextMenu(false);\n\n            \/\/ Declare variables for map data and SVG data\n            let mapData, svgMapData;\n\n            \/\/ Switch statement to handle different continents\n            switch (continent) {\n              case \"EU\":\n                mapData = dataEU;\n                svgMapData = svgDataEU;\n                map.title(\"Europe\");\n                break;\n              case \"NA\":\n                mapData = dataNA;\n                svgMapData = svgDataNA;\n                map.title(\"North America\");\n                break;\n              case \"AS\":\n                mapData = dataAS;\n                svgMapData = svgDataAS;\n                map.title(\"Asia\");\n                break;\n              case \"SA\":\n                mapData = dataSA;\n                svgMapData = svgDataSA;\n                map.title(\"South America\");\n                break;\n              case \"OC\":\n                mapData = dataOC;\n                svgMapData = svgDataOC;\n                map.title(\"Oceania\");\n                break;\n              case \"AF\":\n                mapData = dataAF;\n                svgMapData = svgDataAF;\n                map.title(\"Africa\");\n                break;\n            }\n\n            \/\/ Add event listener for mouseDown on the map\n            map.listen(\"mouseDown\", function () {\n              $(\"#continent\").val(continent).change();\n            });\n\n            \/\/ Remove mouseOver listener for performance\n            map.unlisten(\"mouseOver\");\n\n            \/\/ Set the geographical data for the map\n            map.geoData(svgMapData);\n\n            \/\/ Process map data\n            mapData.forEach(function (element) {\n              if (element[combo] != null) {\n                element.value = element[combo];\n              }\n            });\n\n            \/\/ Customize map title\n            var title = map.title();\n            title\n              .fontSize(14)\n              .fontDecoration(\"underline\")\n              .fontWeight(\"bold\")\n              .fontColor(\"black\")\n              .orientation(\"top\")\n              .vAlign(\"middle\");\n\n            var background = map.background();\n            background.stroke(\"2 #000000\");\n            background.cornerType(\"round\");\n            background.corners(10);\n            \/\/ Create a dataset for the map\n            var mapDataSet = anychart.data.set(mapData);\n            var mapSeries = map.choropleth(mapDataSet);\n\n            if (combo !== undefined) {\n              var scale = anychart.scales.linearColor(fixedColorScale);\n              mapSeries.colorScale(scale);\n              \/\/ Customize map series stroke\n              mapSeries.stroke(function () {\n                this.iterator.select(this.index);\n                var pointValue = this.iterator.get(this.referenceValueNames[1]);\n                var color = this.colorScale.valueToColor(pointValue);\n                return anychart.color.darken(color);\n              });\n            } else {\n              mapSeries.fill(\"#086973\");\n              mapSeries.stroke(anychart.color.darken(\"#086973\"));\n            }\n            \/\/ Disable selection interactivity\n            map.interactivity().selectionMode(\"none\");\n\n            \/\/ Customize hovered state\n            mapSeries.hovered().fill(anychart.color.lighten(\"#fc6b21\"));\n\n            \/\/ Disable tooltip\n            mapSeries.tooltip().enabled(false);\n\n            \/\/ Return the configured map\n            return map;\n          }\n\n          \/\/   ____                                _\n          \/\/  \/ ___|_   _  _ __  _ __  ___  _ __  | |_   _ __ ___    __ _  _ __\n          \/\/ | |   | | | || '__|| '__|\/ _ \\| '_ \\ | __| | '_ ` _ \\  \/ _` || '_ \\\n          \/\/ | |___| |_| || |   | |  |  __\/| | | || |_  | | | | | || (_| || |_) |\n          \/\/  \\____|\\__,_||_|   |_|   \\___||_| |_| \\__| |_| |_| |_| \\__,_|| .__\/\n          \/\/                                                              |_|\n\n          function drawMap() {\n            var map = anychart.map();\n            var interactivity = map.interactivity();\n            interactivity.selectionMode(\"singleSelect\");\n            map.contextMenu(false);\n            \/\/ set map title settings using html\n            map.title().padding(10, 0, 10, 0).margin(0).useHtml(true);\n            if ($(\"#grosssalary option[value='argh']\").length > 0) {\n              map.title(\n                '<br\/><span style=\"color:#212121; font-size: 14px;\">Select a salary to see social security contributions.<\/span>'\n              );\n            } else if ($(\"#contributions option[value='argh']\").length > 0) {\n              map.title(\n                '<br\/><span style=\"color:#212121; font-size: 14px;\">Select a contribution to see social security contributions.<\/span>'\n              );\n            } else {\n              map.title(\n                '<br\/><span style=\"color:#212121; font-size: 14px;\">Select a country see social security contributions.<\/span>'\n              );\n            }\n            map.padding([0, 0, 10, 0]);\n            var credits = map.credits();\n            credits.enabled(false);\n            credits.url(\"https:\/\/limes-int.com\/contact-limes\/\");\n            credits.text(\"Data source: https:\/\/limes-int.com\/\");\n            credits.logoSrc(\"https:\/\/limes-int.com\/favicon.ico\");\n\n            \/\/ set map Geo data\n\n            if (typeof svgData === \"undefined\") {\n              \/\/ NO MAP LOADED!!\n              svgData = svgDataEU;\n            }\n            map.geoData(svgData);\n            var zoomController = anychart.ui.zoom();\n            zoomController.target(map);\n            zoomController.render();\n\n            map.listen(\"pointClick\", function (e) {\n              var selected = [];\n              var selectedPoints = e.point.get(\"id\");\n              \/\/map.selected().fill(\"#FFA875\");\n              selected.push(selectedPoints);\n              \/\/changeContent(selected);\n            });\n\n            mapSeries = map.choropleth(dataSet);\n\n            mapSeries.labels(null);\n            var background = mapSeries.tooltip().background();\n            background.fill(\"#EEE 0.8\");\n            background.stroke(\"white\");\n            background.cornerType(\"roundInner\");\n            background.corners(5);\n\n            mapSeries.tooltip().useHtml(true);\n            mapSeries.tooltip().title().useHtml(true);\n            mapSeries.tooltip().titleFormat(function () {\n              var data = getDataId(this.id);\n              var flagid = data.id.toLowerCase();\n              var flagurl =\n                \"https:\/\/limes-int.com\/wp-content\/themes\/limes\/flags\/4x3\/\" +\n                flagid +\n                \".svg\";\n              var tooltipheader =\n                \"<img width='25' style='vertical-align: text-bottom;' src='\" +\n                flagurl +\n                \"'> <span style='font-size: 18px; color: white; text-decoration-thickness: 2px; text-decoration: underline; text-decoration-color: #fc6b21;'>\" +\n                data.name +\n                \"<\/span>\";\n              return tooltipheader;\n            });\n            mapSeries.tooltip().format(function () {\n              var data = getDataId(this.id);\n              if ($(\"#grosssalary option[value='argh']\").length > 0) {\n                return '<span style=\"font-size: 16px; font-weight: bold; color: #fc6b21\">Error:<br>Please select a salary indication. <\/span>';\n              }\n              if ($(\"#contributions option[value='argh']\").length > 0) {\n                return '<span style=\"font-size: 16px; font-weight: bold; color: #fc6b21\">Error:<br>Please select a contribution. <\/span>';\n              }\n              return (\n                '<span style=\"font-size: 16px; color: #b7b7b7\">Contribution: \u20ac <\/span>' +\n                commafy(data.value) +\n                \"<br> \" +\n                data.company\n              );\n            });\n\n            var scale = anychart.scales.linearColor(fixedColorScale);\n\n            mapSeries.hovered().fill(anychart.color.lighten(\"#fc6b21\"));\n            mapSeries.unhover();\n            mapSeries\n              .selected()\n              .fill(anychart.graphics.hatchFill(\"percent60\", \"#fc6b21\", 5.01))\n              .stroke(anychart.color.darken(\"#fc6b21\"));\n\n            if (currentContinent != \"WO\" || combo === undefined) {\n              scale.minimum(lowestValue);\n              scale.maximum(highestValue);\n              \/\/ Set color scale for the map\n              var selectedValue = document.getElementById(\"colorscale\").value;\n              \/\/ Use if statement to check the selected value\n              if (selectedValue === \"default\") {\n                var scale = anychart.scales.linearColor(fixedColorScale);\n                mapSeries.colorScale(scale);\n              } else if (selectedValue === \"ordinalequal\") {\n                console.log(equalscale);\n                let parsedData = JSON.parse(equalscale);\n                var scale = anychart.scales.ordinalColor(parsedData);\n                scale.colors(fixedColorScale);\n\n                console.log(\"Equal color scale selected\");\n                mapSeries.colorScale(scale);\n                \/\/ Add your code here for equal color scale\n              } else if (selectedValue === \"ordinaleven\") {\n                console.log(\"Even color scale selected\");\n                console.log(evenscale);\n                let parsedData = JSON.parse(evenscale);\n                var scale = anychart.scales.ordinalColor(parsedData);\n                \/\/scale.stroke('#BBB');\n                scale.colors(fixedColorScale);\n                mapSeries.colorScale(scale);\n                \/\/ Add your code here for even color scale\n              } else {\n                console.log(\"Unknown color scale selected\");\n                \/\/ Add your code here for handling unknown values\n              }\n\n              var colorRange = map.colorRange();\n              colorRange.enabled(true);\n              colorRange.labels({ fontSize: 10 });\n\n              mapSeries.stroke(function () {\n                this.iterator.select(this.index);\n                var pointValue = this.iterator.get(this.referenceValueNames[1]);\n                var color = this.colorScale.valueToColor(pointValue);\n                return anychart.color.darken(color);\n              });\n            }\n            if (combo === undefined) {\n              mapSeries.fill(\"#086973\");\n              mapSeries.stroke(anychart.color.darken(\"#086973\"));\n              colorRange.enabled(false);\n            }\n            return map;\n          }\n\n          \/\/  _____       _      _        _                              _\n          \/\/ |_   _|__ _ | |__  | |  ___ | |  __ _  _   _   ___   _   _ | |_\n          \/\/   | | \/ _` || '_ \\ | | \/ _ \\| | \/ _` || | | | \/ _ \\ | | | || __|\n          \/\/   | || (_| || |_) || ||  __\/| || (_| || |_| || (_) || |_| || |_\n          \/\/   |_| \\__,_||_.__\/ |_| \\___||_| \\__,_| \\__, | \\___\/  \\__,_| \\__|\n          \/\/                                        |___\/\n\n          \/\/ Creates general layout table with two inside layout tables\n          function fillInMainTable(flag) {\n            if (flag === \"wide\") {\n              \/\/ Continenten op links\n              layoutTable.contents(\n                [\n                  [continent1, mapChart, contactInfo],\n                  [continent2, null, null],\n                  [continent3, null, null],\n                  [continent4, null, null],\n                  [continent5, null, limesLogo],\n                ],\n                true\n              );\n              layoutTable.getRow(0).height(null);\n              layoutTable.getCol(0).width(\"10%\");\n              layoutTable.getCol(1).width(\"65%\");\n              layoutTable.getCell(0, 1).rowSpan(5); \/\/ Volledige hoogte voor de kaart\n              layoutTable.getCell(0, 2).rowSpan(1);\n              layoutTable.getCell(2, 2).rowSpan(1);\n            } else {\n              layoutTable.contents([[mapChart], [tableChart]], true);\n              layoutTable.getCol(0).width(\"100%\");\n              layoutTable.getRow(0).height(\"80%\");\n              layoutTable.getRow(1).height(null);\n            }\n            layoutTable.draw();\n          }\n\n          if (window.innerWidth > 768) fillInMainTable(\"wide\");\n          else {\n            fillInMainTable(\"slim\");\n          }\n          \/\/changeContent(continentCountries);\n          $(\"#tspan1\").html(\"Select salary\");\n\n          \/\/ On resize changing layout to mobile version or conversely\n          window.onresize = function () {\n            var temp = layoutTable.colsCount();\n            console.log(temp);\n            if (layoutTable.colsCount() === 1 && window.innerWidth > 767) {\n              fillInMainTable(\"wide\");\n            } else if (\n              layoutTable.colsCount() >= 2 &&\n              window.innerWidth <= 767\n            ) {\n              fillInMainTable(\"slim\");\n            }\n          };\n\n          function getDataId(id) {\n            for (var i = 0; i < data.length; i++) {\n              if (data[i].id === id) return data[i];\n            }\n          }\n\n          function getDataSum(field) {\n            var result = 0;\n            for (var i = 0; i < data.length; i++) {\n              result += parseInt(data[i][field]);\n            }\n            return result;\n          }\n        }\n      });\n\n  <\/script>  <style>\n    select {\n  width: 100%;\n  padding: 10px 10px;\n  border: none;\n  border-radius: 4px;\n  background-color: #fc6b21;\n  color: white;\n}\nselect:disabled,\nselect[disabled]{\n  background-color: #f1f1f1;\n  color: #aaa9a9;\n}\n.custom-select {\n  display: inline-block;\n  width: 32%;\n}\n.selectors {\n  width:100%;\n  max-width:1400px;\n  margin-left: auto;\n  margin-right: auto;\n}\n      .anychart-tooltip {\n        border-radius: 5px;\n        background: #086973;\n        font-family: Raleway, Helvetica, Arial, \"sans-serif\";\n        border: 1px solid white;\n      }\n      .anychart-tooltip-title {\n        font-size: 14px;\n      }\n      .anychart-tooltip-title IMG {\n        margin-left: 5px;\n        float: right;\n      }\n\n#container {\n    height: 75vh;\n    width: 95%;\n    max-width: 1600px;\n    margin: 0 auto;\n}\n\n@media (max-width: 767px) {\n    #container {\n        height: 800px;\n        width: 95%;\n        margin: 0 auto;\n        padding: 20px 0 0 0;\n    }\n    .custom-select {\n        display: inline-block;\n        width: 99%;\n        padding-top: 0.5%\n    }\n}\n  <\/style>    <div class=\"selectors\">\n      <div class=\"custom-select\">\n        <select id=\"continent\">\n          <option value=\"AF\">Continent: Africa<\/option>\n          <option value=\"AS\">Continent: Asia<\/option>\n          <option value=\"EU\" selected>Continent: Europe<\/option>\n          <option value=\"NA\">Continent: North-America<\/option>\n          <option value=\"SA\">Continent: South-America<\/option>\n          <option value=\"OC\">Continent: Oceania<\/option>\n        <\/select>\n      <\/div>\n      <div class=\"custom-select\">\n        <select id=\"grosssalary\" class=\"disableme\">\n          <option value=\"argh\" selected>Salary: ---<\/option>\n          <option value=\"blue\">Salary: \u20ac30,000<\/option>\n          <option value=\"white\">Salary: \u20ac75,000<\/option>\n          <option value=\"executive\">Salary \u20ac200,000<\/option>\n        <\/select>\n      <\/div>\n      <div class=\"custom-select\">\n        <select id=\"contributions\" class=\"disableme\">\n          <option value=\"argh\" selected>Contribution: ---<\/option>\n          <option value=\"employee\">Contribution: Employee<\/option>\n          <option value=\"employer\">Contribution: Employer<\/option>\n          <option value=\"combined\">Contribution: Combined<\/option>\n        <\/select>\n      <\/div>\n      <div class=\"custom-select\" style=\"visibility: hidden\">\n        <select id=\"colorscale\">\n          <option value=\"default\" selected>Default Colorscheme<\/option>\n          <option value=\"ordinalequal\">Ordinal Scale: Equal Size<\/option>\n          <option value=\"ordinaleven\">Ordinal Scale: Even Spread<\/option>\n        <\/select>\n      <\/div>\n    <\/div>\n    <div id=\"container\"><\/div><div class=\"fusion-modal modal fade modal-1 socsecmodal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"modal-heading-1\" aria-hidden=\"true\" style=\"--awb-border-color:var(--awb-color3);--awb-background:#ffffff;\"><div class=\"modal-dialog modal-lg\" role=\"document\"><div class=\"modal-content fusion-modal-content\"><div class=\"modal-header\"><button class=\"close\" type=\"button\" data-dismiss=\"modal\" aria-hidden=\"true\" aria-label=\"Close\">&times;<\/button><h3 class=\"modal-title\" id=\"modal-heading-1\" data-dismiss=\"modal\" aria-hidden=\"true\">Social Security Map 2024<\/h3><\/div><div class=\"modal-body fusion-clearfix\">\n<div>\n<p>This is our social security map:<\/p>\n<ul>\n<li><strong>Insight:<\/strong> This interactive map shows the considerable differences in the estimated costs of social security (statutory premiums) between the various countries on the map, as well as for the USA, Japan, and China.<\/li>\n<li><strong>Info:<\/strong> The color of the country changes depending on the amount of social contributions payable. The darker red a country is, the higher the social security contributions, whereas a dark green country has relatively low social security contributions in comparison to the rest of the countries.<\/li>\n<li>Countries have remarkable differences in their social security systems. Therefore, we based these figures on a standard profile of a family of four people:\n<ul>\n<li>A breadwinner\/employee<\/li>\n<li>A non-working Spouse<\/li>\n<li>Two minor children<\/li>\n<\/ul>\n<\/li>\n<li>To determine how the social security system works in each of the countries found in this document, we foremost rely on the conformation of foreign advisors. We, however, cannot get a conformation from every other country every year.<\/li>\n<li>Depending on the country, the outcome changes if one of the assumptions mentioned above changes. One other factor to keep in mind is the fact that social security premiums differ between sectors in a significant number of countries. We have estimated an average. However, if you work in a more dangerous field there is a possibility you (both employee or employer that is) pay a higher premium and vice versa. Additionally, self-employed individuals often pay different social security contributions altogether.<\/li>\n<li><i>Disclaimer!<\/i> No rights can be derived from the data resulting from this map.<\/li>\n<li><strong>Start:<\/strong> By clicking on a country and choosing a salary level, you will see the costs for the employee, the employer and the totals in the table on the right-hand side.<\/li>\n<\/ul>\n<\/div>\n<\/div><div class=\"modal-footer\"><button class=\"fusion-button button-default button-medium button default medium\" type=\"button\" data-dismiss=\"modal\">Close<\/button><\/div><\/div><\/div><\/div><script>(function($){\n   $(document).ready(function() {\n        $('.socsecmodal').modal('show');\n   });\n  \n})(jQuery);<\/script><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":47703,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"100-width.php","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"hf_cat_page":[99],"class_list":["post-47040","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/limes-int.com\/nl\/wp-json\/wp\/v2\/pages\/47040","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/limes-int.com\/nl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/limes-int.com\/nl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/limes-int.com\/nl\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/limes-int.com\/nl\/wp-json\/wp\/v2\/comments?post=47040"}],"version-history":[{"count":0,"href":"https:\/\/limes-int.com\/nl\/wp-json\/wp\/v2\/pages\/47040\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/limes-int.com\/nl\/wp-json\/wp\/v2\/media\/47703"}],"wp:attachment":[{"href":"https:\/\/limes-int.com\/nl\/wp-json\/wp\/v2\/media?parent=47040"}],"wp:term":[{"taxonomy":"hf_cat_page","embeddable":true,"href":"https:\/\/limes-int.com\/nl\/wp-json\/wp\/v2\/hf_cat_page?post=47040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}