: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
regionCodes[region].name = region;
html.appendChild(iMapsBuilder.addRegionButton(region, regionCodes[region].name));
var regionCodeId = document.createElement('code');
regionCodeId.innerHTML = region;
html.appendChild(regionCodeId);
// append space to separate elements
html.appendChild(document.createTextNode(' '));
var regionNameLoop = document.createElement('span');
regionNameLoop.innerHTML = regionCodes[region].name;
html.appendChild(regionNameLoop);
html.appendChild(document.createElement('br'));
var fullDataEl = document.createElement('p');
fullDataEl.innerHTML = iMapsOptions.messages.fullData;
html.appendChild(fullDataEl);
containerContent = document.createElement('div');
containerContent.appendChild(html);
container.innerHTML = '';
container.appendChild(containerContent);
jsonContainer = document.createElement('DIV');
container.appendChild(jsonContainer);
// set regionData to hidden field to be saved
regionDataContainer.value = JSON.stringify(regionData);
iMapsBuilder.regionData = regionDataArray;
// set region code fields to autocomplete
mainContainer.addEventListener('click', iMapsBuilder.clickEvents);
// for the region autocomplete
mainContainer.addEventListener('focus', iMapsBuilder.eventRegionCodeAutocomplete, true);
iMapsBuilder.addRegionButton = function (id, name) {
var icon = document.createElement('span'),
if (!iMapsBuilder.regionsUsed.includes(id.toString())) {
icon.classList.add('igm_add_region_btn', 'dashicons', 'dashicons-plus-alt');
icon.classList.add('dashicons', 'dashicons-yes-alt');
icon.setAttribute('title', iMapsOptions.messages.addToMap);
icon.onclick = function (e) {
iMapsBuilder.addRegion(id, name);
// trigger form change event
previewContainer = document.querySelector('.map_wrapper');
iMapsBuilder.needsUpdate = true;
previewContainer.classList.add('map_updating');
if (!iMapsBuilder.isInViewport(previewContainer)) {
form = iMapsBuilder.form;
iMapsBuilder.updatePreview(form, false);
iMapsBuilder.clickEvents = function (e) {
if (e.target && e.target.classList.contains('csf-cloneable-remove')) {
previewContainer = document.querySelector('.map_wrapper');
previewContainer.classList.add('map_updating');
// update region list? Only when regions.. should be improved
iMapsBuilder.updateRegionsUsed();
iMapsBuilder.populateAvailableRegions();
if (previewContainer && !iMapsBuilder.isInViewport(previewContainer)) {
iMapsBuilder.needsUpdate = true;
iMapsBuilder.eventRegionCodeAutocomplete = function (e) {
if (e.target && e.target.classList.contains('region-code-autocomplete')) {
fetch: function (text, update) {
text = text.toLowerCase();
// you can also use AJAX requests instead of preloaded data
var suggestions = iMapsBuilder.regionData.filter(function (n) {
return n.label.toLowerCase().includes(text);
onSelect: function (item) {
e.target.value = item.value;
iMapsBuilder.extractGeojson = function (geojson) {
if (typeof geojson === 'undefined') {
error: iMapsOptions.messages.jsonError,
features = geojson.features ? geojson.features : geojson;
Object.keys(features).forEach(function (key) {
extracted[features[key].id] = features[key].properties
? features[key].properties
iMapsBuilder.buildPreview = function () {
var previewContainer = document.getElementById('map_preview'),
form = iMapsBuilder.form,
if (iMapsBuilder.isInViewport(previewContainer)) {
if (iMapsBuilder.needsUpdate) {
iMapsBuilder.updatePreview(form, false);
// set listener for input fields of form
onChangeFunction = iMapsBuilder.eventThrottle(function (e) {
e.target.classList.contains('chosen-search-input') ||
e.target.classList.contains('skip-preview') ||
e.target.name == 'map_info[description]'
//form = document.querySelector("form#post"),
iMapsBuilder.updatePreview(form, e);
//form.addEventListener("change", onChangeFunction);
inputsSelector = '#map_info input, #map_info select, #map_info textarea';
inputs = document.querySelectorAll(inputsSelector);
inputs.forEach(function (input) {
input.onchange = onChangeFunction;
// when a clone button is clicked, we remove event listener from form and add it again to include new inputs
document.querySelectorAll('.csf-cloneable-add').forEach(function (button) {
button.addEventListener('click', function (e) {
inputs.forEach(function (input) {
inputs = document.querySelectorAll(inputsSelector);
inputs.forEach(function (input) {
input.onchange = onChangeFunction;
// onclick events to trigger change on some fields
switchInputs = document.querySelectorAll('#map_info .csf--switcher');
switchInputs.forEach(function (inp) {
// inp.addEventListener("click", onChangeFunction);
mapContainer = previewContainer.querySelector('.map_render');
mapId = document.getElementById('post_ID').value;
mapContainer.id = 'map_' + mapId;
// trigger map preview if first time
if (iMapsData.data[0].disabled) {
document.getElementsByName('map_info[map]')[0].dispatchEvent(new Event('change'));
iMapsBuilder.restartMap = function () {
var previewContainer = document.querySelector('.map_wrapper');
Object.keys(iMaps.maps).forEach(function (id) {
iMaps.maps[id].map.dispose();
data = iMapsModel.prepareData(iMapsData.data);
data.forEach(function (tdata, index) {
iMapsManager.init(index);
iMapsBuilder.needsUpdate = false;
previewContainer.classList.remove('map_updating');
iMapsBuilder.updatePreview = function (form, ev) {
var formData = new FormData(form),
// if we're just scrolling and we don't need to update
if (!ev && !iMapsBuilder.needsUpdate) {
// if the preview is blocked - because of overlay preview
if (iMapsBuilder.previewBlocked) {
// if the change event was not from the map_info collection
if (ev && !ev.target.name.includes('map_info')) {
Object.keys(iMaps.maps).forEach(function (id) {
mapData = iMaps.maps[id];
map = iMaps.maps[id].map;
baseRegionSeries = iMaps.maps[id].baseRegionSeries;
// if we only changed visual stuff
(ev.target.name == 'map_info[visual][paddingTop]' ||
ev.target.name == 'map_info[visual][maxWidth]')
maxWidth = document.getElementsByName('map_info[visual][maxWidth]')[0];
paddingTop = document.getElementsByName('map_info[visual][paddingTop]')[0];
mapWrapper = document.querySelector('.map_wrapper .map_box');
mapContainer = document.querySelector('.map_aspect_ratio');
mapContainer.style.paddingTop = String(paddingTop.value) + '%';
if (maxWidth !== '' && maxWidth !== '0') {
mapWrapper.style.maxWidth = String(maxWidth.value) + 'px';
if (ev && ev.target.name == 'map_info[visual][fontFamily]') {
mapWrapper = document.querySelector('.map_wrapper .map_box');
mapWrapper.style.fontFamily = ev.target.value;
if (ev && ev.target.name == "map_info[projection]" && map) {
if ("Orthographic" !== ev.target.value && ev.target.value !== "Albers" ) {
map.projection = new am4maps.projections[ev.target.value]();
console.log(ev.target.value);
if (ev && ev.target.name == 'map_info[visual][backgroundColor]' && map) {
if (ev.target.value === 'transparent') {
map.background.fill = am4core.color('#f00', 0);
map.background.fill = am4core.color(ev.target.value);
if (ev && ev.target.name == 'map_info[visual][borderWidth]' && map) {
baseRegionSeries.mapPolygons.each(function (polygon) {
if (ev && ev.target.name == 'map_info[visual][inactiveColor]' && map) {
baseRegionSeries.mapPolygons.each(function (polygon) {
if (polygon.dataItem.dataContext.madeFromGeoData) {
property: 'inactiveColor',
if (ev && ev.target.name == 'map_info[visual][borderColor]' && map) {
baseRegionSeries.mapPolygons.each(function (polygon) {
to: am4core.color(ev.target.value),
if (ev && ev.target.name == 'map_info[overlay][]' && map) {
iMapsBuilder.previewBlocked = true;
iMapsBuilder.blockPreview();
// if map changes and is set to 'custom' maybe we block it to make sure everything else works?
ev.target.name == 'map_info[map]' &&
ev.target.value === 'custom' &&
ev.target.value === '' &&
iMapsBuilder.previewBlocked = true;
iMapsBuilder.blockPreview();
if (ev && ev.target.name == 'map_info[mapURL]' && ev.target.value !== '' && map) {
iMapsBuilder.previewBlocked = true;
iMapsBuilder.blockPreview();
if (iMapsOptions.preview && iMapsOptions.preview !== '1') {
iMapsBuilder.previewBlocked = true;
iMapsBuilder.blockPreview();
// to block preview after custom js change
if (ev && ev.target.name == 'map_info[custom_js]' && map) {
iMapsBuilder.previewBlocked = true;
iMapsBuilder.blockPreview();
// if preview container is not visible, only update when it becomes visible
// but only if the change was not in the map option
previewContainer = document.querySelector('.map_wrapper');
ev.target.name != 'map_info[map]' &&
!iMapsBuilder.isInViewport(previewContainer)
previewContainer.classList.add('map_updating');
iMapsBuilder.needsUpdate = true;
formData.append('action', 'map_form_data');
formData.append('security', iMapsOptions.ajax_nonce);
previewContainer.classList.add('map_updating');
url: iMapsOptions.ajax_url,
success: function (response) {
var decode = [JSON.parse(response)];
//handle entries with json that might lost formatting
typeof decode[0].regionLabels === 'object' &&
decode[0].regionLabels.hasOwnProperty('regionLabelCustomCoordinates')
decode[0].regionLabels.regionLabelCustomCoordinates =
decode[0].regionLabels.regionLabelCustomCoordinates.replace(/\\/g, '');
// merge with global options
if (typeof iMapsOptions !== 'undefined') {
iMapsData.data[0] = Object.assign(iMapsData.data[0], iMapsOptions);
if (ev && ev.target.name === 'map_info[map]') {
// we changed map, so we need to attach it to the page
iMapsBuilder.addGeoFileSeries(decode[0].mapURL, iMapsBuilder.restartMap);
iMapsBuilder.restartMap();
//iMapsBuilder.checkMaxInputVars();
console.log('map updated');
error: function (error) {
// check number of inputs
// iMapsBuilder.checkMaxInputVars();
iMapsBuilder.blockPreview = function () {
previewContainer = document.querySelector('.map_wrapper .map_blocked_preview');
previewContainer.classList.remove('map_block_hidden');
iMapsBuilder.needsUpdate = false;