Module: Leaflet Map

[kaz]

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?

[webhoes]

Has anyone implemented leaflet draw (in combination with this module) and able to save the data to a field? Also to work on the frontend of the website.

[Andy]

@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)

[kaz]

@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;

 

 

[Andy]

@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

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.

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

 

[kaz]

@Andy This works perfect, good job!

[kaz]

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 ;)

[Andy]

@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.

[kaz]

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 October 22, 2021 by kaz
fixed

[wbmnfktr]

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.

 

[Sebastian]

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?

[wbmnfktr]

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);
   }
);

 

[Sebastian]

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.

[wbmnfktr]

1 minute ago, Sebastian said:

to work with cache

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

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

[Sebastian]

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 ?

[wbmnfktr]

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

[Sebastian]

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.

[wbmnfktr]

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.

[digitex]

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.

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.

[wbmnfktr]

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.

[digitex]

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.

[torf]

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.

[Clarity]

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 July 8, 2022 by Clarity
Add the solution.

[Clarity]

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?

[kaz]

I' ve changed the PHP version localhost from 7.4.21 to 8.1.1. When I make a change in the editor (e.g. in pages), this error message comes up:

Fatal error: Uncaught TypeError: round(): Argument #1 ($num) must be of type int|float, string given in site/modules/FieldtypeLeafletMapMarker/InputfieldLeafletMapMarker.module:193

#0 site/modules/FieldtypeLeafletMapMarker/InputfieldLeafletMapMarker.module (193): round('', 4)
#1 wire/core/Wire.php (417): Processwire\InputfieldLeafletMapMarker->___processInput(Object(WireInputData))
#2 wire/core/WireHooks.php (951): Wire->_callMethod('___processInput', Array)
#3 wire/core/Wire.php (485): WireHooks->runHooks(Object(Processwire\InputfieldLeafletMapMarker), 'processInput', Array)
#4 wire/core/InputfieldWrapper.php (1137): Wire->__call('processInput', Array)
#5 wire/core/Wire.php (417): InputfieldWrapper->___processInput(Object(WireInputData))
#6 wire/core/WireHooks.php (951): Wire->_callMethod('___processInput', Array)
#7 wire/core/Wire.php (485): WireHooks->runHooks(Object(InputfieldFieldsetOpen), 'processInput', Array)
#8 wire/core/InputfieldWrapper.php (1137): Wire->__call('processInput', Array)
#9 wire/core/Wire.php (417): InputfieldWrapper->___processInput(Object(WireInputData))
#10 wire/core/WireHooks.php (951): Wire->_callMethod('___processInput', Array)
#11 wire/core/Wire.php (485): WireHooks->runHooks(Object(InputfieldFieldsetOpen), 'processInput', Array)
#12 wire/core/InputfieldWrapper.php (1137): Wire->__call('processInput', Array)
#13 wire/core/Wire.php (417): InputfieldWrapper->___processInput(Object(WireInputData))
#14 wire/core/WireHooks.php (951): Wire->_callMethod('___processInput', Array)
#15 wire/core/Wire.php (485): WireHooks->runHooks(Object(InputfieldWrapper), 'processInput', Array)
#16 wire/core/InputfieldWrapper.php (1137): Wire->__call('processInput', Array)
#17 wire/modules/Inputfield/InputfieldForm.module (189): InputfieldWrapper->___processInput(Object(WireInputData))
#18 wire/core/Wire.php (417): InputfieldForm->___processInput(Object(WireInputData))
#19 wire/core/WireHooks.php (951): Wire->_callMethod('___processInput', Array)
#20 wire/core/Wire.php (485): WireHooks->runHooks(Object(InputfieldForm), 'processInput', Array)
#21 wire/modules/Process/ProcessPageEdit/ProcessPageEdit.module (2203): Wire->__call('processInput', Array)
#22 wire/core/Wire.php (417): ProcessPageEdit->___processInput(Object(InputfieldForm))
#23 wire/core/WireHooks.php (951): Wire->_callMethod('___processInput', Array)
#24 wire/core/Wire.php (485): WireHooks->runHooks(Object(ProcessPageEdit), 'processInput', Array)
#25 wire/modules/Process/ProcessPageEdit/ProcessPageEdit.module (2009): Wire->__call('processInput', Array)
#26 wire/modules/Process/ProcessPageEdit/ProcessPageEdit.module (563): ProcessPageEdit->processSave()
#27 wire/core/Wire.php (414): ProcessPageEdit->___execute()
#28 wire/core/WireHooks.php (951): Wire->_callMethod('___execute', Array)
#29 wire/core/Wire.php (485): WireHooks->runHooks(Object(ProcessPageEdit), 'execute', Array)
#30 wire/core/ProcessController.php (337): Wire->__call('execute', Array)
#31 wire/core/Wire.php (414): ProcessController->___execute()
#32 wire/core/WireHooks.php (951): Wire->_callMethod('___execute', Array)
#33 wire/core/Wire.php (485): WireHooks->runHooks(Object(ProcessController), 'execute', Array)
#34 wire/core/admin.php (160): Wire->__call('execute', Array)
#35 wire/modules/AdminTheme/AdminThemeUikit/controller.php (15): require('/Users/dylan/Si...')
#36 site/templates/admin.php (15): require('/Users/dylan/Si...')
#37 wire/core/TemplateFile.php (327): require('/Users/dylan/Si...')
#38 wire/core/Wire.php (414): TemplateFile->___render()
#39 wire/core/WireHooks.php (951): Wire->_callMethod('___render', Array)
#40 wire/core/Wire.php (485): WireHooks->runHooks(Object(TemplateFile), 'render', Array)
#41 wire/modules/PageRender.module (575): Wire->__call('render', Array)
#42 wire/core/Wire.php (417): PageRender->___renderPage(Object(HookEvent))
#43 wire/core/WireHooks.php (951): Wire->_callMethod('___renderPage', Array)
#44 wire/core/Wire.php (485): WireHooks->runHooks(Object(PageRender), 'renderPage', Array)
#45 wire/core/WireHooks.php (1059): Wire->__call('renderPage', Array)
#46 wire/core/Wire.php (485): WireHooks->runHooks(Object(Page), 'render', Array)
#47 wire/modules/Process/ProcessPageView.module (184): Wire->__call('render', Array)
#48 wire/modules/Process/ProcessPageView.module (114): ProcessPageView->renderPage(Object(Page), Object(PagesRequest))
#49 wire/core/Wire.php (417): ProcessPageView->___execute(true)
#50 wire/core/WireHooks.php (951): Wire->_callMethod('___execute', Array)
#51 wire/core/Wire.php (485): WireHooks->runHooks(Object(ProcessPageView), 'execute', Array)
#52 index.php (55): Wire->__call('execute', Array)
#53 {main}
thrown (Line 193 in site/modules/FieldtypeLeafletMapMarker/InputfieldLeafletMapMarker.module)

I set back the PHP to 7.4.21, now I don't have an error. Just for information for the developer, PHP 8 is causing problems, at least for me. Maybe it's only me?