Category: DEV
En este nuevo capítulo intentaré ahondar un poco más en las configuraciones a poder realizar en nuestro mapa interactivo. Añadiendo nuevas funcionalidades e incluir algunos filtros a lo ya realizado en el post anterior.
Al turrón!
Lo primero de todo vamos a instalar los módulos necesarios con los que vamos a trabajar.
$ composer require 'drupal/leaflet_more_maps:^2.1' 'drupal/geocoder' 'drupal/address:^1.10' 'drupal/select2' 'drupal/better_exposed_filters:^5.0' 'drupal/jquery_ui_accordion:^1.1' 'drupal/jquery_ui_datepicker:^1.2' 'drupal/jquery_ui_touch_punch:^1.0''drupal/jquery_ui_slider:^1.1' 'drupal/jquery_ui:^1.4'
$ drush en leaflet_more_maps geocoder address select2 better_exposed_filters jquery_ui_accordion
Por un lado tenemos el módulo Leaflet More Maps, con el cual podemos configurar estilos a nuestro mapa interactivo. Y nos provee los estilos de Google Maps sin establecer ningún API KEY de Google. También podemos cambiar a mapas de otros proveedores como HERE, MapBox o thunderforest de los cuales necesitaríamos crear nuestra API KEY.
También hemos instalado el módulo Geocoder, que está basado en la biblioteca Geocoder PHP, y con ello vamos a poder realizar Reverse Geocode con nuestros campos de localización, además de integrarse con los módulos Address y Geofield de drupal. Para usar las características de este módulo necesitamos instalar un proveedor geocoder como dependencia en nuestro proyecto. Existe una lista extensa de provedoores*, yo voy a instalar el proveedor de MapBox ya que tengo un API KEY del mismo. Para ello lo instalamos con composer:
$ composer require geocoder-php/mapbox-provider
*Si se desea instalar el proveedor de Google Maps para obtener la api key, hay que darse de alta en google cloud. Hay que tener en cuenta, que aunque lo uses para propósitos de desarrollo o sólo para autoformación, hay que ingresar datos de facturación (tus datos y tárjeta crédito/débito). Si no Google no te deja usar el api plenamente y obtendrás errores. Como por ejemplo al realizar reverse geocoding
Vamos a usar también el módulo Addres para implementar campos con direcciones dentro de nuestro tipo de contenido.
Además hemos instalado los módulos Better Exposed Filter y Select 2 para mejorar un poco la presentación de algunos filtros que vamos a implementar. Tanto con BEF como con Select2, tienen dependencias a bibliotecas adicionales que tendremos que instalar en nuestro proyecto.
Para el módulo BEF, hace falta la biblioteca jquery-ui-touch-punch. Para instalar podemos optar por varios caminos. Instalarla manualmente(muy desaconsejado), instalar este parche, el cual cambia la carga de la biblioteca para obtenerla en remoto en vez de en nuestro entorno. O modificar nuestro composer.json para poder descargarla a través de composer. Nosotros nos vamos a inclinar por esta última opción. Por lo que en nuestro archivo composer.json, dentro de ‘repositories’ añadimos el siguiente repositorio:
{
"type": "composer",
"url": "https://asset-packagist.org"
}
Dentro ‘extra’, antes de ‘installer-paths’ añadimos:
"installer-types": ["bower-asset", "npm-asset"],
Y en ‘web/libraries/{$name}’ añadimos lo siguiente:
"web/libraries/{$name}": [
"type:drupal-library",
"type:bower-asset",
"type:npm-asset"
],
Una vez configurado nuestro archivo ya podemos descargar nuestras librerías con composer:
$composer require oomphinc/composer-installers-extender npm-asset/jquery-ui-touch-punch
Para la descarga de las bibliotecas para el módulo Select2, tendríamos que descargar la biblioteca del mismo nombre Select2. Como ya hemos configurado nuestro archivo composer.json correctamente con la configuración anterior sólo haría falta ejecutar el siguiente comando de composer:
$composer require npm-asset/select2
Por último hemos instalado los módulos ‘jquery_ui*’ ya que son dependencias que necesita BEF. Ya que en drupal 9 jQuery UI no está incluido en el core.
Modificacdo nuestro contenido.
A nuestro contenido ‘Sede’ creado en el post anterior, vamos añadir un nuevo campo de tipo address. Para insertar las direcciones de nuestras sedes. Por lo que nos dirigimos a ‘Estructura’ => ‘Tipos de contenido’ => ‘Sede’ => ‘Administrar Campos’, y aquí añadimos nuestro nuevo campo:
Ahora vamos a añadir esta dirección a nuestro modo de visualización ‘Card Position’ y sacamos del mismo el body.
Con esto ya podremos empezar a insertar direcciones en nuestro contenido.
Añadiendo un proveedor de servicios de mapas
Nuestro próximo paso será configurar un nuevo proveedor de servicios de mapa para geocoder. Este proveedor será el que usemos en la configuración de uno de nuestros filtros.
Si hemos seguido el paso en la instalación del módulo para instalar nuestro proveedor no hará más falta que dirigirse a ‘/admin/config/system/geocoder/geocoder-provider’. Si no, primero instalaremos nuestro proveedor como una dependencia de composer y luego nos dirigimos a esta página.
Para añadir un nuevo proveedor basta con seleccionar el proveedor deseado y pulsar sobre ‘Add’. Una vez pulsado el botón nos aparecerá un formulario para configurarlo. Dependiendo de nuestro proveedor puede variar la configuración del mismo.
En la configuración habría que añadir nuestra API KEY del proveedor. Y si deseamos como es nuestro caso limitar los resultados de los países a España, con el código ISO 3166-1 alpha-2 ‘ES’.
Adición de filtros a nuestra vista
Ahora vamos a añadir filtros a nuestra vista. Para este ejemplo práctico vamos añadir los filtros de ‘Provincia’, campo que aparece en nuestro campo compuesto ‘Dirección’, y el filtro proximity del campo ‘Localización’.
Recordemos que nuestra vista está compuesta por 2 displays. Por un lado un display de página formateado como ‘Leaflet Map’ en el que mostramos nuestro mapa. Y por otro lado un display adjunto, en el que adjuntamos, valga la redundancia, este display a nuestro mapa.
Si vamos a nuestro display ‘adjunto’, dentro de sus configuraciones podemos ver la configuración ‘Inherit exposed filters’, para heredar los filtros de la vista a la que adjunta. Hay que tener en cuenta que solo aplicará los filtros de la vista padre, siempre que tengamos los mismos filtros en nuestra vista adjunta. Ya que tiene que aplicar la misma consulta para obtener los resultados deseados.
Primero vamos a incluir el filtro de ‘Provincias’, por lo que nos dirigimos a la edición de nuestra vista. En criterios de filtrado añadimos el campo ‘Dirección (field_direccion:administrative_area)’ de nuestro contenido.
Exponemos nuestro campo para los usuarios. Escogemos dentro de ‘Country Source’ el código de un país determinado, en nuestro caso ‘España’ y dejamos el resto de las configuraciones tal cual la tenemos.
Ahora si guardamos nuestra vista nos aparecerá el filtro recién creado. Si buscamos por una provincia nos aparecerán todas las sedes que se encuentren en ese misma provincia.
Vamos a continuar implementando un nuevo filtro de proximidad. Este filtro nos va servir para que dada una dirección, nos filtre en el mapa por las sedes más cercanas, comprendido en un radio especificado. En la edición de nuestra vista vamos incluir un nuevo criterio de filtrado llamado ‘Localización Proximity (field_localizacion)’. Escogemos que el filtro esté expuesto al usuario, dejamos la opción por defecto en el operador ‘Es igual o menor que’. Marcamos una distancia por defecto, por ejemplo 50km. Y en el selector ‘Proximity Definition Mode (Source of Distance and Origin Point)’ escogemos ‘Geocode Origin’. Al escoger esta opción nos cargará nuevas configuraciones. En ‘Geocoder Providers’ escogemos el proveedor que tengamos, en mi caso ‘MapBox’, y activamos el autocomplete. Una vez configurado podemos guardarlo.
Ahora si nos dirigimos a nuestra vista vemos como se ha incluido nuestro nuevo filtro, y si empezamos a escribir sobre el campo ‘Origen’ una dirección, nos salta un autocomplete con sugerencias para esa dirección. Si pulsamos en filtrar observamos como nos filtra por las sedes más cercanas a la dirección escrita en un radio de 50km como hemos especificado.
Mejorando un poco nuestra vista
Primero vamos a cambiar algunas configuraciones de la vista. En configuraciones avanzadas de la vista en ‘Estilo del formulario expuesto’ pulsamos sobre ‘Básico’ y escogemos ‘Mejor filtros expuestos’. En la nueva configuración que nos salta, en el apartado ‘Exposed Filter Settings’, desplegamos el apartado ‘EXPOSED FILTER “FIELD_DIRECCION_ADMINISTRATIVE_AREA” WITH LABEL “PROVINCIA’ y seleccionamos que el widget sea ‘Select2’. Con esto conseguimos que nuestro filtro tenga la capacidad para realizar búsquedas de la provincia deseada dentro del propio filtro.
Guardamos los cambios y vemos cómo se ha modificado el comportamiento de nuestro filtro.
También vamos a incluir (sólo) en el display adjunto, el campo de dirección para que junto con el listado de sedes aparte del título se muestren las direcciones de cada sede.
Una vez que ya hemos modificado nuestra vista, vamos a instalar el tema de Olivero que viene en el core de Drupal 9, el cual tiene un diseño más moderno y elegante que el ya ‘anciano’ bartik. Quedando nuestra vista:
A partir de aquí ya podemos jugar cambiando nuestra maquetación para que que, por ejemplo el listado de sedes quede junto con el mapa, ocultar la distancia si nos interesa, darle formato a nuestra card,… todo lo que nos podamos imaginar.
Conclusión
Hemos visto cómo, gracias a la comunidad, podemos incluir nuevos módulos contribuidos, extendiendo así las funcionalidades a nuestro mapa y vista de mapa interactiva.
¡Hasta la próxima!