\\n';\n\n document.body.appendChild(bg);\n var btn = bg.querySelector('button.button_st3');\n btn.onclick = function () {\n if (global._app.xhr_to_cancel) {\n global._app.xhr_to_cancel.abort();\n global._app.xhr_to_cancel = undefined;\n }\n if (global._app.webworker_to_cancel) {\n global._app.webworker_to_cancel.onmessage = null;\n global._app.webworker_to_cancel.terminate();\n global._app.webworker_to_cancel = undefined;\n }\n bg.style.display = 'none';\n };\n return {\n display: function display() {\n var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n\n bg.style.display = '';\n if (opts.cancel_button && opts.cancel_button === false) {\n btn.style.display = 'none';\n }\n if (opts.zIndex) {\n bg.style.zIndex = opts.zIndex;\n }\n },\n hide: function hide() {\n bg.style.display = 'none';\n bg.style.zIndex = '';\n btn.style.display = '';\n }\n };\n};\n\nvar drag_elem_geo = exports.drag_elem_geo = d3.drag().subject(function () {\n var t = d3.select(this);\n return {\n x: t.attr('x'),\n y: t.attr('y'),\n map_locked: !!map_div.select('#hand_button').classed('locked')\n };\n}).on('start', function () {\n d3.event.sourceEvent.stopPropagation();\n d3.event.sourceEvent.preventDefault();\n (0, _interface.handle_click_hand)('lock');\n}).on('end', function () {\n if (d3.event.subject && !d3.event.subject.map_locked) {\n (0, _interface.handle_click_hand)('unlock');\n }\n}).on('drag', function () {\n d3.select(this).attr('x', d3.event.x).attr('y', d3.event.y);\n});\n\nvar drag_elem_geo2 = exports.drag_elem_geo2 = d3.drag().filter(function () {\n return data_manager.current_layers[_app.id_to_layer.get(this.parentElement.id)].draggable;\n}).subject(function () {\n // const layer_name = global._app.id_to_layer.get(this.parentElement.id);\n var symbol = data_manager.current_layers[_app.id_to_layer.get(this.parentElement.id)].symbol;\n var t = d3.select(this);\n if (symbol === 'rect') {\n return {\n x: t.attr('x'),\n y: t.attr('y'),\n symbol: symbol,\n map_locked: !!map_div.select('#hand_button').classed('locked')\n };\n } else if (symbol === 'circle') {\n return {\n x: t.attr('cx'),\n y: t.attr('cy'),\n symbol: symbol,\n map_locked: !!map_div.select('#hand_button').classed('locked')\n };\n }\n}).on('start', function () {\n d3.event.sourceEvent.stopPropagation();\n d3.event.sourceEvent.preventDefault();\n (0, _interface.handle_click_hand)('lock');\n var zoom = svg_map.__zoom;\n var centroid = path.centroid(this.__data__.geometry);\n centroid[0] = centroid[0] * zoom.k + zoom.x;\n centroid[1] = centroid[1] * zoom.k + zoom.y;\n map.append('rect').attrs({ x: centroid[0] - 2, y: centroid[1] - 2, height: 4, width: 4, id: 'ref_symbol_location' }).style('fill', 'red');\n}).on('end', function () {\n if (d3.event.subject && !d3.event.subject.map_locked) {\n (0, _interface.handle_click_hand)('unlock');\n }\n map.selectAll('#ref_symbol_location').remove();\n}).on('drag', function () {\n if (d3.event.subject.symbol === 'rect') {\n d3.select(this).attr('x', d3.event.x).attr('y', d3.event.y);\n } else if (d3.event.subject.symbol === 'circle') {\n d3.select(this).attr('cx', d3.event.x).attr('cy', d3.event.y);\n }\n});\n\nvar drag_waffle = exports.drag_waffle = d3.drag().filter(function () {\n return data_manager.current_layers[_app.id_to_layer.get(this.parentElement.id)].draggable;\n}).subject(function () {\n var t = d3.select(this);\n var prev_translate = t.attr('transform');\n prev_translate = prev_translate ? prev_translate.slice(10, -1).split(/[ ,]+/).map(function (f) {\n return +f;\n }) : [0, 0];\n return {\n x: t.attr('x') + prev_translate[0],\n y: t.attr('y') + prev_translate[1],\n map_locked: !!map_div.select('#hand_button').classed('locked')\n };\n}).on('start', function () {\n d3.event.sourceEvent.stopPropagation();\n d3.event.sourceEvent.preventDefault();\n (0, _interface.handle_click_hand)('lock');\n}).on('end', function () {\n if (d3.event.subject && !d3.event.subject.map_locked) {\n (0, _interface.handle_click_hand)('unlock');\n }\n d3.select(this).style('cursor', 'grab');\n}).on('drag', function () {\n d3.select(this).attr('transform', 'translate(' + [d3.event.x, d3.event.y] + ')').style('cursor', 'grabbing');\n});\n\nfunction setSelected(selectNode, value) {\n selectNode.value = value; // eslint-disable-line no-param-reassign\n selectNode.dispatchEvent(new Event('change'));\n}\n\nfunction path_to_geojson(layerName) {\n var id_layer = ['#', global._app.layer_to_id.get(layerName)].join('');\n var result_geojson = [];\n d3.select(id_layer).selectAll('path').each(function (d, i) {\n result_geojson.push({\n type: 'Feature',\n id: i,\n properties: d.properties,\n geometry: { type: d.type, coordinates: d.coordinates }\n });\n });\n return JSON.stringify({\n type: 'FeatureCollection',\n crs: { type: 'name', properties: { name: 'urn:ogc:def:crs:OGC:1.3:CRS84' } },\n features: result_geojson\n });\n}\n\nfunction path_to_geojson2(layerName) {\n var id_layer = ['#', global._app.layer_to_id.get(layerName)].join('');\n var result_geojson = [];\n d3.select(id_layer).selectAll('path').each(function (d, i) {\n result_geojson.push({\n type: 'Feature',\n id: i,\n properties: d.properties,\n geometry: d.geometry\n });\n });\n return JSON.stringify({\n type: 'FeatureCollection',\n crs: { type: 'name', properties: { name: 'urn:ogc:def:crs:OGC:1.3:CRS84' } },\n features: result_geojson\n });\n}\n\nfunction display_error_during_computation(msg) {\n var message = message ? '
' + _tr('app_page.common.details') + ': ' + msg : '';\n swal({\n title: _tr('app_page.common.error') + '!',\n text: '' + _tr('app_page.common.error_message') + msg,\n customClass: 'swal2_custom',\n type: 'error',\n allowOutsideClick: false\n });\n}\n\n/**\n* Perform an asynchronous request\n*\n* @param {String} method - the method like \"GET\" or \"POST\"\n* @param {String} url - the targeted url\n* @param {FormData} data - Optionnal, the data to be send\n* @return {Promise} response\n*/\nfunction request_data(method, url, data) {\n return new Promise(function (resolve, reject) {\n var request = new XMLHttpRequest();\n request.open(method, url, true);\n request.onload = resolve;\n request.onerror = reject;\n request.send(data);\n });\n}\n\n/**\n* Perform an asynchronous request\n*\n* @param {String} method - the method like \"GET\" or \"POST\"\n* @param {String} url - the targeted url\n* @param {FormData} data - Optionnal, the data to be send\n* @param {Boolean} waitingMessage - Optionnal, whether to display or not\n* a waiting message while the request is proceeded\n* @return {Promise} response\n*/\nfunction xhrequest(method, url, data, waitingMessage) {\n if (waitingMessage) {\n global._app.waitingOverlay.display();\n }\n return new Promise(function (resolve, reject) {\n var request = new XMLHttpRequest();\n global._app.xhr_to_cancel = request;\n request.open(method, url, true);\n request.onload = function (resp) {\n resolve(resp.target.responseText);\n global._app.xhr_to_cancel = undefined;\n if (waitingMessage) {\n global._app.waitingOverlay.hide();\n }\n };\n request.onerror = function (err) {\n reject(err);\n global._app.xhr_to_cancel = undefined;\n if (waitingMessage) {\n global._app.waitingOverlay.hide();\n }\n };\n request.send(data);\n });\n}\n\nfunction getImgDataUrl(url) {\n return new Promise(function (resolve, reject) {\n var request = new XMLHttpRequest();\n request.onload = function () {\n var reader = new FileReader();\n reader.onloadend = function () {\n resolve(reader.result);\n };\n reader.readAsDataURL(request.response);\n };\n request.onerror = function (err) {\n reject(err);\n };\n request.open('GET', url, true);\n request.responseType = 'blob';\n request.send();\n });\n}\n\nfunction make_content_summary(serie) {\n var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 6;\n\n return [_tr('app_page.stat_summary.population'), ' : ', (0, _helpers_calc.round_value)(serie.pop(), precision), '
', _tr('app_page.stat_summary.min'), ' : ', (0, _helpers_calc.round_value)(serie.min(), precision), ' | ', _tr('app_page.stat_summary.max'), ' : ', (0, _helpers_calc.round_value)(serie.max(), precision), '
', _tr('app_page.stat_summary.mean'), ' : ', (0, _helpers_calc.round_value)(serie.mean(), precision), '
', _tr('app_page.stat_summary.median'), ' : ', (0, _helpers_calc.round_value)(serie.median(), precision), '
', _tr('app_page.stat_summary.variance'), ' : ', (0, _helpers_calc.round_value)(serie.variance(), precision), '
', _tr('app_page.stat_summary.stddev'), ' : ', (0, _helpers_calc.round_value)(serie.stddev(), precision), '
', _tr('app_page.stat_summary.cov'), ' : ', (0, _helpers_calc.round_value)(serie.cov(), precision)].join('');\n}\n\nfunction copy_layer(ref_layer, new_name, type_result, fields_to_copy) {\n var id_new_layer = encodeId(new_name);\n var id_ref_layer = global._app.layer_to_id.get(ref_layer);\n var node_ref_layer = svg_map.querySelector('#' + id_ref_layer);\n global._app.layer_to_id.set(new_name, id_new_layer);\n global._app.id_to_layer.set(id_new_layer, new_name);\n svg_map.appendChild(node_ref_layer.cloneNode(true));\n svg_map.lastChild.setAttribute('id', id_new_layer);\n var node_new_layer = document.getElementById(id_new_layer);\n svg_map.insertBefore(node_new_layer, svg_map.querySelector('.legend'));\n data_manager.result_data[new_name] = [];\n data_manager.current_layers[new_name] = {\n n_features: data_manager.current_layers[ref_layer].n_features,\n type: data_manager.current_layers[ref_layer].type,\n ref_layer_name: ref_layer\n };\n if (data_manager.current_layers[ref_layer].pointRadius) {\n data_manager.current_layers[new_name].pointRadius = data_manager.current_layers[ref_layer].pointRadius;\n }\n var selec_src = node_ref_layer.getElementsByTagName('path'),\n selec_dest = node_new_layer.getElementsByTagName('path');\n if (!fields_to_copy) {\n for (var i = 0; i < selec_src.length; i++) {\n selec_dest[i].__data__ = selec_src[i].__data__;\n data_manager.result_data[new_name].push(selec_dest[i].__data__.properties);\n }\n } else {\n for (var _i = 0; _i < selec_src.length; _i++) {\n selec_dest[_i].__data__ = { type: 'Feature', properties: {}, geometry: cloneObj(selec_src[_i].__data__.geometry) };\n var nb_field_to_copy = fields_to_copy.length;\n for (var j = 0; j < nb_field_to_copy; j++) {\n var f = fields_to_copy[j];\n selec_dest[_i].__data__.properties[f] = selec_src[_i].__data__.properties[f];\n }\n data_manager.result_data[new_name].push(selec_dest[_i].__data__.properties);\n }\n }\n // Set the desired class name :\n node_new_layer.className.baseVal = 'layer';\n // Reset visibility and filter attributes to default values:\n node_new_layer.style.visibility = '';\n node_new_layer.removeAttribute('filter');\n // Create an entry in the layer manager:\n create_li_layer_elem(new_name, data_manager.current_layers[new_name].n_features, [data_manager.current_layers[new_name].type, type_result], 'result');\n}\n\n/**\n* Send a geo result layer computed client-side (currently only discontinuities)\n* to the server in order to use it as other result layers computed server side\n* @param {string} layerName - The name of the layer to send\n* @param {string} url - The url to use\n* @return {undefined}\n*/\nfunction send_layer_server(layerName, url) {\n var JSON_layer = path_to_geojson(layerName);\n var formToSend = new FormData();\n formToSend.append('geojson', JSON_layer);\n formToSend.append('layer_name', layerName);\n xhrequest('POST', url, formToSend, false).then(function (e) {\n data_manager.current_layers[layerName].key_name = JSON.parse(e).key;\n }).catch(function (err) {\n display_error_during_computation();\n console.log(err);\n });\n}\n\n/**\n* Function returning the name of all current layers (excepted the sample layers used as layout)\n*\n* @return {Array} - The name of the other layers in an Array\n*/\nfunction get_other_layer_names() {\n var otherLayers = Object.getOwnPropertyNames(data_manager.current_layers);\n var tmpIdx = null;\n\n tmpIdx = otherLayers.indexOf('Graticule');\n if (tmpIdx > -1) otherLayers.splice(tmpIdx, 1);\n\n tmpIdx = otherLayers.indexOf('World');\n if (tmpIdx > -1) otherLayers.splice(tmpIdx, 1);\n\n tmpIdx = otherLayers.indexOf('Sphere');\n if (tmpIdx > -1) otherLayers.splice(tmpIdx, 1);\n\n return otherLayers;\n}\n\nfunction get_display_name_on_layer_list(layer_name_to_add) {\n return +layer_name_to_add.length > 40 ? [layer_name_to_add.substring(0, 37), '(...)'].join('') : layer_name_to_add;\n}\n\n/**\n* Function triggered in order to add a new layer\n* in the \"layer manager\" (with appropriates icons regarding to its type, etc.)\n* @param {string} layerName - The name of the new layer\n* @param {integer} nbFt - The number of feature in this layer\n* @param {string} typeGeom - The geometry type\n* @param {string} typeLayer - Whether it is a result layer or not\n* @return {undefined}\n*/\nfunction create_li_layer_elem(layerName, nbFt, typeGeom, typeLayer) {\n var listDisplayName = get_display_name_on_layer_list(layerName);\n var layerId = encodeId(layerName);\n var layersListed = document.querySelector('#sortable.layer_list');\n var li = document.createElement('li');\n li.setAttribute('layer_name', layerName);\n if (typeLayer === 'result') {\n li.setAttribute('class', ['sortable_result ', layerId].join(''));\n var promotable = ['flow', 'grid', 'discont', 'cartogram', 'smooth'];\n var replace_but = promotable.indexOf(typeGeom[1]) > -1 ? _buttons.button_replace : undefined;\n li.innerHTML = [listDisplayName, '', _buttons.button_trash, _buttons.sys_run_button_t2, _buttons.button_zoom_fit, _buttons.button_table, _buttons.eye_open0, _buttons.button_legend, _buttons.button_result_type.get(typeGeom[1]), replace_but, '
'].join('');\n } else if (typeLayer === 'target') {\n li.setAttribute('class', ['sortable_target ', layerId].join(''));\n li.innerHTML = [listDisplayName, '', _buttons.button_trash, _buttons.sys_run_button_t2, _buttons.button_zoom_fit, _buttons.button_table, _buttons.eye_open0, _buttons.button_type.get(typeGeom), _buttons.button_replace, '
'].join('');\n } else {\n li.setAttribute('class', ['sortable ', layerId].join(''));\n li.innerHTML = [listDisplayName, '', _buttons.button_trash, _buttons.sys_run_button_t2, _buttons.button_zoom_fit, _buttons.button_table, _buttons.eye_open0, _buttons.button_type.get(typeGeom), _buttons.button_replace, '
'].join('');\n }\n layersListed.insertBefore(li, layersListed.childNodes[0]);\n (0, _interface.binds_layers_buttons)(layerName);\n}\n\n/**\n* Function returning an object describing the type of field\n* @param {string} layerName - The name of the new layer\n* @param {string} target - The geometry type\n* @return {object|array} - An object containing the type of each field if\n* target was nos specified, otherwise an array of field name corresponding\n* to the type defined in 'target'.\n*/\nvar type_col = exports.type_col = function type_col(layerName, target) {\n // Function returning an object like {\"field1\": \"field_type\", \"field2\": \"field_type\"},\n // for the fields of the selected layer.\n // If target is set to \"number\" it should return an array containing only the name of the numerical fields\n // ------------------- \"string\" ---------------------------------------------------------non-numerial ----\n var table = data_manager.user_data.hasOwnProperty(layerName) ? data_manager.user_data[layerName] : data_manager.result_data.hasOwnProperty(layerName) ? data_manager.result_data[layerName] : data_manager.joined_dataset[0];\n var fields = Object.getOwnPropertyNames(table[0]);\n var nbFeatures = table.length;\n var deepthTest = nbFeatures > 100 ? 100 : nbFeatures - 1;\n var result = {};\n var field = void 0;\n var tmpType = void 0;\n\n for (var j = 0, len = fields.length; j < len; ++j) {\n field = fields[j];\n result[field] = [];\n for (var i = 0; i < deepthTest; ++i) {\n tmpType = _typeof(table[i][field]);\n if (tmpType === 'string' && table[i][field].length === 0) {\n tmpType = 'empty';\n } else if (tmpType === 'string' && !isNaN(Number(table[i][field])) || tmpType === 'number') {\n tmpType = 'number';\n } else if (tmpType === 'object' && isFinite(table[i][field])) {\n tmpType = 'empty';\n }\n result[fields[j]].push(tmpType);\n }\n }\n\n for (var _j = 0, _len = fields.length; _j < _len; ++_j) {\n field = fields[_j];\n if (result[field].every(function (ft) {\n return ft === 'number' || ft === 'empty';\n }) && result[field].indexOf('number') > -1) {\n result[field] = 'number';\n } else {\n result[field] = 'string';\n }\n }\n if (target) {\n var res = [];\n Object.keys(result).forEach(function (k) {\n if (result[k] === target && k !== '_uid') {\n res.push(k);\n }\n });\n return res;\n }\n return result;\n};\n\nvar type_col2 = exports.type_col2 = function type_col2(table, _field) {\n var skip_if_empty_values = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;\n\n // Function returning an array of objects like\n // {name: \"field1\", type: \"field_type\"}, {name: \"field2\", type: \"field_type\"}, (...)]\n // for the fields of the selected layer.\n var result = [];\n var nbFeatures = table.length;\n var tmp = {};\n var dups = {};\n var field = _field;\n var tmpType = void 0;\n var fields = void 0;\n\n if (!field) {\n fields = Object.getOwnPropertyNames(table[0]).filter(function (v) {\n return v !== '_uid';\n });\n field = undefined;\n } else {\n fields = [field];\n field = undefined;\n }\n\n for (var j = 0, len = fields.length; j < len; ++j) {\n field = fields[j];\n tmp[field] = [];\n dups[field] = false;\n var h = {};\n for (var i = 0; i < nbFeatures; ++i) {\n var val = table[i][field];\n if (h[val]) dups[field] = true;else h[val] = true;\n tmpType = typeof val === 'undefined' ? 'undefined' : _typeof(val);\n if (tmpType === 'object' && isFinite(val)) {\n tmpType = 'empty';\n } else if (tmpType === 'string' && val.length === 0) {\n tmpType = 'empty';\n } else if (tmpType === 'string' && !isNaN(Number(val)) || tmpType === 'number') {\n var _val = Number(val);\n tmpType = (_val | 0) === val ? 'stock' : (_val | 0) === +val ? 'stock' : 'ratio';\n }\n tmp[fields[j]].push(tmpType);\n }\n }\n var nb_id_field = 0;\n for (var _j2 = 0, _len2 = fields.length; _j2 < _len2; ++_j2) {\n field = fields[_j2];\n var hasDup = dups[field];\n if ((field.toLowerCase() === 'id' || field.toLowerCase().indexOf('name') > -1 || field.toLowerCase().indexOf('nom') > -1) && !hasDup) {\n result.push({ name: field, type: 'id', has_duplicate: hasDup });\n nb_id_field += 1;\n } else if (field.toLowerCase().indexOf('id') > -1 && nb_id_field < 1 && !hasDup) {\n result.push({ name: field, type: 'id', has_duplicate: hasDup });\n nb_id_field += 1;\n } else if (!hasDup && nb_id_field < 1 && tmp[field].every(function (ft) {\n return ft === 'string' || ft === 'stock';\n })) {\n result.push({ name: field, type: 'id', has_duplicate: hasDup });\n nb_id_field += 1;\n } else if (tmp[field].every(function (ft) {\n return ft === 'string';\n }) && !hasDup) {\n result.push({ name: field, type: 'id', has_duplicate: hasDup });\n nb_id_field += 1;\n } else if (tmp[field].every(function (ft) {\n return ft === 'stock' || ft === 'empty';\n }) && tmp[field].indexOf('stock') > -1) {\n result.push({ name: field, type: 'stock', has_duplicate: hasDup });\n } else if (tmp[field].every(function (ft) {\n return ft === 'string' || ft === 'empty';\n }) && tmp[field].indexOf('string') > -1) {\n result.push({ name: field, type: 'category', has_duplicate: hasDup });\n } else if (tmp[field].every(function (ft) {\n return ft === 'ratio' || ft === 'stock' || ft === 'empty';\n }) && tmp[field].indexOf('ratio') > -1) {\n result.push({ name: field, type: 'ratio' });\n } else {\n result.push({ name: field, type: 'unknown', has_duplicate: hasDup });\n }\n }\n return result;\n};\n\nvar getFieldsType = exports.getFieldsType = function getFieldsType(type, layerName, ref) {\n if (!layerName && !ref) return null;\n var refField = ref || data_manager.current_layers[layerName].fields_type;\n if (!refField) return [];\n return refField.filter(function (d) {\n return d.type === type;\n }).map(function (d) {\n return d.name;\n });\n};\n\nfunction make_box_type_fields(layerName) {\n (0, _dialogs.make_dialog_container)('box_type_fields', _tr('app_page.box_type_fields.title'), 'dialog');\n d3.select('#box_type_fields').select('.modal-dialog').style('width', '500px');\n var newbox = d3.select('#box_type_fields').select('.modal-body');\n var tmp = type_col2(data_manager.user_data[layerName]);\n var fields_type = data_manager.current_layers[layerName].fields_type;\n var f = fields_type.map(function (v) {\n return v.name;\n });\n var refType = ['id', 'stock', 'ratio', 'category', 'unknown'];\n\n // const deferred = Promise.pending();\n var container = document.getElementById('box_type_fields');\n return new Promise(function (resolve, reject) {\n var clean_up_box = function clean_up_box() {\n container.remove();\n _dialogs.overlay_under_modal.hide();\n document.removeEventListener('keydown', helper_esc_key_twbs);\n if (window.fields_handler) {\n fields_handler.unfill();\n fields_handler.fill(layerName);\n }\n };\n\n if (f.length === 0) {\n // If the user dont have already selected the type :\n fields_type = tmp.slice();\n container.querySelector('.btn_cancel').remove(); // Disabled cancel button to force the user to choose\n var _onclose = function _onclose() {\n // Or use the default values if he use the X close button\n data_manager.current_layers[layerName].fields_type = tmp.slice();\n getAvailablesFunctionnalities(layerName);\n resolve(false);\n clean_up_box();\n };\n container.querySelector('#xclose').onclick = _onclose;\n } else if (tmp.length > fields_type.length) {\n // There is already types selected but new fields where added\n tmp.forEach(function (d) {\n if (f.indexOf(d.name) === -1) {\n fields_type.push(d);\n }\n });\n container.querySelector('.btn_cancel').remove(); // Disabled cancel button to force the user to choose\n var _onclose2 = function _onclose2() {\n // Or use the default values if he use the X close button\n data_manager.current_layers[layerName].fields_type = tmp.slice();\n getAvailablesFunctionnalities(layerName);\n resolve(false);\n clean_up_box();\n };\n container.querySelector('#xclose').onclick = _onclose2;\n } else {\n // There is already types selected and no new fields (so this is a modification) :\n // Use the previous values if the user close\n // the window without confirmation (cancel or X button)\n var _onclose3 = function _onclose3() {\n data_manager.current_layers[layerName].fields_type = fields_type;\n resolve(false);\n clean_up_box();\n };\n container.querySelector('.btn_cancel').onclick = _onclose3;\n container.querySelector('#xclose').onclick = _onclose3;\n }\n\n // Fetch and store the selected values when 'Ok' button is clicked :\n container.querySelector('.btn_ok').onclick = function () {\n var r = [];\n Array.prototype.forEach.call(document.querySelectorAll('#fields_select > li'), function (elem) {\n r.push({ name: elem.childNodes[0].innerHTML.trim(), type: elem.childNodes[1].value });\n });\n resolve(true);\n data_manager.current_layers[layerName].fields_type = r.slice();\n getAvailablesFunctionnalities(layerName);\n clean_up_box();\n };\n function helper_esc_key_twbs(_evt) {\n var evt = _evt || window.event;\n var isEscape = 'key' in evt ? evt.key === 'Escape' || evt.key === 'Esc' : evt.keyCode === 27;\n if (isEscape) {\n evt.stopPropagation();\n data_manager.current_layers[layerName].fields_type = tmp.slice();\n getAvailablesFunctionnalities(layerName);\n resolve(false);\n clean_up_box();\n }\n }\n document.addEventListener('keydown', helper_esc_key_twbs);\n document.getElementById('btn_type_fields').removeAttribute('disabled');\n\n newbox.append('h3').html(_tr('app_page.box_type_fields.message_invite'));\n\n var box_select = newbox.append('ul').attr('id', 'fields_select').styles({\n padding: '0',\n 'list-style': 'none'\n });\n\n box_select.selectAll('li').data(fields_type).enter().append('li');\n\n box_select.selectAll('li').insert('span').html(function (d) {\n return d.name;\n });\n\n box_select.selectAll('li').insert('select').style('float', 'right').selectAll('option').data(refType).enter().insert('option').attr('value', function (d) {\n return d;\n }).text(function (d) {\n return _tr('app_page.box_type_fields.' + d);\n }).exit();\n\n box_select.selectAll('select').each(function (d) {\n this.value = d.type;\n });\n\n for (var i = 0; i < fields_type.length; i++) {\n if (fields_type[i].type === 'category' || fields_type[i].not_number) {\n box_select.node().childNodes[i].childNodes[1].options.remove(2);\n box_select.node().childNodes[i].childNodes[1].options.remove(1);\n }\n if (fields_type[i].has_duplicate) {\n box_select.node().childNodes[i].childNodes[1].options.remove(0);\n }\n }\n _dialogs.overlay_under_modal.display();\n setTimeout(function () {\n container.querySelector('button.btn_ok').focus();\n }, 400);\n });\n}\n\nfunction getAvailablesFunctionnalities(layerName) {\n var section = document.getElementById('section2_pre');\n if (!layerName) {\n var elems = section.querySelectorAll('#button_grid, #button_discont, #button_smooth, #button_cartogram, #button_typosymbol, #button_flow, #button_prop, #button_choro, #button_choroprop, #button_typo, #button_proptypo, #button_two_stocks');\n for (var i = 0, len_i = elems.length; i < len_i; i++) {\n elems[i].style.filter = 'grayscale(100%)';\n }\n return;\n }\n\n var fields_stock = getFieldsType('stock', layerName),\n fields_ratio = getFieldsType('ratio', layerName),\n fields_categ = getFieldsType('category', layerName),\n fields_id = getFieldsType('id', layerName);\n var func_stock = void 0,\n func_ratio = void 0,\n func_categ = void 0,\n func_id = void 0;\n if (data_manager.current_layers[layerName].type === 'Line') {\n // Layer type is Line\n var _elems = section.querySelectorAll('#button_grid, #button_discont, #button_smooth, #button_cartogram, #button_typosymbol, #button_flow');\n for (var _i2 = 0, _len_i = _elems.length; _i2 < _len_i; _i2++) {\n _elems[_i2].style.filter = 'grayscale(100%)';\n }\n func_id = [];\n func_stock = section.querySelectorAll('#button_prop');\n func_ratio = section.querySelectorAll('#button_choro, #button_choroprop');\n func_categ = section.querySelectorAll('#button_typo, #button_proptypo');\n } else if (data_manager.current_layers[layerName].type === 'Point') {\n // layer type is Point\n var _elems2 = section.querySelectorAll('#button_discont, #button_cartogram');\n for (var _i3 = 0, _len_i2 = _elems2.length; _i3 < _len_i2; _i3++) {\n _elems2[_i3].style.filter = 'grayscale(100%)';\n }\n func_id = section.querySelectorAll('#button_flow');\n func_stock = section.querySelectorAll('#button_smooth, #button_prop, #button_grid');\n func_ratio = section.querySelectorAll('#button_choro, #button_choroprop');\n func_categ = section.querySelectorAll('#button_typo, #button_proptypo, #button_typosymbol');\n } else {\n // Layer type is Polygon\n func_id = section.querySelectorAll('#button_flow');\n func_stock = section.querySelectorAll('#button_smooth, #button_prop, #button_grid, #button_cartogram, #button_discont');\n func_ratio = section.querySelectorAll('#button_choro, #button_choroprop, #button_discont');\n func_categ = section.querySelectorAll('#button_typo, #button_proptypo, #button_typosymbol');\n }\n if (fields_stock.length === 0) {\n Array.prototype.forEach.call(func_stock, function (d) {\n return d.style.filter = 'grayscale(100%)';\n });\n } else {\n Array.prototype.forEach.call(func_stock, function (d) {\n return d.style.filter = 'invert(0%) saturate(100%)';\n });\n }\n if (fields_ratio.length === 0) {\n Array.prototype.forEach.call(func_ratio, function (d) {\n return d.style.filter = 'grayscale(100%)';\n });\n } else {\n Array.prototype.forEach.call(func_ratio, function (d) {\n return d.style.filter = 'invert(0%) saturate(100%)';\n });\n }\n if (fields_categ.length === 0) {\n Array.prototype.forEach.call(func_categ, function (d) {\n return d.style.filter = 'grayscale(100%)';\n });\n } else {\n Array.prototype.forEach.call(func_categ, function (d) {\n return d.style.filter = 'invert(0%) saturate(100%)';\n });\n }\n if (fields_id.length === 0) {\n Array.prototype.forEach.call(func_id, function (d) {\n return d.style.filter = 'grayscale(100%)';\n });\n } else {\n Array.prototype.forEach.call(func_id, function (d) {\n return d.style.filter = 'invert(0%) saturate(100%)';\n });\n }\n\n // That representation needs both Stock and Ratio variables:\n if (fields_stock.length === 0 || fields_ratio.length === 0) {\n document.getElementById('button_choroprop').style.filter = 'grayscale(100%)';\n } else {\n document.getElementById('button_choroprop').style.filter = 'invert(0%) saturate(100%)';\n }\n // That representation needs both Stock and Categorical variables:\n if (fields_stock.length === 0 || fields_categ.length === 0) {\n document.getElementById('button_proptypo').style.filter = 'grayscale(100%)';\n } else {\n document.getElementById('button_proptypo').style.filter = 'invert(0%) saturate(100%)';\n }\n // That representation needs either a Stock or a Ratio variable:\n if (data_manager.current_layers[layerName].type === 'Polygon' && (fields_stock.length > 0 || fields_ratio.length > 0)) {\n document.getElementById('button_discont').style.filter = 'invert(0%) saturate(100%)';\n } else {\n document.getElementById('button_discont').style.filter = 'grayscale(100%)';\n }\n // Special case for the \"waffle\" kind of map as it needs 2 or more stock variables:\n if (fields_stock.length < 2) {\n document.getElementById('button_two_stocks').style.filter = 'grayscale(100%)';\n } else {\n document.getElementById('button_two_stocks').style.filter = 'invert(0%) saturate(100%)';\n }\n}\n\nvar clickLinkFromDataUrl = exports.clickLinkFromDataUrl = function clickLinkFromDataUrl(url, filename) {\n return fetch(url).then(function (res) {\n return res.blob();\n }).then(function (blob) {\n var blobUrl = URL.createObjectURL(blob);\n var dlAnchorElem = document.createElement('a');\n dlAnchorElem.setAttribute('href', blobUrl);\n dlAnchorElem.setAttribute('download', filename);\n // if (window.isIE || window.isOldMS_Firefox) {\n if (window.isIE) {\n swal({\n title: '',\n html: '' + _tr('app_page.common.download_link') + '
![\"Zoom_select\"/](\"static/img/Inkscape_icons_zoom_fit_selection_blank.png\")
' }, { id: 'hand_button', i18n: '[data-ot]app_page.lm_buttons.hand_button', class: 'hand_button i18n tt', html: '![\"Hand_closed\"/](\"static/img/Twemoji_1f513.png\")
' }];\n\n lm.selectAll('input').data(lm_buttons).enter().append('p').attr('class', 'cont_map_btn').insert('button').attrs(function (elem) {\n return {\n class: elem.class,\n 'data-i18n': elem.i18n,\n 'data-ot-delay': 0,\n 'data-ot-fixed': true,\n 'data-ot-target': true,\n id: elem.id\n };\n }).html(function (elem) {\n return elem.html;\n });\n\n // Trigger actions when buttons are clicked and set-up the initial view :\n d3.selectAll('.zoom_button').on('click', _map_ctrl.zoomClick);\n document.getElementById('info_button').onclick = displayInfoOnMove;\n document.getElementById('hand_button').onclick = handle_click_hand;\n document.getElementById('brush_zoom_button').onclick = _zoom_rect2.default;\n\n // Already append the div for displaying information on features,\n // setting it currently unactive until it will be requested :\n d3.select('body').append('div').attr('id', 'info_features').classed('active', false).style('display', 'none').html('');\n\n accordionize('.accordion');\n document.getElementById('btn_s1').dispatchEvent(new MouseEvent('click'));\n prepare_drop_section();\n\n if (reload_project) {\n var url = void 0;\n if (reload_project.startsWith('http')) {\n url = reload_project;\n } else {\n url = 'https://gist.githubusercontent.com/' + reload_project + '/raw/';\n }\n (0, _helpers.xhrequest)('GET', url, undefined, true).then(function (data) {\n (0, _map_project.apply_user_preferences)(data);\n });\n } else {\n // Check if there is a project to reload in the localStorage :\n var last_project = window.localStorage.getItem('magrit_project');\n if (last_project && last_project.length && last_project.length > 0) {\n swal({\n title: '',\n // text: _tr('app_page.common.resume_last_project'),\n allowOutsideClick: false,\n allowEscapeKey: false,\n type: 'question',\n showConfirmButton: true,\n showCancelButton: true,\n confirmButtonText: _tr('app_page.common.new_project'),\n cancelButtonText: _tr('app_page.common.resume_last')\n }).then(function () {\n // If we don't want to resume from the last project, we can\n // remove it :\n window.localStorage.removeItem('magrit_project');\n // Indicate that that no layer have been added for now :*\n global._app.first_layer = true;\n }, function () {\n (0, _map_project.apply_user_preferences)(last_project);\n });\n } else {\n // Indicate that that no layer have been added for now :*\n global._app.first_layer = true;\n }\n }\n // Set the properties for the notification zone :\n _alertifyjs2.default.set('notifier', 'position', 'bottom-left');\n}\n\n/**\n*\n* @param\n*\n*\n*/\nfunction askTypeLayer() {\n var opts = { target: _tr('app_page.common.target_l'), layout: _tr('app_page.common.layout_l') };\n var first_reject = false;\n return swal({\n title: '',\n text: _tr('app_page.common.layer_type_selection'),\n type: 'info',\n showCancelButton: true,\n showCloseButton: false,\n allowEscapeKey: true,\n allowOutsideClick: false,\n confirmButtonColor: '#DD6B55',\n confirmButtonText: _tr('app_page.common.confirm'),\n input: 'select',\n inputPlaceholder: _tr('app_page.common.layer_type_selection'),\n inputOptions: opts,\n inputValidator: function inputValidator(value) {\n return new Promise(function (resolve, reject) {\n if (value.indexOf('target') < 0 && value.indexOf('layout') < 0) {\n reject(_tr('app_page.common.no_value'));\n } else if (value.indexOf('target') > -1 && _app.targeted_layer_added && !first_reject) {\n first_reject = true;\n reject(_tr('app_page.common.ask_replace_target_layer'));\n } else {\n if (value.indexOf('target') > -1 && first_reject) {\n downgradeTargetLayer();\n }\n resolve(value);\n }\n });\n }\n });\n}\n\n/**\n* @param {FileList} files - The files(s) to be handled for this layer\n*\n* @return undefined\n*/\nfunction handle_upload_files(files) {\n var tot_size = Array.prototype.map.call(files, function (f) {\n return f.size;\n }).reduce(function (a, b) {\n return a + b;\n }, 0);\n if (files[0] && !files[0]._ext) {\n files = (0, _helpers.prepareFileExt)(files);\n }\n if (tot_size > MAX_INPUT_SIZE) {\n return swal({\n title: _tr('app_page.common.error') + '!',\n text: _tr('app_page.common.too_large_input'),\n type: 'error',\n customClass: 'swal2_custom',\n allowEscapeKey: false,\n allowOutsideClick: false\n });\n }\n if (!(files.length === 1)) {\n var files_to_send = [];\n Array.prototype.forEach.call(files, function (f) {\n return f._ext === 'shp' || f._ext === 'dbf' || f._ext === 'shx' || f._ext === 'prj' || f._ext === 'cpg' ? files_to_send.push(f) : null;\n });\n if (files_to_send.length >= 4 && files_to_send.length <= 6) {\n handle_shapefile(files_to_send);\n } else {\n return swal({\n title: _tr('app_page.common.error') + '!',\n text: _tr('app_page.common.alert_upload1'),\n customClass: 'swal2_custom',\n type: 'error',\n allowEscapeKey: false,\n allowOutsideClick: false\n });\n }\n } else if (files[0]._ext.indexOf('json') > -1 || files[0]._ext === 'zip' || files[0]._ext === 'gml' || files[0]._ext === 'kml') {\n if (files[0]._ext.indexOf('json') < 0) {\n handle_single_file(files[0]);\n } else {\n var rd = new FileReader();\n rd.onloadend = function () {\n var _isValidJSON = (0, _helpers.isValidJSON)(rd.result),\n _isValidJSON2 = _slicedToArray(_isValidJSON, 2),\n valid = _isValidJSON2[0],\n tmp = _isValidJSON2[1];\n\n if (!valid) {\n console.log(tmp);\n return swal({\n title: _tr('app_page.common.error') + '!',\n text: _tr('app_page.common.alert_upload_invalid'),\n type: 'error',\n customClass: 'swal2_custom',\n allowOutsideClick: false,\n allowEscapeKey: false\n });\n }\n if (tmp.type && tmp.type === 'FeatureCollection') {\n handle_single_file(files[0]);\n } else if (tmp.type && tmp.type === 'Topology') {\n handle_TopoJSON_files(files);\n } else if (tmp.map_config && tmp.layers) {\n (0, _map_project.apply_user_preferences)(rd.result);\n } else {\n return swal({\n title: _tr('app_page.common.error') + '!',\n text: _tr('app_page.common.alert_upload_invalid'),\n type: 'error',\n customClass: 'swal2_custom',\n allowOutsideClick: false,\n allowEscapeKey: false\n });\n }\n };\n rd.readAsText(files[0]);\n }\n } else if (files[0]._ext === 'csv' || files[0]._ext === 'tsv') {\n handle_dataset(files[0]);\n } else if (files[0]._ext.indexOf('xls') > -1 || files[0]._ext.indexOf('ods') > -1) {\n convert_dataset(files[0]);\n } else {\n var shp_part = void 0;\n Array.prototype.forEach.call(files, function (f) {\n f._ext === 'shp' || f._ext === 'dbf' || f._ext === 'shx' || f._ext === 'prj' || f._ext === 'cpg' ? shp_part = true : null;\n });\n if (shp_part) {\n return swal({\n title: _tr('app_page.common.error') + '!',\n text: _tr('app_page.common.alert_upload_shp'),\n type: 'error',\n customClass: 'swal2_custom',\n allowOutsideClick: false,\n allowEscapeKey: false\n }).then(function () {\n return null;\n }, function () {\n return null;\n });\n } else {\n return swal({\n title: _tr('app_page.common.error') + '!',\n text: _tr('app_page.common.alert_upload_invalid'),\n type: 'error',\n customClass: 'swal2_custom',\n allowOutsideClick: false,\n allowEscapeKey: false\n });\n }\n }\n}\n\nfunction handleOneByOneShp(files) {\n function populate_shp_slot(slots, file) {\n if (file.name.toLowerCase().indexOf('.shp') > -1) {\n slots.set('.shp', file);\n document.getElementById('f_shp').className = 'mini_button_ok';\n } else if (file.name.toLowerCase().indexOf('.shx') > -1) {\n slots.set('.shx', file);\n document.getElementById('f_shx').className = 'mini_button_ok';\n } else if (file.name.toLowerCase().indexOf('.prj') > -1) {\n slots.set('.prj', file);\n document.getElementById('f_prj').className = 'mini_button_ok';\n } else if (file.name.toLowerCase().indexOf('.dbf') > -1) {\n slots.set('.dbf', file);\n document.getElementById('f_dbf').className = 'mini_button_ok';\n } else if (file.name.toLowerCase().indexOf('.cpg') > -1) {\n slots.set('.cpg', file);\n document.getElementById('f_cpg').className = 'mini_button_ok';\n } else {\n return false;\n }\n }\n var name = '';\n var shp_slots = new Map();\n populate_shp_slot(shp_slots, files[0]);\n\n swal({\n title: '',\n html: '' + ('
' + _tr('app_page.common.shp_one_by_one_msg1') + '') + ('
' + _tr('app_page.common.shp_one_by_one_msg2', { name: name }) + '
') + ('
' + _tr('app_page.common.shp_one_by_one_msg3') + '
') + '
' + '.shp
.shx
' + '.dbf
.prj
' + '.cpg
' + d_name + '
\\n' + nb_features + ' ' + _tr('app_page.common.feature', { count: +nb_features }) + ' - ' + field_names.length + ' ' + _tr('app_page.common.field', { count: +field_names.length }) + '\\n
\\n\\n
![](\"static/img/Trash_font_awesome.png\")
\\n
![](\"static/img/dataset.png\")
\\n
\\n
![](\"static/img/type_geom/layer_waffle.png\")
\\n' + _tr('app_page.section1.plus_layout_layers', { count: nb_layout_layer }) + '
');\n } else {\n d3.select('#layout_layers_section').style('display', 'none').html('');\n }\n}\n\nfunction update_section1(type, nb_fields, nb_ft, lyr_name_to_add) {\n var nb_char_display = lyr_name_to_add.length;\n var _lyr_name_display = +nb_char_display > 35 ? [lyr_name_to_add.substring(0, 30), '(...)'].join('') : lyr_name_to_add;\n\n // Prepare an icon according to the type of geometry:\n var _button = _buttons.button_type.get(type);\n _button = _button.substring(10, _button.indexOf('class') - 2);\n\n // Upate the zone allowed for displaying info on the target layer:\n d3.select('#target_layer_zone').attr('data-i18n', null).styles({\n border: null,\n color: 'black',\n padding: null,\n 'text-align': 'initial'\n }).html('\\n
![](\"')
\\n
\\n' + _lyr_name_display + '\\n
\\n' + nb_ft + ' ' + _tr('app_page.common.feature', { count: +nb_ft }) + ' - ' + nb_fields + ' ' + _tr('app_page.common.field', { count: +nb_fields }) + '\\n
\\n');\n\n // const remove_target = document.getElementById('remove_target');\n document.getElementById('remove_target').onclick = function () {\n remove_layer(Object.getOwnPropertyNames(data_manager.user_data)[0]);\n };\n // const table_target = document.getElementById('table_layer_s1');\n document.getElementById('table_layer_s1').onclick = display_table_target_layer;\n // const downgrade_target = document.getElementById('downgrade_target');\n document.getElementById('downgrade_target').onclick = downgradeTargetLayer;\n}\n\nfunction ask_replace_target_layer() {\n return swal({\n title: '',\n text: _tr('app_page.join_box.before_join_ask'),\n allowOutsideClick: false,\n allowEscapeKey: true,\n type: 'question',\n showConfirmButton: true,\n showCancelButton: true,\n confirmButtonText: _tr('app_page.common.yes'),\n cancelButtonText: _tr('app_page.common.no')\n });\n}\n\nfunction ask_join_now(layer_name) {\n var on_add = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'layer';\n\n swal({\n title: '',\n text: _tr('app_page.join_box.before_join_ask'),\n allowOutsideClick: false,\n allowEscapeKey: true,\n type: 'question',\n showConfirmButton: true,\n showCancelButton: true,\n confirmButtonText: _tr('app_page.common.yes'),\n cancelButtonText: _tr('app_page.common.no')\n }).then(function () {\n (0, _join_popup.createJoinBox)(layer_name);\n }, function () {\n if (on_add === 'layer') (0, _helpers.make_box_type_fields)(layer_name);\n });\n}\n\nvar display_table_target_layer = function display_table_target_layer() {\n var layer_name = Object.keys(data_manager.user_data)[0];\n _tables.boxExplore2.create(layer_name);\n};\n\nfunction updateLayer(layer_name) {\n var fields = Object.keys(data_manager.user_data[layer_name][0]);\n data_manager.current_layers[layer_name].n_features = data_manager.user_data[layer_name].length;\n data_manager.current_layers[layer_name].original_fields = new Set(fields);\n var lyr_id = _app.layer_to_id.get(layer_name);\n var k = Object.keys(_target_layer_file.objects)[0];\n var selection = map.select('#' + lyr_id).selectAll('path').data(topojson.feature(_target_layer_file, _target_layer_file.objects[k]).features, function (d) {\n return d.id;\n });\n selection.exit().remove();\n scale_to_lyr(layer_name);\n center_map(layer_name);\n (0, _map_ctrl.zoom_without_redraw)();\n update_section1(data_manager.current_layers[layer_name].type, fields.length, data_manager.current_layers[layer_name].n_features, layer_name);\n}\n\nfunction handle_click_hand(behavior) {\n var hb = d3.select('#hand_button');\n // eslint-disable-next-line no-param-reassign\n var b = (typeof behavior === 'undefined' ? 'undefined' : _typeof(behavior)) === 'object' ? !hb.classed('locked') ? 'lock' : 'unlock' : behavior && typeof behavior === 'string' ? behavior : false;\n if (b === 'lock') {\n hb.classed('locked', true);\n hb.html('![\"locked\"/](\"static/img/Twemoji_1f512.png\")
');\n map.select('.brush').remove();\n document.getElementById('zoom_in').parentElement.style.display = 'none';\n document.getElementById('zoom_out').parentElement.style.display = 'none';\n document.getElementById('brush_zoom_button').parentElement.style.display = 'none';\n _map_ctrl.zoom.on('zoom', function () {\n var blocked = svg_map.__zoom;return function () {\n this.__zoom = blocked;\n };\n }());\n } else {\n hb.classed('locked', false);\n hb.html('');\n _map_ctrl.zoom.on('zoom', _map_ctrl.zoom_without_redraw);\n document.getElementById('zoom_in').parentElement.style.display = '';\n document.getElementById('zoom_out').parentElement.style.display = '';\n document.getElementById('brush_zoom_button').parentElement.style.display = '';\n map.select('.brush').remove();\n }\n}\n\n/**\n* Get the bounding box (in map/svg coordinates) of a layer using path.bounds()\n*\n* @param {string} name - The name of layer\n* @return {Array} The bbox [[xmin, ymin], [xmax, ymax]] of the layer.\n*/\nfunction get_bbox_layer_path(name) {\n var selec = svg_map.querySelector('#' + _app.layer_to_id.get(name)).childNodes;\n var bbox_layer_path = [[Infinity, Infinity], [-Infinity, -Infinity]];\n for (var i = 0, len_i = selec.length; i < len_i; i++) {\n var bbox_path = path.bounds(selec[i].__data__);\n bbox_layer_path[0][0] = bbox_path[0][0] < bbox_layer_path[0][0] ? bbox_path[0][0] : bbox_layer_path[0][0];\n bbox_layer_path[0][1] = bbox_path[0][1] < bbox_layer_path[0][1] ? bbox_path[0][1] : bbox_layer_path[0][1];\n bbox_layer_path[1][0] = bbox_path[1][0] > bbox_layer_path[1][0] ? bbox_path[1][0] : bbox_layer_path[1][0];\n bbox_layer_path[1][1] = bbox_path[1][1] > bbox_layer_path[1][1] ? bbox_path[1][1] : bbox_layer_path[1][1];\n }\n if (_app.current_proj_name === 'ConicConformal') {\n var s1 = (0, _helpers_math.Mmax)((bbox_layer_path[1][0] - bbox_layer_path[0][0]) / w, (bbox_layer_path[1][1] - bbox_layer_path[0][1]) / h);\n var bbox_layer_path2 = path.bounds({ type: 'MultiPoint', coordinates: [[-69.3, -55.1], [20.9, -36.7], [147.2, -42.2], [162.1, 67.0], [-160.2, 65.7]] });\n var s2 = (0, _helpers_math.Mmax)((bbox_layer_path2[1][0] - bbox_layer_path2[0][0]) / w, (bbox_layer_path2[1][1] - bbox_layer_path2[0][1]) / h);\n if (s2 < s1) bbox_layer_path = bbox_layer_path2;\n } else if (_app.current_proj_name === 'Armadillo') {\n var _s = (0, _helpers_math.Mmax)((bbox_layer_path[1][0] - bbox_layer_path[0][0]) / w, (bbox_layer_path[1][1] - bbox_layer_path[0][1]) / h);\n var _bbox_layer_path = path.bounds({ type: 'MultiPoint', coordinates: [[-69.3, -35.0], [-170, 10], [-170, 85], [0, -70], [20.9, -35.0], [147.2, -35.0], [170, 85], [170, 10]] });\n var _s2 = (0, _helpers_math.Mmax)((_bbox_layer_path[1][0] - _bbox_layer_path[0][0]) / w, (_bbox_layer_path[1][1] - _bbox_layer_path[0][1]) / h);\n if (_s2 < _s) bbox_layer_path = _bbox_layer_path;\n }\n return bbox_layer_path;\n}\n\n/**\n* Change the projection scale and translate properties in order to fit the layer.\n* Redraw the path from all the current layers to reflect the change.\n*\n* @param {string} name - The name of layer to scale on\n* @return {void}\n*/\nfunction scale_to_lyr(name) {\n var bbox_layer_path = get_bbox_layer_path(name);\n if (!bbox_layer_path) return;\n s = 0.95 / (0, _helpers_math.Mmax)((bbox_layer_path[1][0] - bbox_layer_path[0][0]) / w, (bbox_layer_path[1][1] - bbox_layer_path[0][1]) / h) * proj.scale();\n t = [0, 0];\n proj.scale(s).translate(t);\n map.selectAll('.layer').selectAll('path').attr('d', path);\n (0, _map_ctrl.reproj_symbol_layer)();\n}\n\n/**\n* Center and zoom to a layer (using zoom scale and translate properties).\n* Projection properties stay unchanged.\n*\n* @param {string} name - The name of layer to zoom on\n* @return {void}\n*/\nfunction center_map(name) {\n var bbox_layer_path = get_bbox_layer_path(name);\n var zoom_scale = 0.95 / (0, _helpers_math.Mmax)((bbox_layer_path[1][0] - bbox_layer_path[0][0]) / w, (bbox_layer_path[1][1] - bbox_layer_path[0][1]) / h);\n var zoom_translate = [(w - zoom_scale * (bbox_layer_path[1][0] + bbox_layer_path[0][0])) / 2, (h - zoom_scale * (bbox_layer_path[1][1] + bbox_layer_path[0][1])) / 2];\n var _zoom = svg_map.__zoom;\n _zoom.k = zoom_scale;\n _zoom.x = zoom_translate[0];\n _zoom.y = zoom_translate[1];\n}\n\nfunction fitLayer(layer_name) {\n proj.scale(1).translate([0, 0]);\n var b = get_bbox_layer_path(layer_name);\n var s = 0.95 / (0, _helpers_math.Mmax)((b[1][0] - b[0][0]) / w, (b[1][1] - b[0][1]) / h);\n var t = [(w - s * (b[1][0] + b[0][0])) / 2, (h - s * (b[1][1] + b[0][1])) / 2];\n proj.scale(s).translate(t);\n return [s, t];\n}\n\n/**\n* Helper function called when a new 'Sphere' layer is added, in order to put it\n* on the bottom of the other layer on the map.\n*\n* @param {string} sphere_id - The DOM id of the sphere.\n* @return {void}\n*/\nfunction setSphereBottom(sphere_id) {\n var layers_list = document.querySelector('.layer_list');\n layers_list.appendChild(layers_list.childNodes[0]);\n svg_map.insertBefore(svg_map.querySelector('#' + sphere_id + '.layer'), svg_map.childNodes[0]);\n svg_map.insertBefore(defs.node(), svg_map.childNodes[0]);\n}\n\n/**\n* Helper function to add the 'world' layer (notably added) when the application\n* is started.\n*\n* @return {void}\n*/\nfunction add_simplified_land_layer() {\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n\n var skip_rescale = options.skip_rescale || false;\n var stroke = options.stroke || 'rgb(0,0,0)';\n var fill = options.fill || '#d3d3d3';\n var stroke_opacity = options.stroke_opacity || 0.0;\n var fill_opacity = options.fill_opacity || 0.75;\n var stroke_width = options.stroke_width || '0.3px';\n var visible = !(options.visible === false);\n var drop_shadow = options.drop_shadow || false;\n\n var world_id = encodeId('World');\n _app.layer_to_id.set('World', world_id);\n _app.id_to_layer.set(world_id, 'World');\n data_manager.current_layers.World = {\n type: 'Polygon',\n n_features: 125,\n 'stroke-width-const': +stroke_width.slice(0, -2),\n fill_color: { single: fill }\n };\n map.insert('g', '.legend').attrs({ id: world_id, class: 'layer', 'clip-path': 'url(#clip)' }).style('stroke-width', stroke_width).selectAll('.subunit').data(topojson.feature(_sample_topo.world_topology, _sample_topo.world_topology.objects.World).features).enter().append('path').attr('d', path).styles({\n stroke: stroke,\n fill: fill,\n 'stroke-opacity': stroke_opacity,\n 'fill-opacity': fill_opacity\n });\n (0, _helpers.create_li_layer_elem)('World', null, 'Polygon', 'sample');\n if (drop_shadow) {\n (0, _layers_style_popup.createDropShadow)('World');\n }\n if (!skip_rescale) {\n scale_to_lyr('World');\n center_map('World');\n }\n if (!visible) {\n handle_active_layer('World');\n }\n (0, _map_ctrl.zoom_without_redraw)();\n}\n\nfunction send_remove_server(layer_name) {\n var formToSend = new FormData();\n formToSend.append('layer_name', data_manager.current_layers[layer_name].key_name);\n (0, _helpers.xhrequest)('POST', 'layers/delete', formToSend, true).then(function (data) {\n var parsed = JSON.parse(data);\n if (!parsed.code || parsed.code !== 'Ok') console.log(data);\n }).catch(function (err) {\n console.log(err);\n });\n}\n\nfunction prepare_available_symbols() {\n return (0, _helpers.xhrequest)('GET', 'static/json/list_symbols.json', null).then(function (result) {\n var list_res = JSON.parse(result);\n return Promise.all(list_res.map(function (name) {\n return (0, _helpers.getImgDataUrl)('static/img/svg_symbols/' + name);\n })).then(function (symbols) {\n for (var i = 0; i < list_res.length; i++) {\n _app.default_symbols.push([list_res[i], symbols[i]]);\n }\n });\n });\n}\n\nfunction accordionize() {\n var css_selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '.accordion';\n var parent = arguments[1];\n\n var _parent = parent && (typeof parent === 'undefined' ? 'undefined' : _typeof(parent)) === 'object' ? parent : parent && typeof parent === 'string' ? document.querySelector(parent) : document;\n var acc = _parent.querySelectorAll(css_selector);\n for (var i = 0; i < acc.length; i++) {\n acc[i].onclick = function () {\n var opened = _parent.querySelector(css_selector + '.active');\n if (opened) {\n opened.classList.toggle('active');\n opened.nextElementSibling.classList.toggle('show');\n }\n if (!opened || opened.id !== this.id) {\n this.classList.toggle('active');\n this.nextElementSibling.classList.toggle('show');\n }\n };\n }\n}\n\nfunction downgradeTargetLayer() {\n var old_target = Object.keys(data_manager.user_data)[0];\n if (!old_target) return;\n delete data_manager.current_layers[old_target].targeted;\n data_manager.field_join_map = [];\n data_manager.user_data = {};\n _app.targeted_layer_added = false;\n _target_layer_file = null;\n resetSection1();\n (0, _helpers.getAvailablesFunctionnalities)();\n var id_lyr = _app.layer_to_id.get(old_target);\n document.querySelector('.' + id_lyr + '.sortable_target').classList.remove('sortable_target');\n return old_target;\n}\n\nfunction changeTargetLayer(new_target) {\n function _reproj(d_proj) {\n if (d_proj[0] === 'proj4') {\n var proj_str = d_proj[1];\n var custom_name = void 0;\n if (proj_str.startsWith('EPSG:')) {\n var code = +proj_str.split('EPSG:')[1];\n var rv = _app.epsg_projections[code];\n proj_str = rv.proj4;\n custom_name = rv.name;\n }\n _app.current_proj_name = 'def_proj4';\n _app.last_projection = proj_str;\n (0, _projections.change_projection_4)(proj4(proj_str));\n (0, _projections.addLastProjectionSelect)('def_proj4', _app.last_projection, custom_name);\n } else if (d_proj[0] === 'd3') {\n _app.current_proj_name = d_proj[1];\n (0, _projections.change_projection)(d_proj[1]);\n (0, _projections.addLastProjectionSelect)(_app.current_proj_name);\n }\n }\n downgradeTargetLayer();\n // const old_target = downgradeTargetLayer();\n data_manager.current_layers[new_target].targeted = true;\n _app.targeted_layer_added = true;\n data_manager.user_data[new_target] = Array.from(document.querySelector('#' + _app.layer_to_id.get(new_target)).querySelectorAll('path')).map(function (d) {\n return d.__data__.properties;\n });\n var fields = Object.keys(data_manager.user_data[new_target][0]);\n update_section1(data_manager.current_layers[new_target].type, fields.length, data_manager.current_layers[new_target].n_features, new_target);\n if (!data_manager.current_layers[new_target].fields_type) {\n data_manager.current_layers[new_target].original_fields = new Set(fields);\n }\n if (!data_manager.current_layers[new_target].fields_type) {\n data_manager.current_layers[new_target].fields_type = (0, _helpers.type_col2)(data_manager.user_data[new_target]);\n }\n document.getElementById('btn_type_fields').removeAttribute('disabled');\n (0, _helpers.getAvailablesFunctionnalities)(new_target);\n scale_to_lyr(new_target);\n center_map(new_target);\n (0, _map_ctrl.zoom_without_redraw)();\n\n // Reproject the map to the default projection if any:\n if (data_manager.current_layers[new_target].default_projection) {\n var d_proj = data_manager.current_layers[new_target].default_projection;\n _reproj(d_proj);\n } else if (data_manager.current_layers[new_target].last_projection) {\n var _d_proj = data_manager.current_layers[new_target].last_projection;\n _reproj(_d_proj);\n }\n\n var id_new_target_lyr = _app.layer_to_id.get(new_target);\n document.querySelector('#sortable > .' + id_new_target_lyr).classList.add('sortable_target');\n\n var d = {};\n d[new_target] = {\n type: 'FeatureCollection',\n features: Array.prototype.slice.call(document.querySelectorAll('#' + id_new_target_lyr + ' > path')).map(function (d) {\n return d.__data__;\n })\n };\n window._target_layer_file = topojson.topology(d);\n\n if (!data_manager.current_layers[new_target].key_name) {\n (0, _helpers.send_layer_server)(new_target, '/layers/add');\n }\n\n // Replace the proposed variables in the options of the current representation\n // if any:\n if (_app.current_functionnality !== undefined) {\n fields_handler.unfill();\n fields_handler.fill(new_target);\n }\n}\n\nfunction resetSection1() {\n // Remove infos and buttons about the target layer:\n d3.select('#target_layer_zone').attrs({\n class: 'i18n',\n 'data-i18n': '[html]app_page.section1.no_target'\n }).styles({\n border: '3px dashed #ccc',\n color: '#ccc',\n 'margin-bottom': '3px',\n padding: '3px',\n 'text-align': 'center'\n }).html(_tr('app_page.section1.no_target'));\n\n // Restore the state of the bottom of the section 1 :\n document.getElementById('join_section').innerHTML = '';\n\n // Disabled the button allowing the user to choose type for its layer :\n document.getElementById('btn_type_fields').setAttribute('disabled', 'true');\n\n // Set all the representation modes to \"unavailable\":\n (0, _helpers.getAvailablesFunctionnalities)();\n\n // Reset some values stored in the functionnality panel:\n (0, _function.reset_user_values)();\n}\n\n// Function to be called after clicking on \"render\" in order to close the section 2\n// and to have the section 3 opened\nfunction switch_accordion_section(id_elem) {\n document.getElementById(id_elem || 'btn_s3').dispatchEvent(new MouseEvent('click'));\n}\n\n// Function to handle the title add and changes\nfunction handle_title(txt) {\n var title = d3.select('#map_title').select('text');\n if (title.node()) {\n title.text(txt);\n } else {\n map.append('g').attrs({ class: 'legend title', id: 'map_title' }).style('cursor', 'pointer').insert('text').attrs({ x: w / 2, y: h / 12, 'alignment-baseline': 'middle', 'text-anchor': 'middle' }).styles({ 'font-family': 'verdana', 'font-size': '20px', position: 'absolute', color: 'black' }).text(txt).on('contextmenu dblclick', function () {\n d3.event.preventDefault();\n d3.event.stopPropagation();\n handle_title_properties();\n }).call(_helpers.drag_elem_geo);\n }\n}\n\nfunction handle_title_properties() {\n var title = d3.select('#map_title').select('text');\n if (!title.node() || title.text() === '') {\n swal({\n title: '',\n text: _tr('app_page.common.error_no_title'),\n type: 'error',\n allowOutsideClick: true,\n allowEscapeKey: true\n }).then(function () {\n return null;\n }, function () {\n return null;\n });\n return;\n }\n var title_props = {\n size: title.style('font-size'),\n font_weight: title.style('font-weight'),\n font_style: title.style('font-style'),\n text_decoration: title.style('text-decoration'),\n color: title.style('fill'),\n position_x: title.attr('x'),\n position_x_pct: (0, _helpers_calc.round_value)(+title.attr('x') / w * 100, 1),\n position_y: title.attr('y'),\n position_y_pct: (0, _helpers_calc.round_value)(+title.attr('y') / h * 100, 1),\n font_family: title.style('font-family'),\n stroke: title.style('stroke'),\n stroke_width: title.style('stroke-width')\n };\n title_props.font_weight = title_props.font_weight === '400' || title_props.font_weight === '' ? '' : 'bold';\n // Font name don't seems to be formatted in the same way on Firefox and Chrome\n // (a space is inserted after the comma in Chrome so we are removing it)\n title_props.font_family = title_props.font_family ? title_props.font_family.replace(', ', ',') : title_props.font_family;\n\n // Properties on the title are changed in real-time by the user\n // then it will be rollbacked to original properties if Cancel is clicked\n (0, _dialogs.make_confirm_dialog2)('mapTitleitleDialogBox', _tr('app_page.title_box.title'), { widthFitContent: true }).then(function (confirmed) {\n if (!confirmed) {\n title.attrs({ x: title_props.position_x, y: title_props.position_y }).styles({\n fill: title_props.color,\n stroke: title_props.stroke,\n 'stroke-width': title_props.stroke_width,\n 'font-family': title_props.font_family,\n 'font-size': title_props.size,\n 'font-style': title_props.font_style,\n 'font-weight': title_props.font_weight,\n 'text-decoration': title_props.text_decoration\n });\n }\n });\n var box_content = d3.select('.mapTitleitleDialogBox').select('.modal-body').append('div').style('margin', '15x');\n box_content.append('p').html(_tr('app_page.title_box.font_size')).insert('input').attrs({ type: 'number', min: 2, max: 40, step: 1 }).property('value', +title_props.size.split('px')[0]).style('width', '65px').on('change', function () {\n title.style('font-size', this.value + 'px');\n });\n box_content.append('p').html(_tr('app_page.title_box.xpos')).insert('input').attrs({ type: 'number', min: 0, max: 100, step: 1 }).property('value', title_props.position_x_pct).style('width', '65px').on('change', function () {\n title.attr('x', w * +this.value / 100);\n });\n box_content.append('p').html(_tr('app_page.title_box.ypos')).insert('input').attrs({ type: 'number', min: 0, max: 100, step: 1 }).property('value', title_props.position_y_pct).style('width', '65px').on('change', function () {\n title.attr('y', h * +this.value / 100);\n });\n box_content.append('p').html(_tr('app_page.title_box.font_color')).insert('input').attr('type', 'color').property('value', (0, _colors_helpers.rgb2hex)(title_props.color)).on('change', function () {\n title.style('fill', this.value);\n });\n\n var font_select = box_content.append('p').html(_tr('app_page.title_box.font_family')).insert('select').attr('class', 'params').on('change', function () {\n title.style('font-family', this.value);\n });\n _fonts.available_fonts.forEach(function (font) {\n font_select.append('option').text(font[0]).attr('value', font[1]);\n });\n font_select.node().selectedIndex = _fonts.available_fonts.map(function (d) {\n return d[1] === title_props.font_family ? '1' : '0';\n }).indexOf('1');\n\n var options_format = box_content.append('p'),\n btn_bold = options_format.insert('span').attr('class', title_props.font_weight === 'bold' ? 'active button_disc' : 'button_disc').html('![](\"data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=\" "\\"Bold\\"")
'),\n btn_italic = options_format.insert('span').attr('class', title_props.font_style === 'italic' ? 'active button_disc' : 'button_disc').html('![](\"data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==\" "\\"Italic\\"")
'),\n btn_underline = options_format.insert('span').attr('class', title_props.text_decoration === 'underline' ? 'active button_disc' : 'button_disc').html('![](\"data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7\" "\\"Underline\\"")
');\n\n btn_bold.on('click', function () {\n if (this.classList.contains('active')) {\n this.classList.remove('active');\n title.style('font-weight', '');\n } else {\n this.classList.add('active');\n title.style('font-weight', 'bold');\n }\n });\n btn_italic.on('click', function () {\n if (this.classList.contains('active')) {\n this.classList.remove('active');\n title.style('font-style', '');\n } else {\n this.classList.add('active');\n title.style('font-style', 'italic');\n }\n });\n btn_underline.on('click', function () {\n if (this.classList.contains('active')) {\n this.classList.remove('active');\n title.style('text-decoration', '');\n } else {\n this.classList.add('active');\n title.style('text-decoration', 'underline');\n }\n });\n\n var hasBuffer = title_props.stroke !== 'none';\n var buffer_section1 = box_content.append('p');\n var buffer_section2 = box_content.append('p').style('display', hasBuffer ? '' : 'none');\n box_content.append('p').style('clear', 'both');\n\n buffer_section1.append('input').attrs({ type: 'checkbox', id: 'title_buffer_chkbox', checked: hasBuffer ? true : null }).on('change', function () {\n if (this.checked) {\n buffer_section2.style('display', '');\n title.style('stroke', buffer_color.node().value).style('stroke-width', buffer_width.node().value + 'px');\n } else {\n buffer_section2.style('display', 'none');\n title.style('stroke', 'none').style('stroke-width', '1px');\n }\n });\n\n buffer_section1.append('label').attrs({ for: 'title_buffer_chkbox' }).text(_tr('app_page.title_box.buffer'));\n\n var buffer_color = buffer_section2.insert('input').style('float', 'left').attrs({ type: 'color' }).property('value', hasBuffer ? (0, _colors_helpers.rgb2hex)(title_props.stroke) : '#ffffff').on('change', function () {\n title.style('stroke', this.value);\n });\n\n buffer_section2.insert('span').style('float', 'right').html(' px');\n\n var buffer_width = buffer_section2.insert('input').styles({ float: 'right', width: '60px' }).attrs({ type: 'number', step: '0.1' }).property('value', hasBuffer ? +title_props.stroke_width.replace('px', '') : 1).on('change', function () {\n title.style('stroke-width', this.value + 'px');\n });\n}\n\n// Function to display information on the top layer (in the layer manager)\nfunction displayInfoOnMove() {\n var info_features = d3.select('#info_features');\n if (info_features.classed('active')) {\n map.selectAll('.layer').selectAll('path').on('mouseover', null);\n map.selectAll('.layer').selectAll('circle').on('mouseover', null);\n map.selectAll('.layer').selectAll('rect').on('mouseover', null);\n info_features.classed('active', false);\n info_features.style('display', 'none').html('');\n d3.select('#info_button').classed('active', false);\n svg_map.style.cursor = '';\n } else {\n map.select('.brush').remove();\n d3.select('#brush_zoom_button').classed('active', false);\n var layers = svg_map.querySelectorAll('.layer'),\n nb_layer = layers.length;\n var top_visible_layer = null;\n\n for (var i = nb_layer - 1; i > -1; i--) {\n if (layers[i].style.visibility !== 'hidden') {\n top_visible_layer = global._app.id_to_layer.get(layers[i].id);\n break;\n }\n }\n\n if (!top_visible_layer) {\n swal('', _tr('app_page.common.error_no_visible'), 'error');\n return;\n }\n\n var id_top_layer = '#' + global._app.layer_to_id.get(top_visible_layer);\n var symbol = data_manager.current_layers[top_visible_layer].symbol || 'path';\n\n map.select(id_top_layer).selectAll(symbol).on('mouseover', function (d, i) {\n var txt_info = ['', top_visible_layer, '
Feature ', i + 1, '/', data_manager.current_layers[top_visible_layer].n_features, ''];\n var properties = data_manager.result_data[top_visible_layer] ? data_manager.result_data[top_visible_layer][i] : d.properties;\n Object.getOwnPropertyNames(properties).forEach(function (el) {\n txt_info.push('
' + el + ' : ' + properties[el]);\n });\n txt_info.push('
');\n info_features.style('display', null).html(txt_info.join(''));\n });\n\n map.select(id_top_layer).selectAll(symbol).on('mouseout', function () {\n info_features.style('display', 'none').html('');\n });\n\n info_features.classed('active', true);\n svg_map.style.cursor = 'help';\n d3.select('#info_button').classed('active', true);\n }\n}\n\n// Function to switch the visibility of a layer the open/closed eye button\nfunction handle_active_layer(name) {\n var fill_value = void 0,\n parent_div = void 0,\n selec = void 0,\n at_end = void 0;\n\n if (document.getElementById('info_features').className === 'active') {\n displayInfoOnMove();\n at_end = true;\n }\n if (!name) {\n selec = this;\n parent_div = selec.parentElement;\n name = parent_div.parentElement.getAttribute('layer_name'); // eslint-disable-line no-param-reassign\n } else {\n selec = document.querySelector('#sortable .' + global._app.layer_to_id.get(name) + ' .active_button');\n parent_div = selec.parentElement;\n }\n var func = function func() {\n handle_active_layer(name);\n };\n if (selec.id === 'eye_closed') {\n fill_value = 1;\n var eye_open = make_eye_button('open');\n eye_open.onclick = func;\n parent_div.replaceChild(eye_open, selec);\n } else {\n fill_value = 0;\n var eye_closed = make_eye_button('closed');\n eye_closed.onclick = func;\n parent_div.replaceChild(eye_closed, selec);\n }\n map.select('#' + global._app.layer_to_id.get(name)).style('visibility', fill_value === 0 ? 'hidden' : 'initial');\n map.selectAll('.lgdf_' + global._app.layer_to_id.get(name)).style('visibility', fill_value === 0 ? 'hidden' : 'initial');\n\n if (at_end) {\n displayInfoOnMove();\n }\n}\n\nfunction make_eye_button(state) {\n if (state === 'open') {\n var eye_open = document.createElement('img');\n eye_open.setAttribute('src', 'static/img/b/eye_open.png');\n eye_open.setAttribute('class', 'active_button i18n');\n eye_open.setAttribute('id', 'eye_open');\n eye_open.setAttribute('width', 17);\n eye_open.setAttribute('height', 17);\n eye_open.setAttribute('alt', 'Visible');\n return eye_open;\n } else if (state === 'closed') {\n var eye_closed = document.createElement('img');\n eye_closed.setAttribute('src', 'static/img/b/eye_closed.png');\n eye_closed.setAttribute('class', 'active_button i18n');\n eye_closed.setAttribute('id', 'eye_closed');\n eye_closed.setAttribute('width', 17);\n eye_closed.setAttribute('height', 17);\n eye_closed.setAttribute('alt', 'Not visible');\n return eye_closed;\n }\n}\n\n// Wrapper to obtain confirmation before actually removing a layer :\nfunction remove_layer(name) {\n // eslint-disable-next-line no-param-reassign\n name = name || this.parentElement.parentElement.getAttribute('layer_name');\n swal({\n title: '',\n text: _tr('app_page.common.remove_layer', { layer: name }),\n type: 'warning',\n customClass: 'swal2_custom',\n showCancelButton: true,\n allowOutsideClick: false,\n confirmButtonColor: '#DD6B55',\n confirmButtonText: _tr('app_page.common.delete') + '!',\n cancelButtonText: _tr('app_page.common.cancel')\n }).then(function () {\n remove_layer_cleanup(name);\n }, function () {\n return null;\n });\n // ^^^^^^^^^^^^ Do nothing on cancel, but this avoid having an \"uncaught exeption (cancel)\" comming in the console if nothing is set here\n // ^^^^^^^^^^^^^^^^^^^^^^^ Not sure anymore :/\n}\n\nfunction remove_ext_dataset() {\n swal({\n title: '',\n text: _tr('app_page.common.remove_tabular'),\n type: 'warning',\n showCancelButton: true,\n allowOutsideClick: false,\n confirmButtonColor: '#DD6B55',\n confirmButtonText: _tr('app_page.common.delete') + '!',\n cancelButtonText: _tr('app_page.common.cancel')\n }).then(function () {\n remove_ext_dataset_cleanup();\n }, function () {\n return null;\n });\n}\n\nfunction remove_ext_dataset_cleanup() {\n data_manager.field_join_map = [];\n data_manager.joined_dataset = [];\n data_manager.dataset_name = undefined;\n d3.select('#ext_dataset_zone').attr('data-i18n', '[html]app_page.section1.no_ext_dataset').styles({\n border: '3px dashed #ccc',\n color: 'rgb(204, 204, 204)',\n padding: '3px',\n 'text-align': 'center'\n }).html(_tr('app_page.section1.no_ext_dataset'));\n document.getElementById('join_section').innerHTML = '';\n}\n\n// Do some clean-up when a layer is removed\n// Most of the job is to do when it's the targeted layer which is removed in\n// order to restore functionnalities to their initial states\nfunction remove_layer_cleanup(name) {\n if (!data_manager.current_layers[name]) return;\n var layer_id = global._app.layer_to_id.get(name);\n // Making some clean-up regarding the result layer :\n if (data_manager.current_layers[name].is_result) {\n map.selectAll(['.lgdf_', layer_id].join('')).remove();\n if (data_manager.result_data.hasOwnProperty(name)) {\n delete data_manager.result_data[name];\n }\n if (data_manager.current_layers[name].hasOwnProperty('key_name') && data_manager.current_layers[name].renderer.indexOf('Choropleth') < 0 && data_manager.current_layers[name].renderer.indexOf('Categorical') < 0) {\n send_remove_server(name);\n }\n }\n // Is the layer using a filter ? If yes, remove it:\n var filter_id = map.select('#' + layer_id).attr('filter');\n if (filter_id) {\n svg_map.querySelector(filter_id.substr(4).replace(')', '')).remove();\n }\n\n // Remove the layer from the map and from the layer manager :\n map.select('#' + layer_id).remove();\n document.querySelector('#sortable .' + layer_id).remove();\n\n // Remove the layer from the \"geo export\" menu :\n var a = document.getElementById('layer_to_export').querySelector('option[value=\"' + name + '\"]');\n if (a) a.remove();\n\n // Remove the layer from the \"mask\" section if the \"smoothed map\" menu is open :\n if (global._app.current_functionnality && (global._app.current_functionnality.name === 'smooth' || global._app.current_functionnality.name === 'grid')) {\n Array.prototype.slice.call(document.querySelectorAll('.mask_field')).forEach(function (elem) {\n var aa = elem.querySelector('option[value=\"' + name + '\"]');\n if (aa) aa.remove();\n });\n }\n\n // Reset the panel displaying info on the targeted layer if she\"s the one to be removed :\n if (data_manager.current_layers[name].targeted) {\n // Unfiling the fields related to the targeted functionnality:\n if (global._app.current_functionnality) {\n (0, _function.clean_menu_function)();\n }\n\n // Update some global variables :\n data_manager.field_join_map = [];\n data_manager.user_data = {};\n global._app.targeted_layer_added = false;\n\n // Updating the top of the menu (section 1) :\n resetSection1();\n\n // Reset the projection (if the projection was defined via proj4):\n if (_app.current_proj_name === 'def_proj4') {\n _app.current_proj_name = 'NaturalEarth2';\n (0, _projections.change_projection)(_app.current_proj_name);\n (0, _projections.addLastProjectionSelect)(_app.current_proj_name);\n }\n }\n\n // There is probably better ways in JS to delete the object,\n // but in order to make it explicit that we are removing it :\n delete data_manager.current_layers[name];\n}\n\n// To bind the set of small buttons\n// (trash icon, paint icon, active/deactive visibility, info tooltip, etc..)\n// which are on each feature representing a layer in the layer manager\n// (the function is called each time that a new feature is put in this layer manager)\nfunction binds_layers_buttons(layer_name) {\n var layer_id = global._app.layer_to_id.get(layer_name);\n var sortable_elem = d3.select('#sortable').select('.' + layer_id);\n sortable_elem.on('dblclick', function () {\n (0, _layers_style_popup.handle_click_layer)(layer_name);\n });\n sortable_elem.on('contextmenu', function () {\n d3.event.preventDefault();\n });\n sortable_elem.select('#trash_button').on('click', function () {\n remove_layer(layer_name);\n });\n sortable_elem.select('.active_button').on('click', function () {\n handle_active_layer(layer_name);\n });\n sortable_elem.select('.style_button').on('click', function () {\n (0, _layers_style_popup.handle_click_layer)(layer_name);\n });\n sortable_elem.select('.style_target_layer').on('click', function () {\n (0, _layers_style_popup.handle_click_layer)(layer_name);\n });\n sortable_elem.select('#legend_button').on('click', function () {\n (0, _legend.handle_legend)(layer_name);\n });\n sortable_elem.select('#browse_data_button').on('click', function () {\n _tables.boxExplore2.create(layer_name);\n });\n sortable_elem.select('#replace_button').on('click', function () {\n changeTargetLayer(layer_name);\n });\n sortable_elem.select('#zoom_fit_button').on('click', function () {\n center_map(layer_name);\n (0, _map_ctrl.zoom_without_redraw)();\n });\n // TODO : re-add a tooltip when the mouse is over that sortable element ?\n}\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../node_modules/webpack/buildin/global.js */ \"./node_modules/webpack/buildin/global.js\"), __webpack_require__(/*! bluebird */ \"./node_modules/bluebird/js/browser/bluebird.js\")))\n\n//# sourceURL=webpack:///./js/interface.js?");
-
-/***/ }),
-
-/***/ "./js/join_popup.js":
-/*!**************************!*\
- !*** ./js/join_popup.js ***!
- \**************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-eval("/* WEBPACK VAR INJECTION */(function(global, Promise) {\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.createJoinBox = undefined;\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nexports.valid_join_check_display = valid_join_check_display;\n\nvar _dialogs = __webpack_require__(/*! ./dialogs */ \"./js/dialogs.js\");\n\nvar _helpers = __webpack_require__(/*! ./helpers */ \"./js/helpers.js\");\n\nvar _helpers_calc = __webpack_require__(/*! ./helpers_calc */ \"./js/helpers_calc.js\");\n\nvar _interface = __webpack_require__(/*! ./interface */ \"./js/interface.js\");\n\nfunction _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\nfunction handleJoin() {\n var layer_name = Object.getOwnPropertyNames(global.data_manager.user_data);\n\n if (!(layer_name.length === 1 && global.data_manager.joined_dataset.length === 1)) {\n swal('', _tr('app_page.join_box.unable_join'), 'error');\n } else if (data_manager.field_join_map.length !== 0) {\n (0, _dialogs.make_confirm_dialog2)('dialogBox', undefined, { html_content: _tr('app_page.join_box.ask_forget_join') }).then(function (confirmed) {\n if (confirmed) {\n valid_join_check_display();\n data_manager.field_join_map = [];\n removeExistingJointure(layer_name);\n createJoinBox(layer_name[0]);\n }\n });\n } else if (global.data_manager.user_data[layer_name].length !== global.data_manager.joined_dataset[0].length) {\n (0, _dialogs.make_confirm_dialog2)('dialogBox', undefined, { html_content: _tr('app_page.join_box.ask_diff_nb_features') }).then(function (confirmed) {\n if (confirmed) {\n createJoinBox(layer_name[0]);\n }\n });\n } else {\n createJoinBox(layer_name[0]);\n }\n}\n\n/**\n* Function called to update the menu according to user operation\n* (triggered when layers/dataset are added and after a join operation)\n* @param {bool} val - ...\n* @param {Array} prop - The proportion of joined features\n* @return {void}\n*/\nfunction valid_join_check_display(val, prop) {\n if (!val) {\n var extDatasetImg = document.getElementById('img_data_ext');\n extDatasetImg.setAttribute('src', '/static/img/b/joinfalse.png');\n extDatasetImg.setAttribute('alt', 'Non-validated join');\n extDatasetImg.style.width = '28px';\n extDatasetImg.style.height = '28px';\n extDatasetImg.onclick = handleJoin;\n\n var joinSec = document.getElementById('join_section');\n joinSec.innerHTML = [prop, _tr('app_page.join_box.state_not_joined')].join('');\n\n var button = document.createElement('button');\n button.setAttribute('id', 'join_button');\n button.style.display = 'inline';\n button.innerHTML = '';\n button.onclick = handleJoin;\n joinSec.appendChild(button);\n } else {\n var _extDatasetImg = document.getElementById('img_data_ext');\n _extDatasetImg.setAttribute('src', '/static/img/b/jointrue.png');\n _extDatasetImg.setAttribute('alt', 'Validated join');\n _extDatasetImg.style.width = '28px';\n _extDatasetImg.style.height = '28px';\n _extDatasetImg.onclick = null;\n\n var _prop$split$map = prop.split('/').map(function (d) {\n return +d;\n }),\n _prop$split$map2 = _slicedToArray(_prop$split$map, 1),\n v1 = _prop$split$map2[0];\n\n var _joinSec = document.getElementById('join_section');\n _joinSec.innerHTML = [' ', prop, _tr('app_page.join_box.match', { count: v1 }), ''].join(' ');\n\n var _button = document.createElement('button');\n _button.setAttribute('id', 'join_button');\n _button.style.display = 'inline';\n _button.innerHTML = [' - ', _tr('app_page.join_box.change_field'), ' '].join('');\n _button.onclick = handleJoin;\n _joinSec.appendChild(_button);\n }\n}\n\nfunction valid_join_on(layer_name, join_values1, join_values2, field1, field2, hits) {\n var ext_dataset = global.data_manager.joined_dataset[0];\n var layer_dataset = global.data_manager.user_data[layer_name];\n var prop = [hits, '/', join_values1.length].join('');\n var f_name = '';\n var val = void 0;\n\n if (hits >= join_values1.length) {\n swal({\n title: '',\n text: _tr('app_page.common.success'),\n type: 'success',\n allowOutsideClick: true\n });\n var fields_name_to_add = Object.getOwnPropertyNames(ext_dataset[0]);\n for (var i = 0, len = join_values1.length; i < len; i++) {\n val = data_manager.field_join_map[i];\n for (var j = 0, leng = fields_name_to_add.length; j < leng; j++) {\n f_name = fields_name_to_add[j];\n if (f_name.length > 0) {\n layer_dataset[i][f_name] = ext_dataset[val][f_name];\n }\n }\n }\n valid_join_check_display(true, prop);\n return Promise.resolve(true);\n } else if (hits > 0) {\n return swal({\n title: _tr('app_page.common.confirm') + '!',\n text: _tr('app_page.join_box.partial_join', { ratio: prop }),\n allowOutsideClick: false,\n allowEscapeKey: true,\n type: 'question',\n showConfirmButton: true,\n showCancelButton: true,\n confirmButtonText: _tr('app_page.common.yes'),\n cancelButtonText: _tr('app_page.common.no')\n }).then(function () {\n var fields_name_to_add = Object.getOwnPropertyNames(ext_dataset[0]);\n for (var _i = 0, _len = data_manager.field_join_map.length; _i < _len; _i++) {\n val = data_manager.field_join_map[_i];\n for (var _j = 0, _leng = fields_name_to_add.length; _j < _leng; _j++) {\n f_name = fields_name_to_add[_j];\n if (f_name.length > 0) {\n // let t_val;\n // if (val == undefined) t_val = null; // eslint-disable-line\n // else if (ext_dataset[val][f_name] === '') t_val = null;\n // else t_val = ext_dataset[val][f_name];\n layer_dataset[_i][f_name] = val != undefined ? ext_dataset[val][f_name] : null; // eslint-disable-line\n }\n }\n }\n return swal({\n title: _tr('app_page.common.confirm') + '!',\n text: _tr('app_page.join_box.delete_not_join'),\n allowOutsideClick: false,\n allowEscapeKey: true,\n type: 'question',\n showConfirmButton: true,\n showCancelButton: true,\n confirmButtonText: _tr('app_page.common.yes'),\n cancelButtonText: _tr('app_page.common.no')\n }).then(function () {\n var k = Object.keys(_target_layer_file.objects);\n var geoms = _target_layer_file.objects[k[0]].geometries;\n var temp1 = [];\n var temp2 = [];\n for (var _i2 = 0; _i2 < layer_dataset.length; _i2++) {\n if (data_manager.field_join_map[_i2] !== undefined) {\n temp1.push(layer_dataset[_i2]);\n temp2.push(geoms[_i2]);\n }\n }\n global.data_manager.user_data[layer_name] = temp1;\n _target_layer_file.objects[k[0]].geometries = temp2;\n (0, _interface.updateLayer)(layer_name);\n valid_join_check_display(true, [global.data_manager.user_data[layer_name].length, global.data_manager.user_data[layer_name].length].join('/'));\n var formToSend = new FormData();\n var json_layer = (0, _helpers.path_to_geojson2)(layer_name);\n formToSend.append('geojson', json_layer);\n formToSend.append('layer_name', layer_name);\n (0, _helpers.xhrequest)('POST', '/layers/add', formToSend, false).then(function (e) {\n data_manager.current_layers[layer_name].key_name = JSON.parse(e).key;\n }).catch(function (err) {\n (0, _helpers.display_error_during_computation)();\n console.log(err);\n });\n return Promise.resolve(true);\n }, function () {\n valid_join_check_display(true, prop);\n return Promise.resolve(true);\n });\n }, function () {\n data_manager.field_join_map = [];\n return Promise.resolve(false);\n });\n }\n swal('', _tr('app_page.join_box.no_match', { field1: field1, field2: field2 }), 'error');\n data_manager.field_join_map = [];\n return Promise.resolve(false);\n}\n\n// Where the real join is done\n// Its two main results are:\n// -the update of the global \"data_manager.field_join_map\" array\n// (storing the relation between index of the geometry\n// layer and index of the external dataset)\n// -the update of the global \"data_manager.user_data\" object, adding actualy the value\n// to each object representing each feature of the layer\nfunction prepare_join_on(layer_name, field1, field2) {\n var join_values1 = [],\n join_values2 = [];\n var layer_dataset = global.data_manager.user_data[layer_name];\n var ext_dataset = global.data_manager.joined_dataset[0];\n var nb_features = layer_dataset.length;\n var hits = 0;\n var val = void 0;\n\n data_manager.field_join_map = [];\n\n for (var i = 0, len = ext_dataset.length; i < len; i++) {\n join_values2.push(ext_dataset[i][field2]);\n }\n for (var _i3 = 0, _len2 = layer_dataset.length; _i3 < _len2; _i3++) {\n join_values1.push(layer_dataset[_i3][field1]);\n }\n if ((0, _helpers_calc.has_duplicate)(join_values1) || (0, _helpers_calc.has_duplicate)(join_values2)) {\n return swal('', _tr('app_page.join_box.error_not_uniques'), 'warning');\n }\n if (nb_features > 5000) {\n _app.waitingOverlay.display();\n var jointure_worker = new Worker('static/dist/webworker_jointure.js');\n _app.webworker_to_cancel = jointure_worker;\n jointure_worker.postMessage([join_values1, join_values2]);\n jointure_worker.onmessage = function (e) {\n var _e$data = _slicedToArray(e.data, 2),\n join_map = _e$data[0],\n _hits = _e$data[1];\n\n _app.webworker_to_cancel = undefined;\n hits = _hits;\n data_manager.field_join_map = join_map;\n _app.waitingOverlay.hide();\n valid_join_on(layer_name, join_values1, join_values2, field1, field2, hits).then(function (valid) {\n jointure_worker.terminate();\n if (valid) (0, _helpers.make_box_type_fields)(layer_name);\n });\n };\n } else {\n if (typeof join_values1[0] === 'number' && typeof join_values2[0] === 'string') {\n for (var _i4 = 0; _i4 < nb_features; _i4++) {\n val = join_values2.indexOf(String(join_values1[_i4]));\n if (val !== -1) {\n data_manager.field_join_map.push(val);\n hits += 1;\n } else {\n data_manager.field_join_map.push(undefined);\n }\n }\n } else if (typeof join_values2[0] === 'number' && typeof join_values1[0] === 'string') {\n for (var _i5 = 0; _i5 < nb_features; _i5++) {\n val = join_values2.indexOf(Number(join_values1[_i5]));\n if (val !== -1) {\n data_manager.field_join_map.push(val);\n hits += 1;\n } else {\n data_manager.field_join_map.push(undefined);\n }\n }\n } else if (typeof join_values2[0] === 'number' && typeof join_values1[0] === 'number') {\n for (var _i6 = 0; _i6 < nb_features; _i6++) {\n val = join_values2.indexOf(join_values1[_i6]);\n if (val !== -1) {\n data_manager.field_join_map.push(val);\n hits += 1;\n } else {\n data_manager.field_join_map.push(undefined);\n }\n }\n } else {\n for (var _i7 = 0; _i7 < nb_features; _i7++) {\n val = join_values2.indexOf(String(join_values1[_i7]));\n if (val !== -1) {\n data_manager.field_join_map.push(val);\n hits += 1;\n } else {\n data_manager.field_join_map.push(undefined);\n }\n }\n }\n valid_join_on(layer_name, join_values1, join_values2, field1, field2, hits).then(function (valid) {\n if (valid) (0, _helpers.make_box_type_fields)(layer_name);\n });\n }\n}\n// Function creating the join box, filled by two \"select\" input, one containing\n// the field names of the geometry layer, the other one containing those from\n// the external dataset, in order to let the user choose the common field to do\n// the join.\nvar createJoinBox = exports.createJoinBox = function createJoinBox(layer) {\n var geom_layer_fields = [].concat(_toConsumableArray(data_manager.current_layers[layer].original_fields.keys()));\n var ext_dataset_fields = Object.getOwnPropertyNames(global.data_manager.joined_dataset[0][0]);\n var options_fields_layer = [];\n var options_fields_ext_dataset = [];\n var lastChoice = { field1: geom_layer_fields[0], field2: ext_dataset_fields[0] };\n\n for (var i = 0, len = geom_layer_fields.length; i < len; i++) {\n options_fields_layer.push('');\n }\n\n for (var _i8 = 0, _len3 = ext_dataset_fields.length; _i8 < _len3; _i8++) {\n if (ext_dataset_fields[_i8].length > 0) {\n options_fields_ext_dataset.push('');\n }\n }\n\n var inner_box = '' + _tr('app_page.join_box.select_fields') + '
\\n' + _tr('app_page.join_box.geom_layer_field') + '
\\n
\\n
(' + layer + ')\\n
\\n' + _tr('app_page.join_box.ext_dataset_field') + '
\\n
\\n
(' + data_manager.dataset_name + '.csv)\\n
' + _tr('app_page.join_box.ask_join') + '
';\n // const inner_box = [\n // '',\n // _tr('app_page.join_box.select_fields'), '
',\n // '',\n // _tr('app_page.join_box.geom_layer_field'), '
',\n // options_fields_layer.join(''), '
(', layer, ')',\n // _tr('app_page.join_box.ext_dataset_field'), '
',\n // options_fields_ext_dataset.join(''), '
(', data_manager.dataset_name, '.csv)
', _tr('app_page.join_box.ask_join'), '
',\n // ].join('');\n\n (0, _dialogs.make_confirm_dialog2)('joinBox', _tr('app_page.join_box.title'), { html_content: inner_box, widthFitContent: true }).then(function (confirmed) {\n if (confirmed) {\n prepare_join_on(layer, lastChoice.field1, lastChoice.field2);\n }\n });\n\n d3.select('.joinBox').styles({ 'text-align': 'center', 'line-height': '0.9em' });\n\n d3.select('#button_field1').style('float', 'left').on('change', function () {\n lastChoice.field1 = this.value;\n });\n\n d3.select('#button_field2').style('float', 'left').on('change', function () {\n lastChoice.field2 = this.value;\n });\n};\n\nvar removeExistingJointure = function removeExistingJointure(layer_name) {\n if (!global.data_manager.user_data[layer_name] || global.data_manager.user_data[layer_name].length < 1) return;\n var dataLayer = global.data_manager.user_data[layer_name];\n var original_fields = data_manager.current_layers[layer_name].original_fields;\n var fieldDifference = Object.getOwnPropertyNames(dataLayer[0]).filter(function (f) {\n return !original_fields.has(f);\n });\n var nbFields = fieldDifference.length;\n for (var i = 0, nbFt = dataLayer.length; i < nbFt; i++) {\n for (var j = 0; j < nbFields; j++) {\n delete dataLayer[i][fieldDifference[j]];\n }\n }\n};\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../node_modules/webpack/buildin/global.js */ \"./node_modules/webpack/buildin/global.js\"), __webpack_require__(/*! bluebird */ \"./node_modules/bluebird/js/browser/bluebird.js\")))\n\n//# sourceURL=webpack:///./js/join_popup.js?");
-
-/***/ }),
-
-/***/ "./js/layers.js":
-/*!**********************!*\
- !*** ./js/layers.js ***!
- \**********************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nexports.add_sample_layer = add_sample_layer;\nexports.add_layer_topojson = add_layer_topojson;\n\nvar _colors_helpers = __webpack_require__(/*! ./colors_helpers */ \"./js/colors_helpers.js\");\n\nvar _dialogs = __webpack_require__(/*! ./dialogs */ \"./js/dialogs.js\");\n\nvar _function = __webpack_require__(/*! ./function */ \"./js/function.js\");\n\nvar _helpers = __webpack_require__(/*! ./helpers */ \"./js/helpers.js\");\n\nvar _join_popup = __webpack_require__(/*! ./join_popup */ \"./js/join_popup.js\");\n\nvar _map_ctrl = __webpack_require__(/*! ./map_ctrl */ \"./js/map_ctrl.js\");\n\nvar _projections = __webpack_require__(/*! ./projections */ \"./js/projections.js\");\n\nvar _interface = __webpack_require__(/*! ./interface */ \"./js/interface.js\");\n\n/**\n* Function to display the dialog allowing the choose and add a sample target layer.\n*\n* @return {void}\n*/\nfunction add_sample_layer() {\n var prepare_extra_dataset_availables = function prepare_extra_dataset_availables() {\n (0, _helpers.request_data)('GET', 'extrabasemaps').then(function (result) {\n _app.list_extrabasemaps = JSON.parse(result.target.responseText).filter(function (elem) {\n return elem[0] !== 'Tunisia';\n });\n });\n };\n (0, _dialogs.check_remove_existing_box)('.sampleDialogBox');\n if (!_app.list_extrabasemaps) {\n prepare_extra_dataset_availables();\n }\n var fields_type_sample = new Map([['quartier_paris', [{ name: 'n_sq_qu', type: 'id' }, { name: 'c_qu', type: 'id' }, { name: 'c_quinsee', type: 'id' }, { name: 'l_qu', type: 'id' }, { name: 'c_ar', type: 'category', has_duplicate: true }, { name: 'n_sq_ar', type: 'category', has_duplicate: true }, { name: 'surface', type: 'stock' }, { name: 'P12_POP', type: 'stock' }, { name: 'P07_POP', type: 'stock' }]], ['GrandParisMunicipalities', [{ name: 'DEPARTEMENT', type: 'category', has_duplicate: true }, { name: 'IDCOM', type: 'id' }, { name: 'EPT', type: 'category', has_duplicate: true }, { name: 'REVENUS', type: 'stock' }, { name: 'LIBCOM', type: 'id' }, { name: 'LIBEPT', type: 'category', has_duplicate: true }, { name: 'MENAGES_FISCAUX', type: 'stock' }, { name: 'UID', type: 'id' }, { name: 'REVENUS_PAR_MENAGE', type: 'ratio' }]], ['martinique', [{ name: 'INSEE_COM', type: 'id' }, { name: 'NOM_COM', type: 'id', not_number: true }, { name: 'STATUT', type: 'category', has_duplicate: true }, { name: 'SUPERFICIE', type: 'stock' }, { name: 'P13_POP', type: 'stock' }, { name: 'P13_LOG', type: 'stock' }, { name: 'P13_LOGVAC', type: 'stock' }, { name: 'Part_Logements_Vacants', type: 'ratio' }]], ['nuts2-2013-data', [{ name: 'id', type: 'id', not_number: true }, { name: 'name', type: 'id', not_number: true }, { name: 'POP', type: 'stock' }, { name: 'GDP', type: 'stock' }, { name: 'UNEMP', type: 'ratio' }, { name: 'COUNTRY', type: 'category', has_duplicate: true }]], ['voronoi_communes_2016_2-2', [{ name: 'INSEE_COM', type: 'id' }]], ['regions_2016_2-2', [{ name: 'CODE_REG', type: 'id' }]], ['departements_2016_2-2', [{ name: 'CODE_DEPT', type: 'id' }, { name: 'CODE_REG', type: 'category', has_duplicate: true }]], ['brazil', [{ name: 'ADMIN_NAME', type: 'id', not_number: true }, { name: 'Abbreviation', type: 'id', not_number: true }, { name: 'Capital', type: 'id', not_number: true }, { name: 'GDP_per_capita_2012', type: 'stock' }, { name: 'Life_expectancy_2014', type: 'ratio' }, { name: 'Pop2014', type: 'stock' }, { name: 'REGIONS', type: 'category', has_duplicate: true }, { name: 'STATE2010', type: 'id' }, { name: 'popdensity2014', type: 'ratio' }]], ['FR_communes', [{ name: 'INSEE_COM', type: 'id' }, { name: 'NOM_COM', type: 'id' }, { name: 'SUPERFICIE', type: 'stock' }, { name: 'POPULATION', type: 'stock' }, { name: 'CODE_DEPT', type: 'category', has_duplicate: true }, { name: 'NOM_DEPT', type: 'category', has_duplicate: true }, { name: 'CODE_REG', type: 'category', has_duplicate: true }, { name: 'NOM_REG', type: 'category', has_duplicate: true }]], ['world_countries_data', [{ name: 'ISO2', type: 'id', not_number: true }, { name: 'ISO3', type: 'id', not_number: true }, { name: 'ISONUM', type: 'id' }, { name: 'NAMEen', type: 'id', not_number: true }, { name: 'NAMEfr', type: 'id', not_number: true }, { name: 'UNRegion', type: 'category', has_duplicate: true }, { name: 'GrowthRate', type: 'ratio' }, { name: 'PopDensity', type: 'ratio' }, { name: 'PopTotal', type: 'stock' }, { name: 'JamesBond', type: 'stock' }]]]);\n\n var suggested_projection = new Map([['quartier_paris', ['proj4', 'EPSG:2154']], ['GrandParisMunicipalities', ['proj4', 'EPSG:2154']], ['martinique', ['proj4', 'EPSG:2973']], ['nuts2-2013-data', ['proj4', 'EPSG:3035']], ['voronoi_communes_2016_2-2', ['proj4', 'EPSG:2154']], ['departements_2016_2-2', ['proj4', 'EPSG:2154']], ['brazil', ['proj4', 'EPSG:5527']], ['world_countries_data', ['d3', 'NaturalEarth2']], ['commune_dep_971', ['proj4', 'EPSG:32620']], ['commune_dep_972', ['proj4', 'EPSG:32620']], ['commune_dep_973', ['proj4', 'EPSG:2972']], ['commune_dep_974', ['proj4', 'EPSG:2975']], ['commune_dep_976', ['proj4', 'EPSG:7075']]]);\n var target_layers = [[_tr('app_page.sample_layer_box.target_layer'), ''], [_tr('app_page.sample_layer_box.grandparismunicipalities'), 'GrandParisMunicipalities'], [_tr('app_page.sample_layer_box.quartier_paris'), 'quartier_paris'], [_tr('app_page.sample_layer_box.martinique'), 'martinique'], [_tr('app_page.sample_layer_box.departements_2016_2-2'), 'departements_2016_2-2'], [_tr('app_page.layout_layer_box.departements_vor_2016_2-2'), 'departements_vor_2016_2-2'], [_tr('app_page.sample_layer_box.regions_2016_2-2'), 'regions_2016_2-2'], [_tr('app_page.layout_layer_box.france_contour_2016_2-2'), 'france_contour_2016_2-2'], [_tr('app_page.sample_layer_box.nuts2_data'), 'nuts2-2013-data'], [_tr('app_page.sample_layer_box.brazil'), 'brazil'], [_tr('app_page.sample_layer_box.world_countries'), 'world_countries_data'], [_tr('app_page.sample_layer_box.communes_reg_11'), 'communes_reg_11'], [_tr('app_page.sample_layer_box.communes_reg_24'), 'communes_reg_24'], [_tr('app_page.sample_layer_box.communes_reg_27'), 'communes_reg_27'], [_tr('app_page.sample_layer_box.communes_reg_28'), 'communes_reg_28'], [_tr('app_page.sample_layer_box.communes_reg_32'), 'communes_reg_32'], [_tr('app_page.sample_layer_box.communes_reg_44'), 'communes_reg_44'], [_tr('app_page.sample_layer_box.communes_reg_52'), 'communes_reg_52'], [_tr('app_page.sample_layer_box.communes_reg_53'), 'communes_reg_53'], [_tr('app_page.sample_layer_box.communes_reg_75'), 'communes_reg_75'], [_tr('app_page.sample_layer_box.communes_reg_76'), 'communes_reg_76'], [_tr('app_page.sample_layer_box.communes_reg_84'), 'communes_reg_84'], [_tr('app_page.sample_layer_box.communes_reg_93'), 'communes_reg_93'], [_tr('app_page.sample_layer_box.communes_reg_94'), 'communes_reg_94'], [_tr('app_page.sample_layer_box.commune_dep_971'), 'commune_dep_971'], [_tr('app_page.sample_layer_box.commune_dep_972'), 'commune_dep_972'], [_tr('app_page.sample_layer_box.commune_dep_973'), 'commune_dep_973'], [_tr('app_page.sample_layer_box.commune_dep_974'), 'commune_dep_974'], [_tr('app_page.sample_layer_box.commune_dep_976'), 'commune_dep_976'], [_tr('app_page.sample_layer_box.voronoi_communes_2016_2-2'), 'voronoi_communes_2016_2-2'], [_tr('app_page.layout_layer_box.nuts0'), 'nuts0'], [_tr('app_page.layout_layer_box.nuts1'), 'nuts1'], [_tr('app_page.layout_layer_box.nuts2'), 'nuts2'], [_tr('app_page.sample_layer_box.world_countries'), 'world_countries_data'], [_tr('app_page.layout_layer_box.world_countries'), 'world_country'], [_tr('app_page.layout_layer_box.world_capitals'), 'world_cities'], [_tr('app_page.layout_layer_box.tissot'), 'tissot']];\n var selec = void 0,\n selec_url = void 0,\n content = void 0;\n\n (0, _dialogs.make_confirm_dialog2)('sampleDialogBox', _tr('app_page.sample_layer_box.title')).then(function (confirmed) {\n if (confirmed) {\n (0, _interface.askTypeLayer)().then(function (_type_layer) {\n var target_layer = _type_layer.indexOf('target') > -1;\n if (content.attr('id') === 'panel1') {\n if (selec) {\n var sugg_proj = selec.indexOf('communes_reg') > -1 ? ['proj4', 'EPSG:2154'] : suggested_projection.get(selec);\n var _fields_type = selec.indexOf('communes_reg') > -1 || selec.indexOf('commune_dep') > 1 ? fields_type_sample.get('FR_communes') : fields_type_sample.get(selec);\n add_sample_geojson(selec, {\n target_layer_on_add: target_layer,\n fields_type: _fields_type,\n default_projection: sugg_proj\n });\n }\n } else if (content.attr('id') === 'panel2') {\n var formToSend = new FormData();\n formToSend.append('url', selec_url[1]);\n formToSend.append('layer_name', selec_url[0]);\n (0, _helpers.xhrequest)('POST', '/convert_extrabasemap', formToSend, true).then(function (data) {\n add_layer_topojson(data, { target_layer_on_add: target_layer });\n }, function () {\n (0, _helpers.display_error_during_computation)();\n });\n }\n }, function (dismiss) {\n console.log(dismiss);\n });\n }\n });\n\n function make_panel2() {\n box_body.selectAll('div').remove();\n content = box_body.append('div').attr('id', 'panel2');\n content.append('h3').html(_tr('app_page.sample_layer_box.subtitle1'));\n content.append('p').append('span').html(_tr('app_page.sample_layer_box.extra_basemaps_info'));\n var select_extrabasemap = content.append('p').insert('select').on('change', function () {\n var id_elem = this.value;\n selec_url = [_app.list_extrabasemaps[id_elem][0], _app.list_extrabasemaps[id_elem][1], id_elem];\n });\n for (var i = 0, len_i = _app.list_extrabasemaps.length; i < len_i; i++) {\n select_extrabasemap.append('option').attr('value', i).html(_app.list_extrabasemaps[i][0]);\n }\n content.append('p').styles({ margin: 'auto', 'text-align': 'right', cursor: 'pointer' }).append('span').html(_tr('app_page.sample_layer_box.back_sample')).on('click', function () {\n make_panel1();\n });\n if (selec_url) {\n (0, _helpers.setSelected)(select_extrabasemap.node(), selec_url[2]);\n } else {\n selec_url = [_app.list_extrabasemaps[0][0], _app.list_extrabasemaps[0][1], 0];\n }\n content.select('#link1').on('click', function () {\n window.open('http://www.naturalearthdata.com', 'Natural Earth', 'toolbar=yes,menubar=yes,resizable=yes,scrollbars=yes,status=yes').focus();\n });\n content.select('#link2').on('click', function () {\n window.open('https://github.com/riatelab/basemaps/tree/master/Countries', 'riatelab/basemaps', 'toolbar=yes,menubar=yes,resizable=yes,scrollbars=yes,status=yes').focus();\n });\n }\n\n function make_panel1() {\n box_body.selectAll('div').remove();\n content = box_body.append('div').attr('id', 'panel1');\n content.append('h3').html(_tr('app_page.sample_layer_box.subtitle1'));\n\n var t_layer_selec = content.append('p').html('').insert('select').attr('class', 'sample_target');\n target_layers.forEach(function (layer_info) {\n t_layer_selec.append('option').html(layer_info[0]).attr('value', layer_info[1]);\n });\n t_layer_selec.on('change', function () {\n selec = this.value;\n });\n content.append('p').styles({ margin: 'auto', 'text-align': 'right', cursor: 'pointer' }).append('span').html(_tr('app_page.sample_layer_box.more_basemaps')).on('click', function () {\n make_panel2();\n });\n if (selec) (0, _helpers.setSelected)(t_layer_selec.node(), selec);\n }\n\n var container = d3.select('.sampleDialogBox').styles({\n width: '625px',\n display: 'flex'\n });\n container.select('.modal-content').style('width', '625px');\n var box_body = container.select('.modal-body');\n setTimeout(function () {\n document.querySelector('select.sample_target').focus();\n }, 500);\n make_panel1();\n}\n\nfunction add_sample_geojson(name, options) {\n var formToSend = new FormData();\n formToSend.append('layer_name', name);\n (0, _helpers.xhrequest)('POST', 'sample', formToSend, true).then(function (data) {\n add_layer_topojson(data, options);\n }).catch(function (err) {\n (0, _helpers.display_error_during_computation)();\n console.log(err);\n });\n}\n\n/**\n* Add a TopoJSON layer to the 'svg' element.\n*\n* @param {String} text - the text content to be parsed as a JS object.\n* @param {Object} url - options regarding the layer to be added (such as wether\n* skipping the 'success' alert or not, which name to use for the layer, etc.).\n* @return {String} The actual name of the layer once added, or `undefined` if\n* something went wrong.\n*/\nfunction add_layer_topojson(text) {\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n\n var _isValidJSON = (0, _helpers.isValidJSON)(text),\n _isValidJSON2 = _slicedToArray(_isValidJSON, 2),\n valid = _isValidJSON2[0],\n parsedJSON = _isValidJSON2[1];\n // If JSON.parse failed:\n\n\n if (!valid) {\n (0, _helpers.display_error_during_computation)('Unable to load the layer');\n return;\n }\n // Server returns a JSON reponse like {\"Error\":\"The error\"}\n // if something went bad during the conversion:\n if (parsedJSON.Error) {\n (0, _helpers.display_error_during_computation)(parsedJSON.Error);\n return;\n }\n\n var result_layer_on_add = options.result_layer_on_add ? true : false,\n target_layer_on_add = options.target_layer_on_add ? true : false,\n skip_alert = options.skip_alert ? true : false,\n skip_rescale = options.skip_rescale === true ? true : false,\n fields_type = options.fields_type ? options.fields_type : undefined;\n var topoObj = parsedJSON.file.transform ? parsedJSON.file : topojson.quantize(parsedJSON.file, 1e5);\n var layers_names = Object.getOwnPropertyNames(topoObj.objects);\n var random_color1 = _colors_helpers.ColorsSelected.random();\n var lyr_name = layers_names[0];\n var lyr_name_to_add = (0, _function.check_layer_name)(options.choosed_name ? options.choosed_name : lyr_name);\n var lyr_id = encodeId(lyr_name_to_add);\n var nb_ft = topoObj.objects[lyr_name].geometries.length;\n var topoObj_objects = topoObj.objects[lyr_name];\n var data_to_load = false;\n var type = void 0,\n _proj = void 0;\n\n // We don't allow multiple layer to be added at the same time, so the TopoJSON\n // file we are handling is supposed to only contains one layer. If it's not\n // the case, a warning is displayed and only the first layer is added to the svg.\n if (layers_names.length > 1) {\n swal('', _tr('app_page.common.warning_multiple_layers'), 'warning');\n }\n\n // Abort if the layer is empty (doesn't contains any feature)\n if (!topoObj_objects.geometries || topoObj_objects.geometries.length === 0) {\n (0, _helpers.display_error_during_computation)(_tr('app_page.common.error_invalid_empty'));\n return;\n }\n\n // \"Register\" the layer name in the UI and it's corresponding id on the DOM :\n _app.layer_to_id.set(lyr_name_to_add, lyr_id);\n _app.id_to_layer.set(lyr_id, lyr_name_to_add);\n\n for (var _t_ix = 0; _t_ix < nb_ft; _t_ix++) {\n if (topoObj_objects.geometries[_t_ix] && topoObj_objects.geometries[_t_ix].type) {\n if (topoObj_objects.geometries[_t_ix].type.indexOf('Point') > -1) type = 'Point';else if (topoObj_objects.geometries[_t_ix].type.indexOf('LineString') > -1) type = 'Line';else if (topoObj_objects.geometries[_t_ix].type.indexOf('Polygon') > -1) type = 'Polygon';\n break;\n }\n }\n\n // Abort if the layer doesn't contains any feature with a geometry type within\n // \"Point\", \"MultiPoint\", \"LineString\", \"MultiLineString\", \"Polygon\", \"MultiPolygon\"\n if (!type) {\n (0, _helpers.display_error_during_computation)(_tr('app_page.common.error_invalid_empty'));\n return;\n }\n\n // Some special operations if this is the first layer to be added:\n if (_app.first_layer) {\n // Remove the 'world' layout layer displayed when the application starts:\n (0, _interface.remove_layer_cleanup)('World');\n\n // Read the projection information provided with the layer, if any:\n if (parsedJSON.proj) {\n try {\n _proj = proj4(parsedJSON.proj);\n } catch (e) {\n _proj = undefined;\n console.log(e);\n }\n }\n // delete _app.first_layer;\n }\n\n data_manager.current_layers[lyr_name_to_add] = {\n type: type,\n n_features: nb_ft,\n 'stroke-width-const': type === 'Line' ? 1.5 : 0.4,\n fill_color: { single: random_color1 },\n key_name: parsedJSON.key\n };\n\n if (target_layer_on_add) {\n data_manager.current_layers[lyr_name_to_add].targeted = true;\n data_manager.user_data[lyr_name_to_add] = [];\n data_to_load = true;\n data_manager.current_layers[lyr_name_to_add].fields_type = [];\n } else if (result_layer_on_add) {\n data_manager.result_data[lyr_name_to_add] = [];\n data_manager.current_layers[lyr_name_to_add].is_result = true;\n }\n\n var field_names = topoObj_objects.geometries[0].properties ? Object.getOwnPropertyNames(topoObj_objects.geometries[0].properties) : [];\n var path_to_use = options.pointRadius ? path.pointRadius(options.pointRadius) : path;\n var nb_fields = field_names.length;\n topoObj_objects.geometries.forEach(function (d, ix) {\n if (data_to_load && nb_fields > 0) {\n if (d.id !== undefined && d.id !== ix) {\n d.properties._uid = d.id; // eslint-disable-line no-param-reassign\n d.id = +ix; // eslint-disable-line no-param-reassign\n } else if (!d.id) {\n d.id = +ix; // eslint-disable-line no-param-reassign\n }\n data_manager.user_data[lyr_name_to_add].push(d.properties);\n } else if (data_to_load) {\n d.properties.id = d.id = ix; // eslint-disable-line no-param-reassign, no-multi-assign\n data_manager.user_data[lyr_name_to_add].push({ id: d.properties.id });\n } else if (result_layer_on_add) {\n data_manager.result_data[lyr_name_to_add].push(d.properties);\n }\n });\n\n var func_data_idx = function func_data_idx(_, ix) {\n return 'feature_' + ix;\n };\n\n map.insert('g', '.legend').attrs({ id: lyr_id, class: data_to_load ? 'targeted_layer layer' : 'layer' }).styles({ 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }).selectAll('.subunit').data(topojson.feature(topoObj, topoObj_objects).features, function (d) {\n return d.id;\n }).enter().append('path').attrs({ d: path_to_use, id: func_data_idx }).styles({\n stroke: type !== 'Line' ? 'rgb(0, 0, 0)' : random_color1,\n 'stroke-opacity': 1,\n fill: type !== 'Line' ? random_color1 : null,\n 'fill-opacity': type !== 'Line' ? 0.90 : 0\n });\n d3.select('#layer_to_export').append('option').attr('value', lyr_name_to_add).text(lyr_name_to_add);\n (0, _interface.update_section1_layout)();\n if (target_layer_on_add) {\n data_manager.current_layers[lyr_name_to_add].original_fields = new Set(Object.getOwnPropertyNames(data_manager.user_data[lyr_name_to_add][0]));\n if (data_manager.joined_dataset.length !== 0) {\n (0, _join_popup.valid_join_check_display)(false);\n }\n (0, _interface.update_section1)(type, nb_fields, nb_ft, lyr_name_to_add);\n (0, _helpers.create_li_layer_elem)(lyr_name_to_add, nb_ft, type, 'target');\n _app.targeted_layer_added = true;\n window._target_layer_file = topoObj;\n if (!skip_rescale) {\n (0, _interface.scale_to_lyr)(lyr_name_to_add);\n (0, _interface.center_map)(lyr_name_to_add);\n }\n if (_app.current_functionnality !== undefined) {\n fields_handler.fill(lyr_name_to_add);\n }\n (0, _interface.handle_click_hand)('lock');\n\n // If the target layer is a point layer, slightly change the tooltip for the \"grid\"\n // functionnality:\n document.getElementById('button_grid').setAttribute('data-i18n', type === 'Point' ? '[title]app_page.func_description.grid_point' : '[title]app_page.func_description.grid');\n localize('#button_grid');\n } else if (result_layer_on_add) {\n (0, _helpers.create_li_layer_elem)(lyr_name_to_add, nb_ft, [type, options.func_name], 'result');\n } else {\n (0, _helpers.create_li_layer_elem)(lyr_name_to_add, nb_ft, type, '');\n }\n\n if (!target_layer_on_add && _app.current_functionnality !== undefined && (_app.current_functionnality.name === 'smooth' || _app.current_functionnality.name === 'grid')) {\n fields_handler.fill();\n }\n\n if (type === 'Point') {\n data_manager.current_layers[lyr_name_to_add].pointRadius = options.pointRadius || path.pointRadius();\n }\n\n // layers_listed.insertBefore(li, layers_listed.childNodes[0]);\n (0, _projections.handleClipPath)(_app.current_proj_name);\n (0, _interface.binds_layers_buttons)(lyr_name_to_add);\n if (!skip_rescale) {\n (0, _map_ctrl.zoom_without_redraw)();\n }\n\n // An alert is triggered when the layer is successfully added, except if\n // 'skip_alert' is false.\n // That \"success\" alert guide the user through other message; one for typing it's\n // data fields, on other (optionnal) for making the jointure between it's layer\n // and it's tabular dataset and another one (optional too)\n // to allow him to use the projection originally provided with the layer.\n if (!skip_alert) {\n if (fields_type) {\n data_manager.current_layers[lyr_name_to_add].fields_type = fields_type;\n }\n // No projection was provided was the layer :\n if (_proj === undefined) {\n swal({\n title: '',\n text: _tr('app_page.common.layer_success'),\n allowOutsideClick: true,\n allowEscapeKey: true,\n type: 'success'\n }).then(function () {\n if (target_layer_on_add && data_manager.joined_dataset.length > 0) {\n (0, _interface.ask_join_now)(lyr_name_to_add);\n } else if (target_layer_on_add) {\n (0, _helpers.make_box_type_fields)(lyr_name_to_add);\n }\n }, function () {\n if (target_layer_on_add && data_manager.joined_dataset.length > 0) {\n (0, _interface.ask_join_now)(lyr_name_to_add);\n } else if (target_layer_on_add) {\n (0, _helpers.make_box_type_fields)(lyr_name_to_add);\n }\n });\n } else {\n swal({\n title: '',\n text: _tr('app_page.common.layer_success_and_proj'),\n showCancelButton: true,\n showCloseButton: false,\n allowEscapeKey: true,\n allowOutsideClick: true,\n type: 'success'\n }).then(function () {\n _app.last_projection = parsedJSON.proj;\n _app.current_proj_name = 'def_proj4';\n (0, _projections.change_projection_4)(_proj);\n var custom_name = (0, _projections.tryFindNameProj)(_app.last_projection);\n (0, _projections.addLastProjectionSelect)('def_proj4', _app.last_projection, custom_name);\n if (target_layer_on_add && data_manager.joined_dataset.length > 0) {\n (0, _interface.ask_join_now)(lyr_name_to_add);\n } else if (target_layer_on_add) {\n (0, _helpers.make_box_type_fields)(lyr_name_to_add);\n }\n }, function () {\n if (target_layer_on_add && data_manager.joined_dataset.length > 0) {\n (0, _interface.ask_join_now)(lyr_name_to_add);\n } else if (target_layer_on_add) {\n (0, _helpers.make_box_type_fields)(lyr_name_to_add);\n }\n });\n }\n }\n\n if (options.default_projection) {\n // We are also storing this information for later use if the user promotes/downgrade\n // some lmayers:\n data_manager.current_layers[lyr_name_to_add].default_projection = options.default_projection;\n if (options.target_layer_on_add) {\n // The 'default_projection' property is used for providing a custom projection\n // with our sample layer (it use a separate path compared to the previous\n // block of code, in order to not let the choice to the user)\n if (options.default_projection[0] === 'proj4') {\n var proj_str = options.default_projection[1];\n var custom_name = void 0;\n if (proj_str.startsWith('EPSG:')) {\n var code = +proj_str.split('EPSG:')[1];\n var rv = _app.epsg_projections[code];\n proj_str = rv.proj4;\n custom_name = rv.name;\n }\n _app.current_proj_name = 'def_proj4';\n _app.last_projection = proj_str;\n (0, _projections.change_projection_4)(proj4(proj_str));\n (0, _projections.addLastProjectionSelect)('def_proj4', _app.last_projection, custom_name);\n } else if (options.default_projection[0] === 'd3') {\n _app.current_proj_name = options.default_projection[1];\n (0, _projections.change_projection)(options.default_projection[1]);\n (0, _projections.addLastProjectionSelect)(_app.current_proj_name);\n }\n }\n } else if (parsedJSON.proj) {\n // We are also storing informations about the projection read from the .proj file\n // if any:\n data_manager.current_layers[lyr_name_to_add].default_projection = ['proj4', parsedJSON.proj];\n }\n return lyr_name_to_add;\n}\n\n//# sourceURL=webpack:///./js/layers.js?");
-
-/***/ }),
-
-/***/ "./js/layers_style_popup.js":
-/*!**********************************!*\
- !*** ./js/layers_style_popup.js ***!
- \**********************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-eval("/* WEBPACK VAR INJECTION */(function(Promise, global) {\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.createDropShadow = undefined;\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nexports.handle_click_layer = handle_click_layer;\nexports.make_style_box_indiv_label = make_style_box_indiv_label;\n\nvar _colors_helpers = __webpack_require__(/*! ./colors_helpers */ \"./js/colors_helpers.js\");\n\nvar _dialogs = __webpack_require__(/*! ./dialogs */ \"./js/dialogs.js\");\n\nvar _discretization_panel = __webpack_require__(/*! ./classification/discretization_panel */ \"./js/classification/discretization_panel.js\");\n\nvar _categorical_panel = __webpack_require__(/*! ./classification/categorical_panel */ \"./js/classification/categorical_panel.js\");\n\nvar _discrtiz_links_discont = __webpack_require__(/*! ./classification/discrtiz_links_discont */ \"./js/classification/discrtiz_links_discont.js\");\n\nvar _fonts = __webpack_require__(/*! ./fonts */ \"./js/fonts.js\");\n\nvar _function = __webpack_require__(/*! ./function */ \"./js/function.js\");\n\nvar _helpers = __webpack_require__(/*! ./helpers */ \"./js/helpers.js\");\n\nvar _helpers_calc = __webpack_require__(/*! ./helpers_calc */ \"./js/helpers_calc.js\");\n\nvar _interface = __webpack_require__(/*! ./interface */ \"./js/interface.js\");\n\nvar _legend = __webpack_require__(/*! ./legend */ \"./js/legend.js\");\n\nvar _map_ctrl = __webpack_require__(/*! ./map_ctrl */ \"./js/map_ctrl.js\");\n\nvar _tables = __webpack_require__(/*! ./tables */ \"./js/tables.js\");\n\n/**\n* Function to dispatch the click on the \"open style box\" icon\n* to the actual appropriate function according to the type of the layer.\n*\n* @param {String} layer_name - The name of the layer.\n* @return {void} - Nothing is returned but the \"style box\" should open.\n*\n*/\nfunction handle_click_layer(layer_name) {\n if (data_manager.current_layers[layer_name].graticule) {\n createStyleBoxGraticule();\n } else if (data_manager.current_layers[layer_name].type === 'Line') {\n createStyleBox_Line(layer_name);\n } else if (data_manager.current_layers[layer_name].renderer && data_manager.current_layers[layer_name].renderer.indexOf('PropSymbol') > -1) {\n createStyleBox_ProbSymbol(layer_name);\n } else if (data_manager.current_layers[layer_name].renderer && data_manager.current_layers[layer_name].renderer === 'Label') {\n createStyleBoxLabel(layer_name);\n } else if (data_manager.current_layers[layer_name].renderer && data_manager.current_layers[layer_name].renderer === 'TypoSymbols') {\n createStyleBoxTypoSymbols(layer_name);\n } else if (data_manager.current_layers[layer_name].renderer && data_manager.current_layers[layer_name].renderer === 'TwoStocksWaffle') {\n createStyleBoxWaffle(layer_name);\n } else if (data_manager.current_layers[layer_name].renderer === 'Stewart') {\n createStyleBoxStewart(layer_name);\n } else {\n createStyleBox(layer_name);\n }\n}\n\nfunction make_single_color_menu(layer, fill_prev) {\n var symbol = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'path';\n\n var fill_color_section = d3.select('#fill_color_section'),\n g_lyr_name = '#' + _app.layer_to_id.get(layer),\n last_color = fill_prev && fill_prev.single ? fill_prev.single : '#FFF';\n var block = fill_color_section.insert('p');\n block.insert('span').html(_tr('app_page.layer_style_popup.fill_color'));\n block.insert('input').attr('type', 'color').style('float', 'right').property('value', last_color).on('change', function () {\n map.select(g_lyr_name).selectAll(symbol).transition().style('fill', this.value);\n data_manager.current_layers[layer].fill_color = { single: this.value };\n });\n map.select(g_lyr_name).selectAll(symbol).transition().style('fill', last_color);\n data_manager.current_layers[layer].fill_color = { single: last_color };\n}\n\nfunction make_random_color(layer) {\n var symbol = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'path';\n\n var block = d3.select('#fill_color_section');\n block.insert('span').attr('id', 'random_color_btn').styles({ cursor: 'pointer', 'text-align': 'center' }).html(_tr('app_page.layer_style_popup.toggle_colors')).on('click', function () {\n map.select('#' + _app.layer_to_id.get(layer)).selectAll(symbol).transition().style('fill', function () {\n return (0, _colors_helpers.randomColor)();\n }); // Colors.names[Colors.random()]);\n data_manager.current_layers[layer].fill_color = { random: true };\n });\n}\n\nfunction fill_categorical(layer, field_name, symbol, color_cat_map) {\n map.select('#' + _app.layer_to_id.get(layer)).selectAll(symbol).transition().style('fill', function (d) {\n return color_cat_map.get(d.properties[field_name]);\n });\n}\n\nfunction make_categorical_color_menu(fields, layer, fill_prev) {\n var symbol = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'path';\n\n var fill_color_section = d3.select('#fill_color_section').append('p');\n fill_color_section.insert('span').html(_tr('app_page.layer_style_popup.categorical_field'));\n var field_selec = fill_color_section.insert('select');\n fields.forEach(function (field) {\n if (field !== 'id') field_selec.append('option').text(field).attr('value', field);\n });\n if (fill_prev.categorical && fill_prev.categorical instanceof Array) {\n (0, _helpers.setSelected)(field_selec.node(), fill_prev.categorical[0]);\n }\n field_selec.on('change', function () {\n var field_name = this.value,\n data_layer = data_manager.current_layers[layer].is_result ? data_manager.result_data[layer] : data_manager.user_data[layer],\n values = data_layer.map(function (i) {\n return i[field_name];\n }),\n cats = new Set(values),\n txt = [cats.size, ' cat.'].join('');\n d3.select('#nb_cat_txt').html(txt);\n var color_cat_map = new Map();\n Array.from(cats.keys()).forEach(function (val) {\n color_cat_map.set(val, _colors_helpers.Colors.names[_colors_helpers.Colors.random()]);\n });\n data_manager.current_layers[layer].fill_color = { categorical: [field_name, color_cat_map] };\n fill_categorical(layer, field_name, symbol, color_cat_map);\n });\n\n if ((!fill_prev || !fill_prev.categorical) && field_selec.node().options.length > 0) {\n (0, _helpers.setSelected)(field_selec.node(), field_selec.node().options[0].value);\n }\n fill_color_section.append('span').attr('id', 'nb_cat_txt').html('');\n}\n\n/**\n* Function to create the input section allowing to change the name of a layer.\n* (Used by all the createStyleBox_xxx functions)\n*\n* @param {Object} parent - A d3 selection corresponding to the parent box.\n* @param {String} layer_name - The current name of layer edited in the style box.\n* @return {Object} - The d3 selection corresponding to the input element created.\n*/\nfunction make_change_layer_name_section(parent, layer_name) {\n var section = parent.insert('p').attr('class', 'inp_bottom');\n section.append('span').html(_tr('app_page.layer_style_popup.layer_name'));\n var inpt = section.append('input').attrs({ id: 'lyr_change_name', type: 'text' }).styles({ width: '200px', float: 'left' });\n inpt.node().value = layer_name;\n return inpt;\n}\n\nfunction createStyleBoxTypoSymbols(layer_name) {\n function get_prev_settings() {\n var features = selection._groups[0];\n for (var i = 0; i < features.length; i++) {\n prev_settings.push({\n display: features[i].style.display ? features[i].style.display : null,\n size: features[i].getAttribute('width'),\n position: [features[i].getAttribute('x'), features[i].getAttribute('y')]\n });\n }\n prev_settings_defaults.size = data_manager.current_layers[layer_name].default_size;\n }\n\n var restore_prev_settings = function restore_prev_settings() {\n var features = selection._groups[0];\n for (var i = 0; i < features.length; i++) {\n features[i].setAttribute('width', prev_settings[i].size);\n features[i].setAttribute('height', prev_settings[i].size);\n features[i].setAttribute('x', prev_settings[i].position[0]);\n features[i].setAttribute('y', prev_settings[i].position[1]);\n features[i].style.display = prev_settings[i].display;\n }\n data_manager.current_layers[layer_name].default_size = prev_settings_defaults.size;\n };\n\n (0, _dialogs.check_remove_existing_box)('.styleBox');\n\n var selection = map.select('#' + _app.layer_to_id.get(layer_name)).selectAll('image'),\n ref_layer_name = data_manager.current_layers[layer_name].ref_layer_name,\n symbols_map = data_manager.current_layers[layer_name].symbols_map,\n rendered_field = data_manager.current_layers[layer_name].rendered_field;\n\n var prev_settings = [],\n prev_settings_defaults = {};\n // const zs = d3.zoomTransform(svg_map).k;\n\n get_prev_settings();\n\n (0, _dialogs.make_confirm_dialog2)('styleBox', layer_name, { top: true, widthFitContent: true, draggable: true }).then(function (confirmed) {\n if (!confirmed) {\n restore_prev_settings();\n } else if (new_layer_name !== layer_name) {\n change_layer_name(layer_name, (0, _function.check_layer_name)(new_layer_name.trim()));\n }\n });\n\n var container = document.querySelector('.twbs > .styleBox');\n var popup = d3.select(container).select('.modal-content').style('width', '300px').select('.modal-body');\n\n popup.append('p').styles({ 'text-align': 'center', color: 'grey' }).html([_tr('app_page.layer_style_popup.rendered_field', { field: rendered_field }), _tr('app_page.layer_style_popup.reference_layer', { layer: ref_layer_name })].join(''));\n\n var new_layer_name = layer_name;\n var new_name_section = make_change_layer_name_section(popup, layer_name);\n new_name_section.on('change', function () {\n new_layer_name = this.value;\n });\n popup.append('p').style('text-align', 'center').insert('button').attrs({ id: 'reset_symb_loc', class: 'button_st4' }).text(_tr('app_page.layer_style_popup.reset_symbols_location')).on('click', function () {\n selection.transition().attrs(function (d) {\n var centroid = path.centroid(d.geometry),\n size_symbol = symbols_map.get(d.properties.symbol_field)[1] / 2;\n return { x: centroid[0] - size_symbol, y: centroid[1] - size_symbol };\n });\n });\n\n popup.append('p').style('text-align', 'center').insert('button').attrs({ id: 'reset_symb_display', class: 'button_st4' }).text(_tr('app_page.layer_style_popup.redraw_symbols')).on('click', function () {\n selection.style('display', undefined);\n });\n\n var size_section = popup.append('p');\n size_section.append('span').html(_tr('app_page.layer_style_popup.symbols_size'));\n size_section.append('input').attrs({ min: 0, max: 200, step: 'any', type: 'number' }).styles({ width: '60px', margin: 'auto' }).property('value', 32).on('change', function () {\n var value = this.value;\n selection.transition().attrs(function () {\n var current_size = this.height.baseVal.value;\n return {\n width: value + 'px',\n height: value + 'px',\n x: this.x.baseVal.value + current_size / 2 - value / 2,\n y: this.y.baseVal.value + current_size / 2 - value / 2\n };\n });\n });\n}\n// popup.append(\"p\").style(\"text-align\", \"center\")\n// .insert(\"button\")\n// .attr(\"id\",\"modif_symb\")\n// .attr(\"class\", \"button_st4\")\n// .text(_tr(\"app_page.layer_style_popup.modify_symbols\"))\n// .on(\"click\", function(){\n// display_box_symbol_typo(ref_layer_name, rendered_field)().then(function(confirmed){\n// if(confirmed){\n// rendering_params = {\n// nb_cat: confirmed[0],\n// symbols_map: confirmed[1],\n// field: rendered_field\n// };\n// map.select(\"#\" + layer_name)\n// .selectAll(\"image\")\n// .attr(\"x\",\n// d => d.coords[0] - rendering_params.symbols_map.get(d.Symbol_field)[1] / 2)\n// .attr(\"y\",\n// d => d.coords[1] - rendering_params.symbols_map.get(d.Symbol_field)[1] / 2)\n// .attr(\"width\",\n// d => rendering_params.symbols_map.get(d.Symbol_field)[1] + \"px\")\n// .attr(\"height\",\n// d => rendering_params.symbols_map.get(d.Symbol_field)[1] + \"px\")\n// .attr(\"xlink:href\",\n// (d, i) => rendering_params.symbols_map.get(d.Symbol_field)[0]);\n// }\n// });\n// });\n\nfunction createStyleBoxLabel(layer_name) {\n function get_prev_settings() {\n var features = selection._groups[0];\n prev_settings = [];\n for (var i = 0; i < features.length; i++) {\n prev_settings.push({\n color: features[i].style.fill,\n size: features[i].style.fontSize,\n display: features[i].style.display ? features[i].style.display : null,\n position: [features[i].getAttribute('x'), features[i].getAttribute('y')],\n font: features[i].style.fontFamily\n });\n }\n prev_settings_defaults = {\n color: data_manager.current_layers[layer_name].fill_color,\n size: data_manager.current_layers[layer_name].default_size,\n font: data_manager.current_layers[layer_name].default_font\n };\n }\n\n function restore_prev_settings() {\n var features = selection._groups[0];\n for (var i = 0; i < features.length; i++) {\n features[i].style.fill = prev_settings[i].color;\n features[i].style.fontSize = prev_settings[i].size;\n features[i].style.display = prev_settings[i].display;\n features[i].setAttribute('x', prev_settings[i].position[0]);\n features[i].setAttribute('y', prev_settings[i].position[1]);\n features[i].style.fontFamily = prev_settings[i].font;\n }\n\n data_manager.current_layers[layer_name].fill_color = prev_settings_defaults.color;\n data_manager.current_layers[layer_name].default_size = prev_settings_defaults.size;\n data_manager.current_layers[layer_name].default_font = prev_settings_defaults.font;\n }\n\n (0, _dialogs.check_remove_existing_box)('.styleBox');\n\n var selection = map.select('#' + _app.layer_to_id.get(layer_name)).selectAll('text'),\n ref_layer_name = data_manager.current_layers[layer_name].ref_layer_name;\n // const rendering_params = {};\n var prev_settings_defaults = {};\n var prev_settings = [];\n\n get_prev_settings();\n\n (0, _dialogs.make_confirm_dialog2)('styleBox', layer_name, { top: true, widthFitContent: true, draggable: true }).then(function (confirmed) {\n if (!confirmed) {\n restore_prev_settings();\n } else {\n // Change the layer name if requested :\n if (new_layer_name !== layer_name) {\n change_layer_name(layer_name, (0, _function.check_layer_name)(new_layer_name.trim()));\n }\n }\n });\n\n var container = document.querySelector('.twbs > .styleBox');\n var popup = d3.select(container).select('.modal-content').style('width', '300px').select('.modal-body');\n\n popup.append('p').styles({ 'text-align': 'center', color: 'grey' }).html([_tr('app_page.layer_style_popup.rendered_field', { field: data_manager.current_layers[layer_name].rendered_field }), _tr('app_page.layer_style_popup.reference_layer', { layer: ref_layer_name })].join(''));\n\n var new_layer_name = layer_name;\n var new_name_section = make_change_layer_name_section(popup, layer_name);\n new_name_section.on('change', function () {\n new_layer_name = this.value;\n });\n popup.append('p').style('text-align', 'center').insert('button').attrs({ id: 'reset_labels_loc', class: 'button_st4' }).text(_tr('app_page.layer_style_popup.reset_labels_location')).on('click', function () {\n selection.transition().attrs(function (d) {\n var coords = path.centroid(d.geometry);\n return { x: coords[0], y: coords[1] };\n });\n });\n\n popup.append('p').style('text-align', 'center').insert('button').attrs({ id: 'reset_labels_display', class: 'button_st4' }).text(_tr('app_page.layer_style_popup.redraw_labels')).on('click', function () {\n selection.style('display', undefined);\n });\n\n popup.insert('p').styles({ 'text-align': 'center', 'font-size': '9px' }).html(_tr('app_page.layer_style_popup.overrride_warning'));\n var label_sizes = popup.append('p').attr('class', 'line_elem');\n label_sizes.append('span').html(_tr('app_page.layer_style_popup.labels_default_size'));\n label_sizes.insert('span').style('float', 'right').html(' px');\n label_sizes.insert('input').attr('type', 'number').styles({ float: 'right', width: '70px' }).property('value', +data_manager.current_layers[layer_name].default_size.replace('px', '')).on('change', function () {\n var size = this.value + 'px';\n data_manager.current_layers[layer_name].default_size = size;\n selection.style('font-size', size);\n });\n\n var default_color = popup.insert('p').attr('class', 'line_elem');\n default_color.append('span').html(_tr('app_page.layer_style_popup.labels_default_color'));\n default_color.insert('input').attr('type', 'color').style('float', 'right').property('value', data_manager.current_layers[layer_name].fill_color).on('change', function () {\n data_manager.current_layers[layer_name].fill_color = this.value;\n selection.transition().style('fill', this.value);\n });\n\n var font_section = popup.insert('p').attr('class', 'line_elem');\n font_section.append('span').html(_tr('app_page.layer_style_popup.labels_default_font'));\n var choice_font = font_section.insert('select').style('float', 'right').on('change', function () {\n data_manager.current_layers[layer_name].default_font = this.value;\n selection.transition().style('font-family', this.value);\n });\n\n _fonts.available_fonts.forEach(function (name) {\n choice_font.append('option').attr('value', name[1]).text(name[0]);\n });\n choice_font.node().value = data_manager.current_layers[layer_name].default_font;\n}\n\nfunction createStyleBoxGraticule(layer_name) {\n (0, _dialogs.check_remove_existing_box)('.styleBox');\n var current_params = (0, _helpers.cloneObj)(data_manager.current_layers.Graticule);\n var selection = map.select('#L_Graticule > path');\n var selection_strokeW = map.select('#L_Graticule');\n\n (0, _dialogs.make_confirm_dialog2)('styleBox', layer_name, { top: true, widthFitContent: true, draggable: true }).then(function (confirmed) {\n if (confirmed) {\n return null;\n } else {\n return null;\n }\n });\n\n var container = document.querySelector('.twbs > .styleBox');\n var popup = d3.select(container).select('.modal-content').style('width', '300px').select('.modal-body');\n // let new_layer_name = layer_name;\n // const new_name_section = make_change_layer_name_section(popup, layer_name);\n // new_name_section.on('change', function() {\n // new_layer_name = this.value;\n // });\n\n var color_choice = popup.append('p').attr('class', 'line_elem');\n color_choice.append('span').html(_tr('app_page.layer_style_popup.color'));\n color_choice.append('input').attr('type', 'color').style('float', 'right').property('value', current_params.fill_color.single).on('change', function () {\n selection.style('stroke', this.value);\n data_manager.current_layers.Graticule.fill_color.single = this.value;\n });\n\n var opacity_choice = popup.append('p').attr('class', 'line_elem');\n opacity_choice.append('span').html(_tr('app_page.layer_style_popup.opacity'));\n opacity_choice.append('input').attrs({ type: 'range', min: 0, max: 1, step: 0.1 }).styles({ width: '58px', 'vertical-align': 'middle', display: 'inline', float: 'right' }).property('value', current_params.opacity).on('change', function () {\n selection.style('stroke-opacity', this.value);\n data_manager.current_layers.Graticule.opacity = +this.value;\n popup.select('#graticule_opacity_txt').html(+this.value * 100 + '%');\n });\n opacity_choice.append('span').attr('id', 'graticule_opacity_txt').style('float', 'right').html(current_params.opacity * 100 + '%');\n\n var stroke_width_choice = popup.append('p').attr('class', 'line_elem');\n stroke_width_choice.append('span').html(_tr('app_page.layer_style_popup.width'));\n stroke_width_choice.append('input').attr('type', 'number').styles({ width: '60px', float: 'right' }).property('value', current_params['stroke-width-const']).on('change', function () {\n selection_strokeW.style('stroke-width', this.value);\n data_manager.current_layers.Graticule['stroke-width-const'] = +this.value;\n });\n\n var steps_choice = popup.append('p').attr('class', 'line_elem');\n steps_choice.append('span').html(_tr('app_page.layer_style_popup.graticule_steps'));\n steps_choice.append('input').attrs({ id: 'graticule_range_steps', type: 'range', min: 0, max: 100, step: 1 }).styles({ 'vertical-align': 'middle', width: '58px', display: 'inline', float: 'right' }).property('value', current_params.step).on('change', function () {\n var next_layer = selection_strokeW.node().nextSibling;\n var step_val = +this.value;\n var dasharray_val = +document.getElementById('graticule_dasharray_txt').value;\n data_manager.current_layers.Graticule.step = step_val;\n map.select('#L_Graticule').remove();\n map.append('g').attrs({ id: 'L_Graticule', class: 'layer' }).append('path').datum(d3.geoGraticule().step([step_val, step_val])).attrs({ class: 'graticule', d: path, 'clip-path': 'url(#clip)' }).styles({ fill: 'none', stroke: data_manager.current_layers.Graticule.fill_color.single, 'stroke-dasharray': dasharray_val });\n (0, _map_ctrl.zoom_without_redraw)();\n selection = map.select('#L_Graticule').selectAll('path');\n selection_strokeW = map.select('#L_Graticule');\n svg_map.insertBefore(selection_strokeW.node(), next_layer);\n popup.select('#graticule_step_txt').property('value', step_val);\n });\n steps_choice.append('input').attrs({ type: 'number', min: 0, max: 100, step: 'any', class: 'without_spinner', id: 'graticule_step_txt' }).styles({ width: '30px', 'margin-left': '10px', float: 'right' }).property('value', current_params.step).on('change', function () {\n var grat_range = document.getElementById('graticule_range_steps');\n grat_range.value = +this.value;\n grat_range.dispatchEvent(new MouseEvent('change'));\n });\n\n var dasharray_choice = popup.append('p').attr('class', 'line_elem');\n dasharray_choice.append('span').html(_tr('app_page.layer_style_popup.graticule_dasharray'));\n dasharray_choice.append('input').attrs({ type: 'range', min: 0, max: 50, step: 0.1, id: 'graticule_range_dasharray' }).styles({ 'vertical-align': 'middle', width: '58px', display: 'inline', float: 'right' }).property('value', current_params.dasharray).on('change', function () {\n selection.style('stroke-dasharray', this.value);\n data_manager.current_layers.Graticule.dasharray = +this.value;\n popup.select('#graticule_dasharray_txt').property('value', this.value);\n });\n dasharray_choice.append('input').attrs({ type: 'number', min: 0, max: 100, step: 'any', class: 'without_spinner', id: 'graticule_dasharray_txt' }).styles({ width: '30px', 'margin-left': '10px', float: 'right' }).property('value', current_params.dasharray).on('change', function () {\n var grat_range = document.getElementById('graticule_range_dasharray');\n grat_range.value = +this.value;\n grat_range.dispatchEvent(new MouseEvent('change'));\n });\n\n var clip_extent_section = popup.append('p').attr('class', 'line_elem');\n clip_extent_section.append('input').attrs({ type: 'checkbox', id: 'clip_graticule' }).property('checked', current_params.extent ? true : null).on('change', function () {\n var next_layer = selection_strokeW.node().nextSibling,\n step_val = +document.getElementById('graticule_step_txt').value,\n dasharray_val = +document.getElementById('graticule_dasharray_txt').value;\n var graticule = d3.geoGraticule().step([step_val, step_val]);\n map.select('#L_Graticule').remove();\n if (this.checked) {\n var bbox_layer = _target_layer_file.bbox;\n var extent_grat = [[Math.round((bbox_layer[0] - 12) / 10) * 10, Math.round((bbox_layer[1] - 12) / 10) * 10], [Math.round((bbox_layer[2] + 12) / 10) * 10, Math.round((bbox_layer[3] + 12) / 10) * 10]];\n\n if (extent_grat[0] < -180) extent_grat[0] = -180;\n if (extent_grat[1] < -90) extent_grat[1] = -90;\n if (extent_grat[2] > 180) extent_grat[2] = 180;\n if (extent_grat[3] > 90) extent_grat[3] = 90;\n graticule = graticule.extent(extent_grat);\n data_manager.current_layers.Graticule.extent = extent_grat;\n } else {\n data_manager.current_layers.Graticule.extent = undefined;\n }\n map.append('g').attrs({ id: 'L_Graticule', class: 'layer' }).append('path').datum(graticule).attrs({ class: 'graticule', d: path, 'clip-path': 'url(#clip)' }).styles({ fill: 'none', stroke: data_manager.current_layers.Graticule.fill_color.single, 'stroke-dasharray': dasharray_val });\n (0, _map_ctrl.zoom_without_redraw)();\n selection = map.select('#L_Graticule').selectAll('path');\n selection_strokeW = map.select('#L_Graticule');\n svg_map.insertBefore(selection_strokeW.node(), next_layer);\n });\n clip_extent_section.append('label').attrs({ for: 'clip_graticule' }).html(_tr('app_page.layer_style_popup.graticule_clip'));\n\n make_generate_labels_graticule_section(popup);\n}\n\n/**\n* Function triggered to redraw the legend after changing some properties on a layer.\n*\n* @param {String} type_legend - The type of the legend to redraw.\n* @param {String} layer_name - The name of the layer concerned.\n* @param {String} field - The name of the rendered field.\n* @return {void}\n*\n*/\nfunction redraw_legend(type_legend, layer_name, field) {\n var _ref = type_legend === 'choro' ? [['#legend_root.lgdf_', _app.layer_to_id.get(layer_name)].join(''), _legend.createLegend_choro] : type_legend === 'choro_horiz' ? [['#legend_root_horiz.lgdf_', _app.layer_to_id.get(layer_name)].join(''), _legend.createLegend_choro_horizontal] : type_legend === 'line_class' ? [['#legend_root_lines_class.lgdf_', _app.layer_to_id.get(layer_name)].join(''), _legend.createLegend_discont_links] : type_legend === 'line_symbol' ? [['#legend_root_lines_symbol.lgdf_', _app.layer_to_id.get(layer_name)].join(''), _legend.createLegend_line_symbol] : type_legend === 'waffle' ? [['#legend_root_waffle.lgdf_', _app.layer_to_id.get(layer_name)].join(''), _legend.createLegend_waffle] : undefined,\n _ref2 = _slicedToArray(_ref, 2),\n selector = _ref2[0],\n legend_func = _ref2[1];\n\n var lgd = document.querySelector(selector);\n if (lgd) {\n var transform_param = lgd.getAttribute('transform'),\n lgd_title = lgd.querySelector('#legendtitle').innerHTML,\n lgd_subtitle = lgd.querySelector('#legendsubtitle').innerHTML,\n rounding_precision = lgd.getAttribute('rounding_precision'),\n note = lgd.querySelector('#legend_bottom_note').innerHTML,\n boxgap = lgd.getAttribute('boxgap');\n var rect_fill_value = lgd.getAttribute('visible_rect') === 'true' ? {\n color: lgd.querySelector('#under_rect').style.fill,\n opacity: lgd.querySelector('#under_rect').style.fillOpacity\n } : undefined;\n\n if (type_legend.indexOf('choro') > -1) {\n var no_data_txt = lgd.querySelector('#no_data_txt');\n no_data_txt = no_data_txt != null ? no_data_txt.textContent : null;\n\n lgd.remove();\n legend_func(layer_name, field, lgd_title, lgd_subtitle, boxgap, rect_fill_value, rounding_precision, no_data_txt, note);\n } else if (type_legend === 'waffle') {\n lgd.remove();\n legend_func(layer_name, field, lgd_title, lgd_subtitle, rect_fill_value, note);\n } else {\n lgd.remove();\n legend_func(layer_name, data_manager.current_layers[layer_name].rendered_field, lgd_title, lgd_subtitle, rect_fill_value, rounding_precision, note);\n }\n lgd = document.querySelector(selector);\n if (transform_param) {\n lgd.setAttribute('transform', transform_param);\n }\n }\n}\n\nfunction createStyleBox_Line(layer_name) {\n (0, _dialogs.check_remove_existing_box)('.styleBox');\n var renderer = data_manager.current_layers[layer_name].renderer,\n g_lyr_name = '#' + _app.layer_to_id.get(layer_name),\n selection = map.select(g_lyr_name).selectAll('path'),\n opacity = selection.style('fill-opacity');\n\n var fill_prev = (0, _helpers.cloneObj)(data_manager.current_layers[layer_name].fill_color);\n var prev_random_colors = void 0;\n var prev_col_breaks = void 0;\n var rendering_params = void 0;\n\n if (data_manager.current_layers[layer_name].colors_breaks && data_manager.current_layers[layer_name].colors_breaks instanceof Array) {\n prev_col_breaks = data_manager.current_layers[layer_name].colors_breaks.concat([]);\n } else if (fill_prev.random) {\n prev_random_colors = [];\n selection.each(function () {\n prev_random_colors.push(this.style.stroke);\n });\n }\n\n var border_opacity = selection.style('stroke-opacity'),\n stroke_width = +data_manager.current_layers[layer_name]['stroke-width-const'];\n var stroke_prev = selection.style('stroke');\n var prev_min_display = void 0,\n prev_size = void 0,\n prev_breaks = void 0;\n\n if (stroke_prev.startsWith('rgb')) {\n stroke_prev = (0, _colors_helpers.rgb2hex)(stroke_prev);\n }\n\n var table = [];\n Array.prototype.forEach.call(svg_map.querySelector(g_lyr_name).querySelectorAll('path'), function (d) {\n table.push(d.__data__.properties);\n });\n\n var redraw_prop_val = function redraw_prop_val(prop_values) {\n var selec = selection._groups[0];\n for (var i = 0, len = prop_values.length; i < len; i++) {\n selec[i].style.strokeWidth = prop_values[i];\n }\n };\n\n (0, _dialogs.make_confirm_dialog2)('styleBox', layer_name, { top: true, widthFitContent: true, draggable: true }).then(function (confirmed) {\n if (confirmed) {\n if (renderer !== undefined && rendering_params !== undefined && renderer !== 'Categorical' && renderer !== 'PropSymbolsTypo' && renderer !== 'LinksProportional') {\n data_manager.current_layers[layer_name].fill_color = { class: rendering_params.colorsByFeature };\n var colors_breaks = [];\n for (var i = rendering_params.breaks.length - 1; i > 0; --i) {\n colors_breaks.push([[rendering_params.breaks[i - 1], ' - ', rendering_params.breaks[i]].join(''), rendering_params.breaks[i - 1]]);\n }\n data_manager.current_layers[layer_name].colors_breaks = colors_breaks;\n data_manager.current_layers[layer_name].rendered_field = rendering_params.field;\n data_manager.current_layers[layer_name].options_disc = {\n schema: rendering_params.schema,\n colors: rendering_params.colors,\n no_data: rendering_params.no_data,\n type: rendering_params.type,\n breaks: rendering_params.breaks,\n extra_options: rendering_params.extra_options\n };\n if (document.querySelector('.legend.legend_feature.lgdf_' + _app.layer_to_id.get(layer_name)).id === 'legend_root') {\n redraw_legend('choro', layer_name, rendering_params.field);\n } else {\n redraw_legend('choro_horiz', layer_name, rendering_params.field);\n }\n } else if ((renderer === 'Categorical' || renderer === 'PropSymbolsTypo') && rendering_params !== undefined) {\n data_manager.current_layers[layer_name].color_map = rendering_params.color_map;\n data_manager.current_layers[layer_name].fill_color = {\n class: [].concat(rendering_params.colorsByFeature)\n };\n redraw_legend('choro', layer_name, rendering_params.field);\n } else if (renderer === 'DiscLayer') {\n selection.each(function (d) {\n d.properties.prop_val = this.style.strokeWidth; // eslint-disable-line no-param-reassign\n });\n // Also change the legend if there is one displayed :\n redraw_legend('line_class', layer_name);\n } else if (renderer === 'LinksGraduated') {\n selection.each(function (d, i) {\n data_manager.current_layers[layer_name].linksbyId[i][2] = this.style.strokeWidth;\n });\n // Also change the legend if there is one displayed :\n redraw_legend('line_class', layer_name);\n }\n\n if (renderer && (renderer.startsWith('PropSymbols') || renderer === 'LinksProportional')) {\n selection.each(function (d) {\n d.properties.color = this.style.stroke; // eslint-disable-line no-param-reassign\n });\n redraw_legend('line_symbol', layer_name);\n }\n\n // Change the layer name if requested :\n if (new_layer_name !== layer_name) {\n change_layer_name(layer_name, (0, _function.check_layer_name)(new_layer_name.trim()));\n }\n (0, _map_ctrl.zoom_without_redraw)();\n } else {\n // Reset to original values the rendering parameters if \"no\" is clicked\n selection.style('fill-opacity', opacity).style('stroke-opacity', border_opacity);\n var zoom_scale = +d3.zoomTransform(map.node()).k;\n map.select(g_lyr_name).style('stroke-width', stroke_width / zoom_scale + 'px');\n data_manager.current_layers[layer_name]['stroke-width-const'] = stroke_width;\n var fill_meth = Object.getOwnPropertyNames(fill_prev)[0];\n\n if (data_manager.current_layers[layer_name].renderer === 'LinksGraduated' && prev_min_display !== undefined) {\n data_manager.current_layers[layer_name].min_display = prev_min_display;\n data_manager.current_layers[layer_name].breaks = prev_breaks;\n selection.style('fill-opacity', 0).style('stroke', fill_prev.single).style('display', function (d) {\n return +d.properties[data_manager.current_layers[layer_name].rendered_field] > prev_min_display ? null : 'none';\n }).style('stroke-opacity', border_opacity).style('stroke-width', function (d, i) {\n return data_manager.current_layers[layer_name].linksbyId[i][2];\n });\n } else if (data_manager.current_layers[layer_name].renderer === 'DiscLayer' && prev_min_display !== undefined) {\n data_manager.current_layers[layer_name].min_display = prev_min_display;\n data_manager.current_layers[layer_name].size = prev_size;\n data_manager.current_layers[layer_name].breaks = prev_breaks;\n var lim = prev_min_display !== 0 ? prev_min_display * data_manager.current_layers[layer_name].n_features : -1;\n selection.style('fill-opacity', 0).style('stroke', fill_prev.single).style('stroke-opacity', border_opacity).style('display', function (d, i) {\n return +i <= lim ? null : 'none';\n }).style('stroke-width', function (d) {\n return d.properties.prop_val;\n });\n } else {\n if (fill_meth === 'single') {\n selection.style('stroke', fill_prev.single).style('stroke-opacity', border_opacity);\n } else if (fill_meth === 'random') {\n selection.style('stroke-opacity', border_opacity).style('stroke', function (d, i) {\n return prev_random_colors[i] || _colors_helpers.Colors.names[_colors_helpers.Colors.random()];\n });\n } else if (fill_meth === 'class' && renderer === 'LinksGraduated') {\n selection.style('stroke-opacity', function (d, i) {\n return data_manager.current_layers[layer_name].linksbyId[i][0];\n }).style('stroke', stroke_prev);\n }\n }\n if (data_manager.current_layers[layer_name].colors_breaks) {\n data_manager.current_layers[layer_name].colors_breaks = prev_col_breaks;\n }\n data_manager.current_layers[layer_name].fill_color = fill_prev;\n (0, _map_ctrl.zoom_without_redraw)();\n }\n });\n\n var container = document.querySelector('.twbs > .styleBox');\n var popup = d3.select(container).select('.modal-content').style('width', '300px').select('.modal-body');\n\n var new_layer_name = layer_name;\n var new_name_section = make_change_layer_name_section(popup, layer_name);\n new_name_section.on('change', function () {\n new_layer_name = this.value;\n });\n\n if (renderer === 'Categorical' || renderer === 'PropSymbolsTypo') {\n var color_field = renderer === 'Categorical' ? data_manager.current_layers[layer_name].rendered_field : data_manager.current_layers[layer_name].rendered_field2;\n\n popup.insert('p').styles({ margin: 'auto', 'text-align': 'center' }).append('button').attr('class', 'button_disc').styles({ 'font-size': '0.8em', 'text-align': 'center' }).html(_tr('app_page.layer_style_popup.choose_colors')).on('click', function () {\n var _prepare_categories_a = (0, _function.prepare_categories_array)(layer_name, color_field, data_manager.current_layers[layer_name].color_map),\n _prepare_categories_a2 = _slicedToArray(_prepare_categories_a, 2),\n cats = _prepare_categories_a2[0],\n _ = _prepare_categories_a2[1];\n\n container.modal.hide();\n (0, _categorical_panel.display_categorical_box)(data_manager.result_data[layer_name], layer_name, color_field, cats).then(function (confirmed) {\n container.modal.show();\n if (confirmed) {\n rendering_params = {\n nb_class: confirmed[0],\n color_map: confirmed[1],\n colorsByFeature: confirmed[2],\n renderer: 'Categorical',\n rendered_field: color_field,\n field: color_field\n };\n selection.transition().style('stroke', function (d, i) {\n return rendering_params.colorsByFeature[i];\n });\n }\n });\n });\n } else if (renderer === 'Choropleth' || renderer === 'PropSymbolsChoro') {\n popup.append('p').styles({ margin: 'auto', 'text-align': 'center' }).append('button').attr('class', 'button_disc').html(_tr('app_page.layer_style_popup.choose_discretization')).on('click', function () {\n container.modal.hide();\n var _opts = rendering_params ? { schema: rendering_params.schema, colors: rendering_params.colors, no_data: rendering_params.no_data, type: rendering_params.type, breaks: rendering_params.breaks, extra_options: rendering_params.extra_options } : data_manager.current_layers[layer_name].options_disc;\n (0, _discretization_panel.display_discretization)(layer_name, data_manager.current_layers[layer_name].rendered_field, _opts.breaks.length - 1, _opts).then(function (confirmed) {\n container.modal.show();\n if (confirmed) {\n rendering_params = {\n nb_class: confirmed[0],\n type: confirmed[1],\n breaks: confirmed[2],\n colors: confirmed[3],\n colorsByFeature: confirmed[4],\n schema: confirmed[5],\n no_data: confirmed[6],\n // renderer:\"Choropleth\",\n field: data_manager.current_layers[layer_name].rendered_field,\n extra_options: confirmed[7]\n };\n selection.transition().style('stroke', function (d, i) {\n return rendering_params.colorsByFeature[i];\n });\n }\n });\n });\n } else {\n var c_section = popup.append('p').attr('class', 'line_elem');\n c_section.insert('span').html(_tr('app_page.layer_style_popup.color'));\n c_section.insert('input').attr('type', 'color').style('float', 'right').property('value', stroke_prev).on('change', function () {\n selection.style('stroke', this.value);\n data_manager.current_layers[layer_name].fill_color = { single: this.value };\n // data_manager.current_layers[layer_name].fill_color.single = this.value;\n });\n }\n\n if (renderer === 'LinksGraduated') {\n prev_min_display = data_manager.current_layers[layer_name].min_display || 0;\n prev_breaks = data_manager.current_layers[layer_name].breaks.slice();\n var fij_field = data_manager.current_layers[layer_name].rendered_field;\n var max_val = 0;\n selection.each(function (d) {\n if (+d.properties[fij_field] > max_val) max_val = +d.properties[fij_field];\n });\n var threshold_section = popup.append('p').attr('class', 'line_elem');\n threshold_section.append('span').html(_tr('app_page.layer_style_popup.display_flow_larger'));\n // The legend will be updated in order to start on the minimum value displayed instead of\n // using the minimum value of the serie (skipping unused class if necessary)\n threshold_section.insert('input').attrs({ type: 'range', min: 0, max: max_val, step: 0.5 }).styles({ width: '58px', 'vertical-align': 'middle', display: 'inline', float: 'right', 'margin-right': '0px' }).property('value', prev_min_display).on('change', function () {\n var val = +this.value;\n popup.select('#larger_than').html([' ', val, ' '].join(''));\n selection.style('display', function (d) {\n return +d.properties[fij_field] > val ? null : 'none';\n });\n data_manager.current_layers[layer_name].min_display = val;\n });\n threshold_section.insert('label').attr('id', 'larger_than').style('float', 'right').html(' ' + prev_min_display + ' ');\n popup.append('p').style('text-align', 'center').append('button').attr('class', 'button_disc').html(_tr('app_page.layer_style_popup.modify_size_class')).on('click', function () {\n container.modal.hide();\n (0, _discrtiz_links_discont.display_discretization_links_discont)(layer_name, data_manager.current_layers[layer_name].rendered_field, data_manager.current_layers[layer_name].breaks.length, 'user_defined').then(function (result) {\n container.modal.show();\n if (result) {\n var serie = result[0],\n sizes = result[1].map(function (ft) {\n return ft[1];\n }),\n links_byId = data_manager.current_layers[layer_name].linksbyId;\n serie.setClassManually(result[2]);\n data_manager.current_layers[layer_name].breaks = result[1];\n selection.style('fill-opacity', 0).style('stroke-width', function (d, i) {\n return sizes[serie.getClass(+links_byId[i][1])];\n });\n }\n });\n });\n } else if (renderer === 'DiscLayer') {\n prev_min_display = +data_manager.current_layers[layer_name].min_display || 0;\n prev_size = data_manager.current_layers[layer_name].size.slice();\n prev_breaks = data_manager.current_layers[layer_name].breaks.slice();\n // const max_val = Math.max.apply(null, data_manager.result_data[layer_name].map(i => i.disc_value));\n var disc_part = popup.append('p').attr('class', 'line_elem');\n disc_part.append('span').html(_tr('app_page.layer_style_popup.discont_threshold'));\n disc_part.insert('input').attrs({ type: 'range', min: 0, max: 1, step: 0.1 }).styles({ width: '58px', 'vertical-align': 'middle', display: 'inline', float: 'right', 'margin-right': '0px' }).property('value', prev_min_display).on('change', function () {\n var val = +this.value;\n var lim = val !== 0 ? val * data_manager.current_layers[layer_name].n_features : -1;\n popup.select('#larger_than').html([' ', val * 100, ' % '].join(''));\n selection.style('display', function (d, i) {\n return i <= lim ? null : 'none';\n });\n data_manager.current_layers[layer_name].min_display = val;\n });\n disc_part.insert('label').attr('id', 'larger_than').style('float', 'right').html([' ', prev_min_display * 100, ' % '].join(''));\n popup.append('p').style('text-align', 'center').append('button').attr('class', 'button_disc').html(_tr('app_page.layer_style_popup.choose_discretization')).on('click', function () {\n container.modal.hide();\n (0, _discrtiz_links_discont.display_discretization_links_discont)(layer_name, 'disc_value', data_manager.current_layers[layer_name].breaks.length, 'user_defined').then(function (result) {\n container.modal.show();\n if (result) {\n var serie = result[0],\n sizes = result[1].map(function (ft) {\n return ft[1];\n });\n\n serie.setClassManually(result[2]);\n data_manager.current_layers[layer_name].breaks = result[1];\n data_manager.current_layers[layer_name].size = [sizes[0], sizes[sizes.length - 1]];\n selection.style('fill-opacity', 0).style('stroke-width', function (d) {\n return sizes[serie.getClass(+d.properties.disc_value)];\n });\n }\n });\n });\n }\n\n var opacity_section = popup.append('p').attr('class', 'line_elem');\n opacity_section.insert('span').html(_tr('app_page.layer_style_popup.opacity'));\n opacity_section.insert('input').attrs({ type: 'range', min: 0, max: 1, step: 0.1 }).styles({ width: '58px', 'vertical-align': 'middle', display: 'inline', float: 'right' }).property('value', border_opacity).on('change', function () {\n opacity_section.select('#opacity_val_txt').html(' ' + this.value);\n selection.style('stroke-opacity', this.value);\n });\n\n opacity_section.append('span').attr('id', 'opacity_val_txt').styles({ display: 'inline', float: 'right' }).html(' ' + border_opacity);\n\n if (!renderer || !renderer.startsWith('PropSymbols') && !renderer.startsWith('Links') && renderer !== 'DiscLayer') {\n var width_section = popup.append('p');\n width_section.append('span').html(_tr('app_page.layer_style_popup.width'));\n width_section.insert('input').attrs({ type: 'number', min: 0, step: 0.1 }).styles({ width: '60px', float: 'right' }).property('value', stroke_width).on('change', function () {\n var val = +this.value;\n var zoom_scale = +d3.zoomTransform(map.node()).k;\n map.select(g_lyr_name).style('stroke-width', val / zoom_scale + 'px');\n data_manager.current_layers[layer_name]['stroke-width-const'] = val;\n });\n } else if (renderer.startsWith('PropSymbols') || renderer === 'LinksProportional') {\n var field_used = data_manager.current_layers[layer_name].rendered_field;\n var d_values = data_manager.result_data[layer_name].map(function (f) {\n return +f[field_used];\n });\n var prop_val_content = popup.append('p');\n prop_val_content.append('span').html(_tr('app_page.layer_style_popup.field_symbol_size', { field: data_manager.current_layers[layer_name].rendered_field }));\n prop_val_content.append('span').html(_tr('app_page.layer_style_popup.symbol_fixed_size'));\n prop_val_content.insert('input').styles({ width: '60px', float: 'right' }).attrs({ type: 'number', id: 'max_size_range', min: 0.1, step: 'any' }).property('value', data_manager.current_layers[layer_name].size[1]).on('change', function () {\n var f_size = +this.value;\n var prop_values = (0, _helpers_calc.prop_sizer3_e)(d_values, data_manager.current_layers[layer_name].size[0], f_size, 'line');\n data_manager.current_layers[layer_name].size[1] = f_size;\n redraw_prop_val(prop_values);\n });\n prop_val_content.append('span').style('float', 'right').html('(px)');\n\n var prop_val_content2 = popup.append('p').attr('class', 'line_elem');\n prop_val_content2.append('span').html(_tr('app_page.layer_style_popup.on_value'));\n prop_val_content2.insert('input').styles({ width: '100px', float: 'right' }).attrs({ type: 'number', min: 0.1, step: 0.1 }).property('value', +data_manager.current_layers[layer_name].size[0]).on('change', function () {\n var f_val = +this.value;\n var prop_values = (0, _helpers_calc.prop_sizer3_e)(d_values, f_val, data_manager.current_layers[layer_name].size[1], 'line');\n redraw_prop_val(prop_values);\n data_manager.current_layers[layer_name].size[0] = f_val;\n });\n }\n\n make_generate_labels_section(popup, layer_name);\n}\n\nfunction createStyleBox(layer_name) {\n (0, _dialogs.check_remove_existing_box)('.styleBox');\n var type = data_manager.current_layers[layer_name].type,\n isSphere = data_manager.current_layers[layer_name].sphere === true,\n renderer = data_manager.current_layers[layer_name].renderer,\n g_lyr_name = '#' + _app.layer_to_id.get(layer_name),\n selection = map.select(g_lyr_name).selectAll('path'),\n opacity = selection.style('fill-opacity');\n var fill_prev = (0, _helpers.cloneObj)(data_manager.current_layers[layer_name].fill_color);\n var prev_col_breaks = void 0;\n var rendering_params = void 0;\n var prev_random_colors = void 0;\n if (data_manager.current_layers[layer_name].colors_breaks && data_manager.current_layers[layer_name].colors_breaks instanceof Array) {\n prev_col_breaks = data_manager.current_layers[layer_name].colors_breaks.concat([]);\n } else if (fill_prev.random) {\n prev_random_colors = [];\n selection.each(function () {\n prev_random_colors.push(this.style.fill);\n });\n }\n var border_opacity = selection.style('stroke-opacity'),\n stroke_width = +data_manager.current_layers[layer_name]['stroke-width-const'];\n var table = [];\n var stroke_prev = selection.style('stroke');\n var current_pt_size = void 0;\n\n if (stroke_prev.startsWith('rgb')) {\n stroke_prev = (0, _colors_helpers.rgb2hex)(stroke_prev);\n }\n\n Array.prototype.forEach.call(svg_map.querySelector(g_lyr_name).querySelectorAll('path'), function (d) {\n table.push(d.__data__.properties);\n });\n var fields_layer = !isSphere ? data_manager.current_layers[layer_name].fields_type || (0, _helpers.type_col2)(table) : [];\n\n (0, _dialogs.make_confirm_dialog2)('styleBox', layer_name, { top: true, widthFitContent: true, draggable: true }).then(function (confirmed) {\n if (confirmed) {\n // Update the object holding the properties of the layer if Yes is clicked\n if (type === 'Point' && data_manager.current_layers[layer_name].pointRadius) {\n data_manager.current_layers[layer_name].pointRadius = +current_pt_size;\n }\n if (renderer !== undefined && rendering_params !== undefined && renderer !== 'Categorical') {\n data_manager.current_layers[layer_name].fill_color = { class: rendering_params.colorsByFeature };\n var colors_breaks = [];\n for (var i = rendering_params.breaks.length - 1; i > 0; --i) {\n colors_breaks.push([[rendering_params.breaks[i - 1], ' - ', rendering_params.breaks[i]].join(''), rendering_params.colors[i - 1]]);\n }\n data_manager.current_layers[layer_name].colors_breaks = colors_breaks;\n data_manager.current_layers[layer_name].rendered_field = rendering_params.field;\n data_manager.current_layers[layer_name].options_disc = {\n schema: rendering_params.schema,\n colors: rendering_params.colors,\n no_data: rendering_params.no_data,\n type: rendering_params.type,\n breaks: rendering_params.breaks,\n extra_options: rendering_params.extra_options\n };\n } else if (renderer === 'Categorical' && rendering_params !== undefined) {\n data_manager.current_layers[layer_name].color_map = rendering_params.color_map;\n data_manager.current_layers[layer_name].fill_color = {\n class: [].concat(rendering_params.colorsByFeature)\n };\n }\n\n if (rendering_params !== undefined && rendering_params.field !== undefined) {\n if (document.querySelector('.legend.legend_feature.lgdf_' + _app.layer_to_id.get(layer_name)).id === 'legend_root') {\n redraw_legend('choro', layer_name, data_manager.current_layers[layer_name].rendered_field);\n } else {\n redraw_legend('choro_horiz', layer_name, data_manager.current_layers[layer_name].rendered_field);\n }\n }\n // Change the layer name if requested :\n if (new_layer_name !== layer_name) {\n change_layer_name(layer_name, (0, _function.check_layer_name)(new_layer_name.trim()));\n }\n (0, _map_ctrl.zoom_without_redraw)();\n } else {\n // Reset to original values the rendering parameters if \"no\" is clicked\n selection.style('fill-opacity', opacity).style('stroke-opacity', border_opacity);\n var zoom_scale = +d3.zoomTransform(map.node()).k;\n map.select(g_lyr_name).style('stroke-width', stroke_width / zoom_scale + 'px');\n data_manager.current_layers[layer_name]['stroke-width-const'] = stroke_width;\n var fill_meth = Object.getOwnPropertyNames(fill_prev)[0];\n if (type === 'Point' && data_manager.current_layers[layer_name].pointRadius) {\n selection.attr('d', path.pointRadius(+data_manager.current_layers[layer_name].pointRadius));\n } else {\n if (fill_meth === 'single') {\n selection.style('fill', fill_prev.single).style('stroke', stroke_prev);\n } else if (fill_meth === 'class') {\n selection.style('fill-opacity', opacity).style('fill', function (d, i) {\n return fill_prev.class[i];\n }).style('stroke-opacity', border_opacity).style('stroke', stroke_prev);\n } else if (fill_meth === 'random') {\n selection.style('fill', function (d, i) {\n return prev_random_colors[i] || _colors_helpers.Colors.names[_colors_helpers.Colors.random()];\n }).style('stroke', stroke_prev);\n } else if (fill_meth === 'categorical') {\n fill_categorical(layer_name, fill_prev.categorical[0], 'path', fill_prev.categorical[1]);\n }\n }\n if (data_manager.current_layers[layer_name].colors_breaks) {\n data_manager.current_layers[layer_name].colors_breaks = prev_col_breaks;\n }\n data_manager.current_layers[layer_name].fill_color = fill_prev;\n (0, _map_ctrl.zoom_without_redraw)();\n }\n });\n\n var container = document.querySelector('.twbs > .styleBox');\n var popup = d3.select(container).select('.modal-content').style('width', '300px').select('.modal-body');\n\n var new_layer_name = layer_name;\n if (layer_name !== 'World') {\n var new_name_section = make_change_layer_name_section(popup, layer_name);\n new_name_section.on('change', function () {\n new_layer_name = this.value;\n });\n }\n\n if (type === 'Point') {\n current_pt_size = data_manager.current_layers[layer_name].pointRadius;\n var pt_size = popup.append('p').attr('class', 'line_elem');\n pt_size.append('span').html(_tr('app_page.layer_style_popup.point_radius'));\n pt_size.append('input').attrs({ type: 'range', min: 0, max: 80, id: 'point_radius_size' }).styles({ width: '58px', 'vertical-align': 'middle', display: 'inline', float: 'right', 'margin-right': '0px' }).property('value', current_pt_size).on('change', function () {\n current_pt_size = +this.value;\n document.getElementById('point_radius_size_txt').value = current_pt_size;\n selection.attr('d', path.pointRadius(current_pt_size));\n });\n pt_size.append('input').attrs({ type: 'number', min: 0, max: 80, step: 'any', class: 'without_spinner', id: 'point_radius_size_txt' }).styles({ width: '30px', 'margin-left': '10px', float: 'right' }).property('value', +current_pt_size).on('change', function () {\n var pt_size_range = document.getElementById('point_radius_size');\n var old_value = pt_size_range.value;\n if (this.value === '' || isNaN(+this.value)) {\n this.value = old_value;\n } else {\n this.value = (0, _helpers_calc.round_value)(+this.value, 2);\n pt_size_range.value = this.value;\n current_pt_size = this.value;\n selection.attr('d', path.pointRadius(this.value));\n }\n });\n }\n\n if (data_manager.current_layers[layer_name].colors_breaks === undefined && renderer !== 'Categorical') {\n if (data_manager.current_layers[layer_name].targeted || data_manager.current_layers[layer_name].is_result) {\n var fields = (0, _helpers.getFieldsType)('category', null, fields_layer);\n var fill_method = popup.append('p').html(_tr('app_page.layer_style_popup.fill_color')).insert('select');\n [[_tr('app_page.layer_style_popup.single_color'), 'single'], [_tr('app_page.layer_style_popup.categorical_color'), 'categorical'], [_tr('app_page.layer_style_popup.random_color'), 'random']].forEach(function (d) {\n fill_method.append('option').text(d[0]).attr('value', d[1]);\n });\n popup.append('div').attrs({ id: 'fill_color_section' });\n fill_method.on('change', function () {\n d3.select('#fill_color_section').html('').on('click', null);\n if (this.value === 'single') {\n make_single_color_menu(layer_name, fill_prev);\n } else if (this.value === 'categorical') {\n make_categorical_color_menu(fields, layer_name, fill_prev);\n } else if (this.value === 'random') {\n make_random_color(layer_name);\n document.getElementById('random_color_btn').click();\n }\n });\n (0, _helpers.setSelected)(fill_method.node(), Object.getOwnPropertyNames(fill_prev)[0]);\n } else {\n popup.append('div').attrs({ id: 'fill_color_section' });\n make_single_color_menu(layer_name, fill_prev);\n }\n } else if (renderer === 'Categorical') {\n var rendered_field = data_manager.current_layers[layer_name].rendered_field;\n\n popup.insert('p').styles({ margin: 'auto', 'text-align': 'center' }).append('button').attr('class', 'button_disc').html(_tr('app_page.layer_style_popup.choose_colors')).on('click', function () {\n container.modal.hide();\n\n var _prepare_categories_a3 = (0, _function.prepare_categories_array)(layer_name, rendered_field, data_manager.current_layers[layer_name].color_map),\n _prepare_categories_a4 = _slicedToArray(_prepare_categories_a3, 1),\n cats = _prepare_categories_a4[0];\n\n (0, _categorical_panel.display_categorical_box)(data_manager.result_data[layer_name], layer_name, rendered_field, cats).then(function (confirmed) {\n container.modal.show();\n if (confirmed) {\n rendering_params = {\n nb_class: confirmed[0],\n color_map: confirmed[1],\n colorsByFeature: confirmed[2],\n renderer: 'Categorical',\n rendered_field: rendered_field,\n field: rendered_field\n };\n selection.transition().style('fill', function (d, i) {\n return rendering_params.colorsByFeature[i];\n });\n }\n });\n });\n } else if (renderer === 'Choropleth') {\n popup.append('p').styles({ margin: 'auto', 'text-align': 'center' }).append('button').attr('class', 'button_disc').html(_tr('app_page.layer_style_popup.choose_discretization')).on('click', function () {\n container.modal.hide();\n var _opts = rendering_params ? { schema: rendering_params.schema, colors: rendering_params.colors, no_data: rendering_params.no_data, type: rendering_params.type, breaks: rendering_params.breaks, extra_options: rendering_params.extra_options } : data_manager.current_layers[layer_name].options_disc;\n (0, _discretization_panel.display_discretization)(layer_name, data_manager.current_layers[layer_name].rendered_field, _opts.breaks.length - 1, _opts).then(function (confirmed) {\n container.modal.show();\n if (confirmed) {\n rendering_params = {\n nb_class: confirmed[0],\n type: confirmed[1],\n breaks: confirmed[2],\n colors: confirmed[3],\n colorsByFeature: confirmed[4],\n schema: confirmed[5],\n no_data: confirmed[6],\n // renderer:\"Choropleth\",\n field: data_manager.current_layers[layer_name].rendered_field,\n extra_options: confirmed[7]\n };\n // let opacity_val = fill_opacity_section ? +fill_opacity_section.node().value : 0.9\n selection.transition().style('fill', function (d, i) {\n return rendering_params.colorsByFeature[i];\n });\n }\n });\n });\n } else if (renderer === 'Gridded') {\n var field_to_discretize = data_manager.current_layers[layer_name].rendered_field;\n popup.append('p').style('margin', 'auto').style('text-align', 'center').append('button').attr('class', 'button_disc').html(_tr('app_page.layer_style_popup.choose_discretization')).on('click', function () {\n container.modal.hide();\n var _opts = rendering_params ? { schema: rendering_params.schema, colors: rendering_params.colors, no_data: rendering_params.no_data, type: rendering_params.type, breaks: rendering_params.breaks, extra_options: rendering_params.extra_options } : data_manager.current_layers[layer_name].options_disc;\n (0, _discretization_panel.display_discretization)(layer_name, field_to_discretize, _opts.breaks.length - 1, _opts).then(function (confirmed) {\n container.modal.show();\n if (confirmed) {\n rendering_params = {\n nb_class: confirmed[0],\n type: confirmed[1],\n breaks: confirmed[2],\n colors: confirmed[3],\n colorsByFeature: confirmed[4],\n schema: confirmed[5],\n no_data: confirmed[6],\n renderer: 'Choropleth',\n field: field_to_discretize,\n extra_options: confirmed[7]\n };\n // let opacity_val = fill_opacity_section ? +fill_opacity_section.node().value : 0.9\n selection.transition().style('fill', function (d, i) {\n return rendering_params.colorsByFeature[i];\n });\n }\n });\n });\n }\n\n var fill_opacity_section = popup.append('p').attr('class', 'line_elem');\n fill_opacity_section.append('span').html(_tr('app_page.layer_style_popup.fill_opacity'));\n fill_opacity_section.insert('input').attrs({ type: 'range', min: 0, max: 1, step: 0.1 }).styles({ width: '58px', 'vertical-align': 'middle', display: 'inline', float: 'right', 'margin-right': '0px' }).property('value', opacity).on('change', function () {\n selection.style('fill-opacity', this.value);\n fill_opacity_section.select('#fill_opacity_txt').html(this.value * 100 + '%');\n });\n fill_opacity_section.append('span').style('float', 'right').attr('id', 'fill_opacity_txt').html(+opacity * 100 + '%');\n\n var c_section = popup.append('p').attr('class', 'line_elem');\n c_section.insert('span').html(_tr('app_page.layer_style_popup.border_color'));\n c_section.insert('input').attr('type', 'color').style('float', 'right').property('value', stroke_prev).on('change', function () {\n selection.style('stroke', this.value);\n });\n\n var opacity_section = popup.append('p').attr('class', 'line_elem');\n opacity_section.insert('span').html(_tr('app_page.layer_style_popup.border_opacity'));\n opacity_section.insert('input').attrs({ type: 'range', min: 0, max: 1, step: 0.1 }).styles({ width: '58px', 'vertical-align': 'middle', display: 'inline', float: 'right' }).property('value', border_opacity).on('change', function () {\n opacity_section.select('#opacity_val_txt').html(' ' + this.value);\n selection.style('stroke-opacity', this.value);\n });\n\n opacity_section.append('span').attr('id', 'opacity_val_txt').styles({ display: 'inline', float: 'right' }).html(' ' + border_opacity);\n\n var width_section = popup.append('p');\n width_section.append('span').html(_tr('app_page.layer_style_popup.border_width'));\n width_section.insert('input').attrs({ type: 'number', min: 0, step: 0.1 }).styles({ width: '60px', float: 'right' }).property('value', stroke_width).on('change', function () {\n var val = +this.value;\n var zoom_scale = +d3.zoomTransform(map.node()).k;\n map.select(g_lyr_name).style('stroke-width', val / zoom_scale + 'px');\n data_manager.current_layers[layer_name]['stroke-width-const'] = val;\n });\n\n var shadow_section = popup.append('p');\n var chkbx = shadow_section.insert('input').style('margin', '0').property('checked', map.select(g_lyr_name).attr('filter') ? true : null).attrs({\n type: 'checkbox',\n id: 'checkbox_shadow_layer' });\n shadow_section.insert('label').attr('for', 'checkbox_shadow_layer').html(_tr('app_page.layer_style_popup.layer_shadow'));\n chkbx.on('change', function () {\n if (this.checked) {\n createDropShadow(_app.layer_to_id.get(layer_name));\n } else {\n var filter_id = map.select(g_lyr_name).attr('filter');\n svg_map.querySelector(filter_id.substring(4).replace(')', '')).remove();\n map.select(g_lyr_name).attr('filter', null);\n }\n });\n make_generate_labels_section(popup, layer_name);\n}\n\nfunction createStyleBoxStewart(layer_name) {\n (0, _dialogs.check_remove_existing_box)('.styleBox');\n var g_lyr_name = '#' + _app.layer_to_id.get(layer_name),\n selection = map.select(g_lyr_name).selectAll('path'),\n opacity = selection.style('fill-opacity');\n\n var nb_ft = data_manager.current_layers[layer_name].n_features;\n var prev_palette = (0, _helpers.cloneObj)(data_manager.current_layers[layer_name].color_palette);\n\n var recolor_stewart = function recolor_stewart(coloramp_name, reversed) {\n var new_coloramp = (0, _colors_helpers.getColorBrewerArray)(nb_ft, coloramp_name);\n if (reversed) new_coloramp.reverse();\n for (var i = 0; i < nb_ft; ++i) {\n rendering_params.breaks[i][1] = new_coloramp[i];\n }\n selection.transition().style('fill', function (d, i) {\n return new_coloramp[i];\n });\n data_manager.current_layers[layer_name].color_palette = { name: coloramp_name, reversed: reversed };\n };\n var fill_prev = (0, _helpers.cloneObj)(data_manager.current_layers[layer_name].fill_color);\n var rendering_params = { breaks: [].concat(data_manager.current_layers[layer_name].colors_breaks) };\n var prev_col_breaks = void 0;\n if (data_manager.current_layers[layer_name].colors_breaks && data_manager.current_layers[layer_name].colors_breaks instanceof Array) {\n prev_col_breaks = data_manager.current_layers[layer_name].colors_breaks.concat([]);\n }\n var border_opacity = selection.style('stroke-opacity'),\n stroke_width = +data_manager.current_layers[layer_name]['stroke-width-const'];\n var stroke_prev = selection.style('stroke');\n\n if (stroke_prev.startsWith('rgb')) {\n stroke_prev = (0, _colors_helpers.rgb2hex)(stroke_prev);\n }\n\n (0, _dialogs.make_confirm_dialog2)('styleBox', layer_name, { top: true, widthFitContent: true, draggable: true }).then(function (confirmed) {\n if (confirmed) {\n data_manager.current_layers[layer_name].colors_breaks = rendering_params.breaks;\n data_manager.current_layers[layer_name].fill_color.class = rendering_params.breaks.map(function (obj) {\n return obj[1];\n });\n // Redraw the legend if necessary:\n if (document.querySelector('.legend.legend_feature.lgdf_' + _app.layer_to_id.get(layer_name)).id === 'legend_root') {\n redraw_legend('choro', layer_name, data_manager.current_layers[layer_name].rendered_field);\n } else {\n redraw_legend('choro_horiz', layer_name, data_manager.current_layers[layer_name].rendered_field);\n }\n // Change the layer name if requested :\n if (new_layer_name !== layer_name) {\n change_layer_name(layer_name, (0, _function.check_layer_name)(new_layer_name.trim()));\n }\n (0, _map_ctrl.zoom_without_redraw)();\n } else {\n // Reset to original values the rendering parameters if \"no\" is clicked\n selection.style('fill-opacity', opacity).style('stroke-opacity', border_opacity);\n var zoom_scale = +d3.zoomTransform(map.node()).k;\n map.select(g_lyr_name).style('stroke-width', stroke_width / zoom_scale + 'px');\n data_manager.current_layers[layer_name]['stroke-width-const'] = stroke_width;\n // const fill_meth = Object.getOwnPropertyNames(fill_prev)[0];\n recolor_stewart(prev_palette.name, prev_palette.reversed);\n if (document.querySelector('.legend.legend_feature.lgdf_' + _app.layer_to_id.get(layer_name)).id === 'legend_root') {\n redraw_legend('choro', layer_name, data_manager.current_layers[layer_name].rendered_field);\n } else {\n redraw_legend('choro_horiz', layer_name, data_manager.current_layers[layer_name].rendered_field);\n }\n data_manager.current_layers[layer_name].colors_breaks = prev_col_breaks;\n data_manager.current_layers[layer_name].fill_color = fill_prev;\n (0, _map_ctrl.zoom_without_redraw)();\n }\n });\n\n var container = document.querySelector('.twbs > .styleBox');\n var popup = d3.select(container).select('.modal-content').style('width', '300px').select('.modal-body');\n\n var new_layer_name = layer_name;\n var new_name_section = make_change_layer_name_section(popup, layer_name);\n new_name_section.on('change', function () {\n new_layer_name = this.value;\n });\n\n var color_palette_section = popup.insert('p').attr('class', 'line_elem');\n color_palette_section.append('span').html(_tr('app_page.layer_style_popup.color_palette'));\n var seq_color_select = color_palette_section.insert('select').attr('id', 'coloramp_params').style('float', 'right').on('change', function () {\n recolor_stewart(this.value, false);\n });\n\n ['Blues', 'BuGn', 'BuPu', 'GnBu', 'OrRd', 'PuBu', 'PuBuGn', 'PuRd', 'RdPu', 'YlGn', 'Greens', 'Greys', 'Oranges', 'Purples', 'Reds'].forEach(function (name) {\n seq_color_select.append('option').text(name).attr('value', name);\n });\n seq_color_select.node().value = prev_palette.name;\n popup.insert('p').attr('class', 'line_elem').styles({ 'text-align': 'center', margin: '0 !important' }).insert('button').attrs({ class: 'button_st3', id: 'reverse_colramp' }).html(_tr('app_page.layer_style_popup.reverse_palette')).on('click', function () {\n var pal_name = document.getElementById('coloramp_params').value;\n recolor_stewart(pal_name, true);\n });\n\n var fill_opacity_section = popup.append('p').attr('class', 'line_elem');\n fill_opacity_section.append('span').html(_tr('app_page.layer_style_popup.fill_opacity'));\n fill_opacity_section.insert('input').attrs({ type: 'range', min: 0, max: 1, step: 0.1 }).styles({ width: '58px', 'vertical-align': 'middle', display: 'inline', float: 'right', 'margin-right': '0px' }).property('value', opacity).on('change', function () {\n selection.style('fill-opacity', this.value);\n fill_opacity_section.select('#fill_opacity_txt').html(this.value * 100 + '%');\n });\n fill_opacity_section.append('span').style('float', 'right').attr('id', 'fill_opacity_txt').html(+opacity * 100 + '%');\n\n var c_section = popup.append('p').attr('class', 'line_elem');\n c_section.insert('span').html(_tr('app_page.layer_style_popup.border_color'));\n c_section.insert('input').attr('type', 'color').style('float', 'right').property('value', stroke_prev).on('change', function () {\n selection.style('stroke', this.value);\n });\n\n var opacity_section = popup.append('p').attr('class', 'line_elem');\n opacity_section.insert('span').html(_tr('app_page.layer_style_popup.border_opacity'));\n opacity_section.insert('input').attrs({ type: 'range', min: 0, max: 1, step: 0.1 }).styles({ width: '58px', 'vertical-align': 'middle', display: 'inline', float: 'right' }).property('value', 'border_opacity').on('change', function () {\n opacity_section.select('#opacity_val_txt').html(' ' + this.value);\n selection.style('stroke-opacity', this.value);\n });\n\n opacity_section.append('span').attr('id', 'opacity_val_txt').styles({ display: 'inline', float: 'right' }).html(' ' + border_opacity);\n\n var width_section = popup.append('p');\n width_section.append('span').html(_tr('app_page.layer_style_popup.border_width'));\n width_section.insert('input').attrs({ type: 'number', min: 0, step: 0.1 }).styles({ width: '60px', float: 'right' }).property('value', stroke_width).on('change', function () {\n var val = +this.value;\n var zoom_scale = +d3.zoomTransform(map.node()).k;\n map.select(g_lyr_name).style('stroke-width', val / zoom_scale + 'px');\n data_manager.current_layers[layer_name]['stroke-width-const'] = val;\n });\n\n var shadow_section = popup.append('p');\n var chkbx = shadow_section.insert('input').style('margin', '0').property('checked', map.select(g_lyr_name).attr('filter') ? true : null).attrs({\n type: 'checkbox',\n id: 'checkbox_shadow_layer'\n });\n shadow_section.insert('label').attr('for', 'checkbox_shadow_layer').html(_tr('app_page.layer_style_popup.layer_shadow'));\n chkbx.on('change', function () {\n if (this.checked) {\n createDropShadow(_app.layer_to_id.get(layer_name));\n } else {\n var filter_id = map.select(g_lyr_name).attr('filter');\n svg_map.querySelector(filter_id.substring(4).replace(')', '')).remove();\n map.select(g_lyr_name).attr('filter', null);\n }\n });\n make_generate_labels_section(popup, layer_name);\n}\n\nfunction make_generate_labels_graticule_section(parent_node) {\n var labels_section = parent_node.append('p');\n labels_section.append('span').attr('id', 'generate_labels').styles({ cursor: 'pointer', 'margin-top': '15px' }).html(_tr('app_page.layer_style_popup.generate_labels')).on('mouseover', function () {\n this.style.fontWeight = 'bold';\n }).on('mouseout', function () {\n this.style.fontWeight = '';\n }).on('click', function () {\n (0, _function.render_label_graticule)('Graticule', {\n color: '#000',\n font: 'verdana',\n ref_font_size: 12,\n uo_layer_name: ['Labels', 'Graticule'].join('_')\n });\n });\n}\n\n/**\n* Create the section allowing to generate labels on a parent style box.\n* (Used by all the createStyleBox_xxx functions)\n*\n* @param {Object} parent_node - The d3 selection corresponding the parent style box.\n* @param {String} layer_name - The name of the layer currently edited in the style box.\n* @return {void}\n*\n*/\nfunction make_generate_labels_section(parent_node, layer_name) {\n var _fields = get_fields_name(layer_name) || [];\n // const table = make_table(layer_name);\n var fields_num = (0, _helpers.type_col2)((0, _tables.make_table)(layer_name)).filter(function (a) {\n return a.type === 'ratio' || a.type === 'stock';\n }).map(function (a) {\n return a.name;\n });\n if (_fields && _fields.length > 0) {\n var labels_section = parent_node.append('p');\n var input_fields = {};\n for (var i = 0; i < _fields.length; i++) {\n input_fields[_fields[i]] = _fields[i];\n }\n labels_section.append('span').attr('id', 'generate_labels').styles({ cursor: 'pointer', 'margin-top': '15px' }).html(_tr('app_page.layer_style_popup.generate_labels')).on('mouseover', function () {\n this.style.fontWeight = 'bold';\n }).on('mouseout', function () {\n this.style.fontWeight = '';\n }).on('click', function () {\n swal({\n title: '',\n html: '\\n
' + _tr('app_page.layer_style_popup.field_label') + '
\\n
\\n
\\n
');\n content_modif_zone.append('textarea').attr('id', 'annotation_content').styles({ margin: '5px 0px 0px', width: '100%' }).on('keyup', function () {\n self.update_text(this.value);\n });\n document.getElementById('annotation_content').value = current_options.content;\n\n var buffer_text_zone = box_content.append('p');\n var buffer_txt_chk = buffer_text_zone.append('input').attrs({ type: 'checkbox', id: 'buffer_txt_chk', checked: current_options.buffer !== undefined ? true : null }).on('change', function () {\n if (this.checked) {\n buffer_color.style('display', '');\n if (self.buffer === undefined) {\n self.buffer = { color: '#FFFFFF', size: 1 };\n }\n var color = self.buffer.color,\n size = self.buffer.size;\n text_elem.style('text-shadow', '-' + size + 'px 0px 0px ' + color + ', 0px ' + size + 'px 0px ' + color + ', ' + size + 'px 0px 0px ' + color + ', 0px -' + size + 'px 0px ' + color);\n } else {\n buffer_color.style('display', 'none');\n text_elem.style('text-shadow', 'none');\n }\n });\n\n buffer_text_zone.append('label').attrs({ for: 'buffer_txt_chk' }).text(_tr('app_page.text_box_edit_box.buffer'));\n\n var buffer_color = buffer_text_zone.append('input').styles({\n display: current_options.buffer !== undefined ? '' : 'none',\n float: 'right'\n }).attr('type', 'color').property('value', current_options.buffer && current_options.buffer.color ? current_options.buffer.color : '#FFFFFF').on('change', function () {\n self.buffer.color = this.value;\n var color = self.buffer.color,\n size = self.buffer.size;\n text_elem.style('text-shadow', '-' + size + 'px 0px 0px ' + color + ', 0px ' + size + 'px 0px ' + color + ', ' + size + 'px 0px 0px ' + color + ', 0px -' + size + 'px 0px ' + color);\n });\n\n btn_bold.on('click', function () {\n if (this.classList.contains('active')) {\n this.classList.remove('active');\n text_elem.style('font-weight', '');\n } else {\n this.classList.add('active');\n text_elem.style('font-weight', 'bold');\n }\n });\n\n btn_italic.on('click', function () {\n if (this.classList.contains('active')) {\n this.classList.remove('active');\n text_elem.style('font-style', '');\n } else {\n this.classList.add('active');\n text_elem.style('font-style', 'italic');\n }\n });\n\n btn_underline.on('click', function () {\n if (this.classList.contains('active')) {\n this.classList.remove('active');\n text_elem.style('text-decoration', '');\n } else {\n this.classList.add('active');\n text_elem.style('text-decoration', 'underline');\n }\n });\n }\n }, {\n key: 'up_element',\n value: function up_element() {\n (0, _legend.up_legend)(this.group.node());\n }\n }, {\n key: 'down_element',\n value: function down_element() {\n (0, _legend.down_legend)(this.group.node());\n }\n }]);\n\n return Textbox;\n}();\n\nexports.default = Textbox;\n\n//# sourceURL=webpack:///./js/layout_features/text_annotation.js?");
-
-/***/ }),
-
-/***/ "./js/legend.js":
-/*!**********************!*\
- !*** ./js/legend.js ***!
- \**********************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-eval("/* WEBPACK VAR INJECTION */(function(Promise) {\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.drag_legend_func = undefined;\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nexports.handle_legend = handle_legend;\nexports.up_legends = up_legends;\nexports.up_legend = up_legend;\nexports.down_legend = down_legend;\nexports.createLegend_waffle = createLegend_waffle;\nexports.createLegend_discont_links = createLegend_discont_links;\nexports.createLegend_symbol = createLegend_symbol;\nexports.createLegend_line_symbol = createLegend_line_symbol;\nexports.createLegend_choro = createLegend_choro;\nexports.createLegend_choro_horizontal = createLegend_choro_horizontal;\nexports.move_legends = move_legends;\n\nvar _contextMenu = __webpack_require__(/*! ./context-menu */ \"./js/context-menu.js\");\n\nvar _contextMenu2 = _interopRequireDefault(_contextMenu);\n\nvar _colors_helpers = __webpack_require__(/*! ./colors_helpers */ \"./js/colors_helpers.js\");\n\nvar _dialogs = __webpack_require__(/*! ./dialogs */ \"./js/dialogs.js\");\n\nvar _helpers = __webpack_require__(/*! ./helpers */ \"./js/helpers.js\");\n\nvar _helpers_calc = __webpack_require__(/*! ./helpers_calc */ \"./js/helpers_calc.js\");\n\nvar _helpers_math = __webpack_require__(/*! ./helpers_math */ \"./js/helpers_math.js\");\n\nvar _interface = __webpack_require__(/*! ./interface */ \"./js/interface.js\");\n\nvar _map_ctrl = __webpack_require__(/*! ./map_ctrl */ \"./js/map_ctrl.js\");\n\nvar _snap_lines = __webpack_require__(/*! ./layout_features/snap_lines */ \"./js/layout_features/snap_lines.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n/**\n* Function called on clicking on the legend button of each layer\n* - toggle the visibility of the legend (or create the legend if doesn't currently exists)\n*\n* @param {String} layer - The layer name\n* @returns {void}\n*/\nfunction handle_legend(layer) {\n var state = data_manager.current_layers[layer].renderer;\n if (state != undefined) {\n var class_name = ['.lgdf', _app.layer_to_id.get(layer)].join('_');\n var legends = svg_map.querySelectorAll(class_name);\n if (legends.length > 0) {\n if (legends[0].getAttribute('display') == null) {\n Array.prototype.forEach.call(legends, function (el) {\n return el.setAttribute('display', 'none');\n });\n } else {\n Array.prototype.forEach.call(legends, function (el) {\n return el.removeAttribute('display');\n });\n // Redisplay the legend(s) and also\n // verify if still in the visible part\n // of the map, if not, move them in:\n // .. so it's actually a feature if the legend is redrawn on its origin location\n // after being moved too close to the outer border of the map :\n var tol = 10;\n\n var _get_map_xy = get_map_xy0(),\n x0 = _get_map_xy.x,\n y0 = _get_map_xy.y;\n\n var limit_left = x0 - tol;\n var limit_right = x0 + +w + tol;\n var limit_top = y0 - tol;\n var limit_bottom = y0 + +h + tol;\n\n for (var i = 0; i < legends.length; i++) {\n var bboxLegend = legends[i].getBoundingClientRect();\n if (bboxLegend.left < limit_left || bboxLegend.left > limit_right || bboxLegend.top < limit_top || bboxLegend.top > limit_bottom) {\n legends[i].setAttribute('transform', 'translate(0, 0)');\n }\n }\n }\n } else {\n createLegend(layer, '');\n up_legends();\n }\n }\n}\n\nfunction up_legends() {\n var legend_features = svg_map.querySelectorAll('.legend');\n for (var i = 0; i < legend_features.length; i++) {\n svg_map.appendChild(legend_features[i], null);\n }\n}\n\n/**\n* Function called on the first click on the legend button of each layer\n* - delegate legend creation according to the type of function\n*\n* @param {String} layer - The layer name\n* @param {String} title - The desired title (default: empty - can be modified later)\n*\n*/\nfunction createLegend(layer, title) {\n var renderer = data_manager.current_layers[layer].renderer,\n field = data_manager.current_layers[layer].rendered_field,\n field2 = data_manager.current_layers[layer].rendered_field2,\n type_layer = data_manager.current_layers[layer].type;\n var el = void 0,\n el2 = void 0;\n\n var lgd_pos = (0, _helpers_calc.getTranslateNewLegend)();\n\n if (renderer.indexOf('Choropleth') > -1 || renderer.indexOf('Gridded') > -1 || renderer.indexOf('Stewart') > -1 || renderer.indexOf('TypoSymbols') > -1) {\n el = createLegend_choro(layer, field, title, field, 0);\n } else if (renderer.indexOf('Categorical') > -1) {\n el = createLegend_choro(layer, field, title, field, 4);\n } else if (renderer.indexOf('LinksGraduated') !== -1 || renderer.indexOf('DiscLayer') !== -1) {\n el = createLegend_discont_links(layer, field, title, field);\n } else if (renderer.indexOf('PropSymbolsChoro') !== -1) {\n el = createLegend_choro(layer, field2, title, field2, 0);\n el2 = type_layer === 'Line' ? createLegend_line_symbol(layer, field, title, field) : createLegend_symbol(layer, field, title, field);\n } else if (renderer.indexOf('PropSymbolsTypo') !== -1) {\n el = createLegend_choro(layer, field2, title, field2, 4);\n el2 = type_layer === 'Line' ? createLegend_line_symbol(layer, field, title, field) : createLegend_symbol(layer, field, title, field);\n } else if (renderer.indexOf('PropSymbols') !== -1) {\n el = type_layer === 'Line' ? createLegend_line_symbol(layer, field, title, field) : createLegend_symbol(layer, field, title, field);\n } else if (renderer.indexOf('LinksProp') !== -1) {\n el = createLegend_line_symbol(layer, field, title, field);\n } else if (renderer.indexOf('TwoStocksWaffle') !== -1) {\n el = createLegend_waffle(layer, field, title, '');\n } else {\n swal('Oops..', _tr('No legend available for this representation') + '.
' + _tr('Want to make a suggestion ?'), 'warning');\n return;\n }\n\n if (el && lgd_pos && lgd_pos.x) {\n el.attr('transform', 'translate(' + lgd_pos.x + ',' + lgd_pos.y + ')');\n }\n _snap_lines.pos_lgds_elem.set(el.attr('id') + ' ' + el.attr('class'), get_bounding_rect(el.node()));\n if (el2) {\n var prev_bbox = get_bounding_rect(el.node()),\n dim_h = lgd_pos.y + prev_bbox.height,\n dim_w = lgd_pos.x + prev_bbox.width;\n var lgd_pos2 = (0, _helpers_calc.getTranslateNewLegend)();\n if (lgd_pos2.x !== lgd_pos.x || lgd_pos2.y !== lgd_pos.y) {\n el2.attr('transform', 'translate(' + lgd_pos2.x + ',' + lgd_pos2.y + ')');\n } else if (dim_h < h) {\n el2.attr('transform', 'translate(' + lgd_pos.x + ',' + dim_h + ')');\n } else if (dim_w < w) {\n el2.attr('transform', 'translate(' + dim_w + ',' + lgd_pos.y + ')');\n }\n _snap_lines.pos_lgds_elem.set(el2.attr('id') + ' ' + el2.attr('class'), get_bounding_rect(el2.node()));\n }\n}\n\nfunction up_legend(legend_node) {\n var lgd_features = svg_map.querySelectorAll('.legend'),\n nb_lgd_features = +lgd_features.length;\n var self_position = void 0;\n\n for (var i = 0; i < nb_lgd_features; i++) {\n if (lgd_features[i].id === legend_node.id && lgd_features[i].classList === legend_node.classList) {\n self_position = i;\n }\n }\n // if (self_position === nb_lgd_features - 1) {\n //\n // } else {\n // svg_map.insertBefore(lgd_features[self_position + 1], lgd_features[self_position]);\n // }\n if (!(self_position === nb_lgd_features - 1)) {\n svg_map.insertBefore(lgd_features[self_position + 1], lgd_features[self_position]);\n }\n}\n\nfunction down_legend(legend_node) {\n var lgd_features = svg_map.querySelectorAll('.legend'),\n nb_lgd_features = +lgd_features.length;\n var self_position = void 0;\n\n for (var i = 0; i < nb_lgd_features; i++) {\n if (lgd_features[i].id === legend_node.id && lgd_features[i].classList === legend_node.classList) {\n self_position = i;\n }\n }\n if (self_position !== 0) {\n svg_map.insertBefore(lgd_features[self_position], lgd_features[self_position - 1]);\n }\n}\n\nfunction make_legend_context_menu(legend_node) {\n var context_menu = new _contextMenu2.default();\n var getItems = function getItems() {\n return [{ name: _tr('app_page.common.edit_style'), action: function action() {\n createlegendEditBox(legend_node.attr('id'), legend_node.attr('layer_name'));\n } }, { name: _tr('app_page.common.up_element'), action: function action() {\n up_legend(legend_node.node());\n } }, { name: _tr('app_page.common.down_element'), action: function action() {\n down_legend(legend_node.node());\n } }, { name: _tr('app_page.common.hide'),\n action: function action() {\n if (!(legend_node.attr('display') === 'none')) legend_node.attr('display', 'none');else legend_node.attr('display', null);\n } }];\n };\n legend_node.on('dblclick', function () {\n d3.event.stopPropagation();\n d3.event.preventDefault();\n createlegendEditBox(legend_node.attr('id'), legend_node.attr('layer_name'));\n });\n\n legend_node.on('contextmenu', function () {\n context_menu.showMenu(d3.event, document.querySelector('body'), getItems());\n });\n}\n\nvar drag_legend_func = exports.drag_legend_func = function drag_legend_func(legend_group) {\n return d3.drag().subject(function () {\n var t = d3.select(this),\n prev_translate = t.attr('transform'),\n snap_lines = (0, _snap_lines.get_coords_snap_lines)(t.attr('id') + ' ' + t.attr('class'));\n\n prev_translate = prev_translate ? prev_translate.slice(10, -1).split(/[ ,]+/).map(function (f) {\n return +f;\n }) : [0, 0];\n if (prev_translate.length === 1) prev_translate = [prev_translate[0], 0];\n\n return {\n x: +t.attr('x') + prev_translate[0],\n y: +t.attr('y') + prev_translate[1],\n map_locked: !!map_div.select('#hand_button').classed('locked'),\n snap_lines: snap_lines,\n offset: [+legend_group.select('#under_rect').attr('x'), +legend_group.select('#under_rect').attr('y')]\n };\n }).on('start', function () {\n d3.event.sourceEvent.stopPropagation();\n d3.event.sourceEvent.preventDefault();\n (0, _interface.handle_click_hand)('lock');\n }).on('end', function () {\n if (d3.event.subject && !d3.event.subject.map_locked) {\n (0, _interface.handle_click_hand)('unlock');\n }\n legend_group.style('cursor', 'grab');\n _snap_lines.pos_lgds_elem.set(legend_group.attr('id') + ' ' + legend_group.attr('class'), get_bounding_rect(legend_group.node()));\n }).on('drag', function () {\n var Min = _helpers_math.Mmin;\n var Max = _helpers_math.Mmax;\n var new_value = [d3.event.x, d3.event.y];\n var prev_value = legend_group.attr('transform');\n prev_value = prev_value ? prev_value.slice(10, -1).split(/[ ,]+/).map(function (f) {\n return +f;\n }) : [0, 0];\n if (prev_value.length === 1) prev_value = [prev_value[0], 0];\n legend_group.attr('transform', 'translate(' + new_value + ')').style('cursor', 'grabbing');\n\n var bbox_elem = get_bounding_rect(legend_group.node());\n var val_x = d3.event.x,\n val_y = d3.event.y,\n change = void 0;\n\n if (_app.autoalign_features) {\n var xmin = bbox_elem.x,\n xmax = bbox_elem.x + bbox_elem.width,\n ymin = bbox_elem.y,\n ymax = bbox_elem.y + bbox_elem.height;\n\n var snap_lines_x = d3.event.subject.snap_lines.x,\n snap_lines_y = d3.event.subject.snap_lines.y;\n for (var i = 0; i < snap_lines_x.length; i++) {\n if ((0, _helpers_math.Mabs)(snap_lines_x[i][0] - xmin) < 10) {\n var _y1 = Min(Min(snap_lines_y[i][0], snap_lines_y[i][1]), ymin);\n var _y2 = Max(Max(snap_lines_y[i][0], snap_lines_y[i][1]), ymax);\n (0, _snap_lines.make_red_line_snap)(snap_lines_x[i][0], snap_lines_x[i][0], _y1, _y2);\n val_x = snap_lines_x[i][0] - d3.event.subject.offset[0];\n change = true;\n }\n if ((0, _helpers_math.Mabs)(snap_lines_x[i][0] - xmax) < 10) {\n var _y = Min(Min(snap_lines_y[i][0], snap_lines_y[i][1]), ymin);\n var _y3 = Max(Max(snap_lines_y[i][0], snap_lines_y[i][1]), ymax);\n (0, _snap_lines.make_red_line_snap)(snap_lines_x[i][0], snap_lines_x[i][0], _y, _y3);\n val_x = snap_lines_x[i][0] - bbox_elem.width - d3.event.subject.offset[0];\n change = true;\n }\n if ((0, _helpers_math.Mabs)(snap_lines_y[i][0] - ymin) < 10) {\n var x1 = Min(Min(snap_lines_x[i][0], snap_lines_x[i][1]), xmin);\n var x2 = Max(Max(snap_lines_x[i][0], snap_lines_x[i][1]), xmax);\n (0, _snap_lines.make_red_line_snap)(x1, x2, snap_lines_y[i][0], snap_lines_y[i][0]);\n val_y = snap_lines_y[i][0] - d3.event.subject.offset[1];\n change = true;\n }\n if ((0, _helpers_math.Mabs)(snap_lines_y[i][0] - ymax) < 10) {\n var _x = Min(Min(snap_lines_x[i][0], snap_lines_x[i][1]), xmin);\n var _x2 = Max(Max(snap_lines_x[i][0], snap_lines_x[i][1]), xmax);\n (0, _snap_lines.make_red_line_snap)(_x, _x2, snap_lines_y[i][0], snap_lines_y[i][0]);\n val_y = snap_lines_y[i][0] - bbox_elem.height - d3.event.subject.offset[1];\n change = true;\n }\n }\n }\n\n if (bbox_elem.width < w && bbox_elem.x < -10 || bbox_elem.x + bbox_elem.width > +w + 10) {\n val_x = prev_value[0];\n change = true;\n }\n if (bbox_elem.height < h && bbox_elem.y < -10 || bbox_elem.y + bbox_elem.height > +h + 10) {\n val_y = prev_value[1];\n change = true;\n }\n if (change) {\n legend_group.attr('transform', 'translate(' + [val_x, val_y] + ')');\n }\n });\n};\n\nfunction createLegend_waffle(layer, fields, title, subtitle, rect_fill_value, ratio_txt, note_bottom) {\n var space_elem = 18;\n var boxheight = 18;\n var boxwidth = 18;\n var boxgap = 12;\n var xpos = 30;\n var ypos = 30;\n var y_pos2 = ypos + space_elem;\n var tmp_class_name = 'legend legend_feature lgdf_' + _app.layer_to_id.get(layer);\n var nbVar = fields.length;\n var ref_colors = data_manager.current_layers[layer].fill_color;\n var symbol = data_manager.current_layers[layer].symbol;\n var size_symbol = data_manager.current_layers[layer].size;\n var last_pos = void 0;\n\n var legend_root = map.insert('g').attrs({\n id: 'legend_root_waffle',\n class: tmp_class_name,\n transform: 'translate(0,0)',\n layer_name: layer\n }).styles({\n cursor: 'grab',\n 'font-size': '11px',\n 'font-family': 'verdana'\n });\n\n var rect_under_legend = legend_root.insert('rect');\n\n legend_root.insert('text').attrs(subtitle != '' ? { id: 'legendtitle', x: xpos + space_elem, y: ypos } : { id: 'legendtitle', x: xpos + space_elem, y: ypos + 15 }).styles({\n 'font-size': '12px',\n 'font-family': 'verdana',\n 'font-weight': 'bold'\n }).text(title || '');\n\n legend_root.insert('text').attrs({ id: 'legendsubtitle', x: xpos + space_elem, y: ypos + 15 }).styles({\n 'font-size': '12px',\n 'font-family': 'verdana',\n 'font-style': 'italic'\n }).text(subtitle);\n\n var fields_colors = [];\n for (var i = 0; i < nbVar; i++) {\n fields_colors.push([fields[i], ref_colors[i]]);\n }\n\n var legend_elems = legend_root.selectAll('.legend').append('g').data(fields_colors).enter().insert('g').attr('class', function (d, i) {\n return 'lg legend_' + i;\n });\n\n legend_elems.append('rect').attrs(function (d, i) {\n last_pos = y_pos2 + i * boxgap + i * boxheight;\n return {\n x: xpos + boxwidth,\n y: last_pos,\n width: boxwidth,\n height: boxheight\n };\n }).styles(function (d) {\n return { fill: d[1], stroke: d[1] };\n });\n\n legend_elems.append('text').attr('x', xpos + boxwidth * 2 + 10).attr('y', function (d, i) {\n return y_pos2 + i * boxheight + i * boxgap + boxheight * 2 / 3;\n }).styles({ 'alignment-baseline': 'middle', 'font-size': '10px' }).text(function (d) {\n return d[0];\n });\n\n var legend_symbol_size = legend_root.append('g');\n if (symbol === 'rect') {\n legend_symbol_size.insert('rect').attrs({ x: xpos + boxwidth, y: last_pos + 2 * space_elem, width: size_symbol, height: size_symbol }).styles({ fill: 'lightgray', stroke: 'black', 'stroke-width': '0.8px' });\n legend_symbol_size.insert('text').attrs({ x: xpos + boxwidth + space_elem + size_symbol, y: last_pos + 2 * space_elem + size_symbol / 2 + 7, id: 'ratio_txt' }).text(ratio_txt || ' = ' + data_manager.current_layers[layer].ratio);\n last_pos = last_pos + 3 * space_elem + size_symbol;\n } else {\n legend_symbol_size.insert('circle').attrs({ cx: xpos + boxwidth + size_symbol, cy: last_pos + 2 * space_elem + size_symbol, r: size_symbol }).styles({ fill: 'lightgray', stroke: 'black', 'stroke-width': '0.8px' });\n legend_symbol_size.insert('text').attrs({ x: xpos + boxwidth + space_elem + size_symbol * 2, y: last_pos + 2 * space_elem + size_symbol + 7, id: 'ratio_txt' }).text(ratio_txt || ' = ' + data_manager.current_layers[layer].ratio);\n last_pos = last_pos + 3 * space_elem + size_symbol * 2;\n }\n\n legend_root.append('g').insert('text').attrs({ id: 'legend_bottom_note', x: xpos + space_elem, y: last_pos }).styles({\n 'font-size': '11px',\n 'font-family': 'verdana'\n }).text(note_bottom != null ? note_bottom : '');\n\n legend_root.call(drag_legend_func(legend_root));\n\n make_underlying_rect(legend_root, rect_under_legend, rect_fill_value);\n make_legend_context_menu(legend_root, layer);\n return legend_root;\n}\n\nfunction createLegend_discont_links(layer, field, title, subtitle, rect_fill_value, rounding_precision, note_bottom) {\n var space_elem = 18,\n boxgap = 12,\n xpos = 30,\n ypos = 30,\n y_pos2 = ypos + space_elem,\n tmp_class_name = 'legend legend_feature lgdf_' + _app.layer_to_id.get(layer),\n breaks = data_manager.current_layers[layer].breaks,\n nb_class = breaks.length;\n\n if (rounding_precision === undefined) {\n var b_val = breaks.map(function (v) {\n return v[0][0];\n }).concat(breaks[nb_class - 1][0][1]);\n rounding_precision = get_lgd_display_precision(b_val);\n }\n\n var legend_root = map.insert('g').attrs({\n id: 'legend_root_lines_class',\n class: tmp_class_name,\n transform: 'translate(0,0)',\n rounding_precision: rounding_precision,\n layer_field: field,\n layer_name: layer\n }).styles({ cursor: 'grab', 'font-size': '11px', 'font-family': 'verdana' });\n\n var rect_under_legend = legend_root.insert('rect');\n\n legend_root.insert('text').attrs(subtitle != '' ? { id: 'legendtitle', x: xpos + space_elem, y: ypos } : { id: 'legendtitle', x: xpos + space_elem, y: ypos + 15 }).styles({\n 'font-size': '12px',\n 'font-family': 'verdana',\n 'font-weight': 'bold'\n }).text(title || '');\n\n legend_root.insert('text').attrs({ id: 'legendsubtitle', x: xpos + space_elem, y: ypos + 15 }).styles({\n 'font-size': '12px',\n 'font-family': 'verdana',\n 'font-style': 'italic'\n }).text(subtitle);\n\n var ref_symbols_params = [];\n\n // Prepare symbols for the legend, taking care of not representing values\n // under the display threshold defined by the user (if any) :\n var current_min_value = +data_manager.current_layers[layer].min_display;\n if (data_manager.current_layers[layer].renderer === 'DiscLayer') {\n // Todo use the same way to store the threshold for links and disclayer\n // in order to avoid theses condition\n var values = Array.prototype.map.call(svg_map.querySelector('#' + _app.layer_to_id.get(layer)).querySelectorAll('path'), function (d) {\n return +d.__data__.properties.disc_value;\n });\n current_min_value = current_min_value !== 1 ? values[(0, _helpers_math.Mround)(current_min_value * data_manager.current_layers[layer].n_features)] : values[values.length - 1];\n }\n\n for (var ix = 0; ix < nb_class; ix++) {\n var _b_val = breaks[ix];\n if (_b_val[1] !== 0) {\n if (current_min_value >= +_b_val[0][0] && current_min_value < +_b_val[0][1]) {\n ref_symbols_params.push({ value: [current_min_value, _b_val[0][1]], size: _b_val[1] });\n } else if (current_min_value < +_b_val[0][0] && current_min_value < +_b_val[0][1]) {\n ref_symbols_params.push({ value: _b_val[0], size: _b_val[1] });\n }\n }\n }\n\n ref_symbols_params.reverse();\n\n var legend_elems = legend_root.selectAll('.legend').append('g').data(ref_symbols_params).enter().insert('g').attr('class', function (d, i) {\n return 'lg legend_' + i;\n });\n\n var max_size = data_manager.current_layers[layer].size[1],\n color = data_manager.current_layers[layer].fill_color.single,\n xrect = xpos + space_elem + max_size / 2;\n var last_size = 0,\n last_pos = y_pos2;\n\n legend_elems.append('rect').styles({ fill: color, stroke: 'rgb(0, 0, 0)', 'fill-opacity': 1, 'stroke-width': 0 }).attrs(function (d) {\n last_pos = boxgap + last_pos + last_size;\n last_size = d.size * svg_map.__zoom.k;\n return { x: xrect, y: last_pos, width: 45, height: last_size };\n });\n\n last_pos = y_pos2;\n last_size = 0;\n\n var x_text_pos = xpos + space_elem + max_size * 1.5 + 45;\n var tmp_pos = void 0;\n legend_elems.append('text').attrs(function (d) {\n last_pos = boxgap + last_pos + last_size;\n last_size = d.size * svg_map.__zoom.k;\n tmp_pos = last_pos - last_size / 4;\n return { x: x_text_pos, y: tmp_pos };\n }).styles({ 'alignment-baseline': 'middle', 'font-size': '10px' }).text(function (d) {\n return (0, _helpers_calc.round_value)(d.value[1], rounding_precision).toLocaleString();\n });\n\n legend_root.insert('text').attrs({ id: 'lgd_choro_min_val', x: x_text_pos, y: tmp_pos + boxgap }).styles({ 'alignment-baseline': 'middle', 'font-size': '10px' }).text((0, _helpers_calc.round_value)(ref_symbols_params[ref_symbols_params.length - 1].value[0], rounding_precision).toLocaleString());\n\n legend_root.call(drag_legend_func(legend_root));\n\n legend_root.append('g').insert('text').attrs({\n id: 'legend_bottom_note',\n x: xpos + space_elem,\n y: last_pos + 2 * space_elem\n }).styles({\n 'font-size': '11px',\n 'font-family': 'verdana'\n }).text(note_bottom != null ? note_bottom : '');\n make_underlying_rect(legend_root, rect_under_legend, rect_fill_value);\n // legend_root.select('#legendtitle').text(title || \"\");\n make_legend_context_menu(legend_root, layer);\n return legend_root;\n}\n\n/**\n* Function computing the size of the rectangle to be put under the legend\n* (called on each change modifying the size of the legend box,\n* eg. longer title, switching to nested symbols, etc..)\n*\n*/\nfunction make_underlying_rect(legend_root, under_rect, fill) {\n under_rect.attrs({ width: 0, height: 0 });\n var bboxLegend = get_bounding_rect(legend_root.node());\n var translate = legend_root.attr('transform');\n\n translate = translate ? translate.split('translate(')[1].split(')')[0].split(/[ ,]+/).map(function (d) {\n return +d;\n }) : [0, 0];\n if (translate.length === 1) translate = [translate[0], 0];\n\n var x_top_left = bboxLegend.x - 12.5 - translate[0];\n var y_top_left = bboxLegend.y - 12.5 - translate[1];\n var x_top_right = bboxLegend.x + bboxLegend.width + 12.5 - translate[0];\n var y_bottom_left = bboxLegend.y + bboxLegend.height + 12.5 - translate[1];\n var rect_height = y_bottom_left - y_top_left;\n var rect_width = x_top_right - x_top_left;\n\n under_rect.attrs({\n id: 'under_rect',\n x: x_top_left,\n y: y_top_left,\n height: rect_height,\n width: rect_width\n });\n\n if (!fill || !fill.color || !fill.opacity) {\n under_rect.styles({ fill: 'green', 'fill-opacity': 0 });\n legend_root.attr('visible_rect', 'false').on('mouseover', function () {\n under_rect.style('fill-opacity', 0.1);\n }).on('mouseout', function () {\n under_rect.style('fill-opacity', 0);\n });\n } else {\n under_rect.styles({ fill: fill.color, 'fill-opacity': fill.opacity });\n legend_root.attr('visible_rect', 'true').on('mouseover', null).on('mouseout', null);\n }\n}\n\nfunction createLegend_symbol(layer, field, title, subtitle) {\n var nested = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'false';\n var join_line = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 'false';\n var rect_fill_value = arguments[6];\n var rounding_precision = arguments[7];\n var note_bottom = arguments[8];\n var options = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : {};\n\n var parent = options.parent || window.map;\n var space_elem = 18;\n var boxgap = 4;\n var xpos = 30;\n var ypos = 30;\n var y_pos2 = ypos + space_elem * 1.5;\n var tmp_class_name = 'legend legend_feature lgdf_' + _app.layer_to_id.get(layer);\n var symbol_type = data_manager.current_layers[layer].symbol;\n\n var color_symb_lgd = data_manager.current_layers[layer].renderer === 'PropSymbolsChoro' || data_manager.current_layers[layer].renderer === 'PropSymbolsTypo' || data_manager.current_layers[layer].fill_color.two !== undefined || data_manager.current_layers[layer].fill_color.random !== undefined ? '#FFF' : data_manager.current_layers[layer].fill_color.single;\n\n var stroke_color = data_manager.current_layers[layer].renderer === 'PropSymbolsChoro' || data_manager.current_layers[layer].renderer === 'PropSymbolsTypo' || data_manager.current_layers[layer].fill_color.two !== undefined || data_manager.current_layers[layer].fill_color.random !== undefined ? 'rgb(0, 0, 0)' : map.select('#' + _app.layer_to_id.get(layer)).select(symbol_type).style('stroke');\n\n var ref_symbols = document.getElementById(_app.layer_to_id.get(layer)).getElementsByTagName(symbol_type);\n var type_param = symbol_type === 'circle' ? 'r' : 'width';\n var z_scale = +d3.zoomTransform(map.node()).k;\n\n var _data_manager$current = _slicedToArray(data_manager.current_layers[layer].size, 2),\n ref_value = _data_manager$current[0],\n ref_size = _data_manager$current[1];\n\n var propSize = new _helpers_calc.PropSizer(ref_value, ref_size, symbol_type);\n\n if (!data_manager.current_layers[layer].size_legend_symbol) {\n var non_empty = Array.prototype.filter.call(ref_symbols, function (d) {\n if (d[type_param].baseVal.value != 0) return d[type_param].baseVal.value;\n });\n var size_max = +non_empty[0].getAttribute(type_param),\n size_min = +non_empty[non_empty.length - 1].getAttribute(type_param),\n val_max = (0, _helpers_math.Mabs)(+non_empty[0].__data__.properties[field]),\n val_min = (0, _helpers_math.Mabs)(+non_empty[non_empty.length - 1].__data__.properties[field]);\n var r = (0, _helpers_math.Mmax)((0, _helpers_calc.get_nb_decimals)(val_max), (0, _helpers_calc.get_nb_decimals)(val_min)),\n diff_size = (0, _helpers_math.Msqrt)(size_max) - (0, _helpers_math.Msqrt)(size_min),\n size_interm1 = (0, _helpers_math.Msqrt)(size_min) + diff_size / 3,\n size_interm2 = (0, _helpers_math.Mpow)(size_interm1 + diff_size / 3, 2);\n size_interm1 = (0, _helpers_math.Mpow)(size_interm1, 2);\n data_manager.current_layers[layer].size_legend_symbol = [{ value: val_max }, { value: (0, _helpers_calc.round_value)(propSize.get_value(size_interm2), r) }, { value: (0, _helpers_calc.round_value)(propSize.get_value(size_interm1), r) }, { value: val_min }];\n if (data_manager.current_layers[layer].size_legend_symbol[0].value - data_manager.current_layers[layer].size_legend_symbol[1].value > 1) {\n rounding_precision = 0;\n } else {\n rounding_precision = (0, _helpers_math.Mmax)((0, _helpers_calc.get_nb_decimals)(val_max), (0, _helpers_calc.get_nb_decimals)(val_min));\n }\n }\n\n var t = data_manager.current_layers[layer].size_legend_symbol;\n var ref_symbols_params = [{ size: propSize.scale(t[0].value) * z_scale, value: t[0].value }, { size: propSize.scale(t[1].value) * z_scale, value: t[1].value }, { size: propSize.scale(t[2].value) * z_scale, value: t[2].value }, { size: propSize.scale(t[3].value) * z_scale, value: t[3].value }];\n if (ref_symbols_params[3].value === 0) {\n ref_symbols_params.pop();\n }\n if (ref_symbols_params[2].value === 0) {\n ref_symbols_params.pop();\n }\n\n var legend_root = parent.insert('g').styles({\n cursor: 'grab',\n 'font-size': '11px',\n 'font-family': 'verdana'\n }).attrs({\n id: 'legend_root_symbol',\n class: tmp_class_name,\n transform: 'translate(0,0)',\n layer_name: layer,\n nested: nested,\n join_line: join_line,\n rounding_precision: rounding_precision,\n layer_field: field\n });\n\n var rect_under_legend = legend_root.insert('rect');\n legend_root.insert('text').attrs(subtitle != '' ? { 'id': 'legendtitle', x: xpos + space_elem, y: ypos } : { 'id': 'legendtitle', x: xpos + space_elem, y: ypos + 15 }).styles({\n 'font-size': '12px',\n 'font-family': 'verdana',\n 'font-weight': 'bold'\n }).text(title);\n\n legend_root.insert('text').attrs({ id: 'legendsubtitle', x: xpos + space_elem, y: ypos + 15 }).styles({\n 'font-size': '12px',\n 'font-family': 'verdana',\n 'font-style': 'italic'\n }).text(subtitle);\n\n var legend_elems = legend_root.selectAll('.legend').append('g').data(ref_symbols_params).enter().insert('g').attr('class', function (d, i) {\n return 'lg legend_' + i;\n });\n\n var max_size = ref_symbols_params[0].size * 2;\n var last_size = 0;\n\n if (symbol_type === 'rect') {\n y_pos2 -= max_size / 4;\n }\n\n var last_pos = y_pos2;\n\n if (nested === 'false') {\n if (symbol_type === 'circle') {\n legend_elems.append('circle').styles({ fill: color_symb_lgd, stroke: stroke_color, 'fill-opacity': 1 }).attrs(function (d, i) {\n last_pos = i * boxgap + d.size + last_pos + last_size;\n last_size = d.size;\n return {\n cx: xpos + space_elem + boxgap + max_size / 4,\n cy: last_pos,\n r: d.size\n };\n });\n\n last_pos = y_pos2;last_size = 0;\n legend_elems.append('text').attrs(function (d, i) {\n last_pos = i * boxgap + d.size + last_pos + last_size;\n last_size = d.size;\n return {\n x: xpos + space_elem + boxgap + max_size * 0.75 + 7,\n y: last_pos + i * 2 / 3\n };\n }).styles({ 'alignment-baseline': 'middle', 'font-size': '10px' }).text(function (d) {\n return (0, _helpers_calc.round_value)(d.value, rounding_precision).toLocaleString();\n });\n } else if (symbol_type === 'rect') {\n legend_elems.append('rect').styles({ fill: color_symb_lgd, stroke: stroke_color, 'fill-opacity': 1 }).attrs(function (d, i) {\n last_pos = i * boxgap + d.size / 2 + last_pos + last_size;\n last_size = d.size;\n return {\n x: xpos + space_elem + boxgap + max_size / 4 - last_size / 2,\n y: last_pos,\n width: last_size,\n height: last_size\n };\n });\n\n last_pos = y_pos2;last_size = 0;\n var x_text_pos = xpos + space_elem + boxgap + max_size / 2 + 7;\n legend_elems.append('text').attrs(function (d, i) {\n last_pos = i * boxgap + d.size / 2 + last_pos + last_size;\n last_size = d.size;\n return { x: x_text_pos, y: last_pos + d.size * 0.51 };\n }).styles({ 'alignment-baseline': 'middle', 'font-size': '10px' }).text(function (d) {\n return (0, _helpers_calc.round_value)(d.value, rounding_precision).toLocaleString();\n });\n }\n } else if (nested === 'true') {\n var dist_to_title = 30;\n if (symbol_type === 'circle') {\n if (join_line === 'true') {\n legend_elems.append('line').attrs(function (d) {\n return {\n x1: xpos + space_elem + boxgap + max_size / 4 - d.size,\n x2: xpos + space_elem + boxgap + max_size * 0.75 + 6.5,\n y1: ypos + dist_to_title + max_size - d.size + 0.5,\n y2: ypos + dist_to_title + max_size - d.size + 0.5,\n stroke: '#3f3f3f',\n 'stroke-width': 0.8\n };\n });\n legend_elems.append('circle').attrs(function (d) {\n return {\n cx: xpos + space_elem + boxgap + max_size / 4,\n cy: ypos + dist_to_title + max_size - d.size,\n r: d.size\n };\n }).styles({ fill: color_symb_lgd, stroke: stroke_color, 'fill-opacity': 1 });\n last_pos = y_pos2;last_size = 0;\n legend_elems.append('text').attrs(function (d) {\n return {\n x: xpos + space_elem + boxgap + max_size * 0.75 + 7,\n y: ypos + dist_to_title + 3 + max_size - d.size\n };\n }).styles({ 'alignment-baseline': 'middle', 'font-size': '10px' }).text(function (d) {\n return (0, _helpers_calc.round_value)(d.value, rounding_precision).toLocaleString();\n });\n } else {\n legend_elems.append('circle').attrs(function (d) {\n return {\n cx: xpos + space_elem + boxgap + max_size / 4,\n cy: ypos + dist_to_title + max_size - d.size,\n r: d.size\n };\n }).styles({ fill: color_symb_lgd, stroke: stroke_color, 'fill-opacity': 1 });\n last_pos = y_pos2;last_size = 0;\n legend_elems.append('text').attrs(function (d) {\n return {\n x: xpos + space_elem + boxgap + max_size * 0.75 + 7,\n y: ypos + dist_to_title + 1 + max_size - d.size * 2\n };\n }).styles({ 'alignment-baseline': 'middle', 'font-size': '10px' }).text(function (d) {\n return (0, _helpers_calc.round_value)(d.value, rounding_precision).toLocaleString();\n });\n }\n last_pos = ypos + 20 + max_size;\n } else if (symbol_type === 'rect') {\n legend_elems.append('rect').attrs(function (d) {\n return {\n x: xpos + space_elem + boxgap,\n y: ypos + dist_to_title + max_size / 2 - d.size,\n width: d.size,\n height: d.size\n };\n }).styles({ fill: color_symb_lgd, stroke: stroke_color, 'fill-opacity': 1 });\n last_pos = y_pos2;last_size = 0;\n legend_elems.append('text').attrs(function (d) {\n return {\n x: xpos + space_elem + boxgap + max_size / 2 + 7,\n y: ypos + dist_to_title + 1 + max_size / 2 - d.size\n };\n }).styles({ 'alignment-baseline': 'middle', 'font-size': '10px' }).text(function (d) {\n return (0, _helpers_calc.round_value)(d.value, rounding_precision).toLocaleString();\n });\n last_pos = ypos + 20 + max_size / 2;\n }\n }\n\n if (data_manager.current_layers[layer].break_val !== undefined) {\n var bottom_colors = legend_root.append('g');\n bottom_colors.insert('text').attrs({\n id: 'col1_txt',\n x: xpos + space_elem,\n y: last_pos + 1.75 * space_elem\n }).styles({ 'alignment-baseline': 'middle', 'font-size': '10px' }).html('< ' + data_manager.current_layers[layer].break_val.toLocaleString());\n bottom_colors.insert('rect').attrs({\n id: 'col1',\n x: xpos + space_elem,\n y: last_pos + 2 * space_elem,\n width: space_elem,\n height: space_elem\n }).style('fill', data_manager.current_layers[layer].fill_color.two[0]);\n bottom_colors.insert('text').attrs({\n id: 'col1_txt',\n x: xpos + 3 * space_elem,\n y: last_pos + 1.75 * space_elem\n }).styles({ 'alignment-baseline': 'middle', 'font-size': '10px' }).html('> ' + data_manager.current_layers[layer].break_val.toLocaleString());\n bottom_colors.insert('rect').attrs({\n id: 'col2',\n x: xpos + 3 * space_elem,\n y: last_pos + 2 * space_elem,\n width: space_elem,\n height: space_elem\n }).style('fill', data_manager.current_layers[layer].fill_color.two[1]);\n last_pos += 2.5 * space_elem;\n }\n\n legend_root.append('g').insert('text').attrs({\n id: 'legend_bottom_note',\n x: xpos + space_elem,\n y: last_pos + 2 * space_elem\n }).styles({\n 'font-size': '11px',\n 'font-family': 'verdana'\n }).text(note_bottom != null ? note_bottom : '');\n\n legend_root.call(drag_legend_func(legend_root));\n make_underlying_rect(legend_root, rect_under_legend, rect_fill_value);\n if (parent == map) make_legend_context_menu(legend_root, layer);\n return legend_root;\n}\n\nfunction createLegend_line_symbol(layer, field, title, subtitle, rect_fill_value, rounding_precision, note_bottom) {\n var space_elem = 18,\n boxgap = 12,\n xpos = 30,\n ypos = 30,\n y_pos2 = ypos + space_elem,\n tmp_class_name = 'legend legend_feature lgdf_' + _app.layer_to_id.get(layer);\n\n var ref_symbols = document.getElementById(_app.layer_to_id.get(layer)).getElementsByTagName('path');\n var type_param = 'strokeWidth';\n\n var non_empty = Array.prototype.filter.call(ref_symbols, function (d) {\n return d.style[type_param] !== '0';\n }),\n size_max = +non_empty[0].style[type_param],\n size_min = +non_empty[non_empty.length - 1].style[type_param],\n val_max = (0, _helpers_math.Mabs)(+non_empty[0].__data__.properties[field]),\n val_min = (0, _helpers_math.Mabs)(+non_empty[non_empty.length - 1].__data__.properties[field]),\n diff_size = size_max - size_min,\n diff_val = val_max - val_min,\n val_interm1 = val_min + diff_val / 3,\n val_interm2 = val_interm1 + diff_val / 3,\n size_interm1 = size_min + diff_size / 3,\n size_interm2 = size_interm1 + diff_size / 3,\n ref_symbols_params = [{ size: size_max, value: val_max }, { size: size_interm2, value: val_interm2 }, { size: size_interm1, value: val_interm1 }, { size: size_min, value: val_min }];\n\n if (rounding_precision === undefined) {\n rounding_precision = get_lgd_display_precision(ref_symbols_params.map(function (d) {\n return d.value;\n }));\n }\n\n var legend_root = map.insert('g').attrs({\n id: 'legend_root_lines_symbol',\n class: tmp_class_name,\n transform: 'translate(0,0)',\n rounding_precision: rounding_precision,\n layer_field: field,\n layer_name: layer\n }).styles({\n cursor: 'grab',\n 'font-size': '11px',\n 'font-family': 'verdana'\n });\n\n var rect_under_legend = legend_root.insert('rect');\n\n legend_root.insert('text').attrs(subtitle != '' ? { id: 'legendtitle', x: xpos + space_elem, y: ypos } : { id: 'legendtitle', x: xpos + space_elem, y: ypos + 15 }).styles({\n 'font-size': '12px',\n 'font-family': 'verdana',\n 'font-weight': 'bold'\n }).text(title || 'Title');\n\n legend_root.insert('text').attrs({ id: 'legendsubtitle', x: xpos + space_elem, y: ypos + 15 }).styles({\n 'font-size': '12px',\n 'font-family': 'verdana',\n 'font-style': 'italic'\n }).text(subtitle);\n\n var legend_elems = legend_root.selectAll('.legend').append('g').data(ref_symbols_params).enter().insert('g').attr('class', function (d, i) {\n return 'lg legend_' + i;\n });\n\n var last_size = 0;\n var last_pos = y_pos2;\n var color = data_manager.current_layers[layer].fill_color.single;\n var xrect = xpos + space_elem;\n\n legend_elems.append('rect').styles({ fill: color, stroke: 'rgb(0, 0, 0)', 'fill-opacity': 1, 'stroke-width': 0 }).attrs(function (d) {\n last_pos = boxgap + last_pos + last_size;\n last_size = d.size;\n return { x: xrect, y: last_pos, width: 45, height: d.size };\n });\n\n last_pos = y_pos2;last_size = 0;\n var x_text_pos = xrect + 75;\n legend_elems.append('text').attrs(function (d) {\n last_pos = boxgap + last_pos + d.size;\n return { x: x_text_pos, y: last_pos + 4 - d.size / 2 };\n }).styles({ 'alignment-baseline': 'middle', 'font-size': '10px' }).text(function (d) {\n return (0, _helpers_calc.round_value)(d.value, rounding_precision).toLocaleString();\n });\n\n legend_root.append('g').insert('text').attrs({\n id: 'legend_bottom_note',\n x: xpos + space_elem,\n y: last_pos + space_elem\n }).styles({\n 'font-size': '11px',\n 'font-family': 'verdana'\n }).text(note_bottom != null ? note_bottom : '');\n\n legend_root.call(drag_legend_func(legend_root));\n make_underlying_rect(legend_root, rect_under_legend, rect_fill_value);\n legend_root.select('#legendtitle').text(title || '');\n make_legend_context_menu(legend_root, layer);\n return legend_root;\n}\n\nvar get_lgd_display_precision = function get_lgd_display_precision(breaks) {\n // Set rounding precision to 0 if they are all integers :\n if (breaks.filter(function (b) {\n return (b | 0) === b;\n }).length === breaks.length) {\n return 0;\n }\n // Compute the difference between each break to set\n // ... the rounding precision in order to differenciate each class :\n var diff = void 0;\n for (var i = 0; i < breaks.length - 1; i++) {\n var d = +breaks[i + 1] - +breaks[i];\n if (!diff) diff = d;else if (d < diff) diff = d;\n }\n if (diff > 1 || diff > 0.1) {\n return 1;\n } else if (diff > 0.01) {\n return 2;\n } else if (diff > 0.001) {\n return 3;\n } else if (diff > 0.0001) {\n return 4;\n } else if (diff > 0.00001) {\n return 5;\n } else if (diff > 0.000001) {\n return 6;\n } else if (diff > 0.0000001) {\n return 7;\n }\n return undefined;\n};\n\nfunction createLegend_choro(layer, field, title, subtitle) {\n var box_gap = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;\n var rect_fill_value = arguments[5];\n var rounding_precision = arguments[6];\n var no_data_txt = arguments[7];\n var note_bottom = arguments[8];\n\n var boxheight = 18,\n boxwidth = 18,\n xpos = 30,\n ypos = 30,\n y_pos2 = ypos + boxheight * 1.8,\n tmp_class_name = 'legend legend_feature lgdf_' + _app.layer_to_id.get(layer);\n\n var boxgap = +box_gap;\n\n var last_pos = null,\n\n // nb_class,\n data_colors_label = void 0;\n\n if (data_manager.current_layers[layer].renderer.indexOf('Categorical') > -1 || data_manager.current_layers[layer].renderer.indexOf('PropSymbolsTypo') > -1) {\n data_colors_label = [];\n data_manager.current_layers[layer].color_map.forEach(function (v) {\n data_colors_label.push({ value: v[1], color: v[0] });\n });\n // nb_class = data_manager.current_layers[layer].color_map.size;\n } else if (data_manager.current_layers[layer].renderer.indexOf('TypoSymbols') > -1) {\n data_colors_label = [];\n data_manager.current_layers[layer].symbols_map.forEach(function (v) {\n data_colors_label.push({ value: v[2], image: v[0] });\n });\n // nb_class = data_manager.current_layers[layer].symbols_map.size;\n } else {\n data_colors_label = data_manager.current_layers[layer].colors_breaks.map(function (obj) {\n return { value: obj[0], color: obj[1] };\n });\n // nb_class = data_manager.current_layers[layer].colors_breaks.length;\n if (rounding_precision === undefined) {\n var breaks = data_manager.current_layers[layer].options_disc.breaks;\n rounding_precision = get_lgd_display_precision(breaks);\n }\n }\n\n var legend_root = map.insert('g').styles({ cursor: 'grab', 'font-size': '11px', 'font-family': 'verdana' }).attrs({\n id: 'legend_root',\n class: tmp_class_name,\n layer_field: field,\n transform: 'translate(0,0)',\n boxgap: boxgap,\n rounding_precision: rounding_precision,\n layer_name: layer\n });\n\n var rect_under_legend = legend_root.insert('rect');\n\n legend_root.insert('text').attrs(subtitle != '' ? { id: 'legendtitle', x: xpos + boxheight, y: ypos } : { id: 'legendtitle', x: xpos + boxheight, y: ypos + 15 }).styles({\n 'font-size': '12px',\n 'font-family': 'verdana',\n 'font-weight': 'bold'\n }).text(title || '');\n\n legend_root.insert('text').attrs({ id: 'legendsubtitle', x: xpos + boxheight, y: ypos + 15 }).styles({\n 'font-size': '12px',\n 'font-family': 'verdana',\n 'font-style': 'italic'\n }).text(subtitle);\n\n var legend_elems = legend_root.selectAll('.legend').append('g').data(data_colors_label).enter().insert('g').attr('class', function (d, i) {\n return 'lg legend_' + i;\n });\n\n if (data_manager.current_layers[layer].renderer.indexOf('TypoSymbols') === -1) {\n legend_elems.append('rect').attrs(function (d, i) {\n last_pos = y_pos2 + i * boxgap + i * boxheight;\n return {\n x: xpos + boxwidth,\n y: last_pos,\n width: boxwidth,\n height: boxheight\n };\n }).styles(function (d) {\n return { fill: d.color, stroke: d.color };\n });\n } else {\n legend_elems.append('image').attrs(function (d, i) {\n return {\n x: xpos + boxwidth,\n y: y_pos2 + i * boxgap + i * boxheight,\n width: boxwidth,\n height: boxheight,\n 'xlink:href': d.image\n };\n });\n }\n\n if (data_manager.current_layers[layer].renderer.indexOf('Choropleth') > -1 || data_manager.current_layers[layer].renderer.indexOf('PropSymbolsChoro') > -1 || data_manager.current_layers[layer].renderer.indexOf('Gridded') > -1 || data_manager.current_layers[layer].renderer.indexOf('Stewart') > -1) {\n var tmp_pos = void 0;\n legend_elems.append('text').attrs(function (d, i) {\n tmp_pos = y_pos2 + i * boxheight + i * boxgap;\n return { x: xpos + boxwidth * 2 + 10, y: tmp_pos };\n }).styles({ 'alignment-baseline': 'middle', 'font-size': '10px' }).text(function (d) {\n return (0, _helpers_calc.round_value)(+d.value.split(' - ')[1], rounding_precision).toLocaleString();\n });\n\n legend_root.insert('text').attrs({\n id: 'lgd_choro_min_val',\n x: xpos + boxwidth * 2 + 10,\n y: tmp_pos + boxheight + boxgap\n }).styles({ 'alignment-baseline': 'middle', 'font-size': '10px' }).text(function () {\n return (0, _helpers_calc.round_value)(data_colors_label[data_colors_label.length - 1].value.split(' - ')[0], rounding_precision).toLocaleString();\n });\n } else {\n legend_elems.append('text').attr('x', xpos + boxwidth * 2 + 10).attr('y', function (d, i) {\n return y_pos2 + i * boxheight + i * boxgap + boxheight * 2 / 3;\n }).styles({ 'alignment-baseline': 'middle', 'font-size': '10px' }).text(function (d) {\n return d.value;\n });\n }\n if (data_manager.current_layers[layer].options_disc && data_manager.current_layers[layer].options_disc.no_data) {\n var gp_no_data = legend_root.append('g');\n gp_no_data.append('rect').attrs({\n x: xpos + boxheight,\n y: last_pos + 2 * boxheight,\n width: boxwidth,\n height: boxheight\n }).styles({\n fill: data_manager.current_layers[layer].options_disc.no_data,\n stroke: data_manager.current_layers[layer].options_disc.no_data\n });\n\n gp_no_data.append('text').attrs({ x: xpos + boxwidth * 2 + 10, y: last_pos + 2.7 * boxheight, id: 'no_data_txt' }).styles({ 'alignment-baseline': 'middle', 'font-size': '10px' }).text(no_data_txt != null ? no_data_txt : 'No data');\n\n last_pos += 2 * boxheight;\n }\n\n legend_root.append('g').insert('text').attrs({ id: 'legend_bottom_note', x: xpos + boxheight, y: last_pos + 2 * boxheight }).styles({\n 'font-size': '11px',\n 'font-family': 'verdana'\n }).text(note_bottom != null ? note_bottom : '');\n legend_root.call(drag_legend_func(legend_root));\n make_underlying_rect(legend_root, rect_under_legend, rect_fill_value);\n make_legend_context_menu(legend_root, layer);\n return legend_root;\n}\n\nfunction createLegend_choro_horizontal(layer, field, title, subtitle) {\n var box_gap = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;\n var rect_fill_value = arguments[5];\n var rounding_precision = arguments[6];\n var no_data_txt = arguments[7];\n var note_bottom = arguments[8];\n\n var boxheight = 16,\n boxwidth = 42,\n xpos = 30,\n ypos = 30,\n y_pos2 = ypos + boxheight * 1.8,\n tmp_class_name = 'legend legend_feature lgdf_' + _app.layer_to_id.get(layer);\n\n var boxgap = +box_gap;\n\n var data_colors_label = data_manager.current_layers[layer].colors_breaks.map(function (obj) {\n return { value: obj[0], color: obj[1] };\n }).reverse();\n // const nb_class = data_colors_label;\n\n if (rounding_precision === undefined) {\n rounding_precision = get_lgd_display_precision(data_manager.current_layers[layer].options_disc.breaks);\n }\n\n var legend_root = map.insert('g').styles({ cursor: 'grab', 'font-size': '11px', 'font-family': 'verdana' }).attrs({\n id: 'legend_root_horiz',\n class: tmp_class_name,\n layer_field: field,\n transform: 'translate(0,0)',\n boxgap: boxgap,\n rounding_precision: rounding_precision,\n layer_name: layer\n });\n\n var rect_under_legend = legend_root.insert('rect');\n\n var attrs_title = subtitle !== '' ? { id: 'legendtitle', x: xpos + boxwidth, y: ypos, 'text-anchor': 'middle' } : { id: 'legendtitle', x: xpos + boxwidth, y: ypos + 15, 'text-anchor': 'middle' };\n\n var lgd_title = legend_root.insert('text').styles({\n 'font-size': '12px',\n 'font-family': 'verdana',\n 'font-weight': 'bold'\n }).attrs(attrs_title);\n // .text(title || '');\n\n var lgd_subtitle = legend_root.insert('text').styles({\n 'font-size': '12px',\n 'font-family': 'verdana',\n 'font-style': 'italic'\n }).attrs({ id: 'legendsubtitle', x: xpos + boxwidth, y: ypos + 15, 'text-anchor': 'middle' });\n // .text(subtitle);\n\n var legend_elems = legend_root.selectAll('.legend').append('g').data(data_colors_label).enter().insert('g').attr('class', function (d, i) {\n return 'lg legend_' + i;\n });\n\n legend_elems.append('rect').attr('x', function (d, i) {\n return xpos + (boxgap + boxwidth) * i;\n }).attr('y', y_pos2).attrs({ width: boxwidth, height: boxheight }).styles(function (d) {\n return { fill: d.color, stroke: d.color };\n });\n\n legend_elems.append('text').attr('x', function (d, i) {\n return xpos + (boxgap + boxwidth) * i;\n }).attr('y', y_pos2 + boxheight + 20).attr('text-anchor', 'middle').styles({ 'font-size': '10px' }).text(function (d) {\n return (0, _helpers_calc.round_value)(+d.value.split(' - ')[0], rounding_precision).toLocaleString();\n });\n\n legend_root.insert('text').attrs({\n id: 'lgd_choro_min_val',\n x: xpos + (boxgap + boxwidth) * data_colors_label.length,\n y: y_pos2 + boxheight + 20,\n 'text-anchor': 'middle'\n }).styles({ 'font-size': '10px' }).text(function () {\n return (0, _helpers_calc.round_value)(data_colors_label[data_colors_label.length - 1].value.split(' - ')[1], rounding_precision).toLocaleString();\n });\n\n if (data_manager.current_layers[layer].options_disc && data_manager.current_layers[layer].options_disc.no_data) {\n var gp_no_data = legend_root.append('g');\n gp_no_data.append('rect').attrs({\n x: xpos + boxwidth + (boxgap + boxwidth) * data_colors_label.length,\n y: y_pos2,\n width: boxwidth,\n height: boxheight\n }).styles({\n fill: data_manager.current_layers[layer].options_disc.no_data,\n stroke: data_manager.current_layers[layer].options_disc.no_data\n });\n\n gp_no_data.append('text').attrs({\n x: xpos + boxwidth / 2 + (boxgap + boxwidth) * (data_colors_label.length + 1),\n y: y_pos2 + boxheight + 20,\n id: 'no_data_txt',\n 'text-anchor': 'middle'\n }).styles({ 'font-size': '10px' }).text(no_data_txt != null ? no_data_txt : 'No data');\n }\n\n var bottom_note = legend_root.append('g').insert('text').attrs({\n id: 'legend_bottom_note',\n x: xpos + boxwidth,\n y: y_pos2 + boxheight + 40,\n 'text-anchor': 'middle'\n }).styles({\n 'font-size': '11px',\n 'font-family': 'verdana'\n });\n\n // Center the title and the subtitle:\n var bb = get_bounding_rect(legend_root.node());\n var x_middle = bb.x + bb.width / 2;\n lgd_title.attr('x', x_middle).text(title || '');\n lgd_subtitle.attr('x', x_middle).text(subtitle);\n bottom_note.attr('x', x_middle).text(note_bottom != null ? note_bottom : '');\n legend_root.call(drag_legend_func(legend_root));\n make_underlying_rect(legend_root, rect_under_legend, rect_fill_value);\n make_legend_context_menu(legend_root, layer);\n return legend_root;\n}\n\nfunction display_box_value_symbol(layer_name) {\n var symbol_type = data_manager.current_layers[layer_name].symbol,\n field = data_manager.current_layers[layer_name].rendered_field,\n ref_symbols = document.getElementById(_app.layer_to_id.get(layer_name)).getElementsByTagName(symbol_type),\n type_param = symbol_type === 'circle' ? 'r' : 'width';\n var non_empty = Array.prototype.filter.call(ref_symbols, function (d) {\n if (d[type_param].baseVal.value != 0) return d[type_param].baseVal.value;\n });\n var val_max = (0, _helpers_math.Mabs)(+non_empty[0].__data__.properties[field]);\n\n var redraw_sample_legend = function () {\n var legend_node = svg_map.querySelector(['#legend_root_symbol.lgdf_', _app.layer_to_id.get(layer_name)].join(''));\n var rendered_field = data_manager.current_layers[layer_name].rendered_field;\n var nested = legend_node.getAttribute('nested');\n var join_line = legend_node.getAttribute('join_line');\n var rounding_precision = legend_node.getAttribute('rounding_precision');\n var lgd_title = legend_node.querySelector('#legendtitle').innerHTML,\n lgd_subtitle = legend_node.querySelector('#legendsubtitle').innerHTML,\n note = legend_node.querySelector('#legend_bottom_note').innerHTML;\n return function (values) {\n if (values) {\n data_manager.current_layers[layer_name].size_legend_symbol = values.sort(function (a, b) {\n return b.value - a.value;\n });\n val1.property('value', values[0].value);\n val2.property('value', values[1].value);\n val3.property('value', values[2].value);\n val4.property('value', values[3].value);\n }\n sample_svg.selectAll('g').remove();\n createLegend_symbol(layer_name, rendered_field, lgd_title, lgd_subtitle, nested, join_line, {}, rounding_precision, note, { parent: sample_svg });\n sample_svg.select('g').select('#under_rect').remove();\n sample_svg.select('#legend_root_symbol').on('.drag', null);\n };\n }();\n\n var prom = (0, _dialogs.make_confirm_dialog2)('legend_symbol_values_box', layer_name + ' - ' + _tr('app_page.legend_symbol_values_box.title')).then(function (confirmed) {\n data_manager.current_layers[layer_name].size_legend_symbol = confirmed ? data_manager.current_layers[layer_name].size_legend_symbol : original_values;\n return Promise.resolve(confirmed);\n });\n\n var box_body = d3.select('.legend_symbol_values_box').select('.modal-content').style('width', '400px').select('.modal-body');\n box_body.append('p').style('text-align', 'center').insert('h3');\n // .html(_tr(\"app_page.legend_symbol_values_box.subtitle\"));\n var sample_svg = box_body.append('div').attr('id', 'sample_svg').style('float', 'left').append('svg').attrs({ width: 200, height: 300, id: 'svg_sample_legend' });\n\n var values_to_use = [].concat(data_manager.current_layers[layer_name].size_legend_symbol.map(function (f) {\n return (0, _helpers.cloneObj)(f);\n }));\n\n var _data_manager$current2 = _slicedToArray(data_manager.current_layers[layer_name].size, 2),\n ref_value = _data_manager$current2[0],\n ref_size = _data_manager$current2[1];\n\n var propSize = new _helpers_calc.PropSizer(ref_value, ref_size, symbol_type);\n var input_zone = box_body.append('div').styles({ float: 'right', top: '100px', right: '20px', position: 'relative' });\n var a = input_zone.append('p');\n var b = input_zone.append('p');\n var c = input_zone.append('p');\n var d = input_zone.append('p');\n var original_values = [].concat(values_to_use);\n var val1 = a.insert('input').style('width', '80px').attrs({ class: 'without_spinner', type: 'number', max: val_max }).property('value', values_to_use[0].value).on('change', function () {\n var val = +this.value;\n if (isNaN(val)) return;\n values_to_use[0] = { size: propSize.scale(val), value: val };\n val2.attr('max', val);\n redraw_sample_legend(values_to_use);\n });\n var val2 = b.insert('input').style('width', '80px').attrs({ class: 'without_spinner', type: 'number', max: values_to_use[0].value, min: values_to_use[2] }).property('value', values_to_use[1].value).on('change', function () {\n var val = +this.value;\n if (isNaN(val)) return;\n values_to_use[1] = { size: propSize.scale(val), value: val };\n val1.attr('min', val);\n val3.attr('max', val);\n redraw_sample_legend(values_to_use);\n });\n var val3 = c.insert('input').style('width', '80px').attrs({ class: 'without_spinner', type: 'number', max: values_to_use[1].value, min: values_to_use[3].value }).property('value', values_to_use[2].value).on('change', function () {\n var val = +this.value;\n if (isNaN(val)) return;\n values_to_use[2] = { size: propSize.scale(val), value: val };\n val2.attr('min', val);\n val4.attr('max', val);\n redraw_sample_legend(values_to_use);\n });\n var val4 = d.insert('input').style('width', '80px').attrs({ class: 'without_spinner', type: 'number', min: 0, max: values_to_use[2].value }).property('value', values_to_use[3].value).on('change', function () {\n var val = +this.value;\n if (isNaN(val)) return;\n values_to_use[3] = { size: propSize.scale(val), value: val };\n val3.attr('min', val);\n redraw_sample_legend(values_to_use);\n });\n box_body.append('div').styles({ clear: 'both', 'text-align': 'center' }).append('p').styles({ 'text-align': 'center' }).insert('span').attrs({ class: 'button_st3' }).html(_tr('app_page.legend_symbol_values_box.reset')).on('click', function () {\n data_manager.current_layers[layer_name].size_legend_symbol = undefined;\n redraw_sample_legend(original_values);\n });\n\n redraw_sample_legend();\n return prom;\n}\n\n// function createlegendEditBox_symbol(legend_id, layer_name) {\n// function bind_selections() {\n// box_class = [layer_id, '_legend_popup'].join('');\n// legend_node = svg_map.querySelector(['#', legend_id, '.lgdf_', layer_id].join(''));\n// title_content = legend_node.querySelector('#legendtitle');\n// subtitle_content = legend_node.querySelector('#legendsubtitle');\n// note_content = legend_node.querySelector('#legend_bottom_note');\n// ratio_waffle_txt = legend_node.querySelector('#ratio_txt');\n// legend_node_d3 = d3.select(legend_node);\n// legend_boxes = legend_node_d3.selectAll(['#', legend_id, ' .lg'].join('')).select('text');\n// }\n// const layer_id = _app.layer_to_id.get(layer_name);\n// const type_symbol = data_manager.current_layers[layer_name].symbol;\n// let box_class,\n// legend_node,\n// title_content,\n// subtitle_content,\n// note_content;\n// // let source_content;\n// let legend_node_d3,\n// // legend_boxes,\n// ratio_waffle_txt,\n// rect_fill_value = {},\n// original_rect_fill_value;\n//\n// bind_selections();\n// if (document.querySelector(`.${box_class}`)) document.querySelector(`.${box_class}`).remove();\n// const original_params = {\n// title_content: title_content.textContent,\n// y_title: title_content.y.baseVal.getItem(0).value,\n// subtitle_content: subtitle_content.textContent,\n// y_subtitle: subtitle_content.y.baseVal.getItem(0).value,\n// note_content: note_content.textContent,\n// ratio_waffle_txt: ratio_waffle_txt != null ? ratio_waffle_txt.textContent : null,\n// }; // , source_content: source_content.textContent ? source_content.textContent : \"\"\n//\n// if (legend_node.getAttribute('visible_rect') === 'true') {\n// rect_fill_value = {\n// color: legend_node.querySelector('#under_rect').style.fill,\n// opacity: legend_node.querySelector('#under_rect').style.fillOpacity,\n// };\n// original_rect_fill_value = cloneObj(rect_fill_value);\n// }\n//\n// make_confirm_dialog2(box_class, layer_name)\n// .then((confirmed) => {\n// if (!confirmed) {\n// title_content.textContent = original_params.title_content;\n// title_content.y.baseVal.getItem(0).value = original_params.y_title;\n// subtitle_content.textContent = original_params.subtitle_content;\n// subtitle_content.y.baseVal.getItem(0).value = original_params.y_subtitle;\n// note_content.textContent = original_params.note_content;\n// if (ratio_waffle_txt) {\n// ratio_waffle_txt.textContent = original_params.ratio_waffle_txt;\n// }\n// rect_fill_value = original_rect_fill_value;\n// }\n// make_underlying_rect(legend_node_d3,\n// legend_node_d3.select('#under_rect'),\n// rect_fill_value);\n// bind_selections();\n// });\n// const container = document.querySelectorAll(`.${box_class}`)[0];\n// const box_body = d3.select(container)\n// .select('.modal-dialog').style('width', '375px')\n// .select('.modal-body');\n// let current_nb_dec;\n//\n// box_body.append('p').style('text-align', 'center')\n// .insert('h3')\n// .html(_tr('app_page.legend_style_box.subtitle'));\n//\n// const a = box_body.append('p');\n// a.append('span')\n// .html(_tr('app_page.legend_style_box.lgd_title'));\n//\n// a.append('input')\n// .style('float', 'right')\n// .property('value', title_content.textContent)\n// .on('keyup', function () {\n// title_content.textContent = this.value;\n// });\n//\n// const b = box_body.append('p');\n// b.insert('span')\n// .html(_tr('app_page.legend_style_box.var_name'));\n// b.insert('input')\n// .style('float', 'right')\n// .property('value', subtitle_content.textContent)\n// .on('keyup', function () {\n// const empty = subtitle_content.textContent == '';\n// // Move up the title to its original position if the subtitle isn't empty :\n// if (empty && this.value != '') {\n// title_content.y.baseVal.getItem(0).value = title_content.y.baseVal.getItem(0).value - 15;\n// }\n// // Change the displayed content :\n// subtitle_content.textContent = this.value;\n// // Move down the title (if it wasn't already moved down), if the new subtitle is empty\n// if (!empty && subtitle_content.textContent == '') {\n// title_content.y.baseVal.getItem(0).value = title_content.y.baseVal.getItem(0).value + 15;\n// }\n// });\n//\n// const c = box_body.insert('p');\n// c.insert('span')\n// .html(_tr('app_page.legend_style_box.additionnal_notes'));\n// c.insert('input')\n// .styles({ float: 'right', 'font-family': '12px Gill Sans Extrabold, sans-serif' })\n// .property('value', note_content.textContent)\n// .on('keyup', function () {\n// note_content.textContent = this.value;\n// });\n//\n// if (ratio_waffle_txt) {\n// const d = box_body.insert('p');\n// d.insert('span')\n// .html(_tr('app_page.legend_style_box.ratio_waffle_txt'));\n// d.insert('input')\n// .styles({ float: 'right', 'font-family': '12px Gill Sans Extrabold, sans-serif' })\n// .property('value', ratio_waffle_txt.textContent)\n// .on('keyup', function () {\n// ratio_waffle_txt.textContent = this.value;\n// });\n// }\n//\n// const choice_break_value_section1 = box_body.insert('p')\n// .styles({ 'text-align': 'center', 'margin-top': '25px !important' });\n// choice_break_value_section1.append('span')\n// .attr('class', 'button_disc')\n// .styles({ cursor: 'pointer' })\n// .html(_tr('app_page.legend_style_box.choice_break_symbol'))\n// .on('click', () => {\n// container.modal.hide();\n// display_box_value_symbol(layer_name).then((confirmed) => {\n// container.modal.show();\n// if (confirmed) {\n// redraw_legends_symbols(svg_map.querySelector(\n// ['#legend_root_symbol.lgdf_', _app.layer_to_id.get(layer_name)].join('')));\n// }\n// });\n// });\n//\n// const current_state_nested = legend_node.getAttribute('nested') === 'true';\n// const gap_section = box_body.insert('p');\n// gap_section.append('input')\n// .style('margin-left', '0px')\n// .attrs({ id: 'style_lgd', type: 'checkbox' })\n// .property('checked', current_state_nested)\n// .on('change', function () {\n// if (this.checked) {\n// join_line_section.style('display', null);\n// } else {\n// join_line_section.style('display', 'none');\n// }\n// legend_node = svg_map.querySelector(['#legend_root_symbol.lgdf_', _app.layer_to_id.get(layer_name)].join(''));\n// const rendered_field = data_manager.current_layers[layer_name].rendered_field;\n// const nested = this.checked ? 'true' : 'false';\n// const join_line = join_line_section.select('input').property('checked') ? 'true' : 'false';\n// const rounding_precision = legend_node.getAttribute('rounding_precision');\n// const transform_param = legend_node.getAttribute('transform'),\n// lgd_title = legend_node.querySelector('#legendtitle').innerHTML,\n// lgd_subtitle = legend_node.querySelector('#legendsubtitle').innerHTML,\n// note = legend_node.querySelector('#legend_bottom_note').innerHTML;\n//\n// legend_node.remove();\n// createLegend_symbol(layer_name, rendered_field, lgd_title, lgd_subtitle, nested, join_line, rect_fill_value, rounding_precision, note);\n// bind_selections();\n// if (transform_param) {\n// svg_map.querySelector(['#legend_root_symbol.lgdf_', _app.layer_to_id.get(layer_name)].join('')).setAttribute('transform', transform_param);\n// }\n// });\n// gap_section.append('label')\n// .attrs({ for: 'style_lgd', class: 'i18n', 'data-i18n': '[html]app_page.legend_style_box.nested_symbols' })\n// .html(_tr('app_page.legend_style_box.nested_symbols'));\n//\n// const current_state_line = legend_node.getAttribute('join_line') === 'true';\n// const join_line_section = box_body.insert('p').style('display', current_state_nested && (type_symbol === 'circle') ? null : 'none');\n// join_line_section.append('input')\n// .style('margin-left', '0px')\n// .attrs({ id: 'style_lgd_join_line', type: 'checkbox' })\n// .property('checked', current_state_line)\n// .on('change', function () {\n// legend_node = svg_map.querySelector(['#legend_root_symbol.lgdf_', _app.layer_to_id.get(layer_name)].join(''));\n// const rendered_field = data_manager.current_layers[layer_name].rendered_field;\n// const nested = legend_node.getAttribute('nested') === 'true' ? 'true' : 'false';\n// const join_line = this.checked ? 'true' : 'false';\n// const rounding_precision = legend_node.getAttribute('rounding_precision');\n// const transform_param = legend_node.getAttribute('transform'),\n// lgd_title = legend_node.querySelector('#legendtitle').innerHTML,\n// lgd_subtitle = legend_node.querySelector('#legendsubtitle').innerHTML,\n// note = legend_node.querySelector('#legend_bottom_note').innerHTML;\n//\n// legend_node.remove();\n// createLegend_symbol(layer_name, rendered_field, lgd_title, lgd_subtitle, nested, join_line, rect_fill_value, rounding_precision, note);\n// bind_selections();\n// if (transform_param) {\n// svg_map.querySelector(['#legend_root_symbol.lgdf_', _app.layer_to_id.get(layer_name)].join('')).setAttribute('transform', transform_param);\n// }\n// });\n// join_line_section.append('label')\n// .attrs({ for: 'style_lgd_join_line', class: 'i18n', 'data-i18n': '[html]app_page.legend_style_box.join_line' })\n// .html(_tr('app_page.legend_style_box.join_line'));\n//\n//\n// const rectangle_options1 = box_body.insert('p');\n// rectangle_options1.insert('input')\n// .style('margin-left', '0px')\n// .attrs({\n// type: 'checkbox',\n// id: 'rect_lgd_checkbox',\n// })\n// .property('checked', rect_fill_value.color === undefined ? null : true)\n// .on('change', function () {\n// if (this.checked) {\n// rectangle_options2.style('display', '');\n// const r = document.getElementById('choice_color_under_rect');\n// rect_fill_value = !!r\n// ? { color: r.value, opacity: 1 }\n// : { color: '#ffffff', opacity: 1 };\n// } else {\n// rectangle_options2.style('display', 'none');\n// rect_fill_value = {};\n// }\n// make_underlying_rect(legend_node_d3,\n// legend_node_d3.select('#under_rect'),\n// rect_fill_value);\n// });\n// rectangle_options1.append('label')\n// .attrs({ for: 'rect_lgd_checkbox', class: 'i18n', 'data-i18n': '[html]app_page.legend_style_box.under_rectangle' })\n// .html(_tr('app_page.legend_style_box.under_rectangle'));\n//\n// let rectangle_options2 = rectangle_options1.insert('span')\n// .styles({ float: 'right', display: rect_fill_value.color === undefined ? 'none' : '' });\n// rectangle_options2.insert('input')\n// .attrs({\n// id: 'choice_color_under_rect',\n// type: 'color',\n// })\n// .property('value', rect_fill_value.color === undefined ? '#ffffff' : rgb2hex(rect_fill_value.color))\n// .on('change', function () {\n// rect_fill_value = { color: this.value, opacity: 1 };\n// make_underlying_rect(legend_node_d3, legend_node_d3.select('#under_rect'), rect_fill_value);\n// });\n// }\n\n// function createlegendEditBox_choro(legend_id, layer_name) {\n// function bind_selections() {\n// box_class = [layer_id, '_legend_popup'].join('');\n// legend_node = svg_map.querySelector(['#', legend_id, '.lgdf_', layer_id].join(''));\n// title_content = legend_node.querySelector('#legendtitle');\n// subtitle_content = legend_node.querySelector('#legendsubtitle');\n// note_content = legend_node.querySelector('#legend_bottom_note');\n// no_data_txt = legend_node.querySelector('#no_data_txt');\n// legend_node_d3 = d3.select(legend_node);\n// legend_boxes = legend_node_d3.selectAll(['#', legend_id, ' .lg'].join('')).select('text');\n// }\n// const layer_id = _app.layer_to_id.get(layer_name);\n//\n// let box_class,\n// legend_node,\n// title_content,\n// subtitle_content,\n// note_content,\n// source_content;\n// let legend_node_d3,\n// legend_boxes,\n// no_data_txt,\n// rect_fill_value = {},\n// original_rect_fill_value;\n//\n// bind_selections();\n// if (document.querySelector(`.${box_class}`)) document.querySelector(`.${box_class}`).remove();\n// const original_params = {\n// title_content: title_content.textContent,\n// y_title: title_content.y.baseVal.getItem(0).value,\n// subtitle_content: subtitle_content.textContent,\n// y_subtitle: subtitle_content.y.baseVal.getItem(0).value,\n// note_content: note_content.textContent,\n// no_data_txt: no_data_txt != null ? no_data_txt.textContent : null,\n// boxgap: +legend_node.getAttribute('boxgap'),\n// };\n//\n// if (legend_node.getAttribute('visible_rect') === 'true') {\n// rect_fill_value = {\n// color: legend_node.querySelector('#under_rect').style.fill,\n// opacity: legend_node.querySelector('#under_rect').style.fillOpacity,\n// };\n// original_rect_fill_value = cloneObj(rect_fill_value);\n// }\n//\n// make_confirm_dialog2(box_class, layer_name)\n// .then((confirmed) => {\n// if (!confirmed) {\n// title_content.textContent = original_params.title_content;\n// title_content.y.baseVal.getItem(0).value = original_params.y_title;\n// subtitle_content.textContent = original_params.subtitle_content;\n// subtitle_content.y.baseVal.getItem(0).value = original_params.y_subtitle;\n// note_content.textContent = original_params.note_content;\n// if (no_data_txt) {\n// no_data_txt.textContent = original_params.no_data_txt;\n// }\n// rect_fill_value = original_rect_fill_value;\n// }\n// make_underlying_rect(legend_node_d3,\n// legend_node_d3.select('#under_rect'),\n// rect_fill_value);\n// bind_selections();\n// });\n// const container = document.querySelectorAll(`.${box_class}`)[0];\n// const box_body = d3.select(container)\n// .select('.modal-dialog').style('width', '375px')\n// .select('.modal-body');\n// let current_nb_dec;\n//\n// box_body.append('p').style('text-align', 'center')\n// .insert('h3')\n// .html(_tr('app_page.legend_style_box.subtitle'));\n//\n// const a = box_body.append('p');\n// a.append('span')\n// .html(_tr('app_page.legend_style_box.lgd_title'));\n//\n// a.append('input')\n// .style('float', 'right')\n// .property('value', title_content.textContent)\n// .on('keyup', function () {\n// title_content.textContent = this.value;\n// });\n//\n// const b = box_body.append('p');\n// b.insert('span')\n// .html(_tr('app_page.legend_style_box.var_name'));\n// b.insert('input')\n// .style('float', 'right')\n// .property('value', subtitle_content.textContent)\n// .on('keyup', function () {\n// const empty = subtitle_content.textContent == '';\n// // Move up the title to its original position if the subtitle isn't empty :\n// if (empty && this.value != '') {\n// title_content.y.baseVal.getItem(0).value = title_content.y.baseVal.getItem(0).value - 15;\n// }\n// // Change the displayed content :\n// subtitle_content.textContent = this.value;\n// // Move down the title (if it wasn't already moved down), if the new subtitle is empty\n// if (!empty && subtitle_content.textContent == '') {\n// title_content.y.baseVal.getItem(0).value = title_content.y.baseVal.getItem(0).value + 15;\n// }\n// });\n//\n// const c = box_body.insert('p');\n// c.insert('span')\n// .html(_tr('app_page.legend_style_box.additionnal_notes'));\n// c.insert('input')\n// .styles({ float: 'right', 'font-family': '12px Gill Sans Extrabold, sans-serif' })\n// .property('value', note_content.textContent)\n// .on('keyup', function () {\n// note_content.textContent = this.value;\n// });\n//\n// if (no_data_txt) {\n// const d = box_body.insert('p');\n// d.insert('span')\n// .html(_tr('app_page.legend_style_box.no_data'));\n// d.insert('input')\n// .styles({ float: 'right', 'font-family': '12px Gill Sans Extrabold, sans-serif' })\n// .property('value', no_data_txt.textContent)\n// .on('keyup', function () {\n// no_data_txt.textContent = this.value;\n// });\n// }\n//\n// // Float precision for label in the legend\n// // (actually it's not really the float precision but an estimation based on\n// // the string representation of only two values but it will most likely do the job in many cases)\n// let max_nb_decimals = 0;\n// let max_nb_left = 0;\n//\n// const nb_dec = [],\n// nb_left = [];\n// legend_boxes.each((d) => {\n// nb_dec.push(get_nb_decimals(d.value));\n// nb_left.push(get_nb_left_separator(d.value));\n// });\n// max_nb_decimals = max_fast(nb_dec);\n// max_nb_left = min_fast(nb_left);\n//\n// max_nb_left = max_nb_left > 2 ? max_nb_left : 2;\n// if (max_nb_decimals > 0 || max_nb_left >= 2) {\n// if (legend_node.getAttribute('rounding_precision')) {\n// current_nb_dec = legend_node.getAttribute('rounding_precision');\n// } else {\n// const nbs = [],\n// nb_dec = [];\n// legend_boxes.each(function () { nbs.push(this.textContent); });\n// for (let i = 0; i < nbs.length; i++) {\n// nb_dec.push(get_nb_decimals(nbs[i]));\n// }\n// current_nb_dec = max_fast(nb_dec);\n// }\n// if (max_nb_decimals > +current_nb_dec && max_nb_decimals > 18) { max_nb_decimals = 18; }\n// const e = box_body.append('p');\n// e.append('span')\n// .html(_tr('app_page.legend_style_box.float_rounding'));\n//\n// e.append('input')\n// .attrs({\n// id: 'precision_range',\n// type: 'range',\n// min: -(+max_nb_left),\n// max: max_nb_decimals,\n// step: 1,\n// })\n// .styles({ float: 'right', width: '90px', 'vertical-align': 'middle', 'margin-left': '10px' })\n// .property('value', current_nb_dec)\n// .on('change', function () {\n// const nb_float = +this.value;\n// d3.select('#precision_change_txt').html(nb_float);\n// legend_node.setAttribute('rounding_precision', nb_float);\n// if (legend_id === 'legend_root' || legend_id === 'legend_root_horiz') {\n// for (let i = 0; i < legend_boxes._groups[0].length; i++) {\n// const values = legend_boxes._groups[0][i].__data__.value.split(' - ');\n// legend_boxes._groups[0][i].innerHTML = round_value(+values[1], nb_float).toLocaleString();\n// }\n// const min_val = +legend_boxes._groups[0][legend_boxes._groups[0].length - 1].__data__.value.split(' - ')[0];\n// legend_node.querySelector('#lgd_choro_min_val').innerHTML = round_value(min_val, nb_float).toLocaleString();\n// } else if (legend_id === 'legend_root_symbol') {\n// for (let i = 0; i < legend_boxes._groups[0].length; i++) {\n// const value = legend_boxes._groups[0][i].__data__.value;\n// legend_boxes._groups[0][i].innerHTML = round_value(+value, nb_float).toLocaleString();\n// }\n// } else if (legend_id === 'legend_root_lines_class') {\n// for (let i = 0; i < legend_boxes._groups[0].length; i++) {\n// const value = legend_boxes._groups[0][i].__data__.value[1];\n// legend_boxes._groups[0][i].innerHTML = round_value(+value, nb_float).toLocaleString();\n// }\n// const min_val = +legend_boxes._groups[0][legend_boxes._groups[0].length - 1].__data__.value[0];\n// legend_node.querySelector('#lgd_choro_min_val').innerHTML = round_value(min_val, nb_float).toLocaleString();\n// }\n// });\n// e.append('span')\n// .style('float', 'right')\n// .attr('id', 'precision_change_txt')\n// .html(`${current_nb_dec}`);\n// }\n//\n// const current_state = +legend_node.getAttribute('boxgap') === 0;\n// const gap_section = box_body.insert('p');\n// gap_section.append('input')\n// .style('margin-left', '0px')\n// .attrs({ type: 'checkbox', id: 'style_lgd' })\n// .property('checked', current_state)\n// .on('change', () => {\n// const rendered_field = data_manager.current_layers[layer_name].rendered_field2 ? data_manager.current_layers[layer_name].rendered_field2 : data_manager.current_layers[layer_name].rendered_field;\n// legend_node = svg_map.querySelector(`#${legend_id}.lgdf_${_app.layer_to_id.get(layer_name)}`);\n// const boxgap = +legend_node.getAttribute('boxgap') == 0 ? 4 : 0;\n// const rounding_precision = legend_node.getAttribute('rounding_precision');\n// const transform_param = legend_node.getAttribute('transform'),\n// lgd_title = legend_node.querySelector('#legendtitle').innerHTML,\n// lgd_subtitle = legend_node.querySelector('#legendsubtitle').innerHTML,\n// note = legend_node.querySelector('#legend_bottom_note').innerHTML;\n// let _no_data_txt = legend_node.querySelector('#no_data_txt');\n// _no_data_txt = _no_data_txt != null ? _no_data_txt.textContent : null;\n// legend_node.remove();\n// if (legend_id === 'legend_root') {\n// createLegend_choro(layer_name, rendered_field, lgd_title, lgd_subtitle, boxgap, rect_fill_value, rounding_precision, _no_data_txt, note);\n// } else if (legend_id === 'legend_root_horiz') {\n// createLegend_choro_horizontal(layer_name, rendered_field, lgd_title, lgd_subtitle, boxgap, rect_fill_value, rounding_precision, _no_data_txt, note);\n// }\n// bind_selections();\n// if (transform_param) {\n// svg_map.querySelector(`#${legend_id}.lgdf_${_app.layer_to_id.get(layer_name)}`).setAttribute('transform', transform_param);\n// }\n// });\n// gap_section.append('label')\n// .attrs({ for: 'style_lgd', class: 'i18n', 'data-i18n': '[html]app_page.legend_style_box.gap_boxes' })\n// .html(_tr('app_page.legend_style_box.gap_boxes'));\n//\n// const rectangle_options1 = box_body.insert('p');\n// rectangle_options1.insert('input')\n// .style('margin-left', '0px')\n// .attrs({\n// type: 'checkbox',\n// id: 'rect_lgd_checkbox',\n// })\n// .property('checked', rect_fill_value.color === undefined ? null : true)\n// .on('change', function () {\n// if (this.checked) {\n// rectangle_options2.style('display', '');\n// const r = document.getElementById('choice_color_under_rect');\n// rect_fill_value = r ? { color: r.value, opacity: 1 } : { color: '#ffffff', opacity: 1 };\n// } else {\n// rectangle_options2.style('display', 'none');\n// rect_fill_value = {};\n// }\n// make_underlying_rect(legend_node_d3,\n// legend_node_d3.select('#under_rect'),\n// rect_fill_value);\n// });\n// rectangle_options1.append('label')\n// .attrs({ for: 'rect_lgd_checkbox', class: 'i18n', 'data-i18n': '[html]app_page.legend_style_box.under_rectangle' })\n// .html(_tr('app_page.legend_style_box.under_rectangle'));\n//\n// let rectangle_options2 = rectangle_options1.insert('span')\n// .styles({ float: 'right', display: rect_fill_value.color === undefined ? 'none' : '' });\n// rectangle_options2.insert('input')\n// .attrs({ id: 'choice_color_under_rect', type: 'color' })\n// .property('value', rect_fill_value.color === undefined ? '#ffffff' : rgb2hex(rect_fill_value.color))\n// .on('change', function () {\n// rect_fill_value = { color: this.value, opacity: 1 };\n// make_underlying_rect(legend_node_d3, legend_node_d3.select('#under_rect'), rect_fill_value);\n// });\n//\n// if (legend_id === 'legend_root_horiz' || (legend_id === 'legend_root' && data_manager.current_layers[layer_name].options_disc)) {\n// const change_legend_type = box_body.insert('p');\n// const vert_layout = change_legend_type.append('p')\n// .attr('id', 'vert_layout')\n// .attr('class', legend_id === 'legend_root' ? 'opts_lgd_layout selected' : 'opts_lgd_layout')\n// .text(_tr('app_page.legend_style_box.lgd_layout_vertical'));\n// const horiz_layout = change_legend_type.append('p')\n// .attr('id', 'horiz_layout')\n// .attr('class', legend_id !== 'legend_root' ? 'opts_lgd_layout selected' : 'opts_lgd_layout')\n// .text(_tr('app_page.legend_style_box.lgd_layout_horizontal'));\n// change_legend_type.selectAll('.opts_lgd_layout')\n// .on('click', function () {\n// if (this.classList.contains('selected')) { return; }\n// change_legend_type.selectAll('.opts_lgd_layout').attr('class', 'opts_lgd_layout');\n// this.classList.add('selected');\n// const rendered_field = data_manager.current_layers[layer_name].rendered_field2 ? data_manager.current_layers[layer_name].rendered_field2 : data_manager.current_layers[layer_name].rendered_field;\n// legend_node = svg_map.querySelector(`#${legend_id}.lgdf_${_app.layer_to_id.get(layer_name)}`);\n// const boxgap = +legend_node.getAttribute('boxgap');\n// const rounding_precision = legend_node.getAttribute('rounding_precision');\n// const transform_param = legend_node.getAttribute('transform'),\n// lgd_title = legend_node.querySelector('#legendtitle').innerHTML,\n// lgd_subtitle = legend_node.querySelector('#legendsubtitle').innerHTML,\n// note = legend_node.querySelector('#legend_bottom_note').innerHTML;\n// let _no_data_txt = legend_node.querySelector('#no_data_txt');\n// _no_data_txt = _no_data_txt != null ? _no_data_txt.textContent : null;\n// legend_node.remove();\n//\n// if (this.id === 'horiz_layout') {\n// createLegend_choro_horizontal(layer_name, rendered_field, lgd_title, lgd_subtitle, boxgap, rect_fill_value, rounding_precision, _no_data_txt, note);\n// legend_id = 'legend_root_horiz';\n// } else {\n// createLegend_choro(layer_name, rendered_field, lgd_title, lgd_subtitle, boxgap, rect_fill_value, rounding_precision, _no_data_txt, note);\n// legend_id = 'legend_root';\n// }\n// bind_selections();\n// if (transform_param) {\n// svg_map.querySelector(`#${legend_id}.lgdf_${_app.layer_to_id.get(layer_name)}`).setAttribute('transform', transform_param);\n// }\n// });\n// }\n// }\n\n// Todo : find a better organization for the options in this box\n// (+ better alignement)\nfunction createlegendEditBox(legend_id, layer_name) {\n function bind_selections() {\n box_class = [layer_id, '_legend_popup'].join('');\n legend_node = svg_map.querySelector(['#', legend_id, '.lgdf_', layer_id].join(''));\n title_content = legend_node.querySelector('#legendtitle');\n subtitle_content = legend_node.querySelector('#legendsubtitle');\n note_content = legend_node.querySelector('#legend_bottom_note');\n no_data_txt = legend_node.querySelector('#no_data_txt');\n ratio_waffle_txt = legend_node.querySelector('#ratio_txt');\n legend_node_d3 = d3.select(legend_node);\n legend_boxes = legend_node_d3.selectAll(['#', legend_id, ' .lg'].join('')).select('text');\n }\n var layer_id = _app.layer_to_id.get(layer_name);\n var box_class = void 0,\n legend_node = void 0,\n title_content = void 0,\n subtitle_content = void 0,\n note_content = void 0;\n // let source_content;\n var legend_node_d3 = void 0,\n legend_boxes = void 0,\n no_data_txt = void 0,\n ratio_waffle_txt = void 0,\n rect_fill_value = {},\n original_rect_fill_value = void 0;\n\n bind_selections();\n if (document.querySelector('.' + box_class)) document.querySelector('.' + box_class).remove();\n var original_params = {\n title_content: title_content.textContent,\n y_title: title_content.y.baseVal.getItem(0).value,\n subtitle_content: subtitle_content.textContent,\n y_subtitle: subtitle_content.y.baseVal.getItem(0).value,\n note_content: note_content.textContent,\n no_data_txt: no_data_txt != null ? no_data_txt.textContent : null,\n ratio_waffle_txt: ratio_waffle_txt != null ? ratio_waffle_txt.textContent : null,\n boxgap: +legend_node.getAttribute('boxgap')\n }; // , source_content: source_content.textContent ? source_content.textContent : \"\"\n\n if (legend_node.getAttribute('visible_rect') === 'true') {\n rect_fill_value = {\n color: legend_node.querySelector('#under_rect').style.fill,\n opacity: legend_node.querySelector('#under_rect').style.fillOpacity\n };\n original_rect_fill_value = (0, _helpers.cloneObj)(rect_fill_value);\n }\n\n (0, _dialogs.make_confirm_dialog2)(box_class, layer_name).then(function (confirmed) {\n if (!confirmed) {\n title_content.textContent = original_params.title_content;\n title_content.y.baseVal.getItem(0).value = original_params.y_title;\n subtitle_content.textContent = original_params.subtitle_content;\n subtitle_content.y.baseVal.getItem(0).value = original_params.y_subtitle;\n note_content.textContent = original_params.note_content;\n if (no_data_txt) {\n no_data_txt.textContent = original_params.no_data_txt;\n } else if (ratio_waffle_txt) {\n ratio_waffle_txt.textContent = original_params.ratio_waffle_txt;\n }\n rect_fill_value = original_rect_fill_value;\n }\n make_underlying_rect(legend_node_d3, legend_node_d3.select('#under_rect'), rect_fill_value);\n bind_selections();\n });\n var container = document.querySelectorAll('.' + box_class)[0];\n var box_body = d3.select(container).select('.modal-dialog').style('width', '375px').select('.modal-body');\n var current_nb_dec = void 0;\n\n box_body.append('p').style('text-align', 'center').insert('h3').html(_tr('app_page.legend_style_box.subtitle'));\n\n var a = box_body.append('p');\n a.append('span').html(_tr('app_page.legend_style_box.lgd_title'));\n\n a.append('input').style('float', 'right').property('value', title_content.textContent).on('keyup', function () {\n title_content.textContent = this.value;\n });\n\n var b = box_body.append('p');\n b.insert('span').html(_tr('app_page.legend_style_box.var_name'));\n b.insert('input').style('float', 'right').property('value', subtitle_content.textContent).on('keyup', function () {\n var empty = subtitle_content.textContent == '';\n // Move up the title to its original position if the subtitle isn't empty :\n if (empty && this.value != '') {\n title_content.y.baseVal.getItem(0).value = title_content.y.baseVal.getItem(0).value - 15;\n }\n // Change the displayed content :\n subtitle_content.textContent = this.value;\n // Move down the title (if it wasn't already moved down), if the new subtitle is empty\n if (!empty && subtitle_content.textContent == '') {\n title_content.y.baseVal.getItem(0).value = title_content.y.baseVal.getItem(0).value + 15;\n }\n });\n\n var c = box_body.insert('p');\n c.insert('span').html(_tr('app_page.legend_style_box.additionnal_notes'));\n c.insert('input').styles({ float: 'right', 'font-family': '12px Gill Sans Extrabold, sans-serif' }).property('value', note_content.textContent).on('keyup', function () {\n note_content.textContent = this.value;\n });\n\n if (no_data_txt) {\n var d = box_body.insert('p');\n d.insert('span').html(_tr('app_page.legend_style_box.no_data'));\n d.insert('input').styles({ float: 'right', 'font-family': '12px Gill Sans Extrabold, sans-serif' }).property('value', no_data_txt.textContent).on('keyup', function () {\n no_data_txt.textContent = this.value;\n });\n } else if (ratio_waffle_txt) {\n var _d = box_body.insert('p');\n _d.insert('span').html(_tr('app_page.legend_style_box.ratio_waffle_txt'));\n _d.insert('input').styles({ float: 'right', 'font-family': '12px Gill Sans Extrabold, sans-serif' }).property('value', ratio_waffle_txt.textContent).on('keyup', function () {\n ratio_waffle_txt.textContent = this.value;\n });\n }\n\n if (legend_id === 'legend_root_symbol') {\n var choice_break_value_section1 = box_body.insert('p').styles({ 'text-align': 'center', 'margin-top': '25px !important' });\n choice_break_value_section1.append('span').attr('class', 'button_disc').styles({ cursor: 'pointer' }).html(_tr('app_page.legend_style_box.choice_break_symbol')).on('click', function () {\n container.modal.hide();\n display_box_value_symbol(layer_name).then(function (confirmed) {\n container.modal.show();\n if (confirmed) {\n (0, _map_ctrl.redraw_legends_symbols)(svg_map.querySelector(['#legend_root_symbol.lgdf_', _app.layer_to_id.get(layer_name)].join('')));\n }\n });\n });\n }\n if (data_manager.current_layers[layer_name].renderer !== 'TwoStocksWaffle' && data_manager.current_layers[layer_name].renderer !== 'Categorical' && data_manager.current_layers[layer_name].renderer !== 'TypoSymbols' && !(data_manager.current_layers[layer_name].renderer === 'PropSymbolsTypo' && legend_id.indexOf('legend_root_symbol') < 0)) {\n // Float precision for label in the legend\n // (actually it's not really the float precision but an estimation based on\n // the string representation of only two values but it will most likely do the job in many cases)\n var max_nb_decimals = 0;\n var max_nb_left = 0;\n if (legend_id.indexOf('legend_root_symbol') === -1) {\n //&& legend_id.indexOf('links') === -1) {\n max_nb_decimals = get_max_nb_dec(layer_name);\n max_nb_left = get_max_nb_left_sep(layer_name);\n } else {\n var nb_dec = [],\n nb_left = [];\n legend_boxes.each(function (d) {\n nb_dec.push((0, _helpers_calc.get_nb_decimals)(d.value));\n nb_left.push((0, _helpers_calc.get_nb_left_separator)(d.value));\n });\n max_nb_decimals = (0, _helpers_calc.max_fast)(nb_dec);\n max_nb_left = (0, _helpers_calc.min_fast)(nb_left);\n }\n max_nb_left = max_nb_left > 2 ? max_nb_left : 2;\n if (max_nb_decimals > 0 || max_nb_left >= 2) {\n if (legend_node.getAttribute('rounding_precision')) {\n current_nb_dec = legend_node.getAttribute('rounding_precision');\n } else {\n var nbs = [],\n _nb_dec = [];\n legend_boxes.each(function () {\n nbs.push(this.textContent);\n });\n for (var i = 0; i < nbs.length; i++) {\n _nb_dec.push((0, _helpers_calc.get_nb_decimals)(nbs[i]));\n }\n current_nb_dec = (0, _helpers_calc.max_fast)(_nb_dec);\n }\n if (max_nb_decimals > +current_nb_dec && max_nb_decimals > 18) {\n max_nb_decimals = 18;\n }\n var e = box_body.append('p');\n e.append('span').html(_tr('app_page.legend_style_box.float_rounding'));\n\n e.append('input').attrs({ id: 'precision_range', type: 'range', min: -+max_nb_left, max: max_nb_decimals, step: 1 }).styles({ float: 'right', width: '90px', 'vertical-align': 'middle', 'margin-left': '10px' }).property('value', current_nb_dec).on('change', function () {\n var nb_float = +this.value;\n d3.select('#precision_change_txt').html(nb_float);\n legend_node.setAttribute('rounding_precision', nb_float);\n if (legend_id === 'legend_root') {\n for (var _i = 0; _i < legend_boxes._groups[0].length; _i++) {\n var values = legend_boxes._groups[0][_i].__data__.value.split(' - ');\n legend_boxes._groups[0][_i].innerHTML = (0, _helpers_calc.round_value)(+values[1], nb_float).toLocaleString();\n }\n var min_val = +legend_boxes._groups[0][legend_boxes._groups[0].length - 1].__data__.value.split(' - ')[0];\n legend_node.querySelector('#lgd_choro_min_val').innerHTML = (0, _helpers_calc.round_value)(min_val, nb_float).toLocaleString();\n } else if (legend_id === 'legend_root_horiz') {\n for (var _i2 = 0; _i2 < legend_boxes._groups[0].length; _i2++) {\n var _values = legend_boxes._groups[0][_i2].__data__.value.split(' - ');\n legend_boxes._groups[0][_i2].innerHTML = (0, _helpers_calc.round_value)(+_values[0], nb_float).toLocaleString();\n }\n var _min_val = +legend_boxes._groups[0][legend_boxes._groups[0].length - 1].__data__.value.split(' - ')[1];\n legend_node.querySelector('#lgd_choro_min_val').innerHTML = (0, _helpers_calc.round_value)(_min_val, nb_float).toLocaleString();\n } else if (legend_id === 'legend_root_symbol') {\n for (var _i3 = 0; _i3 < legend_boxes._groups[0].length; _i3++) {\n var value = legend_boxes._groups[0][_i3].__data__.value;\n legend_boxes._groups[0][_i3].innerHTML = (0, _helpers_calc.round_value)(+value, nb_float).toLocaleString();\n }\n } else if (legend_id === 'legend_root_lines_class') {\n for (var _i4 = 0; _i4 < legend_boxes._groups[0].length; _i4++) {\n var _value = legend_boxes._groups[0][_i4].__data__.value[1];\n legend_boxes._groups[0][_i4].innerHTML = (0, _helpers_calc.round_value)(+_value, nb_float).toLocaleString();\n }\n var _min_val2 = +legend_boxes._groups[0][legend_boxes._groups[0].length - 1].__data__.value[0];\n legend_node.querySelector('#lgd_choro_min_val').innerHTML = (0, _helpers_calc.round_value)(_min_val2, nb_float).toLocaleString();\n }\n });\n e.append('span').style('float', 'right').attr('id', 'precision_change_txt').html('' + current_nb_dec);\n }\n }\n\n if (legend_id === 'legend_root' || legend_id === 'legend_root_horiz') {\n var current_state = +legend_node.getAttribute('boxgap') === 0;\n var gap_section = box_body.insert('p');\n gap_section.append('input').style('margin-left', '0px').attrs({ type: 'checkbox', id: 'style_lgd' }).property('checked', current_state).on('change', function () {\n var rendered_field = data_manager.current_layers[layer_name].rendered_field2 ? data_manager.current_layers[layer_name].rendered_field2 : data_manager.current_layers[layer_name].rendered_field;\n legend_node = svg_map.querySelector('#' + legend_id + '.lgdf_' + _app.layer_to_id.get(layer_name));\n var boxgap = +legend_node.getAttribute('boxgap') == 0 ? 4 : 0;\n var rounding_precision = legend_node.getAttribute('rounding_precision');\n var transform_param = legend_node.getAttribute('transform'),\n lgd_title = legend_node.querySelector('#legendtitle').innerHTML,\n lgd_subtitle = legend_node.querySelector('#legendsubtitle').innerHTML,\n note = legend_node.querySelector('#legend_bottom_note').innerHTML;\n var _no_data_txt = legend_node.querySelector('#no_data_txt');\n _no_data_txt = _no_data_txt != null ? _no_data_txt.textContent : null;\n legend_node.remove();\n if (legend_id === 'legend_root') {\n createLegend_choro(layer_name, rendered_field, lgd_title, lgd_subtitle, boxgap, rect_fill_value, rounding_precision, _no_data_txt, note);\n } else if (legend_id === 'legend_root_horiz') {\n createLegend_choro_horizontal(layer_name, rendered_field, lgd_title, lgd_subtitle, boxgap, rect_fill_value, rounding_precision, _no_data_txt, note);\n }\n bind_selections();\n if (transform_param) {\n svg_map.querySelector('#' + legend_id + '.lgdf_' + _app.layer_to_id.get(layer_name)).setAttribute('transform', transform_param);\n }\n });\n gap_section.append('label').attrs({ for: 'style_lgd', class: 'i18n', 'data-i18n': '[html]app_page.legend_style_box.gap_boxes' }).html(_tr('app_page.legend_style_box.gap_boxes'));\n // document.getElementById('style_lgd').checked = current_state;\n } else if (legend_id === 'legend_root_symbol') {\n var type_symbol = data_manager.current_layers[layer_name].symbol;\n var current_state_nested = legend_node.getAttribute('nested') === 'true';\n var _gap_section = box_body.insert('p');\n _gap_section.append('input').style('margin-left', '0px').attrs({ id: 'style_lgd', type: 'checkbox' }).property('checked', current_state_nested).on('change', function () {\n join_line_section.style('display', this.checked && type_symbol === 'circle' ? null : 'none');\n legend_node = svg_map.querySelector(['#legend_root_symbol.lgdf_', _app.layer_to_id.get(layer_name)].join(''));\n var rendered_field = data_manager.current_layers[layer_name].rendered_field;\n var nested = this.checked ? 'true' : 'false';\n var join_line = join_line_section.select('input').property('checked') ? 'true' : 'false';\n var rounding_precision = legend_node.getAttribute('rounding_precision');\n var transform_param = legend_node.getAttribute('transform'),\n lgd_title = legend_node.querySelector('#legendtitle').innerHTML,\n lgd_subtitle = legend_node.querySelector('#legendsubtitle').innerHTML,\n note = legend_node.querySelector('#legend_bottom_note').innerHTML;\n\n legend_node.remove();\n createLegend_symbol(layer_name, rendered_field, lgd_title, lgd_subtitle, nested, join_line, rect_fill_value, rounding_precision, note);\n bind_selections();\n if (transform_param) {\n svg_map.querySelector(['#legend_root_symbol.lgdf_', _app.layer_to_id.get(layer_name)].join('')).setAttribute('transform', transform_param);\n }\n });\n _gap_section.append('label').attrs({ for: 'style_lgd', class: 'i18n', 'data-i18n': '[html]app_page.legend_style_box.nested_symbols' }).html(_tr('app_page.legend_style_box.nested_symbols'));\n\n var current_state_line = legend_node.getAttribute('join_line') === 'true';\n var join_line_section = box_body.insert('p').style('display', current_state_nested && type_symbol === 'circle' ? null : 'none');\n join_line_section.append('input').style('margin-left', '0px').attrs({ id: 'style_lgd_join_line', type: 'checkbox' }).property('checked', current_state_line).on('change', function () {\n legend_node = svg_map.querySelector(['#legend_root_symbol.lgdf_', _app.layer_to_id.get(layer_name)].join(''));\n var rendered_field = data_manager.current_layers[layer_name].rendered_field;\n var nested = legend_node.getAttribute('nested') === 'true' ? 'true' : 'false';\n var join_line = this.checked ? 'true' : 'false';\n var rounding_precision = legend_node.getAttribute('rounding_precision');\n var transform_param = legend_node.getAttribute('transform'),\n lgd_title = legend_node.querySelector('#legendtitle').innerHTML,\n lgd_subtitle = legend_node.querySelector('#legendsubtitle').innerHTML,\n note = legend_node.querySelector('#legend_bottom_note').innerHTML;\n\n legend_node.remove();\n createLegend_symbol(layer_name, rendered_field, lgd_title, lgd_subtitle, nested, join_line, rect_fill_value, rounding_precision, note);\n bind_selections();\n if (transform_param) {\n svg_map.querySelector(['#legend_root_symbol.lgdf_', _app.layer_to_id.get(layer_name)].join('')).setAttribute('transform', transform_param);\n }\n });\n join_line_section.append('label').attrs({ for: 'style_lgd_join_line', class: 'i18n', 'data-i18n': '[html]app_page.legend_style_box.join_line' }).html(_tr('app_page.legend_style_box.join_line'));\n }\n // Todo : Reactivate this functionnality :\n // box_body.insert(\"p\").html(\"Display features count \")\n // .insert(\"input\").attr(\"type\", \"checkbox\")\n // .on(\"change\", function(){\n // alert(\"to be done!\");\n // });\n\n var rectangle_options1 = box_body.insert('p');\n rectangle_options1.insert('input').style('margin-left', '0px').property('checked', rect_fill_value.color === undefined ? null : true).attrs({ type: 'checkbox', id: 'rect_lgd_checkbox' }).on('change', function () {\n if (this.checked) {\n rectangle_options2.style('display', '');\n var r = document.getElementById('choice_color_under_rect');\n rect_fill_value = r ? { color: r.value, opacity: 1 } : { color: '#ffffff', opacity: 1 };\n } else {\n rectangle_options2.style('display', 'none');\n rect_fill_value = {};\n }\n make_underlying_rect(legend_node_d3, legend_node_d3.select('#under_rect'), rect_fill_value);\n });\n rectangle_options1.append('label').attrs({ for: 'rect_lgd_checkbox', class: 'i18n', 'data-i18n': '[html]app_page.legend_style_box.under_rectangle' }).html(_tr('app_page.legend_style_box.under_rectangle'));\n\n var rectangle_options2 = rectangle_options1.insert('span').styles({ float: 'right', display: rect_fill_value.color === undefined ? 'none' : '' });\n rectangle_options2.insert('input').attrs({ id: 'choice_color_under_rect', type: 'color' }).property('value', rect_fill_value.color === undefined ? '#ffffff' : (0, _colors_helpers.rgb2hex)(rect_fill_value.color)).on('change', function () {\n rect_fill_value = { color: this.value, opacity: 1 };\n make_underlying_rect(legend_node_d3, legend_node_d3.select('#under_rect'), rect_fill_value);\n });\n\n if (legend_id === 'legend_root_horiz' || legend_id === 'legend_root' && data_manager.current_layers[layer_name].options_disc) {\n var change_legend_type = box_body.insert('p');\n // Vertical layout option:\n change_legend_type.append('p').attr('id', 'vert_layout').attr('class', legend_id === 'legend_root' ? 'opts_lgd_layout selected' : 'opts_lgd_layout').text(_tr('app_page.legend_style_box.lgd_layout_vertical'));\n // Horizontal layout option:\n change_legend_type.append('p').attr('id', 'horiz_layout').attr('class', legend_id !== 'legend_root' ? 'opts_lgd_layout selected' : 'opts_lgd_layout').text(_tr('app_page.legend_style_box.lgd_layout_horizontal'));\n\n change_legend_type.selectAll('.opts_lgd_layout').on('click', function () {\n if (this.classList.contains('selected')) {\n return;\n }\n change_legend_type.selectAll('.opts_lgd_layout').attr('class', 'opts_lgd_layout');\n this.classList.add('selected');\n var rendered_field = data_manager.current_layers[layer_name].rendered_field2 ? data_manager.current_layers[layer_name].rendered_field2 : data_manager.current_layers[layer_name].rendered_field;\n legend_node = svg_map.querySelector('#' + legend_id + '.lgdf_' + _app.layer_to_id.get(layer_name));\n var boxgap = +legend_node.getAttribute('boxgap');\n var rounding_precision = legend_node.getAttribute('rounding_precision');\n var transform_param = legend_node.getAttribute('transform'),\n lgd_title = legend_node.querySelector('#legendtitle').innerHTML,\n lgd_subtitle = legend_node.querySelector('#legendsubtitle').innerHTML,\n note = legend_node.querySelector('#legend_bottom_note').innerHTML;\n var _no_data_txt = legend_node.querySelector('#no_data_txt');\n _no_data_txt = _no_data_txt != null ? _no_data_txt.textContent : null;\n legend_node.remove();\n\n if (this.id === 'horiz_layout') {\n createLegend_choro_horizontal(layer_name, rendered_field, lgd_title, lgd_subtitle, boxgap, rect_fill_value, rounding_precision, _no_data_txt, note);\n legend_id = 'legend_root_horiz';\n } else {\n createLegend_choro(layer_name, rendered_field, lgd_title, lgd_subtitle, boxgap, rect_fill_value, rounding_precision, _no_data_txt, note);\n legend_id = 'legend_root';\n }\n bind_selections();\n if (transform_param) {\n svg_map.querySelector('#' + legend_id + '.lgdf_' + _app.layer_to_id.get(layer_name)).setAttribute('transform', transform_param);\n }\n });\n }\n}\n\nfunction move_legends() {\n var xy0_map = get_map_xy0();\n var dim_width = w + xy0_map.x;\n var dim_height = h + xy0_map.y;\n\n // Move the legends and the scalebar according to svg map resizing:\n var legends = [svg_map.querySelectorAll('.legend_feature'), svg_map.querySelectorAll('#scale_bar.legend')];\n for (var j = 0; j < 2; ++j) {\n var legends_type = legends[j];\n for (var i = 0, i_len = legends_type.length; i < i_len; ++i) {\n var legend_bbox = legends_type[i].getBoundingClientRect();\n if (legend_bbox.left + legend_bbox.width > dim_width) {\n var current_transform = legends_type[i].getAttribute('transform');\n\n var _$exec$1$split = /\\(([^\\)]+)\\)/.exec(current_transform)[1].split(/[ ,]+/),\n _$exec$1$split2 = _slicedToArray(_$exec$1$split, 2),\n val_x = _$exec$1$split2[0],\n val_y = _$exec$1$split2[1];\n\n var trans_x = legend_bbox.left + legend_bbox.width - dim_width;\n legends_type[i].setAttribute('transform', ['translate(', [+val_x - trans_x, val_y], ')'].join(''));\n }\n if (legend_bbox.top + legend_bbox.height > dim_height) {\n var _current_transform = legends_type[i].getAttribute('transform');\n\n var _$exec$1$split3 = /\\(([^\\)]+)\\)/.exec(_current_transform)[1].split(/[ ,]+/),\n _$exec$1$split4 = _slicedToArray(_$exec$1$split3, 2),\n _val_x = _$exec$1$split4[0],\n _val_y = _$exec$1$split4[1];\n\n var trans_y = legend_bbox.top + legend_bbox.height - dim_height;\n legends_type[i].setAttribute('transform', ['translate(', [_val_x, +_val_y - trans_y], ')'].join(''));\n }\n }\n }\n\n // Move the text_annotation according to svg map resizing:\n var text_annot = document.querySelectorAll('.txt_annot');\n for (var _i5 = 0, len_i = text_annot.length; _i5 < len_i; _i5++) {\n var _legend_bbox = text_annot[_i5].getBoundingClientRect();\n if (_legend_bbox.left + _legend_bbox.width > dim_width) {\n var _trans_x = _legend_bbox.left + _legend_bbox.width - dim_width;\n var annot = d3.select(text_annot[_i5]);\n var x_rect = +annot.select('rect').attr('x') - _trans_x;\n var x_txt = +annot.select('text').attr('x') - _trans_x;\n if (x_txt > 0) {\n annot.select('rect').attr('x', x_rect);\n annot.select('text').attr('x', x_txt).selectAll('tspan').attr('x', x_txt);\n }\n }\n if (_legend_bbox.top + _legend_bbox.height > dim_height) {\n var _trans_y = _legend_bbox.top + _legend_bbox.height - dim_height;\n var _annot = d3.select(text_annot[_i5]);\n var y_rect = +_annot.select('rect').attr('y') - _trans_y;\n var y_txt = +_annot.select('text').attr('y') - _trans_y;\n if (y_txt > 0) {\n _annot.select('rect').attr('y', y_rect);\n _annot.select('text').attr('y', y_txt);\n }\n }\n }\n}\n\nvar get_max_nb_dec = function get_max_nb_dec(layer_name) {\n if (!data_manager.current_layers[layer_name] || !data_manager.current_layers[layer_name].colors_breaks) {\n return;\n }\n var max = 0;\n data_manager.current_layers[layer_name].colors_breaks.forEach(function (el) {\n var tmp = el[0].split(' - ');\n var p1 = tmp[0].indexOf('.');\n var p2 = tmp[1].indexOf('.');\n if (p1 > -1) {\n if (tmp[0].length - 1 - p1 > max) {\n max = tmp[0].length - 1 - tmp[0].indexOf('.');\n }\n }\n if (p2 > -1) {\n if (tmp[1].length - 1 - p2 > max) {\n max = tmp[1].length - 1 - tmp[1].indexOf('.');\n }\n }\n });\n return max;\n};\n\n// function _get_max_nb_left_sep(values) {\n// return max_fast(values.map(d => (`${d}`).split('.')[0].length));\n// }\n\nvar get_max_nb_left_sep = function get_max_nb_left_sep(layer_name) {\n if (!data_manager.current_layers[layer_name] || !data_manager.current_layers[layer_name].colors_breaks) {\n return;\n }\n var nb_left = [];\n data_manager.current_layers[layer_name].colors_breaks.forEach(function (el) {\n var tmp = el[0].split(' - ');\n var p1 = tmp[0].indexOf('.'),\n p2 = tmp[1].indexOf('.');\n nb_left.push(p1);\n nb_left.push(p2);\n });\n return (0, _helpers_calc.min_fast)(nb_left);\n};\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! bluebird */ \"./node_modules/bluebird/js/browser/bluebird.js\")))\n\n//# sourceURL=webpack:///./js/legend.js?");
-
-/***/ }),
-
-/***/ "./js/main.js":
-/*!********************!*\
- !*** ./js/main.js ***!
- \********************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-eval("/* WEBPACK VAR INJECTION */(function(Promise, global) {\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nvar _i18next = __webpack_require__(/*! i18next */ \"./node_modules/i18next/dist/es/index.js\");\n\nvar _i18next2 = _interopRequireDefault(_i18next);\n\nvar _i18nextXhrBackend = __webpack_require__(/*! i18next-xhr-backend */ \"./node_modules/i18next-xhr-backend/index.js\");\n\nvar _i18nextXhrBackend2 = _interopRequireDefault(_i18nextXhrBackend);\n\nvar _locI18next = __webpack_require__(/*! loc-i18next */ \"./node_modules/loc-i18next/index.js\");\n\nvar _locI18next2 = _interopRequireDefault(_locI18next);\n\n__webpack_require__(/*! ./../css/style.css */ \"./css/style.css\");\n\n__webpack_require__(/*! ./../css/discretization.css */ \"./css/discretization.css\");\n\n__webpack_require__(/*! ./../node_modules/alertifyjs/build/css/alertify.min.css */ \"./node_modules/alertifyjs/build/css/alertify.min.css\");\n\n__webpack_require__(/*! ./../node_modules/alertifyjs/build/css/themes/semantic.min.css */ \"./node_modules/alertifyjs/build/css/themes/semantic.min.css\");\n\nvar _interface = __webpack_require__(/*! ./interface */ \"./js/interface.js\");\n\nvar _helpers = __webpack_require__(/*! ./helpers */ \"./js/helpers.js\");\n\nvar _helpers_math = __webpack_require__(/*! ./helpers_math */ \"./js/helpers_math.js\");\n\nvar _map_ctrl = __webpack_require__(/*! ./map_ctrl */ \"./js/map_ctrl.js\");\n\nvar _tooltips = __webpack_require__(/*! ./tooltips */ \"./js/tooltips.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nPromise.config({\n warnings: true,\n longStackTraces: true\n});\n\n// /*\n// * Memoization functions (naive LRU implementation)\n// *\n// */\n// global.Function.prototype.memoized = function (max_size = 25) {\n// this._memo = this._memo || { values: new Map(), stack: [], max_size: max_size };\n// const key = JSON.stringify(Array.prototype.slice.call(arguments));\n// let cache_value = this._memo.values.get(key);\n// if (cache_value !== undefined) {\n// return JSON.parse(cache_value);\n// }\n// cache_value = this.apply(this, arguments);\n// this._memo.values.set(key, JSON.stringify(cache_value));\n// this._memo.stack.push(key);\n// if (this._memo.stack.length >= this._memo.max_size) {\n// const old_key = this._memo.stack.shift();\n// this._memo.values.delete(old_key);\n// }\n// return cache_value;\n// };\n//\n// global.Function.prototype.memoize = function () {\n// const fn = this;\n// return function () {\n// return fn.memoized.apply(fn, arguments);\n// };\n// };\nglobal.i18next = _i18next2.default;\nglobal._tr = function () {\n return _i18next2.default.t.apply(_i18next2.default, arguments);\n};\nglobal.encodeId = function (layer_name) {\n return layer_name !== '' ? 'L_' + layer_name.replace(/[^a-zA-Z0-9_-]/g, function (match) {\n return '_' + match[0].charCodeAt(0).toString(16) + '_';\n }) : 'L_';\n};\n// global.encodeId = function(s) {\n// if (s === '') return 'L_';\n// return `L_${s.replace(/[^a-zA-Z0-9_-]/g, match => `_${match[0].charCodeAt(0).toString(16)}_`)}`;\n// }\n\nglobal._app = {\n current_functionnality: undefined,\n current_proj_name: 'NaturalEarth2',\n custom_palettes: new Map(),\n default_symbols: [],\n existing_lang: ['en', 'es', 'fr'],\n layer_to_id: new Map([['World', encodeId('World')], ['Graticule', encodeId('Graticule')]]),\n legendRedrawTimeout: null,\n id_to_layer: new Map([[encodeId('World'), 'World'], [encodeId('Graticule'), 'Graticule']]),\n targeted_layer_added: false,\n to_cancel: undefined,\n version: \"0.8.0\"\n};\n\nglobal.proj = d3.geoNaturalEarth2().scale(1).translate([0, 0]);\nglobal.path = d3.geoPath().projection(proj).pointRadius(4);\nglobal.t = proj.translate();\nglobal.s = proj.scale();\nglobal.w = (0, _helpers_math.Mround)(window.innerWidth - 361);\nglobal.h = window.innerHeight - 55;\n\n/*\nA bunch of global variable, storing oftently reused informations :\n - data_manager.user_data[layer_name] : will be an Array of Objects containing data for each features of the targeted layer\n (+ the joined features if a join is done)\n - data_manager.result_data[layer_name] : the same but for any eventual result layers (like Stewart, gridded, etc.)\n - data_manager.joined_dataset : the joined dataset (read with d3.csv then pushed in the first slot of this array)\n - data_manager.field_join_map : an array containg mapping between index of geom layer and index of ext. dataset\n - data_manager.current_layers : the main object describing **all** the layers on the map (incunding detailed (ie. by features) styling properties if needed)\n*/\nglobal.data_manager = {\n current_layers: {},\n dataset_name: null,\n joined_dataset: [],\n field_join_map: [],\n result_data: {},\n user_data: {}\n};\n\nfunction parseQuery(search) {\n var args = search.substring(1).split('&');\n var argsParsed = {};\n var arg = void 0,\n kvp = void 0,\n key = void 0,\n value = void 0;\n for (var i = 0; i < args.length; i++) {\n arg = args[i];\n if (arg.indexOf('=') === -1) {\n argsParsed[decodeURIComponent(arg).trim()] = true;\n } else {\n kvp = arg.split('=');\n key = decodeURIComponent(kvp[0]).trim();\n value = decodeURIComponent(kvp[1]).trim();\n argsParsed[key] = decodeURIComponent(kvp[1]).trim();\n }\n }\n return argsParsed;\n}\n\nfunction loadI18next(lang) {\n return new Promise(function (resolve, reject) {\n _i18next2.default.use(_i18nextXhrBackend2.default).init({\n debug: true,\n lng: lang,\n fallbackLng: _app.existing_lang[0],\n backend: {\n loadPath: 'static/locales/{{lng}}/translation.json'\n }\n }, function (err, tr) {\n if (err) reject(err);\n resolve(tr);\n });\n });\n}\n\nfunction getEpsgProjection() {\n return (0, _helpers.xhrequest)('GET', 'static/json/epsg.json', undefined, false);\n}\n\n(function () {\n Object.assign(global, (0, _map_ctrl.makeSvgMap)());\n // const { map_div, map, svg_map, defs } = makeSvgMap();\n // global.map_div = map_div;\n // global.map = map;\n // global.svg_map = svg_map;\n // global.defs = defs;\n var lang = docCookies.getItem('user_lang') || window.navigator.language.split('-')[0];\n var params = {};\n document.querySelector('noscript').remove();\n window.isIE = function () {\n return (/MSIE/i.test(navigator.userAgent) || /Trident\\/\\d./i.test(navigator.userAgent) || /Edge\\/\\d./i.test(navigator.userAgent)\n );\n }();\n // window.isOldMS_Firefox = (() => (/Firefox/i.test(navigator.userAgent)\n // && (/Windows NT 6.0/i.test(navigator.userAgent)\n // || /Windows NT 6.1/i.test(navigator.userAgent))) ? true : false\n // )();\n if (window.location.search) {\n var parsed_querystring = parseQuery(window.location.search);\n params.reload = parsed_querystring.reload;\n if (typeof history.replaceState !== 'undefined') {\n // replaceState should avoid creating a new entry on the history\n var obj = { Page: window.location.search, Url: window.location.pathname };\n history.replaceState(obj, obj.Page, obj.Url);\n }\n }\n\n lang = _app.existing_lang.indexOf(lang) > -1 ? lang : 'en';\n Promise.all([loadI18next(lang), getEpsgProjection()]).then(function (results) {\n var _results = _slicedToArray(results, 2),\n tr = _results[0],\n epsg_proj = _results[1];\n\n window.localize = _locI18next2.default.init(_i18next2.default);\n _app.epsg_projections = JSON.parse(epsg_proj);\n (0, _interface.setUpInterface)(params.reload);\n localize('.i18n');\n (0, _tooltips.bindTooltips)();\n });\n})();\n\n/**\n* Return the x and y position where the svg element is located\n* in the browser window.\n*\n* @return {Object} - An object with x and y properties.\n*/\nglobal.get_map_xy0 = function () {\n var bbox = svg_map.getBoundingClientRect();\n return { x: bbox.left, y: bbox.top };\n};\n\nglobal.get_bounding_rect = function (elem) {\n var _get_map_xy = get_map_xy0(),\n x = _get_map_xy.x,\n y = _get_map_xy.y;\n\n var bbox = elem.getBoundingClientRect();\n var a = {\n x: bbox.left - x,\n y: bbox.top - y,\n width: bbox.width ? bbox.width : bbox.right - bbox.left,\n height: bbox.height ? bbox.height : bbox.bottom - bbox.top\n };\n a.left = a.x;\n a.top = a.y;\n return a;\n};\n\nglobal.helper_esc_key_twbs_cb = function helper_esc_key_twbs_cb(_event, callback) {\n var evt = _event || window.event;\n var isEscape = 'key' in evt ? evt.key === 'Escape' || evt.key === 'Esc' : evt.keyCode === 27;\n if (isEscape) {\n evt.stopPropagation();\n if (callback) {\n callback();\n }\n }\n};\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! bluebird */ \"./node_modules/bluebird/js/browser/bluebird.js\"), __webpack_require__(/*! ./../node_modules/webpack/buildin/global.js */ \"./node_modules/webpack/buildin/global.js\")))\n\n//# sourceURL=webpack:///./js/main.js?");
-
-/***/ }),
-
-/***/ "./js/map_ctrl.js":
-/*!************************!*\
- !*** ./js/map_ctrl.js ***!
- \************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-eval("/* WEBPACK VAR INJECTION */(function(global) {\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.canvas_rotation_value = exports.zoom = undefined;\nexports.makeSvgMap = makeSvgMap;\nexports.zoom_without_redraw = zoom_without_redraw;\nexports.reproj_symbol_layer = reproj_symbol_layer;\nexports.rotate_global = rotate_global;\nexports.redraw_legends_symbols = redraw_legends_symbols;\nexports.zoomClick = zoomClick;\nexports.handle_bg_color = handle_bg_color;\nexports.canvas_mod_size = canvas_mod_size;\n\nvar _alertifyjs = __webpack_require__(/*! alertifyjs */ \"./node_modules/alertifyjs/build/alertify.js\");\n\nvar _alertifyjs2 = _interopRequireDefault(_alertifyjs);\n\nvar _helpers_calc = __webpack_require__(/*! ./helpers_calc */ \"./js/helpers_calc.js\");\n\nvar _helpers_math = __webpack_require__(/*! ./helpers_math */ \"./js/helpers_math.js\");\n\nvar _legend = __webpack_require__(/*! ./legend */ \"./js/legend.js\");\n\nvar _scalebar = __webpack_require__(/*! ./layout_features/scalebar */ \"./js/layout_features/scalebar.js\");\n\nvar _north_arrow = __webpack_require__(/*! ./layout_features/north_arrow */ \"./js/layout_features/north_arrow.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar zoom = exports.zoom = d3.zoom().on('zoom', zoom_without_redraw);\nvar canvas_rotation_value = exports.canvas_rotation_value = null;\n\nfunction makeSvgMap() {\n // The div containing the svg map:\n var map_div = d3.select('#map');\n map_div.selectAll('*').remove();\n\n // The 'map':\n // (so actually the `map` variable is a reference to the d3 selection\n // of the main `svg` element on which we are drawing)\n var map = map_div.styles({ width: w + 'px', height: h + 'px' }).append('svg').attrs({ id: 'svg_map', width: w, height: h }).styles({ position: 'absolute', 'background-color': 'rgba(255, 255, 255, 0)' }).on('contextmenu', function () {\n d3.event.preventDefault();\n }).call(zoom);\n\n var svg_map = map.node();\n var defs = map.append('defs');\n return {\n map_div: map_div, map: map, svg_map: svg_map, defs: defs\n };\n}\n\nfunction zoom_without_redraw() {\n var rot_val = canvas_rotation_value || '';\n var transform = void 0;\n var t_val = void 0;\n if (!d3.event || !d3.event.transform || !d3.event.sourceEvent) {\n transform = d3.zoomTransform(svg_map);\n t_val = transform.toString() + rot_val;\n map.selectAll('.layer').transition().duration(50).style('stroke-width', function () {\n var lyr_name = global._app.id_to_layer.get(this.id);\n return data_manager.current_layers[lyr_name].fixed_stroke ? this.style.strokeWidth : data_manager.current_layers[lyr_name]['stroke-width-const'] / transform.k + 'px';\n }).attr('transform', t_val);\n map.selectAll('.scalable-legend').transition().duration(50).attr('transform', t_val);\n } else {\n t_val = d3.event.transform.toString() + rot_val;\n map.selectAll('.layer').transition().duration(50).style('stroke-width', function () {\n var lyr_name = global._app.id_to_layer.get(this.id);\n return data_manager.current_layers[lyr_name].fixed_stroke ? this.style.strokeWidth : data_manager.current_layers[lyr_name]['stroke-width-const'] / d3.event.transform.k + 'px';\n }).attr('transform', t_val);\n map.selectAll('.scalable-legend').transition().duration(50).attr('transform', t_val);\n }\n\n if (_scalebar.scaleBar.displayed) {\n _scalebar.scaleBar.update();\n }\n\n if (_app.legendRedrawTimeout) {\n clearTimeout(_app.legendRedrawTimeout);\n }\n _app.legendRedrawTimeout = setTimeout(redraw_legends_symbols, 650);\n var zoom_params = svg_map.__zoom;\n var _k = proj.scale() * zoom_params.k;\n // let zoom_k_scale = proj.scale() * zoom_params.k;\n document.getElementById('input-center-x').value = (0, _helpers_calc.round_value)(zoom_params.x, 2);\n document.getElementById('input-center-y').value = (0, _helpers_calc.round_value)(zoom_params.y, 2);\n document.getElementById('input-scale-k').value = _k > 2 || _k < -2 ? (0, _helpers_calc.round_value)(_k, 2) : (0, _helpers_calc.round_value)(_k, Math.round((0, _helpers_calc.get_nb_decimals)(_k) / 2));\n // let a = document.getElementById('form_projection'),\n // disabled_val = (zoom_k_scale > 200) && (window._target_layer_file != undefined || data_manager.result_data.length > 1)? '' : 'disabled';\n // a.querySelector('option[value=\"ConicConformalSec\"]').disabled = disabled_val;\n // a.querySelector('option[value=\"ConicConformalTangent\"]').disabled = disabled_val;\n}\n\n/**\n* Function redrawing the prop symbol / img / labels / waffles when the projection\n* changes (also taking care of redrawing point layer with appropriate 'pointRadius')\n*\n* @return {void}\n*\n*/\nfunction reproj_symbol_layer() {\n /* eslint-disable no-loop-func */\n var layers = Object.keys(data_manager.current_layers);\n var n_layers = layers.length;\n var lyr_name = void 0;\n for (var ix = 0; ix < n_layers; ix++) {\n lyr_name = layers[ix];\n if (data_manager.current_layers[lyr_name].renderer && (data_manager.current_layers[lyr_name].renderer.indexOf('PropSymbol') > -1 || data_manager.current_layers[lyr_name].renderer.indexOf('TypoSymbols') > -1 || data_manager.current_layers[lyr_name].renderer.indexOf('Label') > -1)) {\n var symbol = data_manager.current_layers[lyr_name].symbol;\n\n if (symbol === 'text') {\n // Reproject the labels :\n map.select('#' + global._app.layer_to_id.get(lyr_name)).selectAll(symbol).attrs(function (d) {\n var pt = path.centroid(d.geometry);\n return { x: pt[0], y: pt[1] };\n });\n } else if (symbol === 'image') {\n // Reproject pictograms :\n map.select('#' + global._app.layer_to_id.get(lyr_name)).selectAll(symbol).attrs(function (d) {\n var coords = path.centroid(d.geometry),\n size = +this.getAttribute('width').replace('px', '') / 2;\n return { x: coords[0] - size, y: coords[1] - size };\n });\n } else if (symbol === 'circle') {\n // Reproject Prop Symbol :\n map.select('#' + global._app.layer_to_id.get(lyr_name)).selectAll(symbol).style('display', function (d) {\n return isNaN(+path.centroid(d)[0]) ? 'none' : undefined;\n }).attrs(function (d) {\n var centroid = path.centroid(d);\n return {\n r: d.properties.prop_value,\n cx: centroid[0],\n cy: centroid[1]\n };\n });\n } else if (symbol === 'rect') {\n // Reproject Prop Symbol :\n map.select('#' + global._app.layer_to_id.get(lyr_name)).selectAll(symbol).style('display', function (d) {\n return isNaN(+path.centroid(d)[0]) ? 'none' : undefined;\n }).attrs(function (d) {\n var centroid = path.centroid(d),\n size = d.properties.prop_value;\n return {\n height: size,\n width: size,\n x: centroid[0] - size / 2,\n y: centroid[1] - size / 2\n };\n });\n }\n } else if (data_manager.current_layers[lyr_name].pointRadius !== undefined) {\n map.select('#' + global._app.layer_to_id.get(lyr_name)).selectAll('path').attr('d', path.pointRadius(data_manager.current_layers[lyr_name].pointRadius));\n } else if (data_manager.current_layers[lyr_name].renderer === 'TwoStocksWaffle') {\n var selection = svg_map.querySelector('#' + global._app.layer_to_id.get(lyr_name)).querySelectorAll('g');\n var nbFt = selection.length;\n if (data_manager.current_layers[lyr_name].symbol === 'circle') {\n for (var i = 0; i < nbFt; i++) {\n var centroid = path.centroid({\n type: 'Point',\n coordinates: selection[i].__data__.properties.centroid\n });\n var symbols = selection[i].querySelectorAll('circle');\n for (var j = 0, nb_symbol = symbols.length; j < nb_symbol; j++) {\n symbols[j].setAttribute('cx', centroid[0]);\n symbols[j].setAttribute('cy', centroid[1]);\n }\n }\n } else {\n for (var _i = 0; _i < nbFt; _i++) {\n var _centroid = path.centroid({\n type: 'Point',\n coordinates: selection[_i].__data__.properties.centroid\n });\n var _symbols = selection[_i].querySelectorAll('rect');\n for (var _j = 0, _nb_symbol = _symbols.length; _j < _nb_symbol; _j++) {\n _symbols[_j].setAttribute('x', _centroid[0]);\n _symbols[_j].setAttribute('y', _centroid[1]);\n }\n }\n }\n }\n }\n /* eslint-enable no-loop-func */\n}\n\nfunction rotate_global(angle) {\n exports.canvas_rotation_value = canvas_rotation_value = ['rotate(', angle, ')'].join('');\n var zoom_transform = d3.zoomTransform(svg_map);\n\n map.selectAll('g.layer').transition().duration(10).attr('transform', canvas_rotation_value + ',translate(' + [zoom_transform.x, zoom_transform.y] + '),scale(' + zoom_transform.k + ')');\n\n if (_north_arrow.northArrow.displayed) {\n var current_rotate = !isNaN(+_north_arrow.northArrow.svg_node.attr('rotate')) ? +_north_arrow.northArrow.svg_node.attr('rotate') : 0;\n _north_arrow.northArrow.svg_node.attr('transform', 'rotate(' + (+angle + current_rotate) + ',' + _north_arrow.northArrow.x_center + ', ' + _north_arrow.northArrow.y_center + ')');\n }\n zoom_without_redraw();\n}\n\nfunction redraw_legends_symbols(targeted_node) {\n var legend_nodes = targeted_node ? [targeted_node] : document.querySelectorAll('#legend_root_symbol');\n var hide = svg_map.__zoom.k > 4 || svg_map.__zoom.k < 0.15;\n var hidden = [];\n\n for (var i = 0; i < legend_nodes.length; ++i) {\n var layer_id = legend_nodes[i].classList[2].split('lgdf_')[1],\n layer_name = global._app.id_to_layer.get(layer_id),\n rendered_field = data_manager.current_layers[layer_name].rendered_field,\n nested = legend_nodes[i].getAttribute('nested'),\n join_line = legend_nodes[i].getAttribute('join_line'),\n display_value = legend_nodes[i].getAttribute('display'),\n visible = legend_nodes[i].style.visibility;\n\n var transform_param = legend_nodes[i].getAttribute('transform'),\n rounding_precision = legend_nodes[i].getAttribute('rounding_precision'),\n lgd_title = legend_nodes[i].querySelector('#legendtitle').innerHTML,\n lgd_subtitle = legend_nodes[i].querySelector('#legendsubtitle').innerHTML,\n notes = legend_nodes[i].querySelector('#legend_bottom_note').innerHTML;\n\n var rect_fill_value = legend_nodes[i].getAttribute('visible_rect') === 'true' ? {\n color: legend_nodes[i].querySelector('#under_rect').style.fill,\n opacity: legend_nodes[i].querySelector('#under_rect').style.fillOpacity\n } : undefined;\n\n legend_nodes[i].remove();\n (0, _legend.createLegend_symbol)(layer_name, rendered_field, lgd_title, lgd_subtitle, nested, join_line, rect_fill_value, rounding_precision, notes);\n var new_lgd = document.querySelector(['#legend_root_symbol.lgdf_', layer_id].join(''));\n new_lgd.style.visibility = visible;\n if (transform_param) new_lgd.setAttribute('transform', transform_param);\n\n if (display_value) {\n new_lgd.setAttribute('display', display_value);\n hidden.push(true);\n } else if (hide) {\n new_lgd.setAttribute('display', 'none');\n }\n }\n if (hide && !(hidden.length === legend_nodes.length)) {\n _alertifyjs2.default.notify(_tr('app_page.notification.warning_deactivation_prop_symbol_legend'), 'warning', 5);\n }\n\n if (!targeted_node) {\n var legend_nodes_links_discont = document.querySelectorAll('#legend_root_lines_class');\n for (var _i2 = 0; _i2 < legend_nodes_links_discont.length; ++_i2) {\n var _layer_id = legend_nodes_links_discont[_i2].classList[2].split('lgdf_')[1],\n _layer_name = global._app.id_to_layer.get(_layer_id),\n _rendered_field = data_manager.current_layers[_layer_name].rendered_field,\n _display_value = legend_nodes_links_discont[_i2].getAttribute('display'),\n _visible = legend_nodes_links_discont[_i2].style.visibility;\n\n var _transform_param = legend_nodes_links_discont[_i2].getAttribute('transform'),\n _rounding_precision = legend_nodes_links_discont[_i2].getAttribute('rounding_precision'),\n _lgd_title = legend_nodes_links_discont[_i2].querySelector('#legendtitle').innerHTML,\n _lgd_subtitle = legend_nodes_links_discont[_i2].querySelector('#legendsubtitle').innerHTML,\n _notes = legend_nodes_links_discont[_i2].querySelector('#legend_bottom_note').innerHTML;\n\n var _rect_fill_value = legend_nodes_links_discont[_i2].getAttribute('visible_rect') === 'true' ? {\n color: legend_nodes_links_discont[_i2].querySelector('#under_rect').style.fill,\n opacity: legend_nodes_links_discont[_i2].querySelector('#under_rect').style.fillOpacity\n } : undefined;\n\n legend_nodes_links_discont[_i2].remove();\n (0, _legend.createLegend_discont_links)(_layer_name, _rendered_field, _lgd_title, _lgd_subtitle, _rect_fill_value, _rounding_precision, _notes);\n var _new_lgd = document.querySelector(['#legend_root_lines_class.lgdf_', _layer_id].join(''));\n _new_lgd.style.visibility = _visible;\n if (_transform_param) {\n _new_lgd.setAttribute('transform', _transform_param);\n }\n\n if (_display_value) {\n _new_lgd.setAttribute('display', _display_value);\n }\n // hidden.push(true);\n // } else if (hide) {\n // new_lgd.setAttribute('display', 'none');\n // }\n }\n }\n}\n\nfunction interpolateZoom(translate, scale) {\n var transform = d3.zoomTransform(svg_map);\n return d3.transition().duration(225).tween('zoom', function () {\n var iTranslate = d3.interpolate([transform.x, transform.y], translate);\n var iScale = d3.interpolate(transform.k, scale);\n return function (t_value) {\n svg_map.__zoom.k = iScale(t_value);\n var _t = iTranslate(t_value);\n svg_map.__zoom.x = _t[0];\n svg_map.__zoom.y = _t[1];\n zoom_without_redraw();\n };\n });\n}\n\nfunction zoomClick() {\n if (map_div.select('#hand_button').classed('locked')) return;\n var direction = this.id === 'zoom_in' ? 1 : -1,\n factor = 0.1,\n center = [w / 2, h / 2],\n transform = d3.zoomTransform(svg_map),\n translate = [transform.x, transform.y],\n view = { x: translate[0], y: translate[1], k: transform.k };\n var target_zoom = 1,\n translate0 = [],\n l = [];\n d3.event.preventDefault();\n target_zoom = transform.k * (1 + factor * direction);\n translate0 = [(center[0] - view.x) / view.k, (center[1] - view.y) / view.k];\n view.k = target_zoom;\n l = [translate0[0] * view.k + view.x, translate0[1] * view.k + view.y];\n view.x += center[0] - l[0];\n view.y += center[1] - l[1];\n interpolateZoom([view.x, view.y], view.k);\n}\n\n// Change color of the background\n// (ie the parent \"svg\" element on the top of which group of elements have been added)\nfunction handle_bg_color(color) {\n map.style('background-color', color);\n}\n\n/** Function triggered by the change of map/canvas size\n* @param {Array} shape - An Array of two elements : [width, height] to use;\n* generally only used once at the time so `shape` values\n* are like [null, 750] or [800, null]\n* but also works with the 2 params together like [800, 750])\n*/\nfunction canvas_mod_size(shape) {\n if (shape[0]) {\n w = +shape[0];\n map.attr('width', w).call(zoom_without_redraw);\n map_div.style('width', w + 'px');\n if (w + 360 + 33 < window.innerWidth) {\n document.querySelector('.light-menu').style.right = '-33px';\n } else {\n document.querySelector('.light-menu').style.right = '0px';\n }\n }\n if (shape[1]) {\n h = +shape[1];\n map.attr('height', h).call(zoom_without_redraw);\n map_div.style('height', h + 'px');\n }\n (0, _legend.move_legends)();\n\n // Lets update the corresponding fields in the export section :\n var ratio = void 0;\n var format = document.getElementById('select_png_format').value;\n if (format === 'web') {\n ratio = 1;\n } else if (format === 'user_defined') {\n ratio = 118.11;\n } else {\n return;\n }\n // const zoom_params = svg_map.__zoom;\n document.getElementById('export_png_width').value = (0, _helpers_math.Mround)(w * ratio * 10) / 10;\n document.getElementById('export_png_height').value = (0, _helpers_math.Mround)(h * ratio * 10) / 10;\n document.getElementById('input-width').value = w;\n document.getElementById('input-height').value = h;\n}\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../node_modules/webpack/buildin/global.js */ \"./node_modules/webpack/buildin/global.js\")))\n\n//# sourceURL=webpack:///./js/map_ctrl.js?");
-
-/***/ }),
-
-/***/ "./js/map_export.js":
-/*!**************************!*\
- !*** ./js/map_export.js ***!
- \**************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-eval("/* WEBPACK VAR INJECTION */(function(global) {\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.export_compo_svg = export_compo_svg;\nexports.export_compo_png = export_compo_png;\nexports.export_layer_geo = export_layer_geo;\n\nvar _helpers = __webpack_require__(/*! ./helpers */ \"./js/helpers.js\");\n\nvar _helpers_math = __webpack_require__(/*! ./helpers_math */ \"./js/helpers_math.js\");\n\nvar _fonts = __webpack_require__(/*! ./fonts */ \"./js/fonts.js\");\n\nfunction patchSvgForFonts() {\n function getListUsedFonts() {\n var elems = [svg_map.getElementsByTagName('text'), svg_map.getElementsByTagName('p')];\n var needed_definitions = [];\n elems.map(function (d) {\n return d || [];\n });\n for (var j = 0; j < 2; j++) {\n var _loop = function _loop(i) {\n var font_elem = elems[j][i].style.fontFamily;\n _fonts.custom_fonts.forEach(function (font) {\n if (font_elem.indexOf(font) > -1 && needed_definitions.indexOf(font) === -1) {\n needed_definitions.push(font);\n }\n });\n };\n\n for (var i = 0; i < elems[j].length; i++) {\n _loop(i);\n }\n }\n return needed_definitions;\n }\n\n var needed_definitions = getListUsedFonts();\n if (needed_definitions.length === 0) {\n return;\n }\n var fonts_definitions = Array.prototype.filter.call(document.styleSheets, function (i) {\n return i.href && i.href.indexOf('style-fonts.css') > -1 ? i : null;\n })[0].cssRules;\n var fonts_to_add = needed_definitions.map(function (name) {\n return String(fonts_definitions[_fonts.custom_fonts.indexOf(name)].cssText);\n });\n var style_elem = document.createElement('style');\n style_elem.innerHTML = fonts_to_add.join(' ');\n svg_map.querySelector('defs').appendChild(style_elem);\n}\n\nfunction unpatchSvgForFonts() {\n var defs_style = svg_map.querySelector('defs').querySelector('style');\n if (defs_style) defs_style.remove();\n}\n\nfunction patchSvgForInkscape() {\n svg_map.setAttribute('xmlns:inkscape', 'http://www.inkscape.org/namespaces/inkscape');\n var elems = svg_map.getElementsByTagName('g');\n for (var i = elems.length - 1; i > -1; i--) {\n if (elems[i].id === '') {\n continue;\n } else if (elems[i].classList.contains('layer')) {\n elems[i].setAttribute('inkscape:label', elems[i].id);\n } else if (elems[i].id.indexOf('legend') > -1) {\n var layer_name = elems[i].className.baseVal.split('lgdf_')[1];\n elems[i].setAttribute('inkscape:label', 'legend_' + layer_name);\n } else {\n elems[i].setAttribute('inkscape:label', elems[i].id);\n }\n elems[i].setAttribute('inkscape:groupmode', 'layer');\n }\n}\n\nfunction unpatchSvgForInkscape() {\n svg_map.removeAttribute('xmlns:inkscape');\n var elems = svg_map.getElementsByTagName('g');\n for (var i = elems.length - 1; i > -1; i--) {\n if (elems[i].id !== '') {\n elems[i].removeAttribute('inkscape:label');\n elems[i].removeAttribute('inkscape:groupmode');\n }\n }\n}\n\nfunction patchSvgForForeignObj() {\n var elems = document.getElementsByTagName('foreignObject');\n var originals = [];\n for (var i = 0; i < elems.length; i++) {\n var el = elems[i];\n originals.push([el.getAttribute('width'), el.getAttribute('height')]);\n el.setAttribute('width', '100%');\n el.setAttribute('height', '100%');\n }\n return originals;\n}\n\nfunction unpatchSvgForForeignObj(originals) {\n var elems = document.getElementsByTagName('foreignObject');\n for (var i = 0; i < originals.length; i++) {\n var el = elems[i];\n el.setAttribute('width', originals[i][0]);\n el.setAttribute('height', originals[i][1]);\n }\n}\n\nfunction patchSvgBackground() {\n var background = document.createElement('rect');\n background.id = 'background';\n background.setAttribute('width', '100%');\n background.setAttribute('height', '100%');\n background.setAttribute('fill', document.getElementById('bg_color').value);\n svg_map.insertBefore(background, svg_map.firstChild);\n}\n\nfunction unpatchSvgBackground() {\n svg_map.querySelector('rect#background').remove();\n}\n\nfunction check_output_name(name, extension) {\n var _name = name.toLowerCase().indexOf(extension) > -1 ? name.substring(0, name.lastIndexOf('.')) : name;\n var regexpName = new RegExp(/^[().a-z0-9_-]+$/i);\n if (regexpName.test(_name) && _name.length < 250) {\n return _name + '.' + extension;\n }\n return 'export.' + extension;\n}\n\n/*\n* Straight from http://stackoverflow.com/a/26047748/5050917\n*\n*/\nfunction changeResolution(canvas, scaleFactor) {\n // Set up CSS size if it's not set up already\n if (!canvas.style.width) canvas.style.width = canvas.width + 'px'; // eslint-disable-line no-param-reassign\n if (!canvas.style.height) canvas.style.height = canvas.height + 'px'; // eslint-disable-line no-param-reassign\n\n canvas.width = (0, _helpers_math.Mceil)(canvas.width * scaleFactor); // eslint-disable-line no-param-reassign\n canvas.height = (0, _helpers_math.Mceil)(canvas.height * scaleFactor); // eslint-disable-line no-param-reassign\n var ctx = canvas.getContext('2d');\n ctx.scale(scaleFactor, scaleFactor);\n}\n\nfunction export_compo_svg(output_name) {\n output_name = check_output_name(output_name, 'svg'); // eslint-disable-line no-param-reassign\n patchSvgForInkscape();\n patchSvgForFonts();\n patchSvgBackground();\n var dimensions_foreign_obj = patchSvgForForeignObj();\n var targetSvg = document.getElementById('svg_map'),\n serializer = new XMLSerializer();\n var source = serializer.serializeToString(targetSvg);\n\n if (!source.match(/^]+xmlns=\"http\\:\\/\\/www\\.w3\\.org\\/2000\\/svg\"/)) {\n source = source.replace(/^