Maps doesn't show anything

[Rusty]

Hi!

I installed my new website on a fresh system (PHP 8.2.5) with Joomla 4.3.1.

What's the problem?

When I try to use PhocaMaps I set up a "map" with my coordinates and placed a marker (incl. coordinates). Then I tried to insert the plugin code in an article (thought I could run the map with it!?) but the code will not interpreted.
I also tried to create a new menu entry and linked it to the created map name. But I only get a blank page.

What did I try?
I tried several PHP versions down to 8.0 - all the same.
I activated the Joomla debug mode to maximum. And here I got an interesting effect: The map is running! BUT I also get an error like this:

Code: Select all

Deprecated: ucfirst(): Passing null to parameter #1 ($string) of type string is deprecated in /var/www/vhosts/xxx/components/com_phocamaps/phocamaps.php on line 30

What can I do?

Cheers
Rusty

P.S. I used the last version of PhocaMap 4.0.1

[Jan]

Hi, thank you for the info, the deprecated warning is a warning for developers so it does not prevent the extension from succussfull running.

Where do you get the problem? In component or in plugin?

If you display the map with help of component, it is not rendered? Can I see the page where this occurs?

Jan

[Rusty]

Hi, thank you for the info, the deprecated warning is a warning for developers so it does not prevent the extension from succussfull running.

Where do you get the problem? In component or in plugin?

If you display the map with help of component, it is not rendered? Can I see the page where this occurs?

In component mode I get the blank screen. Look: https://neu.schnitzerhaeusl.de/anfahrt- ... eiten.html
In plugin mode (with plugin code in article or modul position) the code is not interpreted. Look (end of page): https://neu.schnitzerhaeusl.de/anfahrt- ... iten0.html

[Jan]

Hi, on your site, I get this following error message (in Javascript console):




Do you use some specific security setting on your site

Jan

[Rusty]

Hi, on your site, I get this following error message (in Javascript console):

Do you use some specific security setting on your site :idea:

Oh man ... didn't checked this. Sorry! Thanks for the tip!
I use a content security policy (csp) on my site and do not allow inline-scripting because this is known as unsafe and risky.

In this case, phocamap is - in terms of script security - not safe. That's a pity. :-(
I guess this could not be changed "easily", right?

[Jan]

Hi, what exactly do you mean with inline-scripting? And what exactly security difference is between inline script and other script?

Jan

[Rusty]

Hi, what exactly do you mean with inline-scripting? And what exactly security difference is between inline script and other script?

Like the error log says ... there's a problem with the csp. If I add "inline-script" as allowed (in the csp directive for script-src), then the map is shown correctly.

I guess the following script code is meant:

Code: Select all

<script>jQuery(document).ready(function() {
var mapphocaMap6453f7d50ea59 = L.map("phocaMap6453f7d50ea59", {zoomControl: false,}).setView([50.665158599494504, 12.929610965579498], 18);
new L.Control.Zoom({ zoomInTitle: 'Zoom in', zoomOutTitle: 'Zoom out' }).addTo(mapphocaMap6453f7d50ea59);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 18,
	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>'
}).addTo(mapphocaMap6453f7d50ea59);
var marker6453f7d50ea59m1 = L.marker([50.665158599494504, 12.929610965579498])
.addTo(mapphocaMap6453f7d50ea59);
;
marker6453f7d50ea59m1.bindPopup('<div class="pmMarkerTitle">Ladengeschäft</div><div></div>').openPopup();
var icon6453f7d50ea59m1 = new L.AwesomeMarkers.icon({
   icon: "circle",
   markerColor: "darkgreen",
   iconColor: "#ffffff",
   prefix: "fa",
   spin: 0,
   extraClasses: "",
})
 marker6453f7d50ea59m1.setIcon(icon6453f7d50ea59m1);
mapphocaMap6453f7d50ea59.addControl(
	new L.Control.Fullscreen({
		position: 'topright',
		title: {
			'false': 'View Fullscreen',
			'true': 'Exit Fullscreen'
		}
	})
)
L.control.locate({
	position: 'topright',
	strings: {
		'title': 'Current Position'
	},
	locateOptions: {
		enableHighAccuracy: true,
		watch: true,
	},
}).addTo(mapphocaMap6453f7d50ea59);
mapphocaMap6453f7d50ea59.addControl(new L.Control.Search({
	url: 'https://nominatim.openstreetmap.org/search?format=json&q={s}',
	jsonpParam: 'json_callback',
	propertyName: 'display_name',
	propertyLoc: ['lat','lon'],
	marker: L.circleMarker([0,0],{radius:30}),
	autoCollapse: true,
	autoType: false,
	minLength: 3,
	position: 'topleft',
	textErr: 'Location not found',
	textCancel: 'Cancel',
	textPlaceholder: 'Search',
}));
})</script>

This js code is implemented inside of the head section - but as complete script - inline (inline means inside html document). I think you could export this to an external js file.

BUT: Nevertheless the plugin code doesn't work at all. -> https://neu.schnitzerhaeusl.de/anfahrt- ... iten0.html

[Jan]

Hi, the code inside <script> tag is the same like when you link it with the file. This is common technique when you e.g. need to render some code with PHP. Example in Joomla:

- you store parameters in Options and with help of PHP you create Javascript code (which includes the parts set by parameters). This cannot be done with external Javascript file.

So, this means, it is not possible to set such parameters into external Javascript file.

The plugin code is different problem, when the code is not transformed, then:

- the plugin is not installed
- or the plugin is not enabled
- or it is not running inside part which accepts content plugins.

Jan

[Rusty]

The plugin code is different problem, when the code is not transformed, then:

- the plugin is not installed
- or the plugin is not enabled
- or it is not running inside part which accepts content plugins.

Uh ... my fault! :(
I forgot to install the plugin. :D