Leaflet map to add coordinates to page header

Support
, ,
1

Hi,

It’s been a long time since I last used Grav and I’ve just installed the latest version to work on a personal project.

I’m not a developer and I’ve tried to read the docs but I’m quite lost at the moment…

Here is what I’d like to achieve: the idea is to add coordinates to some contents. For this, I’d like to have a Leaflet map displayed inside a tab and when clicking it, adding the coordinates to the content header.

I suppose I have to develop a plugin rather than a theme for this ? I don’t really know where to start…

Thanks in advance :slight_smile:

2

@bricebou,

I would start with:

Not sure what you are trying to achieve though…

  • Do you want to display a map in one of the pages of your website?
  • Or do you want to click on a map in Admin and add the coordinates to the header of a page?
    • And what would you then want to do with the coordinates?
3

Thanks for the answer ! I want to add a map in the Admin, in a tab of the page form, click it to add coordinates to the page header.

4

More precisely, I’d like to create a new field type I would call when defining a page template.

5

@bricebou, In that case, you might want to start here: Adding a custom field

6

Thanks, I’ve already read that documentation :slight_smile:

I’m stuck with the inclusion of Leaflet scripts and styles: I’ve tried to use the Assets manager but it seems we can’t declare assets within the plugin/blueprints.yaml.

The Leaflet script is loaded from a CDN with an integrity attribute; this is why I tried to use Asset Manager | Grav Documentation

7

@bricebou,

but it seems we can’t declare assets within the plugin/blueprints.yaml

Indeed, you cannot add assets inside a blueprint file. Try adding the assets during the ‘onAssetsInitialized’ event in your custom plugin’s PHP file, or inside the Twig template that lays out the new custom field.

8

Thanks @pamtbaau !

I’ve managed to create a new form field which is a clickable Leaflet map and to store the clicked coordinates inside the page header :slight_smile:

Thanks :slight_smile:

9

@bricebou, That’s nice…

Please note, the forum is not just a Q&A for the benefit of the asker. It is also a repo of shared knowledge. I’ve shared my knowledge with you, would you mind sharing your knowledge (in the form of code) with us form members?

2 Likes
10

Sorry…

I’ve created a new theme which creates new pages, more precisely this one, extrait.yaml with a call to a new form field :

extends@: default

form:
  fields:
    tabs:
      type: tabs
      active: 1
      fields:
        content:
          type: tab
          fields:
            header.extrait_coord:
              type: geolocation
              label: Coordonnées

I’ve created the field in admin/themes/grav/templates/forms/fields/geolocation/geolocation.html.twig :

{% do assets.addJs('theme://dist/js/admin.js' , { 'loading':'defer' }) %}

{% extends "forms/field.html.twig" %}

{% block prepend %}
	<div id="leaflet"></div>
{% endblock %}

As documented, we have to declare the admin templates path in our plugin.php:

public static function getSubscribedEvents(): array
	{
		return [
			'onAdminTwigTemplatePaths' => ['onAdminTwigTemplatePaths', 0]
		];
	}

	public function onAdminTwigTemplatePaths($event): void
	{
		$paths = $event['paths'];
		$paths[] = __DIR__ . '/admin/themes/grav/templates';
		$event['paths'] = $paths;
	}

The javascript deals with the Leaflet map and with the interactions with it (creation of markers, dragging…)

I think that’s all :slight_smile:

Maybe, il would be better to slice this code, to develop a geolocation plugin, but I’m not comfortable enough with Grav yet to follow this path…

1 Like
11

@bricebou, Thanks for sharing!

What’s the rationale to create file geolocation.html.twig inside /user/plugins/myplugin/admin/themes/grav/templates/forms/fields/geolocation/
instead of /user/plugins/myplugin/templates//forms/fields/geolocation/ ?

If I’m not mistaken, you only have to mimic the path below /templates/.

Setting the template path could then be:

public function onAdminTwigTemplatePaths($event): void
{
  $paths = $event['paths'];
  $paths[] = __DIR__ . '/templates'; // -or- "plugins://$this->name/templates";
  $event['paths'] = $paths;

  // -or-

  $this->grav['twig']->twig_paths[] = "plugins://$this->name/templates";
}
12

I tried this and I’ve just tested this again to be sure: if I do what you suggest, my admin is broken… My form appears but without the admin theme…

Maybe because I do all of what I described through a theme and not a plugin ?

13

@bricebou, Interesting…

Well, you have tested it and I haven’t, so you’re probably right :wink: