En aquest article t'explique com m'he creat un mòdul personalitzat 'custom' de zero a Drupal 11 que crea un Block amb la geolocalització del node però escrivint-ho -la en una url compatible amb les de Google Maps.
La idea d'aquest mòdul és generar una url que siga com les urls de geolocalització que fa servir Google Maps perquè el projecte https://sk8parks.info fa servir els mapes de Leafmap, i volia oferir també un enllaç als mapes de Google Maps per si un usuari visita la web i vol anar a una destinació fàcilment.
Crearem la branca de directoris sk8parks.info/modules/custom/custom_map_info/src/Plugin/Block i al dins el fitxer PHP CurrentNodeLatLngBlock.php
El fitxer CurrentNodeLatLngBlock.php tindrà el següent contingut:
<?php
namespace Drupal\custom_map_info\Plugin\Block;
use Drupal\Core\Block\BlockBase;
use Drupal\node\NodeInterface;
/**
* Provides a block with LAT and LONG of the current node.
*
* @Block(
* id = "current_node_latlng_block",
* admin_label = @Translation("Current node LAT LONG")
* )
*/
class CurrentNodeLatLngBlock extends BlockBase {
/**
* {@inheritdoc}
*/
public function build() {
$node = \Drupal::routeMatch()->getParameter('node');
if (!$node instanceof NodeInterface) {
return [
'#markup' => 'No est\xc3\xa0s veient un node.',
];
}
if (!$node->hasField('field_localitzacio') || $node->get('field_localitzacio')->isEmpty()) {
return [
'#markup' => 'Aquest node no t\xc3\xa9 coordenades.',
];
}
$field = $node->get('field_localitzacio')->first();
$lat = $field->lat ?? '';
$lng = $field->lon ?? '';
if ($lat === '' || $lng === '') {
return [
'#markup' => 'No s\xe2\x80\x99han pogut llegir les coordenades.',
];
}
$url = 'https://www.google.com/maps/search/?api=1&query=' . $lat . ',' . $lng;
return [
'#markup' => '<div><strong>Abrir en Google Maps:</strong> <a target="_blank" rel="noopener noreferrer" href="' . $url . '">Google Maps</a></div>',
'#cache' => [
'contexts' => ['route'],
],
];
}
}
I a sk8parks.info/modules/custom/custom_map_info/ afegirem el fitxer custom_map_info.info.yml amb el següentn contingut:
name: Custom Map Info
type: module
description: Mostra LAT i LONG del node actual en un block.
core_version_requirement: ^10
package: Custom
I netejem la memòria caché del nostre projecte. I a continuació procedirem a fer la instal·lació del nostre mòdul o bé amb Drush o bé des de la web. Jo ho faig des e la web i veig que sí m'apareix el mòdul custon Custom Map Info i l'instal·larem:
Ràpidament s'instal·larà al nostre Drupal:
Ara, com que jo edite la part de visualització amb Layout Builder, administrarem el tipus de contingut i anirem a administrar la visualització des del Layout Builder on afegirem manualment el nou Block que ens ha creat el mòdul custom i podrem posicionar el Block en la regió que vullguem:
Jo le ficat finalment on jo volia, dins del contingut, just abans del mapa Leafmap:
I he fet diverses proves i la url de Google Maps funciona correctament. He fet una prova difícil, ja que l'he feta amb un skatepark especial que està situat enmig del no res, en la platja de Torrenostra, i tot ha funcionat bé.
