Jump to content

Module: Leaflet Map


Mats

Recommended Posts

I have implemented the module, it works fine.

The data comes from a page with global settings. What I don't understand, the marker has a link to the Global Settings page. But I don't want a link in the marker, I just want the marker with name and address. In the description I found how to add an address, but unfortunately not how to remove the link.

$options = array('markerIcon' => 'star', 'markerColour' => 'blue');
echo $map->render($pages->get('1025'), 'location', $options);

Can the link be prevented in the options?

  • Like 1
Link to comment
Share on other sites

  • 1 month later...
  • 3 weeks later...

@kaz

On 5/3/2021 at 5:23 PM, kaz said:

The data comes from a page with global settings. What I don't understand, the marker has a link to the Global Settings page. But I don't want a link in the marker, I just want the marker with name and address. In the description I found how to add an address, but unfortunately not how to remove the link.

I think you need to look at the fields in the map options.

$map_options = array(
	'markerLinkField' => 'url',
	'markerTitleField' => 'title'
);

In the README.md file

`markerLinkField` | Page field to use for the marker link, or blank to not link (type: string; default: url)
`markerTitleField` | Page field to use for the marker title, or blank not to use a marker title (type: string; default: title)

Link to comment
Share on other sites

  • 2 weeks later...

@Andy Unfortunately, I could not find a solution with it to remove the link to the Global Setting either. At my complete code no URL is called at any point, I think that the module adds the link uncalled. Why, I have no idea.

<?php
$options = array(
    'popupFormatter' => function($page) {
        $out[] = "<strong>Company</strong>";
        $out[] = "Street";
        $out[] = "ZIP City";
        return implode('<br/>', $out);
    }
);
echo $map->render($pages->get('1028'), 'settings_location', $options);
?>

If someone like me calls the data from Global Settings I would appreciate your feedback. How did you defined it?

// Edit:
I find a solution in a post from 2017:

In MarkupLeafletMap.js, I changed the code

marker.bindPopup("<b><a href='" + marker.linkURL + "'>" + title + "</a></b>" + extra);

to

marker.bindPopup("" + extra + "");

Then the line breaks:

extra = '<br />' + extra;

to

extra = '' + extra;

 

 

  • Like 1
Link to comment
Share on other sites

@kaz

If You put default then 

			$options = array('markerIcon' => 'flag-checkered', 'markerColour' => 'orange',
			    'popupFormatter' => function($page) {
			        $out[] = "<center><strong>Sub Header</strong></center>";
			        $out[] = "<center><img src=\"/images/logo.png\" width=\"100\" height=\"100\" /></center>"; // ** NB: Use escaped double quotes if HTML attributes needed **
			        return implode('<br/>', $out);
			    }
			);

And yours Main Header will be as link

m-header.jpg.eb1f280a07e1a88d15b95787912bd3e5.jpg

But if you add the parameter 'markerTitleField' then the field with the link will disappear.

			$options = array('markerIcon' => 'flag-checkered', 'markerColour' => 'orange',
				'markerTitleField' => '',
			    'popupFormatter' => function($page) {
			        $out[] = "<center><strong>Sub Header</strong></center>";
			        $out[] = "<center><img src=\"/images/logo.png\" width=\"100\" height=\"100\" /></center>"; // ** NB: Use escaped double quotes if HTML attributes needed **
			        return implode('<br/>', $out);
			    }
			);

You can see the result.

s-head.jpg.69209218f8d855611540294e440b5934.jpg

It seems to me that this is exactly what you wanted to get. Without fixing the module codes.

 

  • Like 3
Link to comment
Share on other sites

  • 3 weeks later...

@kaz

23 hours ago, kaz said:

When I move over the map with the Magic Mouse, the map zooms in / out. Can this be deactivated, the finger movement should be for moving up and down the page 😉

Add two flags to options and play with it:

'scrollWheelZoom' => false,

'dragging' => false,

I usually use this configuration.

			$options = array('markerIcon' => 'flag-checkered', 'markerColour' => 'orange', 'scrollWheelZoom' => false, 'dragging' => true,
				'markerTitleField' => '',
			    'popupFormatter' => function($page) {
			        $out[] = "<center><strong>Sub Header</strong></center>";
			        $out[] = "<center><img src=\"/images/logo.png\" width=\"100\" height=\"100\" /></center>"; // ** NB: Use escaped double quotes if HTML attributes needed **
			        return implode('<br/>', $out);
			    }
			);

In this case, zooming in and out of the map is possible only with the zoom buttons at the top left. But the swipe movement of the card is preserved.

For a desktop, this is ideal. And for smartphones dragging the site up on the map picture is replaced by dragging the map up. The user understands this and is looking for a place behind the map in order to hook his finger on the page, not the map.
Disabling dragging does not fix the problem. The map does not move, but the page does not move either. The user still needs a place behind the map to swipe.

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

I want to output the values from Leaflet Map Marker in the header. $site_settings are a global settings page:

<meta name="geo.placename" content="<?php echo $site_settings->map->address; ?>">
<meta name="geo.position" content="<?php echo $site_settings->map->lat; ?>; <?php echo $site_settings->map->lng; ?>">
<meta name="ICBM" content="<?php echo $site_settings->map->lat; ?>, <?php echo $site_settings->map->lng; ?>">

The result remains blank:

<meta name="geo.placename" content="">
<meta name="geo.position" content="; ">
<meta name="ICBM" content=", ">

The map works fine, is displayed. What is wrong with my header query?

Edit: Error found, the field name map wasn't correct.

Edited by kaz
fixed
Link to comment
Share on other sites

  • 3 weeks later...

I'm using this module now in a RepeaterMatrix block for $items (20+ pages/entries) and single $page (or $page->getForPage()) in this case as it's a repeater with a map.

Within the single map the the zoom in my $options array doesn't do anything at all.

$options = array(
   'zoom' => '12',
);

Anyone an idea why this is the case? Am I doing something wrong here?
Within the map that contains several items, this option works as expected - or at least I can find the changes in the source code.


 

Link to comment
Share on other sites

On 11/12/2021 at 10:32 PM, wbmnfktr said:

I'm using this module now in a RepeaterMatrix block for $items (20+ pages/entries) and single $page (or $page->getForPage()) in this case as it's a repeater with a map.

Within the single map the the zoom in my $options array doesn't do anything at all.

$options = array(
   'zoom' => '12',
);

Anyone an idea why this is the case? Am I doing something wrong here?
Within the map that contains several items, this option works as expected - or at least I can find the changes in the source code.


 

Is this the only option you're setting?

Link to comment
Share on other sites

The full $options array looks like this

$options = array(
   'markerIcon' => 'cutlery',
   'markerColour' => 'green',
   'zoom' => '16', // doesn't do anything but hey...
   'height' => '100%',
   'scrollWheelZoom' => 'false',
   'popupFormatter' => function ($page) {
       $lines = array();
       $lines[] = "$page->street";
       $lines[] = "$page->postalcode $page->city";
       return implode("<br />", $lines);
   }
);

 

Link to comment
Share on other sites

So, has anyone gotten this to work with cache enabled? It seems like the map generation JS isn't put out in that usecase.
It would be really nice to have that cached though, especially if there are a lot of markers on a map on the front page.

Link to comment
Share on other sites

3 minutes ago, wbmnfktr said:

The full $options array looks like this

$options = array(
   'markerIcon' => 'cutlery',
   'markerColour' => 'green',
   'zoom' => '16', // doesn't do anything but hey...
   'height' => '100%',
   'scrollWheelZoom' => 'false',
   'popupFormatter' => function ($page) {
       $lines = array();
       $lines[] = "$page->street";
       $lines[] = "$page->postalcode $page->city";
       return implode("<br />", $lines);
   }
);

 

Iirc the zoom options gets overwritten by any zoom level you might have set in the respective field, maybe that's the issue?

3 minutes ago, wbmnfktr said:

I use it with ProCache enabled without any (reported) issues.

Take a look here.
https://www.restaurants-neumuenster.de/restaurants/burgergalerie/

Oh thanks, I only tried template and markup cache so far, that's good to know 🙂

Link to comment
Share on other sites

1 hour ago, Sebastian said:

Iirc the zoom options gets overwritten by any zoom level you might have set in the respective field, maybe that's the issue?

Maybe... at least that's the case. The other direction would be my favourite but ok. I already set a default value in the backend and reset it each time a location is saved.

I forked the module to make it more GDPR-compliant and to fit my needs, maybe you want to take a look at it here:

https://github.com/webmanufaktur/FieldtypeLeafletMapMarker

  • Like 1
Link to comment
Share on other sites

14 hours ago, wbmnfktr said:

Maybe... at least that's the case. The other direction would be my favourite but ok. I already set a default value in the backend and reset it each time a location is saved.

I forked the module to make it more GDPR-compliant and to fit my needs, maybe you want to take a look at it here:

https://github.com/webmanufaktur/FieldtypeLeafletMapMarker

Oh interesting I'll have a look, thanks. I already modified the original as well so i can serve all that css & js concenated from my own domain. I was actually thinking of trying the update leaflet to a current version but it seems that might take some work.

Link to comment
Share on other sites

11 hours ago, Sebastian said:

I already modified the original as well so i can serve all that css & js concenated from my own domain. I was actually thinking of trying the update leaflet to a current version but it seems that might take some work.

It was the exact same here. Needed a version with PrivacyWire-options and all files from local. Using Leaflef 0.7.7. The newest version is some kind different and haven't had the time to look that deep into it. Maybe later on.

Link to comment
Share on other sites

  • 4 weeks later...

I've got this module installed into pw 3.0.184 and noticed a strange bug. When editing a page in the admin containing the leaflet field the dropdowns in the header for settings, modules, access and the user drop down disappear, as does the Save button.

281199861_ScreenShot2021-12-15at2_23_15PM.png.dfd65973c0479ba62b91aef6facd93dd.png667807672_ScreenShot2021-12-16at12_55_30PM.png.b86b6a569811da24ce01428fdc25b0ab.png

Once I delete the field from the template things return to normal. It seems there's a js conflict somewhere. Just a heads up to @Mats.

Link to comment
Share on other sites

26 minutes ago, wbmnfktr said:

Can't confirm this issue in PW 3.0.190-dev.
Is there something in the logs or the dev console in your browser?
Maybe only a cache issue of some kind.

There's nothing in the log which is expected, it didn't throw an error it just doesn't display the drop downs etc.

The console shows the error:

Uncaught Error: Invalid LatLng object: (NaN, NaN)

Not sure that error is related. I've decided to include leaflet the old fashioned way and bypass the module. I've done that many times.

Link to comment
Share on other sites

  • 1 month later...

I also confirm what digitex said: There is no header dropdown, and the map container shows nothing. Looks to me as JS execution is stopped because of the following error:


Uncaught Error: Invalid LatLng object: (NaN, NaN)
LatLng https://unpkg.com/leaflet@0.7.7/dist/leaflet.js:6
latLng https://unpkg.com/leaflet@0.7.7/dist/leaflet.js:6
setView https://unpkg.com/leaflet@0.7.7/dist/leaflet.js:9
init https://www.xxxxx.at/site/modules/FieldtypeLeafletMapMarker/InputfieldLeafletMapMarker.js?v=3.0.3-1643876775:23
<anonymous> https://www.xxxxx.at/site/modules/FieldtypeLeafletMapMarker/InputfieldLeafletMapMarker.js?v=3.0.3-1643876775:179
    jQuery 2
        each
        each
<anonymous> https://www.xxxxx.at/site/modules/FieldtypeLeafletMapMarker/InputfieldLeafletMapMarker.js?v=3.0.3-1643876775:177
    jQuery 11
        l
        fireWith
        ready
        A
        promise
        ready
        init
        v
        support
        <anonymous>
        <anonymous>
leaflet.js:6:13622

Using ProcessWire 3.0.184

----

Maybe to be more specific: the module works like a charm, but in the backend it shows up without initial marker, and therefore no map is rendered. As soon as you type in any lat / lon the map shows up and you can place the marker accordingly.

Link to comment
Share on other sites

  • 4 months later...

Hello everyone!

I have an error "Uncaught ReferenceError: jsMarkupLeafletMap is not defined". My version of ProcessWire is 3.0.199 dev and the version of the module is the latest dev. I found that previously @Marco Angeli resolved the problem here, but it doesn't seem to be my case.

Edit: I forgot to add <?php echo $map->getLeafletMapHeaderLines(); ?> to the head. That was my mistake.

Edited by Clarity
Add the solution.
Link to comment
Share on other sites

  • 4 weeks later...

Hello, @Mats!

There is a problem with usage of this field when it is being added inside Repeater. The map does not load when I click to Repeater item since Leaflet's JavaScript is not being initialized after AJAX request. Can you please fix it?

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...