javascript - How can I add functions to leaflet layer? -
https://jsfiddle.net/324h2d9q/87/ hello! leaflet map. want add action layer. example, if check ,,scoli" tab, addscoli1() function should run, don't how this... also, tab ,,muzee" want add addmuzeu1() function , on..how can this? thanks!
<script type="text/javascript"> $(document).ready(function() { function addscoala1() { for(var i=0; i<scoala.length; i++) { var greenicon = new l.icon({ iconurl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png', shadowurl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png', iconsize: [25, 41], iconanchor: [12, 41], popupanchor: [1, -34], shadowsize: [41, 41] }); var marker = l.marker( [scoala[i]['latitudine'], scoala[i]['longitudine']], {icon: greenicon}).addto(map); marker.bindpopup( "<b>" + scoala[i]['scoala']+"</b><br>detalii:" + scoala[i]['detalii'] + "<br />telefon: " + scoala[i]['telefon']); var scoala = json.parse( '<?php echo json_encode($scoala) ?>' ); } } function stringtogeopoints( geo ) { var linespin = geo.split(","); var lineslat = new array(); var lineslng = new array(); for(i=0; < linespin.length; i++) { if(i % 2) { lineslat.push(linespin[i]); }else{ lineslng.push(linespin[i]); } } var latlngline = new array(); for(i=0; i<lineslng.length;i++) { latlngline.push( l.latlng( lineslat[i], lineslng[i])); } return latlngline; } function addzona1() { for(var i=0; < zona.length; i++) { //console.log(zona[i]['geolocatii']); var polygon = l.polygon( stringtogeopoints(zona[i]['geolocatii']), { color: 'red'}).addto(map); polygon.bindpopup( "<b>" + zona[i]['nume']); } var zona = json.parse( '<?php echo json_encode($zona) ?>' ); } function addmuzeu1() { for(var i=0; i<muzeu.length; i++) { var marker = l.marker( [muzeu[i]['latitudine'], muzeu[i]['longitudine']]).addto(map); marker.bindpopup( "<b>" + muzeu[i]['muzeu']+"</b><br>detalii:" + muzeu[i]['detalii'] + "<br />telefon: " + muzeu[i]['telefon']); } var muzeu = json.parse( '<?php echo json_encode($muzeu) ?>' ); } var markersa = []; var markersb = []; var markersc = []; var groupa = l.layergroup(addscoala1); var groupb = l.layergroup(addmuzeu1); var groupc = l.layergroup(addzona1); //background tile set var tilelayer = {'harta' : l.tilelayer('https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/{z}/{x}/{y}?access_token=pk.eyj1ijoicm9iatewmtaxmjk4iiwiysi6imnqnjzocndibte2nmqzm3f4ywrzmdbubwkifq.ccmsqcncmhog4ucr6ogccg', { attribution: 'map data © <a href="http://openstreetmap.org/"> openstreetmap </a> contributors, ' + '<a href="http://creativecommons.org/"> cc-by-sa </a>, ' + 'imagery © <a href="http://mapbox.com"> mapbox </a>', key: 'bc9a493b41014caabb98f0471d759707' }) }; var map = l.map('map', { center: new l.latlng(44.9323281,26.0306833), zoom: 12.25, layers: [tilelayer['harta'], groupa, groupb, groupc] //change determine ones start loaded on screen }); //control on top left handles switching between , b var overlaymaps = { "scoli": groupa, "muzee": groupb, "parcuri": groupc }; l.control.layers(tilelayer, overlaymaps, {position:'topleft'}).addto(map); $("#login").bootstrapvalidator({ framework: "bootstrap", icon: { valid: "glyphicon glyphicon-ok", invalid: "glyphicon glyphicon-remove", validating: "glyphicon glyphicon-refresh" }, fields: { "email": { validators: { notempty: { message: "required field" } } }, "user_password": { validators: { notempty: { message: "required field" } } } } }); $("#am-uitat-parola").bootstrapvalidator({ framework: "bootstrap", icon: { valid: "glyphicon glyphicon-ok", invalid: "glyphicon glyphicon-remove", validating: "glyphicon glyphicon-refresh" }, fields: { "user_recover_email": { validators: { notempty: { message: "required field" }, emailaddress: { message: "e-mail address invalid" } } } } }); $("#link-forgot").click(function(){ $("#am-uitat-parola").toggle(); }); }); </script>
Comments
Post a Comment