En aquest article t'explique com podem geolocalitzar els nostres nodes en Drupal 10 i anar mostrant una geolocalització en un mapa d'OpenStreetMap.
Primer de tot necessitem instal·lar 3 mòduls:
- OpenStreetMap: ens permet usar la geolocalització del projecte OpenStreetMap
- Geofield: que ens permet afegir camps amb geolocalització.
- Leaflet: que ens permet tenir el format del mapa on marquem la geolocalització.
A més a més, necessitem instal·lar amb composer la llibreria completa de Geofield per a que funcione bé a Drupal, ja que per defecte instal·lant el mòdul em donava error i als fòrums de Drupal m'han recomanat fer la instal·lació amb composer:
Instalem amb:
composer require drupal/geofield
Una vegada instal·lat, crearem un nou tipus de contingut. Li ficarem el nom que vullguem i li donarem a afegir un camp nou:
El camp ha de ser de tipus Geofield:
Configurarem la pestanya Manage from display i ja li direm que ha de mostrar el format Leaflet Map (default) en la creació o edició del node:
I ara configurarem el camp i anirem dient-li les diferents opcions que necessitem en la configuració del mapa. Concretament, ací tens quatre captures de pantalla del que jo he habilitat en el meu node inicial:
- Mida d'amplària: 400
- Latitude 40 i Longitude -4, perquè vull el mapeta de la península ibèrica centrat.
- Zoom: 5 (perquè si ficava 6 no eixia complet)
- He habilitat el Enable Scroll Wheel Zoom on click
- Marker button: Default marker
- He habilitat "Adds button to toggle drag mode for all layers" per a permetre moure la localització si algun usuari la fica malament.
I ja està no habilite res més, perquè per defecte apareixen moltes opcions al mapa que no necessite (com cercles, rectangles, i més objectes):
I d'aquesta manera, ara tinc un tipus de contingut que mostra el camp de la leocalització (el mòdul Geofield) amb el format del mapeta xulo (el mòdul Leaflet), i queda molt bé:
Així es veurà quan creem o editem un node: mostrant el mapa de la península ibèrica centrat, i amb poques opcions per a geolocalitzar en el mapa (el marquer, moure el marquer i esborrar el marquer per si hem ficat de més):
I una vegada desem el node, així es veu ja el node amb el mapa d'OpenStreetMap:
