Adding a Leaflet marker using a button on click event

Develop and Deploy Cross-Browser Web Apps .

Adding a Leaflet marker using a button on click event

Postby cgetty » Mon Sep 26, 2016 4:31 am

Hi everybody

I'm wanting to expand on the leaflet example in the code snaps section here. --------------------- My project is here.

How can I add this code L.marker([51.5, -0.09]).addTo(map) to a buttons on click event in order to add a leaflet marker to the map using a button.

Thanks
Clark
cgetty
 
Posts: 9
Joined: Mon May 19, 2014 5:54 am
Location: Texas

Re: Adding a Leaflet marker using a button on click event

Postby support » Tue Sep 27, 2016 2:33 am

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

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

append(
xui.create("xui.UI.HTMLButton")
.setHost(host,"xui_ui_htmlbutton1")
.setLeft(10)
.setTop(10)
.setWidth(100)
.setHeight(22)
.setZIndex(200)
.setHtml("Add a mark")
.onClick("_xui_ui_htmlbutton1_onclick")
);

return children;
// ]]Code created by CrossUI RAD Studio
},
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: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
this._map=map;
},
_xui_ui_htmlbutton1_onclick:function (profile, e, value){
L.marker([51.5, -0.09]).addTo(this._map)
.bindPopup('A pretty CSS3 popup. <br> Easily customizable.')
.openPopup();
}
}
});
   
support
 
Posts: 350
Joined: Sat Apr 27, 2013 9:22 am

Re: Adding a Leaflet marker using a button on click event

Postby cgetty » Tue Sep 27, 2016 4:22 am

You Guys ROCK!!

Thank you for taking the time to respond :lol:

Now I have a starting point to expand on.

Clark
cgetty
 
Posts: 9
Joined: Mon May 19, 2014 5:54 am
Location: Texas


Return to CrossUI for Web Apps

Who is online

Users browsing this forum: No registered users and 1 guest

cron