What's wrong with Code Widget?

mensch.mueller · July 10, 2020, 1:46pm

Hi,
I’m trying to get leaflet working(in a Code widget). It all goes well, until I inserted an image in the leaflet-popups code. That code works standalone(with images) and in iFrame in Blocs. But not in Code-widget. It seemed that Code-widget scrambled up code and also inserted class=" "(for whatever reason).

That’s the solo leaflet

Part of code(freshly inserted into code-widget)

That’s after closing widget and reopening(doesn’t work in preview), also note the renaming of L.marler → l.marker, and also inserting class=" "

And Code widget is showing a preview of image underneath in Blocs!!!

So,very strange behaviour! Is this a bug? @Norm
Blocs 3.4.10 and 3.5
Cheers Michael

Edit: seemed that “>” is missing in part of popup-code. but end-result is scrambled too, and there are two pictures underneath code-widget…

mensch.mueller · July 10, 2020, 1:49pm

Trying to insert code:

<!DOCTYPE html>
<html>
<head>	
	<title>Quick Start - Leaflet</title>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="">
    <script integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin="" src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
</head>
<body> <!-- { overflow: hidden; } -->
	
<div id="mapid" style="width: 1600px; height: 800px;"></div>
<script>

	var mymap = L.map('mapid').setView([48.75517, 8.48269], 15);
	L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		id: 'mapbox/streets-v11',
		tileSize: 512,
		zoomOffset: -1
	}).addTo(mymap);	

	L.marker([48.759343, 8.485104]).addTo(mymap)
		.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
	L.marker([48.75534, 8.473678]).addTo(mymap)
		.bindPopup("<b>Hello world!</b><br>I am also a popup.<br><img src=https://phantom-bilder.com/images/high2/Quattro-300px.jpg").openPopup();		
	L.marker([48.719055, 8.462048]).addTo(mymap)
		.bindPopup("<b>Hello world!</b><br>I am at wildsee.<br><img src=https://phantom-bilder.com/images/high2/Quattro-300px.jpg>");

	L.circle([48.756634, 8.482786], 50, {
		color: 'red',
		fillColor: '#f03',
		fillOpacity: 0.5
	}).addTo(mymap).bindPopup("I am a circle.");

	L.polygon([
		[48.759181, 8.487786],
		[48.759626, 8.486681],
		[48.760065, 8.486756],
		[48.759824, 8.488602]
	]).addTo(mymap).bindPopup("I am a polygon.");


	var popup = L.popup();

	function onMapClick(e) {
		popup
			.setLatLng(e.latlng)
			.setContent("You clicked the map at " + e.latlng.toString())
			.openOn(mymap);
	}

	mymap.on('click', onMapClick);

</script>

</body>
</html>

Also I´m observing, that code-widget, deletes

<!DOCTYPE html>
<html>
<head>

and
<body>

is this normal?

So this code does work standalone, in iFrame(but with this scollbar issues), but not in code-widget!

Edit: code works absolutely fine without(without image in popup) this part:
<img src=https://phantom-bilder.com/images/high2/Quattro-300px.jpg>

PeteSharp · July 10, 2020, 9:26pm

It’s not a Blocs issue, you need to strip out a bunch of that code, you don’t need most of it.

Some of it goes in the page header, the script you can put in the page footer and the main Div you can leave in the code bric.

I am on my iPad at the moment, but I will check back later on my Mac.

mensch.mueller · July 11, 2020, 12:20am

Thanks, for looking into it!
But my main point is:
code works as is, (even in code-widget), without insertion of
<img src=https://phantom-bilder.com/images/high2/Quattro-300px.jpg>
into pop-ups.
And full code works standalone and in iFrame.
But it totally scrambles in code-widget(see first two pictures), with above part.

Cheers Michael

PeteSharp · July 11, 2020, 12:26am

The real point is… you shouldn’t be putting any of this in a code bric. Which is why Blocs is stripping it.

<!DOCTYPE html>
<html></html>
<head></head>
<body></body>

iFrame is very different to a code bric.

If you want to use the code bric you need to do it properly. And also untick the preview option of the code bric. Preview can cause issues with code. There is a big IMPORTANT box right under the preview tick box.

Regarding your second issue there are issues with the way you are trying to code that.

One way to do this is too add a variable for the image in the script and then add that variable to the popup.

eg.

 var popupImage = '<img src="https://phantom-bilder.com/images/high2/Quattro-300px.jpg"/>';

And then the Popup looks like this

.bindPopup("<b>Hello world!</b><br>I am at wildsee."+ popupImage);

Here is a working example. And also how I would tidy it up with adding stuff to the page header and footer.

Leftlet_Example.bloc (722.3 KB)

mensch.mueller · July 11, 2020, 10:43am

Thanks a lot!
I’m just a beginner with Blocs, and web. I have not much knowledge with html coding. But i´ve done a lot in three.js. But it was strange, that code-widget scrambled up code, that was otherwise working!
Thanks for tip with preview option, just overlooked that!
But I had this project in mind, where I wanted to observe all the Hunting stands in my neighbouring forests(we have really a lot, it is really a part of german “forest culture”), and clicking on the position of one should show a picture of it!
Ultimately, a carousel underneath should show the full picture.
Is it possible that a carousel in Blocs loads a certain image, or move to a specific image, by code?

Cheers Michael

PeteSharp · July 11, 2020, 11:04am

Yes you can do that. But you will need to also use Javascript.

Depends on what you use, if you use the default Bootstrap Carousel, the BS documents can help you with that.

Specifically .carousel(number)

mensch.mueller · July 11, 2020, 12:00pm

Thanks!
Will look at that!
Michael

Norm · July 11, 2020, 2:58pm

Try disabling in app preview on the code widget too.

If your code is mutated in any way the WebKit engine will correct parts automatically as it tries to parse and render it.

mensch.mueller · July 11, 2020, 4:05pm

Thanks,
Disabling app preview, that is what @PeteSharp also said.
But its a big mutation going on in code-widget
Just have a look at the first two pictures…

But I will follow @PeteSharp advice, that was only a first tryout.
Michael

Michael