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

Find code here before you post.
Locked
linb
Site Admin
Posts: 102
Joined: Thu Apr 25, 2013 6:51 am

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

Post by linb »

   
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('//{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();
        }
    }
});
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('//{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 7468 times

Locked