1

https://jsfiddle.net/324h2d9q/87/

I tried to make a map with Leaflet where I have multiple layers where I sort things via category, but it seems that it is not working... If I click on ,,Muzee", it should run the addMuzeu1() function, but it doesn't work...any suggestions?

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; i < 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; i < 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 &copy; <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 this to determine which ones start loaded on screen
});


//Control on the Top Left that handles the switching between A and B
var overlayMaps = {
    "Scoli": groupA,
    "Muzee": groupB,
    "Parcuri": groupC
};
L.control.layers(tileLayer, overlayMaps, {position:'topleft'}).addTo(map);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.