title: Map polygons and markers disappear using leaflet
body: <p>For some reason my polygons are not showing once the map tiles are rendered. They are drawn on the map but disappear once the map tiles are rendered. </p>
  
  <p>I have created a <a href="http://jsfiddle.net/ihatemash/nr7pjbp0/5/" rel="nofollow">JSFiddle</a> example of the issue. The polygon should be in the center of the map and your mouse pointer will change whenever you hover over the polygon area. Sometimes I see the red polygon display for a second just before the tiles are rendered. So, I know it is getting drawn on the map. This happens with my map pins as well. But, I didn't include a map pin in the JSFiddle example.</p>
  
  <pre class="lang-js prettyprint-override"><code>var tdata = '{"Latitude":79.07181,"Longitude":-100.63477,"Polygons":[[{"Item1":79,"Item2":-100},{"Item1":79,"Item2":-99},{"Item1":78.5,"Item2":-99},{"Item1":78.5,"Item2":-100}]]}';
  
  dta = JSON.parse(tdata);
  
  var map = new L.Map('map', { center: new L.LatLng(dta.Latitude, dta.Longitude), zoom: 6, maxZoom: 16, minZoom: 5 });
  var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
  var ggl = new L.Google();
  var ggl2 = new L.Google('TERRAIN');
  map.addLayer(ggl2);
  map.addControl(new L.Control.Layers({ 'Street': osm }, {}));
  
  for (var x = 0; x &lt; dta.Polygons.length; x++) {
      var polygon = dta.Polygons[x];
      var coordinates = [[]];
      coordinates.pop();
      for (var j = 0; j &lt; polygon.length; j++) {
          var point = polygon[j];
          coordinates.push(new Array(point.Item1, point.Item2));
      }
  
      var mapPolygon = L.polygon(coordinates,{fillColor: "#FF0000", fillOpacity: dta.Opacity, weight: '1px'});
      mapPolygon.addTo(map);
  }
  </code></pre>