Smarty Forum Index Smarty
WARNING: All discussion is moving to https://reddit.com/r/smarty, please go there! This forum will be closing soon.

Problem with openstreetmap in template

 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    Smarty Forum Index -> General
View previous topic :: View next topic  
Author Message
Sepp
Smarty Rookie


Joined: 06 Jul 2019
Posts: 5

PostPosted: Sat Jul 06, 2019 4:12 pm    Post subject: Problem with openstreetmap in template Reply with quote

Hello!
I'm using SmartyBC on 3.1.33. Now I've tried to take the following code from openstreetmap and leaflet to the template between {literal} {/literal}. It shows no error, but the map isn't to see. In a normally html site the code will work. What is the problem in smarty? Please can you help me. Thank you. Confused

Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css">
<script src='https://unpkg.com/leaflet@1.3.3/dist/leaflet.js'></script>

#map {
  height: 500px;
}
</head>
<body>
<div id="map"></div>

<script>
{literal}
var map = L.map('map').setView([43.64701, -79.39425], 15);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
  .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
  .openPopup();
{/literal}
</script>
</body>
</html>


Last edited by Sepp on Sun Jul 07, 2019 7:22 am; edited 2 times in total
Back to top
View user's profile Send private message
bsmither
Smarty Elite


Joined: 20 Dec 2011
Posts: 322
Location: West Coast

PostPosted: Sun Jul 07, 2019 2:35 am    Post subject: Reply with quote

Wrapping this code in {literal} and {/literal} is the proper thing to do.

The problem, it looks to be, is that the code shown above is missing statements that are, in fact, present in the web page where you say it works.
Back to top
View user's profile Send private message
Sepp
Smarty Rookie


Joined: 06 Jul 2019
Posts: 5

PostPosted: Sun Jul 07, 2019 7:06 am    Post subject: Problem with leaflet and openstreetmap in template Reply with quote

Dear sir. Thank you so for answering. Very Happy
The code is complete and works. I have it tested again in jsfiddle. Please take a look.

https://jsfiddle.net/20dxpbhk/2/

Unfortunately in smarty I have no chance with all attempts that the map opens.
Thanks for checking and helping.
Back to top
View user's profile Send private message
Sepp
Smarty Rookie


Joined: 06 Jul 2019
Posts: 5

PostPosted: Sun Jul 07, 2019 8:36 am    Post subject: Problem with leaflet and openstreetmap in template Reply with quote

Another idea: maybe smarty will not serve this url from openstreetmap.org, or?
Code:
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org
Back to top
View user's profile Send private message
AnrDaemon
Administrator


Joined: 03 Dec 2012
Posts: 1785

PostPosted: Sun Jul 07, 2019 11:17 am    Post subject: Reply with quote

First make your page work as is, locally in your browser.
Only when it works, you can try to move the necessary parts to the template and see if it works when served from the server.
Back to top
View user's profile Send private message
Sepp
Smarty Rookie


Joined: 06 Jul 2019
Posts: 5

PostPosted: Sun Jul 07, 2019 11:33 am    Post subject: Problem with leaflet and openstreetmap in template Reply with quote

Dear Administrator,
I exactly have done this what you say.
In a simple html site the code of leaflet and openstreetmap works perfectly. But in the smarty template the code will not open the map.
And by the way, with the code of google maps between {literal} {/literal} I have had no problems in the smarty template the last 10 years.
But now I want to change to leaflet, but this will not work in smarty.
Back to top
View user's profile Send private message
Sepp
Smarty Rookie


Joined: 06 Jul 2019
Posts: 5

PostPosted: Sun Jul 07, 2019 6:21 pm    Post subject: Problem with leaflet and openstreetmap in template Reply with quote

Dear Sirs,
thank you for all help. I've found the problem.
The div element must necessarily be in front of the script.
Like that:
Code:
<div id="map"></div>
{literal}script{/literal}

The reason for that, however, is a mystery to me. After all, I am a small step further. Thanks to all.
Back to top
View user's profile Send private message
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    Smarty Forum Index -> General All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group
Protected by Anti-Spam ACP