{"id":6786,"date":"2026-06-10T12:03:06","date_gmt":"2026-06-10T10:03:06","guid":{"rendered":"https:\/\/www.open-user-map.com\/?page_id=6786"},"modified":"2026-06-10T12:37:49","modified_gmt":"2026-06-10T10:37:49","slug":"demo-lines-areas","status":"publish","type":"page","link":"https:\/\/www.open-user-map.com\/es\/demo-lines-areas\/","title":{"rendered":"Demostraci\u00f3n: L\u00edneas y \u00e1reas"},"content":{"rendered":"<h3 class=\"wp-block-heading\">A\u00f1ade algo m\u00e1s que puntos a tu mapa de WordPress<\/h3>\n\n\n\n<p>Open User Map ahora es compatible con <strong>L\u00edneas y \u00e1reas<\/strong> como funci\u00f3n PRO. En lugar de limitarse a a\u00f1adir marcadores individuales, los usuarios pueden dibujar trazados conectados o l\u00edmites cerrados directamente sobre el mapa.<\/p>\n\n\n\n<p>Utilice <strong>L\u00edneas<\/strong> para rutas, senderos, obras en la carretera, zonas de reparto, caminos peatonales o conexiones entre lugares. Utiliza <strong>\u00c1reas<\/strong> para parques, zonas en obras, \u00e1reas de servicio, reservas naturales, zonas restringidas o cualquier otro l\u00edmite que desee visualizar.<\/p>\n\n\n\n<p>Esto hace que tu mapa sea mucho m\u00e1s flexible: ahora un mismo mapa puede mostrar marcadores, rutas y zonas a la vez, cada uno con su propia categor\u00eda, color, contenido emergente, archivos multimedia y campos personalizados.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n\n<div class=\"open-user-map\">\n\n  \n  \n    \n  \n  <!-- Map Container -->\n  <div class=\"oum-map-container\">\n    \n<div class=\"box-wrap map-size-default\">\n  \n  <div class=\"map-wrap\">\n    <div class=\"oum-loading-overlay\">\n      <div class=\"oum-loading-spinner\"><\/div>\n    <\/div>\n    <div id=\"map-20210929\" class=\"leaflet-map map-style_CartoDB.Positron\" data-oum-tile-provider-container=\"cartodb\"><\/div>\n\n    \n    \n        \n              \n          \n              <div id=\"open-add-location-overlay\" class=\"open-add-location-overlay oum-hidden\" style=\"background-color: #e82c71\"><span class=\"btn_icon\">+<\/span><span class=\"btn_text\">A\u00f1adir ubicaci\u00f3n<\/span><\/div>\n\n          \n              \n      \n    \n          <div class=\"oum-map-filter-wrapper\">\n        \n                  <div class=\"oum-filter-controls active oum-hidden\">\n            <div class=\"oum-filter-toggle\"><\/div>\n            <div class=\"oum-filter-list\">\n              <div class=\"close-filter-list\">\u2715<\/div>\n              \n              <!-- Toggle All Checkbox -->\n                              <div class=\"oum-toggle-all-wrapper\">\n                  <label class=\"oum-toggle-all-label\">\n                    <input style=\"accent-color: #e82c71\" type=\"checkbox\" id=\"oum-toggle-all\" class=\"oum-toggle-all-checkbox\">\n                    <span class=\"oum-toggle-all-text\">Seleccionar todo<\/span>\n                  <\/label>\n                <\/div>\n                            \n              \n              \n                \n                <label>\n                  <input style=\"accent-color: #e82c71\" type=\"checkbox\" name=\"type\" value=\"194\" checked>\n                                      <span class=\"oum-filter-category-shape-icon\" style=\"color: #dd9933\" aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 64 64\" fill=\"none\" class=\"route-icon\" aria-hidden=\"true\">\n  <path\n    d=\"M18 42L33 32L43 14\"\n    stroke=\"currentColor\"\n    stroke-width=\"4.5\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n  \/>\n  <circle cx=\"18\" cy=\"42\" r=\"5.5\" fill=\"currentColor\" \/>\n  <circle cx=\"33\" cy=\"32\" r=\"5.5\" fill=\"currentColor\" \/>\n  <circle cx=\"43\" cy=\"14\" r=\"5.5\" fill=\"currentColor\" \/>\n<\/svg><\/span>\n                                    <span class=\"oum-filter-category-name\">Construcci\u00f3n de carreteras<\/span>\n                <\/label>\n\n              \n                \n                <label>\n                  <input style=\"accent-color: #e82c71\" type=\"checkbox\" name=\"type\" value=\"195\" checked>\n                                      <span class=\"oum-filter-category-shape-icon\" style=\"color: #1e73be\" aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 64 64\" fill=\"none\" class=\"route-icon\" aria-hidden=\"true\">\n  <path\n    d=\"M18 42L33 32L43 14\"\n    stroke=\"currentColor\"\n    stroke-width=\"4.5\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n  \/>\n  <circle cx=\"18\" cy=\"42\" r=\"5.5\" fill=\"currentColor\" \/>\n  <circle cx=\"33\" cy=\"32\" r=\"5.5\" fill=\"currentColor\" \/>\n  <circle cx=\"43\" cy=\"14\" r=\"5.5\" fill=\"currentColor\" \/>\n<\/svg><\/span>\n                                    <span class=\"oum-filter-category-name\">Ruta de senderismo<\/span>\n                <\/label>\n\n              \n                \n                <label>\n                  <input style=\"accent-color: #e82c71\" type=\"checkbox\" name=\"type\" value=\"196\" checked>\n                                      <span class=\"oum-filter-category-shape-icon\" style=\"color: #8224e3\" aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 64 64\" fill=\"none\" class=\"area-icon\" aria-hidden=\"true\">\n  <path\n    d=\"M18 18L44 13L50 38L29 50L13 35L18 18Z\"\n    fill=\"currentColor\"\n    fill-opacity=\"0.5\"\n  \/>\n  <path\n    d=\"M18 18L44 13L50 38L29 50L13 35L18 18Z\"\n    stroke=\"currentColor\"\n    stroke-width=\"4.5\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n  \/>\n  <circle cx=\"18\" cy=\"18\" r=\"5.5\" fill=\"currentColor\" \/>\n  <circle cx=\"44\" cy=\"13\" r=\"5.5\" fill=\"currentColor\" \/>\n  <circle cx=\"50\" cy=\"38\" r=\"5.5\" fill=\"currentColor\" \/>\n  <circle cx=\"29\" cy=\"50\" r=\"5.5\" fill=\"currentColor\" \/>\n  <circle cx=\"13\" cy=\"35\" r=\"5.5\" fill=\"currentColor\" \/>\n<\/svg><\/span>\n                                    <span class=\"oum-filter-category-name\">Reserva natural<\/span>\n                <\/label>\n\n              \n                \n                <label>\n                  <input style=\"accent-color: #e82c71\" type=\"checkbox\" name=\"type\" value=\"193\" checked>\n                                      <span class=\"oum-filter-category-shape-icon\" style=\"color: #81d742\" aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 64 64\" fill=\"none\" class=\"area-icon\" aria-hidden=\"true\">\n  <path\n    d=\"M18 18L44 13L50 38L29 50L13 35L18 18Z\"\n    fill=\"currentColor\"\n    fill-opacity=\"0.5\"\n  \/>\n  <path\n    d=\"M18 18L44 13L50 38L29 50L13 35L18 18Z\"\n    stroke=\"currentColor\"\n    stroke-width=\"4.5\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n  \/>\n  <circle cx=\"18\" cy=\"18\" r=\"5.5\" fill=\"currentColor\" \/>\n  <circle cx=\"44\" cy=\"13\" r=\"5.5\" fill=\"currentColor\" \/>\n  <circle cx=\"50\" cy=\"38\" r=\"5.5\" fill=\"currentColor\" \/>\n  <circle cx=\"29\" cy=\"50\" r=\"5.5\" fill=\"currentColor\" \/>\n  <circle cx=\"13\" cy=\"35\" r=\"5.5\" fill=\"currentColor\" \/>\n<\/svg><\/span>\n                                    <span class=\"oum-filter-category-name\">Parque<\/span>\n                <\/label>\n\n                          <\/div>\n          <\/div>\n              <\/div>\n    \n          \n        \n          <div class=\"oum-attribution\">hecho con <a href=\"https:\/\/www.open-user-map.com\/es\/?ref=map\" title=\"Abrir mapa de usuario | Todo el mundo puede a\u00f1adir ubicaciones\" target=\"_blank\">OUM PRO<\/a><\/div>\n\n        \n          \n    <script type=\"text\/javascript\" id=\"oum-init-map\" data-category=\"functional\" class=\"cmplz-native\" data-oum-tile-provider=\"cartodb\">\n\n      map_el = `map-20210929`;\n\n      if(document.getElementById(map_el)) {\n        \/* Transfer PHP array to JS json *\/\n        var oum_all_locations = [{\"title\":\"M\u00fcggelberge\",\"lat\":\"52.407679\",\"lng\":\"13.666649\",\"zoom\":\"11\",\"geometry_type\":\"polygon\",\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[13.602448,52.447502],[13.588715,52.407278],[13.590775,52.391765],[13.601074,52.376246],[13.619614,52.382119],[13.644333,52.369953],[13.699265,52.367856],[13.721924,52.3947],[13.744583,52.408954],[13.715744,52.422366],[13.684845,52.431584],[13.657379,52.429489],[13.62236,52.431584],[13.623734,52.443314],[13.602448,52.447502]]]},\"show_measurement\":true,\"category_color\":\"#8224e3\",\"content\":\"junio 10, 2026 M\u00fcggelberge Access: Walking Boat Rating: \u2600\ufe0f\u2600\ufe0f Read more muggelberge\",\"icon\":\"https:\/\/www.open-user-map.com\/wp-content\/plugins\/2026-03-26_0033%20(beta)\/src\/leaflet\/images\/marker-icon_default-2x.png\",\"types\":[\"196\"],\"post_id\":\"6792\",\"address\":\"\",\"text\":\"\",\"image\":\"https:\/\/www.open-user-map.com\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-10.-Juni-2026-13_17_26-1024x768.png\",\"audio\":\"\",\"video\":\"\",\"custom_fields\":[{\"index\":1643970620271,\"label\":\"Access\",\"val\":[\"Walking\",\"Boat\"],\"fieldtype\":\"checkbox\",\"uselabelastextoption\":false,\"use12hour\":false,\"private\":false},{\"index\":1691755780693,\"label\":\"Rating\",\"val\":\"\u2600\ufe0f\u2600\ufe0f\",\"fieldtype\":\"radio\",\"uselabelastextoption\":false,\"use12hour\":false,\"private\":false}],\"votes\":0,\"star_rating_avg\":0,\"star_rating_count\":0},{\"title\":\"Grunewald\",\"lat\":\"52.468177\",\"lng\":\"13.223076\",\"zoom\":\"11\",\"geometry_type\":\"polygon\",\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[13.272171,52.464217],[13.241272,52.452911],[13.206253,52.440347],[13.178787,52.430292],[13.173981,52.449142],[13.189087,52.461705],[13.19252,52.496023],[13.20694,52.506062],[13.247452,52.504389],[13.263245,52.484726],[13.272171,52.464217]]]},\"show_measurement\":true,\"category_color\":\"#81d742\",\"content\":\"junio 10, 2026 Grunewald Rating: \u2600\ufe0f\u2600\ufe0f\u2600\ufe0f Read more grunewald\",\"icon\":\"https:\/\/www.open-user-map.com\/wp-content\/plugins\/2026-03-26_0033%20(beta)\/src\/leaflet\/images\/marker-icon_default-2x.png\",\"types\":[\"193\"],\"post_id\":\"6791\",\"address\":\"\",\"text\":\"\",\"image\":\"https:\/\/www.open-user-map.com\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-10.-Juni-2026-13_33_19-1024x768.png\",\"audio\":\"\",\"video\":\"\",\"custom_fields\":[{\"index\":1691755780693,\"label\":\"Rating\",\"val\":\"\u2600\ufe0f\u2600\ufe0f\u2600\ufe0f\",\"fieldtype\":\"radio\",\"uselabelastextoption\":false,\"use12hour\":false,\"private\":false}],\"votes\":0,\"star_rating_avg\":0,\"star_rating_count\":0},{\"title\":\"Mauerweg\",\"lat\":\"52.6440235\",\"lng\":\"13.267536\",\"zoom\":\"12\",\"geometry_type\":\"polyline\",\"geometry\":{\"type\":\"LineString\",\"coordinates\":[[13.226852,52.627763],[13.264275,52.627346],[13.264618,52.634227],[13.261528,52.640691],[13.269768,52.640066],[13.284187,52.641733],[13.285217,52.653407],[13.282127,52.660701],[13.307533,52.658826],[13.30101,52.653615],[13.30822,52.644652]]},\"show_measurement\":true,\"category_color\":\"#1e73be\",\"content\":\"junio 10, 2026 Mauerweg Rating: \u2600\ufe0f\u2600\ufe0f\u2600\ufe0f Read more mauerweg\",\"icon\":\"https:\/\/www.open-user-map.com\/wp-content\/plugins\/2026-03-26_0033%20(beta)\/src\/leaflet\/images\/marker-icon_default-2x.png\",\"types\":[\"195\"],\"post_id\":\"6790\",\"address\":\"\",\"text\":\"\",\"image\":\"https:\/\/www.open-user-map.com\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-10.-Juni-2026-13_31_38-1024x768.png\",\"audio\":\"\",\"video\":\"\",\"custom_fields\":[{\"index\":1691755780693,\"label\":\"Rating\",\"val\":\"\u2600\ufe0f\u2600\ufe0f\u2600\ufe0f\",\"fieldtype\":\"radio\",\"uselabelastextoption\":false,\"use12hour\":false,\"private\":false}],\"votes\":1,\"star_rating_avg\":0,\"star_rating_count\":0},{\"title\":\"Bridge Construction\",\"lat\":\"52.5067365\",\"lng\":\"13.284874\",\"zoom\":\"12\",\"geometry_type\":\"polyline\",\"geometry\":{\"type\":\"LineString\",\"coordinates\":[[13.290024,52.494503],[13.284874,52.49513],[13.279724,52.501196],[13.285904,52.511443],[13.282814,52.51897]]},\"show_measurement\":true,\"category_color\":\"#dd9933\",\"content\":\"junio 10, 2026 Bridge Construction Read more bridge-construction\",\"icon\":\"https:\/\/www.open-user-map.com\/wp-content\/plugins\/2026-03-26_0033%20(beta)\/src\/leaflet\/images\/marker-icon_default-2x.png\",\"types\":[\"194\"],\"post_id\":\"6789\",\"address\":\"\",\"text\":\"\",\"image\":\"https:\/\/www.open-user-map.com\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-10.-Juni-2026-13_19_52-1024x768.png\",\"audio\":\"\",\"video\":\"\",\"custom_fields\":[],\"votes\":0,\"star_rating_avg\":0,\"star_rating_count\":0}];\n\n        \/\/ Wait for the main initialization function to be available, then call it\n        function oumWaitForMainInit() {\n          if (typeof oumInitializeMap === 'function') {\n            console.log('\ud83d\uddfa\ufe0f Open User Map: Starting');\n            \n            \/\/ Initialize the map\n            oumInitializeMap();\n          } else {\n            setTimeout(oumWaitForMainInit, 100);\n          }\n        }\n        \n        setTimeout(oumWaitForMainInit, 100);\n      }\n\n    <\/script>\n\n    <script type=\"text\/javascript\" id=\"oum-inline-js\" \n      data-category=\"functional\" \n      class=\"cmplz-native\" \n      data-minify=\"0\"\n      data-no-optimize=\"1\"\n      data-no-defer=\"1\"\n      data-no-combine=\"1\"\n      data-cfasync=\"false\"\n      data-pagespeed-no-defer\n      data-boot=\"1\">\n\n      map_el = `map-20210929`;\n\n      if(document.getElementById(map_el)) {\n\n        \/\/ Wait for OUMLoader to be defined\n        function oumLoading() {\n          if (typeof OUMLoader !== 'undefined') {\n            \/\/ Initialize loader for this map\n            OUMLoader.initLoader(map_el);\n\n            \/\/ Add event listener for map initialization complete\n            document.addEventListener('oum:map_initialized', function(e) {\n              if (e.detail.mapId === map_el) {\n                OUMLoader.setMapInitialized(map_el);\n              }\n            });\n          } else {\n            \/\/ If OUMLoader is not yet defined, wait and try again\n            setTimeout(oumLoading, 100);\n          }\n        }\n\n        \/\/ OUM Loading Spinner\n        oumLoading();\n\n        \/\/ OUM inline JS variables\n        var mapStyle = `CartoDB.Positron`;\n        var oum_tile_provider_mapbox_key = `pk.eyJ1IjoiMTAwd3VuZGVyIiwiYSI6ImNsbmtxZGpxdDB1c2oybHJ6YTR6NWR0dXYifQ.gAAi57QGX_Dh1Q7ozFh1Xg`;\n        var marker_icon_url = `https:\/\/www.open-user-map.com\/wp-content\/plugins\/2026-03-26_0033%20(beta)\/src\/leaflet\/images\/marker-icon_default-2x.png`;\n        var marker_shadow_url = `https:\/\/www.open-user-map.com\/wp-content\/plugins\/2026-03-26_0033%20(beta)\/src\/leaflet\/images\/marker-shadow.png`;\n        var oum_enable_scrollwheel_zoom_map = false;\n        var oum_enable_cluster = true;\n        var oum_enable_fullscreen = true;\n\n        var oum_enable_searchbar = false;\n        var oum_searchbar_type = `live_filter`;\n\n        var oum_geosearch_selected_provider = ``; \n        var oum_geosearch_provider = `here`;\n        var oum_geosearch_provider_geoapify_key = ``;\n        var oum_geosearch_provider_here_key = `ViSl2eu1vcWn_CjyoNg5R3mk7tXgy6XUmUcgclmIwag`;\n        var oum_geosearch_provider_mapbox_key = ``;\n        \n        var oum_enable_searchaddress_button = true;\n        var oum_searchaddress_label = `Search address`;\n\n        var oum_enable_searchmarkers_button = true;\n        var oum_searchmarkers_label = `Search marker (try fish or sand)`;\n        var oum_searchmarkers_zoom = `8`;\n\n        var oum_enable_currentlocation = true;\n        var oum_action_after_submit = `text`;\n        var thankyou_redirect = ``;\n        var start_lat = Number(52.51801300765411);\n        var start_lng = Number(13.55608175702807);\n        var start_zoom = Number(9.6);\n        \n        var oum_enable_fixed_map_bounds = ``;\n        var oum_use_settings_start_location = false;\n        var oum_has_regions = false;\n        var oum_enable_multiple_marker_types = `true`;\n        var oum_hide_filterbox = false;\n        var oum_hide_location_popup = false;\n        var oum_enable_address = ``;\n        var oum_enable_address_autofill = ``;\n\n        \/\/ WordPress timezone for opening hours calculations\n        var oum_wordpress_timezone = `Europe\/Berlin`;\n\n        \/\/ Custom Image data\n        var oum_custom_image_url = `https:\/\/www.open-user-map.com\/wp-content\/uploads\/2025\/11\/comic_world.png`;\n        var oum_custom_image_bounds = {\"north\":\"78.332916\",\"south\":\"-66.933997\",\"east\":\"180\",\"west\":\"-166.515625\"};\n        var oum_custom_image_hide_tiles = false;\n        var oum_custom_image_background_color = `#ffffff`;\n\n        var oum_location = {};\n        var oum_custom_css = '';\n        var oum_custom_script = '';\n        var oum_max_image_filesize = 10;\n        var oumMap;\n        var oumMap2;\n\n        \/**\n         * Conditional Field Feature\n         * \n         * @param {string} sourceField - The source field selector\n         * @param {string} targetField - The target field selector\n         * @param {array} condShow - The values that should show the target field\n         * @param {array|null} condHide - The values that should hide the target field. If empty\/null\/undefined, the field will be hidden when condShow is not met.\n         *\/\n        var oumConditionalField = (sourceField, targetField, condShow, condHide = null) => {\n            const sourceElements = document.querySelectorAll(sourceField); \/\/ Select all radios\/checkboxes or single select\n            const targetElementWrapper = document.querySelector(targetField)?.parentElement; \/* works with custom fields only *\/\n\n            \/\/ Check if both sourceElements and targetElementWrapper exist\n            if (!sourceElements.length) {\n                console.warn(`OUM: Source field(s) not found: ${sourceField}`);\n                return;\n            }\n\n            if (!targetElementWrapper) {\n                console.warn(`OUM: Target field wrapper not found: ${targetField}`);\n                return;\n            }\n\n            \/* Event listener for change *\/\n            const onChangeHandler = function() {\n                \/\/ Get selected values for checkboxes and single selected value for radios\/select\n                const selectedValues = Array.from(sourceElements)\n                    .filter(element => element.checked || element.tagName === 'SELECT')\n                    .map(element => element.value);\n\n                const selectedValue = selectedValues[0]; \/\/ For radios and selects, we use only the first (and only) value\n\n                console.log('OUM: run condition', {selectedValue, sourceField, targetField, condShow, condHide});\n                \n                \/\/ Show or hide target field based on the selected value(s)\n                if (condShow.includes(selectedValue)) {\n                    \/\/ Show the field if condShow condition is met\n                    targetElementWrapper.style.display = 'block';\n                } else if (condHide && Array.isArray(condHide) && condHide.length > 0 && condHide.includes(selectedValue)) {\n                    \/\/ Hide the field if condHide is provided and condition is met\n                    targetElementWrapper.style.display = 'none';\n                } else if (!condHide || (Array.isArray(condHide) && condHide.length === 0)) {\n                    \/\/ If condHide is empty\/null\/undefined, hide the field when condShow is not met\n                    targetElementWrapper.style.display = 'none';\n                }\n            };\n\n            \/* Attach the event listener to each radio\/checkbox or select *\/\n            sourceElements.forEach(element => {\n                element.addEventListener('change', onChangeHandler);\n            });\n\n            \/* Trigger initially *\/\n            onChangeHandler(); \/\/ Call it directly to set initial state\n        };\n\n        \/**\n         * Add Custom Styles\n         *\/\n        \n                            \/* custom color *\/\n          oum_custom_css += `\n            .open-user-map .add-location #close-add-location-overlay:hover {color: #e82c71 !important}\n            .open-user-map .box-wrap .map-wrap .open-add-location-overlay {background-color: #e82c71 !important}\n            .open-user-map .box-wrap .map-wrap .open-add-location-overlay:hover,\n            .open-user-map .box-wrap .map-wrap .open-add-location-overlay:active {background-color: #d12866 !important}\n            .open-user-map .box-wrap .map-wrap .oum-filter-controls .oum-filter-list .close-filter-list:hover {color: #e82c71 !important}\n            .open-user-map .oum-advanced-filter-button .oum-advanced-filter-content .close-advanced-filter:hover,\n            .open-user-map .oum-advanced-filter-panel .oum-advanced-filter-content .close-advanced-filter:hover {color: #e82c71 !important}\n            .open-user-map input.oum-switch[type=\"checkbox\"]:checked + label::before {background-color: #e82c71 !important}\n            .open-user-map .add-location .location-overlay-content #oum_add_location .oum-required-indicator {color: #e82c71 !important}\n            .open-user-map .add-location .location-overlay-content #oum_add_location h2 {color: #e82c71 !important}\n            .open-user-map .add-location .location-overlay-content #oum_add_location input[type=text]:focus,\n            .open-user-map .add-location .location-overlay-content #oum_add_location input[type=email]:focus,\n            .open-user-map .add-location .location-overlay-content #oum_add_location input[type=url]:focus,\n            .open-user-map .add-location .location-overlay-content #oum_add_location textarea:focus,\n            .open-user-map .add-location .location-overlay-content #oum_add_location select:focus {border-color: #e82c71 !important; box-shadow: 0 0 0 2px #e82c711a !important}\n            .open-user-map .add-location .location-overlay-content #oum_add_location_thankyou h3 {color: #e82c71 !important}\n            .open-user-map .oum_location_text a {color: #e82c71 !important}\n            .open-user-map .oum_location_text .oum_vote_button_wrap .oum_vote_button.voted {background: #e82c71 !important; border-color: #e82c71 !important;}\n            .open-user-map .oum-tabs {border-color: #e82c71 !important}\n            .open-user-map .oum-tabs .nav-item:hover {color: #e82c71 !important; border-color: #e82c71 !important}\n            .open-user-map .oum-tabs .nav-item.active {color: #e82c71 !important; border-color: #e82c71 !important}\n            .open-user-map .box-wrap .map-wrap .oum-attribution a {color: #e82c71 !important;}\n            \/* Submit Button *\/\n            .open-user-map .add-location .location-overlay-content #oum_add_location input[type=submit] {background-color: #e82c71 !important; border-color: #e82c71 !important;}\n            .open-user-map .add-location .location-overlay-content #oum_add_location input[type=submit]:hover,\n            .open-user-map .add-location .location-overlay-content #oum_add_location input[type=submit]:active {background-color: #d12866 !important;}\n            \/* Message CTA Buttons *\/\n            .open-user-map .add-location .location-overlay-content #oum_add_location_thankyou button {background-color: #e82c71 !important; border-color: #e82c71 !important;}\n            .open-user-map .add-location .location-overlay-content #oum_add_location_thankyou button:hover,\n            .open-user-map .add-location .location-overlay-content #oum_add_location_thankyou button:active {background-color: #d12866 !important;}\n            .open-user-map .add-location .location-overlay-content .oum-delete-confirmation button {background-color: #e82c71 !important; border-color: #e82c71 !important;}\n            .open-user-map .add-location .location-overlay-content .oum-delete-confirmation button:hover,\n            .open-user-map .add-location .location-overlay-content .oum-delete-confirmation button:active {background-color: #d12866 !important;}\n            \/* Media Section Colors *\/\n            .open-user-map .add-location .location-overlay-content #oum_add_location .oum_media .media-upload label {color: #e82c71 !important}\n            .open-user-map .add-location .location-overlay-content #oum_add_location .oum_media .oum-image-upload .media-upload-top label .multi-upload-indicator {background: #e82c71 !important}\n            .open-user-map .add-location .location-overlay-content #oum_add_location .oum_media .oum-video-upload input[type=text]:hover {border-color: #e82c71 !important}\n            .open-user-map .add-location .location-overlay-content #oum_add_location .oum_media .oum-video-upload input[type=text]:focus {border-color: #e82c71 !important; box-shadow: 0 0 0 2px #e82c711a !important}\n            .open-user-map .add-location .location-overlay-content #oum_add_location .oum_media .image-preview-placeholder {border-color: #e82c71 !important; background: #e82c710a !important}\n            .open-user-map .add-location .location-overlay-content #oum_add_location .oum_media .oum-image-preview-grid .image-preview-item.dragging {border-color: #e82c71 !important}\n            \/* List Styles *\/\n            .open-user-map-locations-list .oum-locations-list-item .oum_location_text a {color: #e82c71 !important} \n            .open-user-map-locations-list .oum-locations-list-item .oum_location_text .oum_vote_button_wrap .oum_vote_button.voted {background: #e82c71 !important; border-color: #e82c71 !important;}`;\n\n        \n        \n          \/* custom map height *\/\n          oum_custom_css += `\n            .open-user-map .box-wrap > .map-wrap {padding: 0 !important; height: 496px !important; aspect-ratio: unset !important;}`;\n\n        \n        \n          \/* custom map height *\/\n          oum_custom_css += `\n            @media screen and (max-width: 768px) {.open-user-map .box-wrap > .map-wrap {padding: 0 !important; height: 60vh !important; aspect-ratio: unset !important;}}`;\n\n        \n        var custom_style = document.createElement('style');\n\n        if (custom_style.styleSheet) {\n          custom_style.styleSheet.cssText = oum_custom_css;\n        } else {\n          custom_style.appendChild(document.createTextNode(oum_custom_css));\n        }\n\n        document.getElementsByTagName('head')[0].appendChild(custom_style);\n\n        \/* Add initial CSS to prevent flash of unstyled content *\/\n        var initialStyles = document.createElement('style');\n        initialStyles.textContent = `\n          .oum-hidden {\n            opacity: 0 !important;\n            visibility: hidden !important;\n            transition: opacity 0.3s ease, visibility 0.3s ease;\n          }\n          .oum-filter-controls,\n          .open-add-location-overlay,\n          #oum_filter_markers,\n          .oum-advanced-filter-button,\n          .oum-advanced-filter-panel,\n          .oum-sidebar {\n            opacity: 0;\n            visibility: hidden;\n            transition: opacity 0.3s ease, visibility 0.3s ease;\n          }\n          .oum-filter-controls.visible,\n          .open-add-location-overlay.visible,\n          #oum_filter_markers.visible,\n          .oum-advanced-filter-button.visible,\n          .oum-advanced-filter-panel.visible,\n          .oum-sidebar.visible {\n            opacity: 1;\n            visibility: visible;\n          }\n        `;\n        document.head.appendChild(initialStyles);\n\n      }\n    <\/script>\n\n  <\/div>\n\n<\/div>\n  <\/div>\n\n<\/div>\n\n\n\n<div style=\"height:55px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Utiliza el <strong>A\u00f1adir ubicaci\u00f3n<\/strong> bot\u00f3n para probar el nuevo proceso de dibujo.<\/p>\n\n\n\n<p>Al a\u00f1adir un nuevo elemento al mapa, elige si quieres a\u00f1adir un <strong>L\u00ednea<\/strong> o un <strong>\u00c1rea<\/strong>. A continuaci\u00f3n, dibuja directamente en el mapa:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>L\u00ednea<\/strong>: haz clic en varios puntos para crear una ruta continua.<\/li>\n\n\n\n<li><strong>\u00c1rea<\/strong>: haz clic en varios puntos para crear un contorno cerrado.<\/li>\n<\/ul>\n\n\n\n<p>Una vez enviada, la nueva l\u00ednea o \u00e1rea aparece en el mapa con el estilo de categor\u00eda que se le ha asignado. A efectos de demostraci\u00f3n, las nuevas entradas se publican de inmediato y se eliminan autom\u00e1ticamente de forma peri\u00f3dica.<\/p>\n\n\n\n<div style=\"height:76px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">C\u00f3mo activar<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Ir a <strong>Open User Map \u2192 Configuraci\u00f3n \u2192 Filtros, categor\u00edas y tipos <strong>\u2192 Categor\u00edas y tipos de marcadores<\/strong><\/strong> y activa los tipos de categor\u00eda que quieras utilizar<\/li>\n\n\n\n<li>Guardar la configuraci\u00f3n<\/li>\n\n\n\n<li>Ir a <strong>Open User Map \u2192 Categor\u00edas de marcadores<\/strong> y a\u00f1adir nuevas categor\u00edas para cada tipo. Puedes elegir colores individuales.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><a href=\"\/es\/\">\u2190 visi\u00f3n general<\/a><\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Add more than points to your WordPress map Open User Map now supports Lines and Areas as a PRO feature. Instead of only adding single marker pins, users can draw connected paths or enclosed boundaries directly on the map. Use Lines for routes, trails, roadworks, delivery zones, walking paths, or connections between places. Use Areas &hellip; <a href=\"https:\/\/www.open-user-map.com\/es\/demo-lines-areas\/\">Contin\u00faa en<\/a><\/p>","protected":false},"author":50,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"views\/template-custom.blade.php","meta":{"footnotes":""},"class_list":["post-6786","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Demo: Lines &amp; Areas - Open User Map<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.open-user-map.com\/es\/demo-lines-areas\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Demo: Lines &amp; Areas - Open User Map\" \/>\n<meta property=\"og:description\" content=\"Add more than points to your WordPress map Open User Map now supports Lines and Areas as a PRO feature. Instead of only adding single marker pins, users can draw connected paths or enclosed boundaries directly on the map. Use Lines for routes, trails, roadworks, delivery zones, walking paths, or connections between places. Use Areas &hellip; Continued\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.open-user-map.com\/es\/demo-lines-areas\/\" \/>\n<meta property=\"og:site_name\" content=\"Open User Map\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-10T10:37:49+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.open-user-map.com\/demo-lines-areas\/\",\"url\":\"https:\/\/www.open-user-map.com\/demo-lines-areas\/\",\"name\":\"Demo: Lines &amp; Areas - Open User Map\",\"isPartOf\":{\"@id\":\"https:\/\/www.open-user-map.com\/#website\"},\"datePublished\":\"2026-06-10T10:03:06+00:00\",\"dateModified\":\"2026-06-10T10:37:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.open-user-map.com\/demo-lines-areas\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.open-user-map.com\/demo-lines-areas\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.open-user-map.com\/demo-lines-areas\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.open-user-map.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Demo: Lines &amp; Areas\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.open-user-map.com\/#website\",\"url\":\"https:\/\/www.open-user-map.com\/\",\"name\":\"Open User Map\",\"description\":\"WordPress Map Plugin\",\"publisher\":{\"@id\":\"https:\/\/www.open-user-map.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.open-user-map.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.open-user-map.com\/#organization\",\"name\":\"Open User Map\",\"url\":\"https:\/\/www.open-user-map.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.open-user-map.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.open-user-map.com\/wp-content\/uploads\/2023\/09\/icon-256x256-1.png\",\"contentUrl\":\"https:\/\/www.open-user-map.com\/wp-content\/uploads\/2023\/09\/icon-256x256-1.png\",\"width\":256,\"height\":256,\"caption\":\"Open User Map\"},\"image\":{\"@id\":\"https:\/\/www.open-user-map.com\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Demo: Lines &amp; Areas - Open User Map","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.open-user-map.com\/es\/demo-lines-areas\/","og_locale":"es_ES","og_type":"article","og_title":"Demo: Lines &amp; Areas - Open User Map","og_description":"Add more than points to your WordPress map Open User Map now supports Lines and Areas as a PRO feature. Instead of only adding single marker pins, users can draw connected paths or enclosed boundaries directly on the map. Use Lines for routes, trails, roadworks, delivery zones, walking paths, or connections between places. Use Areas &hellip; Continued","og_url":"https:\/\/www.open-user-map.com\/es\/demo-lines-areas\/","og_site_name":"Open User Map","article_modified_time":"2026-06-10T10:37:49+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.open-user-map.com\/demo-lines-areas\/","url":"https:\/\/www.open-user-map.com\/demo-lines-areas\/","name":"Demo: Lines &amp; Areas - Open User Map","isPartOf":{"@id":"https:\/\/www.open-user-map.com\/#website"},"datePublished":"2026-06-10T10:03:06+00:00","dateModified":"2026-06-10T10:37:49+00:00","breadcrumb":{"@id":"https:\/\/www.open-user-map.com\/demo-lines-areas\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.open-user-map.com\/demo-lines-areas\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.open-user-map.com\/demo-lines-areas\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.open-user-map.com\/"},{"@type":"ListItem","position":2,"name":"Demo: Lines &amp; Areas"}]},{"@type":"WebSite","@id":"https:\/\/www.open-user-map.com\/#website","url":"https:\/\/www.open-user-map.com\/","name":"Open User Map","description":"Plugin de mapas de WordPress","publisher":{"@id":"https:\/\/www.open-user-map.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.open-user-map.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.open-user-map.com\/#organization","name":"Open User Map","url":"https:\/\/www.open-user-map.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.open-user-map.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.open-user-map.com\/wp-content\/uploads\/2023\/09\/icon-256x256-1.png","contentUrl":"https:\/\/www.open-user-map.com\/wp-content\/uploads\/2023\/09\/icon-256x256-1.png","width":256,"height":256,"caption":"Open User Map"},"image":{"@id":"https:\/\/www.open-user-map.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.open-user-map.com\/es\/wp-json\/wp\/v2\/pages\/6786","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.open-user-map.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.open-user-map.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.open-user-map.com\/es\/wp-json\/wp\/v2\/users\/50"}],"replies":[{"embeddable":true,"href":"https:\/\/www.open-user-map.com\/es\/wp-json\/wp\/v2\/comments?post=6786"}],"version-history":[{"count":11,"href":"https:\/\/www.open-user-map.com\/es\/wp-json\/wp\/v2\/pages\/6786\/revisions"}],"predecessor-version":[{"id":6806,"href":"https:\/\/www.open-user-map.com\/es\/wp-json\/wp\/v2\/pages\/6786\/revisions\/6806"}],"wp:attachment":[{"href":"https:\/\/www.open-user-map.com\/es\/wp-json\/wp\/v2\/media?parent=6786"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}