Page 1 of 3

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

Posted: Fri May 10, 2013 3:35 pm
by 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:

Image

any help would be so appreciated!

Love,
SG


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

Posted: Fri May 10, 2013 4:42 pm
by Stephen Goveia

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

SG


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

Posted: Fri May 10, 2013 4:43 pm
by Stephen Goveia

Ugh.. its a simple div id=map div


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

Posted: Fri May 10, 2013 4:45 pm
by Alena Prykhodko

Hello!

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


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

Posted: Fri May 10, 2013 4:48 pm
by 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);


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

Posted: Fri May 10, 2013 4:50 pm
by Stephen Goveia

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


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

Posted: Fri May 10, 2013 4:50 pm
by maxkatz

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


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

Posted: Fri May 10, 2013 4:51 pm
by maxkatz

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


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

Posted: Fri May 10, 2013 4:55 pm
by Stephen Goveia

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


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

Posted: Fri May 10, 2013 4:57 pm
by maxkatz

Create New CSS