Draw polygons on a map with Leaflet.js and leaflet.draw

Leaflet is an an open-source JavaScript library for mobile-friendly interactive maps http://leafletjs.com/ Leaflet.draw is a leaflet plugin for drawing on a map. Leaflet.draw code is from: https://github.com/Leaflet/Leaflet.draw https://github.com/Leaflet/Leaflet.draw Map data is provided by OpenStreetMap

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css">
<div id="map"></div>

CSS

html, body {
  height: 100%;
}
#map {
  height: 100%;
}

JavaScript

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 =...