title: LeafletJS popups positions and markers add and remove issue
body: <p>I am implementing displaying locations on openstreetmaps using leafletjs API. Here is the scenario, When the page loads a JS function is being triggered which will query DB to get current locations of all the devices and show them as markers on map. I am facing two major issues in it:</p>
  
  <p>--> I am trying to bind popups with each marker so that it could be descriptive. In other words user should gain idea that of what device this marker for. The problem is that popups is being showed over the marker making marker non-visible. Here is the screenshot:</p>
  
  <p><img src="https://i.stack.imgur.com/fxNVg.png" alt="enter image description here"></p>
  
  <p>Marker is shown below(after closing one popup):</p>
  
  <p><img src="https://i.stack.imgur.com/jLEQr.png" alt="enter image description here"></p>
  
  <p>--> On this page, I am displaying devices names in a table. The first column of this table is checkbox. When user check a device its marker appears on the map as expected(working fine). After that if user unchecks that device then its marker disappears. But when user re-selects that device again then its marker doesn't appear.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>function OnPageLoad() {
  var IDs = GetAllSelectedDeviceIDs();
  LoadOpenStreetMap(IDs);
  }
  
  var map;
  var markers = new Array();
  
  function LoadOpenStreetMap(deviceIDs) {
  for (var i = 0; i &lt; deviceIDs.length; i++) {
      $.ajax({
          url: "../Database/getcurrentlocation.php",
          cache: false,
          type: "post",
          data: "deviceId=" + deviceIDs[i] + "&amp;r=" + Math.random(),
          dataType: "html",
          async: false,
          success: function (data) {
              if (data != null) {
                  var dataArray = data.split(/~/);
                  SetOpenStreetMap(dataArray[0], dataArray[1], deviceIDs[i], i, flags[i]);
              }
          }
      });
  }
  deviceIDs = GetAllSelectedDeviceIDs();
  setTimeout(function () { LoadOpenStreetMap(deviceIDs); }, 500);
  }
  
  function SetOpenStreetMap(lati, longi, deviceID, markerIndex, markerFlag) {
  if (!map) {
      map = L.map('map').setView([lati, longi], 12);
      L.tileLayer('http://{s}.tile.cloudmade.com/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/997/256/{z}/{x}/{y}.png', {
          attribution: '',
          maxZoom: 18
      }).addTo(map);
  }
  
  if (markerFlag == 1) {
  //need to add marker
      if (!markers[markerIndex]) {
          var popupLocation1 = new L.LatLng(lati, longi);
          var popupContent1 = 'This is a nice popup.';
          popup1 = new L.Popup();
          popup1.setLatLng(popupLocation1);
          popup1.setContent(popupContent1);
          markers[markerIndex] = L.marker([lati, longi]).addTo(map);
          markers[markerIndex].bindPopup(popupContent1);
          map.addLayer(popup1);
      }
      else
          markers[markerIndex].setLatLng([lati, longi]).update();
  }
  else {
  //need to remove marker
      if (markers[markerIndex]) {
         map.removeLayer(markers[markerIndex]);
      }
  }
  }
  </code></pre>
  
  <p>Any help would be appreciated.</p>
  
  <p>Thanks.</p>