How to incorporate 3rd party scripts such as a leafletjs map

Find code here before you post.

How to incorporate 3rd party scripts such as a leafletjs map

Postby linb » Wed May 07, 2014 1:29 am

   
Class('App', 'xui.Com',{
Instance:{
iniComponents : function(){
// [[Code created by CrossUI RAD Tools
var host=this, children=[], append=function(child){children.push(child.get(0));};

append((new xui.UI.Div())
.setHost(host,"ctl_div15")
.setDomId("map")
.setLeft(80)
.setTop(40)
.setWidth(600)
.setHeight(280)
);

return children;
// ]]Code created by CrossUI RAD Tools
},
events:{"onRender":"_com_onrender"},
_com_onrender:function (com, threadid){
var ns=this;

// You can include them in html file
xui.CSS.includeLink("http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css");
xui.include("L","http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js",function(){
ns._buildMap();
});
},
_buildMap:function(){
var map = L.map('map').setView([51.505, -0.09], 13);

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

L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup. <br> Easily customizable.')
.openPopup();
}
}
});
   
Attachments
map.PNG
map.PNG (160.93 KiB) Viewed 4412 times
linb
Site Admin
 
Posts: 102
Joined: Thu Apr 25, 2013 6:51 am

Return to CrossUI Code Snaps

Who is online

Users browsing this forum: No registered users and 0 guests

cron