How replace Google Maps with leaflets

fabiosistemi

The GPS feature is great, I would need to use leaflets (https://leafletjs.com/ )instead of Google Maps is it possible to change this easily? Thank you

Karl

fabiosistemi Leaflet, as far as I am aware, requires Javascript to specifically embed a map by API. For Google maps, we currently just use normal links with coordinates in the URL, and I don't think this is possible with Leaflet. Therefore, it needs to be a new feature (which I may consider), or you would need to implement it yourself (advanced).

To do it yourself, you would basically need to add your own contextmenu button, that opens a window or an overlay that shows a map (which has to be programmed by Leaflet JS API).

As noted, I would be interested to look into this as an official feature. For now, it's only possible by creating your own button in the context menu, but this requires some knowledge and experience in Javascript.

fabiosistemi

Thanks for the quick reply. I found this project https://github.com/simonw/url-map which allows you to pass coordinates directly via URL

Example https://localhost/maps.html?center=44.899244,8.209709&zoom=50

Operation is simple, 3 files are required: maps.html, leaflet.css and leaflet.js

Can you tell me how to create the custom button to pass the coordinates into the link?

Karl

fabiosistemi Thanks for the quick reply. I found this project https://github.com/simonw/url-map which allows you to pass coordinates directly via URL

Cool. So this would need to be setup locally on the server that uses it. Also, it's basically just a drop-in replacement for Google Maps. I can't see that it offers any other advantages, except a different design.

fabiosistemi Operation is simple, 3 files are required: maps.html, leaflet.css and leaflet.js

Seems simple enough. Did you set it up locally already?

fabiosistemi Can you tell me how to create the custom button to pass the coordinates into the link?

This is custom contextmenu button, eg the dropdown menu that displays when right-clicking or clicking the three-dots button on any image. First go here, and prepare the setup _files/js/custom.js.
https://www.files.gallery/docs/javascript-config/

Then something like this:

_c.config = {

  // custom context menu (dropdown) options
  contextmenu: {
    rotate: {
      text: 'rotate',
      // icon name, or include custom icon <path d="..."> value from https://pictogrammers.com/library/mdi/
      icon: 'marker',
      condition: (item) => item.gps,
      href: (item) => {
        return '/yourmaplink/?center=' + item.gps[0] + ',' + item.gps[1] + '&zoom=50';
      },
      // action: (item) => _h.popup(null, null, null, item.url_path),
    },
  },
}

fabiosistemi

Karl

Karl Cool. So this would need to be setup locally on the server that uses it. Also, it's basically just a drop-in replacement for Google Maps. I can't see that it offers any other advantages, except a different design.

You're right, it doesn't offer many advantages, such as aesthetics and functionality. There is an advantage regarding the GDPR.

It provides two options to customers, who can prefer openstreet map instead of google maps

Karl Seems simple enough. Did you set it up locally already?

Yes, I tried it locally and it works.

Karl This is custom contextmenu button, eg the dropdown menu that displays when right-clicking or clicking the three-dots button on any image. First go here, and prepare the setup _files/js/custom.js.
https://www.files.gallery/docs/javascript-config/

Then something like this:

Thanks for your support, I'll do the tests and let you know.

fabiosistemi

It works perfectly.
I applied a change to show the marker on the coordinates.

_c.config = { // GPS Leaflet custom context menu (dropdown) options contextmenu: { rotate: { text: 'Leaflet Maps', // icon name, or include custom icon <path d="..."> value from https://pictogrammers.com/library/mdi/ icon: 'marker', condition: (item) => item.gps, href: (item) => { return '_files/include/leaflet/maps.html?center=' + item.gps[0] + ',' + item.gps[1] + '&marker=' + item.gps[0] + ',' + item.gps[1] + '&zoom=50'; }, // action: (item) => _h.popup(null, null, null, item.url_path), }, }, }

This is the structure I used

fabiosistemi

Would it be possible to replace the Google GPS function with this when opening the photo in the slideshow?

Thanks

Karl

fabiosistemi Would it be possible to replace the Google GPS function with this when opening the photo in the slideshow?

It's not currently possible, because the map link function is hardcoded. I might consider offering the link as config function, although I was also thinking of creating embedded maps without opening a new browser window.

For now, I can only think of an ugly Javascript hack. Add a function that detects click on the entire document. Then on click, if the clicked element has href with https://www.google.com/maps/search/?api=1&query=60.90869166666666,7.212033333333333 in it, then just extract the coordinates and replace the href attribute with your leaflet link.

fabiosistemi

Karl

Karl Potrei considerare di offrire il collegamento come funzione di configurazione

This would be an excellent solution.

Karl Per ora, posso solo pensare a un brutto hack Javascript. Aggiungi una funzione che rileva clickl'intero documento. Quindi, al clic, se l'elemento cliccato ha hrefal https://www.google.com/maps/search/?api=1&query=60.90869166666666,7.212033333333333suo interno, basta estrarre le coordinate e sostituire l' hrefattributo con il collegamento del volantino.

Thanks for the advice