Trying to use Leaflet(open source map api) inside a panel?

[Stephen Goveia]

I have added the Leaflet .js URL to app settings "External Resources". I set the panel as html and added:

On page Load I call some javascript:

var map = L.map('map').setView([51.505, -0.09], 13);

Code: Select all

L.tileLayer('[url=http://{s}.tile.cloudmade.com/API-key/997/256/{z}/{x}/{y}.png]http://{s}.tile.cloudmade.com/API-key...[/url]', { 
 attribution: 'Map data © [url=http://openstreetmap.org]OpenStreetMap[/url] contributors, [url=http://creativecommons.org/licenses/by-sa/2.0/]CC-BY-SA[/url], Imagery © [url=http://cloudmade.com]CloudMade[/url]', 
 maxZoom: 18 

}).addTo(map);

But when I test all I see is:

any help would be so appreciated!

Love,
SG

[Stephen Goveia]

Sorry after "html and added:" I somehow forgot to put this:

SG

[Stephen Goveia]

Ugh.. its a simple div id=map div

[Alena Prykhodko]

Hello!

You need to add the code as Run Java Script action.

[Stephen Goveia]

Hi Alena! Yeah I do this js is inside the "run java Script" action:

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('[url=http://{s}.tile.cloudmade.com/API-key]http://{s}.tile.cloudmade.com/API-key[/url]...', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © CloudMade',
maxZoom: 18
}).addTo(map);

[Stephen Goveia]

Also why is it everytime I close the IDE my External Resources are removed?

[maxkatz]

Check the console for any errors. This is a 3rd party library.. we don't provide support for it.

[maxkatz]

This could be a bug.. we'll test this.

[Stephen Goveia]

Could it be that I need to include the Leaflet CSS link? I am not sure how to go about that however.

[maxkatz]

Create New CSS