{"id":10493,"date":"2021-08-15T13:45:33","date_gmt":"2021-08-15T11:45:33","guid":{"rendered":"https:\/\/www.hiberus.com\/crecemos-contigo\/?p=10493"},"modified":"2023-12-13T11:34:13","modified_gmt":"2023-12-13T10:34:13","slug":"geolocalizacion-e-implementacion-en-drupal","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/geolocalizacion-e-implementacion-en-drupal\/","title":{"rendered":"Qu\u00e9 es geolocalizaci\u00f3n y c\u00f3mo implementarla en Drupal"},"content":{"rendered":"<p>\u00bfQu\u00e9 es ese concepto tan utilizado en los tiempos actuales de los dispositivos m\u00f3viles llamado <strong>geolocalizaci\u00f3n<\/strong>? En pocas palabras la geolocalizaci\u00f3n es la<strong> aptitud para tener localizado geogr\u00e1ficamente un elemento<\/strong>. Adem\u00e1s, junto con el t\u00e9rmino de geolocalizaci\u00f3n tendr\u00edamos ligado el sistema de geolocalizaci\u00f3n usado.<\/p>\n<h2>Qu\u00e9 es un sistema de geolocalizaci\u00f3n<\/h2>\n<p>El <strong>sistema de geolocalizaci\u00f3n<\/strong> m\u00e1s utilizado y conocido es el GPS (Global Positioning System) es un sistema que fue creado por el Departamento de Defensa de los Estados Unidos y posteriormente liberado all\u00e1 por el a\u00f1o 1983 con imprecisiones. Ya en el a\u00f1o 2000 se abri\u00f3 de forma precisa para todo el mundo.<\/p>\n<p>No todos los sistemas de localizaci\u00f3n se basan en sistemas GPS, otros sistemas de geolocalizaci\u00f3n que podr\u00edamos citar son <a href=\"https:\/\/es.wikipedia.org\/wiki\/GLONASS\">GLONASS<\/a> y <a href=\"https:\/\/www.gsa.europa.eu\/european-gnss\/galileo\/galileo-european-global-satellite-based-navigation-system\">Galileo<\/a>.<\/p>\n<p>Los sistemas de geolocalizaci\u00f3n podemos decir que han sido un gran avance tecnol\u00f3gico muy importante en los \u00faltimos a\u00f1os, se usan en el d\u00eda a d\u00eda y casi todo el mundo dispone de alg\u00fan sistema de geolocalizaci\u00f3n. Actualmente muchas empresas han visto su futuro en ofrecer servicios que se han basado en el uso de estos sistemas de geolocalizaci\u00f3n.<\/p>\n<h2>Casos de uso de la geolocalizaci\u00f3n en Drupal<\/h2>\n<p>La principal finalidad del uso de la geolocalizaci\u00f3n en desarrollos en <a href=\"https:\/\/www.hiberus.com\/crecemos-contigo\/tag\/drupal\/\">Drupal<\/a> as\u00ed como en otros tipos de <a href=\"https:\/\/www.hiberus.com\/crecemos-contigo\/tag\/cms\/\">CMS<\/a> ser\u00eda el <strong>posicionamiento de entidades<\/strong> o recursos propios del sitio web <strong>sobre un mapa<\/strong>. Una serie de ejemplos de geolocalizaci\u00f3n podr\u00edan ser los siguientes:<\/p>\n<ul>\n<li>Un sitio web de una empresa que tiene m\u00faltiples sedes u oficinas y quiere mostrarlas en un mapa para mejorar la experiencia de b\u00fasqueda de las mismas al usuario que navega por su sitio.<\/li>\n<li>Un sitio web de eventos que ofrece al usuario un buscador de eventos ya sea por b\u00fasqueda libre o atrav\u00e9s de la localizaci\u00f3n gps del dispositivo m\u00f3vil siempre que este la permita.<\/li>\n<li>Un sitio web de turismo de una ciudad que quiere localizar en un mapa distintos tipos de entidades como monumentos, puntos de informaci\u00f3n tur\u00edstica, restaurantes o crear incluso rutas tur\u00edsticas a lo largo de la ciudad.<\/li>\n<li>Un sitio web de una prueba deportiva en la que se quiere tener localizados a tiempo real a sus participantes a trav\u00e9s de un localizador gps y otros usuarios puedan seguir a trav\u00e9s del sitio la evoluci\u00f3n de la misma.<\/li>\n<\/ul>\n<p>Para poder realizar desarrollos como los comentados anteriormente la comunidad de drupal ha desarrollado m\u00f3dulos contribuidos que nos permitir\u00e1n a\u00f1adir a nuestro sitio la funcionalidad de poder tener localizado en un mapa cualquier entidad que est\u00e9 dada de alta. Quiz\u00e1s un \u00fanico m\u00f3dulo no nos sirva para la funcionalidad completa deseada pero el <strong>uso de varios en conjunto<\/strong> o con un m\u00f3dulo customizado por nosotros podamos llevarla a cabo.<\/p>\n<h2>Principales m\u00f3dulos utilizados en Drupal para geolocalizaci\u00f3n<\/h2>\n<p>Entre los muchos de los m\u00f3dulos contribuidos tanto para las versiones de Drupal 7 y 8 destacamos los siguientes y realizaremos un caso pr\u00e1ctico con dos de ellos:<\/p>\n<h3>Geofield (Drupal 7 y 8)<\/h3>\n<p><a href=\"https:\/\/www.drupal.org\/project\/geofield\" target=\"_blank\" rel=\"noopener noreferrer\">Geofield<\/a> es un m\u00f3dulo para almacenar datos geogr\u00e1ficos a trav\u00e9s de un campo generado. Admite varios tipos de datos como puntos, l\u00edneas y pol\u00edgonos.<\/p>\n<h3>Simple Google Maps (Drupal 7 y 8)<\/h3>\n<p>Con <a href=\"https:\/\/www.drupal.org\/project\/simple_gmap\" target=\"_blank\" rel=\"noopener noreferrer\">Simple Google Maps<\/a> podremos obtener de forma f\u00e1cil un mapa de Google y\/o un enlace a un mapa de Google.<br \/>\nDispondremos de un formateador de campo con diversas opciones. Podremos obtener nuestro punto en el mapa a trav\u00e9s de un campo buscador por direcci\u00f3n.<\/p>\n<h3>Location (Drupal 7)<\/h3>\n<p><a href=\"https:\/\/www.drupal.org\/project\/location\" target=\"_blank\" rel=\"noopener noreferrer\">Location<\/a> nos permitir\u00e1 asociar ubicaciones geogr\u00e1ficas a una serie de nodos o usuarios a trav\u00e9s de direcciones f\u00edsicas que se codificaran a las coordenadas latitud \/ longitud.<br \/>\nLocation nos permite tambi\u00e9n el uso de Widgets en la entrada de datos<\/p>\n<h3>GMap (Drupal 7)<\/h3>\n<p><a href=\"https:\/\/www.drupal.org\/project\/gmap\" target=\"_blank\" rel=\"noopener noreferrer\">Gmap<\/a> es un m\u00f3dulo similar a Simple Google Maps pero m\u00e1s avanzado ya que incluye una interfaz para la API de Google Maps<br \/>\nCon dicho m\u00f3dulo podremos crear mapas interactivos con marcadores asociados a los nodos y\/o usuarios de nuestro sitio de Drupal.<\/p>\n<h3>Geolocation Field (Drupal 7 y 8)<\/h3>\n<p>Con <a href=\"https:\/\/www.drupal.org\/project\/geolocation\" target=\"_blank\" rel=\"noopener noreferrer\">Geolocation Field<\/a> principalmente lo que tendremos ser\u00e1 un tipo de campo espec\u00edfico para poder almacenar las ubicaciones geogr\u00e1ficas de nuestros elementos a mostrar como una dupla longitud \/ latitud. Tambi\u00e9n cabe destacar que este campo lo podremos utilizar tanto en nodos, como taxonom\u00edas y usuarios de Drupal.<\/p>\n<h3>Geolocation Proximity (Drupal 7)<\/h3>\n<p>Podremos usar un filtro por distancia o proximidad a trav\u00e9s del campo generado con el m\u00f3dulo geolocation field.<br \/>\nLa funcionalidad para Drupal 8 se encuentra en el m\u00f3dulo contribuido <a href=\"https:\/\/www.drupal.org\/project\/geolocation\" target=\"_blank\" rel=\"noopener noreferrer\">Geolocation Field<\/a>.<\/p>\n<h3>Leaflet (Drupal 7 y 8)<\/h3>\n<p>Con el m\u00f3dulo <a href=\"https:\/\/www.drupal.org\/project\/leaflet\" target=\"_blank\" rel=\"noopener noreferrer\">Leaflet<\/a> tendremos una integraci\u00f3n con la librer\u00eda de mapas Open-Source de JavaScript LeafLet en el que podremos geolocalizar nuestro contenido o entidades.<\/p>\n<h2>Caso pr\u00e1ctico uso de Leaflet en nuestro sitio de Drupal<\/h2>\n<p>Supongamos que tenemos un sitio web de una empresa (desarrollado en <a href=\"https:\/\/www.hiberus.com\/crecemos-contigo\/drupal-8-sus-cambios-mas-importantes-1\/\">drupal 8<\/a>) que tiene dado de alta un tipo de contenido llamado sede.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-10499\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/tipos-contenido-drupal.png\" alt=\"tipos contenido drupal\" width=\"714\" height=\"330\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/tipos-contenido-drupal.png 714w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/tipos-contenido-drupal-300x139.png 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/tipos-contenido-drupal-360x166.png 360w\" sizes=\"auto, (max-width: 714px) 100vw, 714px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Nuestro objetivo ser\u00eda el poder a\u00f1adir a dicho contenido un nuevo campo denominado localizaci\u00f3n con el que luego pudi\u00e9ramos mostrar en un mapa la localizaci\u00f3n de la sedes incluso una p\u00e1gina en la que vi\u00e9ramos un listado de sedes en el mapa.<\/p>\n<p>Para poder generar un campo de geolocalizaci\u00f3n usaremos el m\u00f3dulo Geofield. Lo instalaremos en nuestro sitio de Drupal ya sea de forma manual o a trav\u00e9s de composer + drush.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-10500\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/composer-drush-1024x469.jpg\" alt=\"composer drush\" width=\"620\" height=\"284\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/composer-drush-1024x469.jpg 1024w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/composer-drush-300x137.jpg 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/composer-drush-768x352.jpg 768w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/composer-drush-360x165.jpg 360w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/composer-drush.jpg 1175w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Para la generaci\u00f3n de los mapas usaremos el m\u00f3dulo Leaflet, lo activaremos en nuestro sitio de Drupal. El m\u00f3dulo est\u00e1 basado en la librer\u00eda de javascript Leaflet.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-10501\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/Leaflet-1024x551.jpg\" alt=\"Leaflet\" width=\"620\" height=\"334\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/Leaflet-1024x551.jpg 1024w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/Leaflet-300x161.jpg 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/Leaflet-768x413.jpg 768w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/Leaflet-360x194.jpg 360w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/Leaflet.jpg 1180w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Junto con Leaflet vienen otros m\u00f3dulos que son Leaflet Views que es la integraci\u00f3n de Leaflet con Views y Leaflet Markercluster para la generaci\u00f3n de marcadores de mapa personalizados y animados si fuera necesario.<\/p>\n<p>Una vez instalados los m\u00f3dulos contribuidos podemos generar un nuevo campo localizaci\u00f3n en nuestro tipo de contenido denominado sede. El campo ser\u00e1 de tipo Geofield, tipo generado por nuestro m\u00f3dulo Geofield.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-10502\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/campo-geoposicionamiento-drupal.jpg\" alt=\"campo geoposicionamiento drupal\" width=\"680\" height=\"620\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/campo-geoposicionamiento-drupal.jpg 680w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/campo-geoposicionamiento-drupal-300x274.jpg 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/campo-geoposicionamiento-drupal-360x328.jpg 360w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-10503\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/campo-geoposicionamiento-drupal-2.jpg\" alt=\"campo geoposicionamiento drupal 2\" width=\"706\" height=\"379\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/campo-geoposicionamiento-drupal-2.jpg 706w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/campo-geoposicionamiento-drupal-2-300x161.jpg 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/campo-geoposicionamiento-drupal-2-360x193.jpg 360w\" sizes=\"auto, (max-width: 706px) 100vw, 706px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Para poder mostrar en el detalle de la sede el mapa con su marcador asociado a la localizaci\u00f3n tendremos de modificar la presentaci\u00f3n por defecto y en el campo localizaci\u00f3n utilizar el formateador que nos ofrece el m\u00f3dulo Leaflet (Leaflet Map).<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-10504\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/modulo-leaflet.jpg\" alt=\"modulo leaflet\" width=\"1022\" height=\"645\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/modulo-leaflet.jpg 1022w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/modulo-leaflet-300x189.jpg 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/modulo-leaflet-768x485.jpg 768w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/modulo-leaflet-360x227.jpg 360w\" sizes=\"auto, (max-width: 1022px) 100vw, 1022px\" \/><\/p>\n<p>Comentar que el formateador tiene diversas opciones de configuraci\u00f3n desde la altura del mapa, el zoom, personalizaci\u00f3n de los iconos del mapa, activaci\u00f3n de zoom con el scroll, etc.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-10505\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/configurar-mapa-drupal.jpg\" alt=\"configurar mapa drupal\" width=\"1020\" height=\"864\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/configurar-mapa-drupal.jpg 1020w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/configurar-mapa-drupal-300x254.jpg 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/configurar-mapa-drupal-768x651.jpg 768w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/configurar-mapa-drupal-360x305.jpg 360w\" sizes=\"auto, (max-width: 1020px) 100vw, 1020px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Ahora ya s\u00f3lo nos queda editar un nodo de tipo de contenido sede y a\u00f1adir las coordenadas de la misma.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-10506\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/editar-nodo-drupal.png\" alt=\"editar nodo drupal\" width=\"784\" height=\"676\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/editar-nodo-drupal.png 784w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/editar-nodo-drupal-300x259.png 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/editar-nodo-drupal-768x662.png 768w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/editar-nodo-drupal-360x310.png 360w\" sizes=\"auto, (max-width: 784px) 100vw, 784px\" \/><\/p>\n<p>Con esto ya tendremos en nuestro detalle de sede un campo de geolocalizaci\u00f3n que se renderiza con un mapa a trav\u00e9s de la librer\u00eda Leaflet.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-10507\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/sedes-drupal.png\" alt=\"sedes drupal\" width=\"877\" height=\"488\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/sedes-drupal.png 877w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/sedes-drupal-300x167.png 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/sedes-drupal-768x427.png 768w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/sedes-drupal-360x200.png 360w\" sizes=\"auto, (max-width: 877px) 100vw, 877px\" \/><\/p>\n<p>Supongamos que hemos dado de alta varias sedes en nuestro sitio.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-10508\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/sedes-drupal-2.png\" alt=\"sedes drupal\" width=\"969\" height=\"217\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/sedes-drupal-2.png 969w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/sedes-drupal-2-300x67.png 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/sedes-drupal-2-768x172.png 768w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/sedes-drupal-2-360x81.png 360w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Un paso m\u00e1s ser\u00eda el crear un mapa con las distintas sedes de nuestra empresa de prueba.<\/p>\n<p>Para la integraci\u00f3n con vistas y el poder mostrar en un mapa la localizaci\u00f3n de las sedes que hemos creado activaremos el m\u00f3dulo Leaflet Views que comentamos.<\/p>\n<p>Una vez activado el m\u00f3dulo Leaflet Views creariamos una vista en el que mostraremos el tipo de contenido sede.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-10509\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/Leaflet-views.jpg\" alt=\"Leaflet views\" width=\"859\" height=\"650\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/Leaflet-views.jpg 859w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/Leaflet-views-300x227.jpg 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/Leaflet-views-768x581.jpg 768w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/Leaflet-views-360x272.jpg 360w\" sizes=\"auto, (max-width: 859px) 100vw, 859px\" \/><\/p>\n<p>Despu\u00e9s, desde la edici\u00f3n de la vista crearemos un display de tipo p\u00e1gina y a\u00f1adiremos una url relativa para el mismo.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-10510\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/display-leaflet.png\" alt=\"display leaflet\" width=\"637\" height=\"517\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/display-leaflet.png 637w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/display-leaflet-300x243.png 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/display-leaflet-220x180.png 220w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/display-leaflet-360x292.png 360w\" sizes=\"auto, (max-width: 637px) 100vw, 637px\" \/><\/p>\n<p>En el formato de la vista seleccionaremos Leaflet Map.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-10511\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/leaftlet-map.jpg\" alt=\"\" width=\"777\" height=\"348\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/leaftlet-map.jpg 777w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/leaftlet-map-300x134.jpg 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/leaftlet-map-768x344.jpg 768w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/leaftlet-map-360x161.jpg 360w\" sizes=\"auto, (max-width: 777px) 100vw, 777px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Adem\u00e1s del t\u00edtulo del tipo de contenido sede a\u00f1adiremos el campo localizaci\u00f3n que ser\u00e1 el que se use para el renderizado del mapa en la vista.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-10513\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/mapa-vista-1-1024x312.jpg\" alt=\"\" width=\"620\" height=\"189\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/mapa-vista-1-1024x312.jpg 1024w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/mapa-vista-1-300x91.jpg 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/mapa-vista-1-768x234.jpg 768w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/mapa-vista-1-360x110.jpg 360w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/mapa-vista-1.jpg 1208w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>En la configuraci\u00f3n del campo podremos personalizar diversas opciones como por ejemplo la altura del mapa o el contenido que va a llevar el marcador de la sede al hacer clic sobre \u00e9l.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-10514\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/contenido-mapa.png\" alt=\"contenido mapa\" width=\"844\" height=\"623\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/contenido-mapa.png 844w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/contenido-mapa-300x221.png 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/contenido-mapa-768x567.png 768w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/contenido-mapa-360x266.png 360w\" sizes=\"auto, (max-width: 844px) 100vw, 844px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Al final al guardar la p\u00e1gina y acceder a la url que se ha configurado obtendremos un listado de las sedes de la empresa en un mapa a trav\u00e9s de la librer\u00eda Leaflet.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-10515\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/mapa-geoposicionado-drupal.jpg\" alt=\"mapa geoposicionado drupal\" width=\"894\" height=\"584\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/mapa-geoposicionado-drupal.jpg 894w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/mapa-geoposicionado-drupal-300x196.jpg 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/mapa-geoposicionado-drupal-768x502.jpg 768w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/03\/mapa-geoposicionado-drupal-360x235.jpg 360w\" sizes=\"auto, (max-width: 894px) 100vw, 894px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>En Hiberus contamos con un departamento de\u00a0<strong>m\u00e1s de 60 desarrolladores Drupal<\/strong>. Nuestros m\u00e1s de 10 a\u00f1os de experiencia nos ha hecho trabajar en los principales <a href=\"https:\/\/www.hiberus.com\/crecemos-contigo\/casos-de-exito-de-drupal\/\">casos de \u00e9xito Drupal<\/a> a nivel nacional. Cu\u00e9ntanos tu proyecto y conoce a nuestro equipo <a href=\"https:\/\/www.hiberus.com\/dxp\/drupal\">experto en Drupal<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/www.hiberus.com\/guias\/drupal11\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-29020\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/04\/Drupal10-horizntal-1024x535.jpg\" alt=\"\" width=\"678\" height=\"354\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/04\/Drupal10-horizntal-1024x535.jpg 1024w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/04\/Drupal10-horizntal-300x157.jpg 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/04\/Drupal10-horizntal-768x401.jpg 768w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/04\/Drupal10-horizntal-360x188.jpg 360w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/04\/Drupal10-horizntal.jpg 1200w\" sizes=\"auto, (max-width: 678px) 100vw, 678px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n        <div class=\"row\">\n            <div class=\"block-cta-form\" style=\"background-color: #003664;\">\n                <div class=\"content-cta-form\">\n                    <div class=\"text-cta-form\">\n                        <p class=\"title-cta-form\">\u00bfQuieres m\u00e1s informaci\u00f3n sobre nuestros servicios de Drupal?<\/p>\n                        <p>Contacta con nuestro equipo de Drupal<\/p>\n                    <\/div>\n                    <div class=\"form-fields\">\n                        \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f33973-o1\" lang=\"es-ES\" dir=\"ltr\" data-wpcf7-id=\"33973\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/10493#wpcf7-f33973-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Formulario de contacto\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"33973\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.5\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"es_ES\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f33973-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/fieldset>\n<div id=\"responsive-form\" class=\"clearfix\">\n\t<div class=\"form-row\">\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"nombre\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Nombre *\" value=\"\" type=\"text\" name=\"nombre\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"apellido\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Apellido *\" value=\"\" type=\"text\" name=\"apellido\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"correo\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Correo corporativo *\" value=\"\" type=\"email\" name=\"correo\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"telf-contacto\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-tel\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Tel\u00e9fono *\" value=\"\" type=\"tel\" name=\"telf-contacto\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"compania\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Compa\u00f1ia *\" value=\"\" type=\"text\" name=\"compania\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-full\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"mensaje\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Mensaje *\" name=\"mensaje\"><\/textarea><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-full color-acceptance\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"politica\"><span class=\"wpcf7-form-control wpcf7-acceptance\"><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"politica\" value=\"1\" aria-invalid=\"false\" \/><span class=\"wpcf7-list-item-label\">He le\u00eddo y acepto la <a href=\"https:\/\/www.hiberus.com\/politica\" target=\"_blank\"><u>Pol\u00edtica de privacidad<\/u><\/a><\/span><\/label><\/span><\/span><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-full color-acceptance\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"marketing\"><span class=\"wpcf7-form-control wpcf7-acceptance optional\"><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"marketing\" value=\"1\" aria-invalid=\"false\" \/><span class=\"wpcf7-list-item-label\">Me gustar\u00eda recibir comunicaciones de marketing de Hiberus y sobre sus productos, servicios y eventos.<\/span><\/label><\/span><\/span><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-half\">\n\t\t\t<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Contacta con nosotros\" \/>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div id=\"campos_ocultos\" class=\"hidden\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new1\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new1\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new1\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new2\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new2\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new2\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new3\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new3\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new3\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new4\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new4\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new4\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new_p\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new_p\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new_p\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n<!--end responsive-form--><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n","protected":false},"excerpt":{"rendered":"<p>\u00bfQu\u00e9 es ese concepto tan utilizado en los tiempos actuales de los dispositivos m\u00f3viles llamado geolocalizaci\u00f3n? En pocas palabras la geolocalizaci\u00f3n es&#8230;<\/p>\n","protected":false},"author":129,"featured_media":19314,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_ayudawp_aiss_exclude":false,"footnotes":""},"categories":[3,232],"tags":[25,32,61],"class_list":{"0":"post-10493","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-negocio-electronico","8":"category-portales-dxp","9":"tag-cms","10":"tag-drupal","11":"tag-portal-corporativo"},"acf":[],"_links":{"self":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/10493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/users\/129"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/comments?post=10493"}],"version-history":[{"count":5,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/10493\/revisions"}],"predecessor-version":[{"id":38746,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/10493\/revisions\/38746"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/media\/19314"}],"wp:attachment":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/media?parent=10493"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/categories?post=10493"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/tags?post=10493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}