title: Leaflet GeoJSON points *behind* polygon
body: <p>I have two leaflet geojson layers - they both have Point and Polygon features. I would like to be able to order them on the map, but when I do that today (attempting to order them by adding them in a certain order, using bringToBack/bringToFront, etc) the Point icons from both layers sit on top of all polygons.</p>
  
  <p>The reason (from my limited experience) appears to be that they're drawn on a completely different pane in the map. </p>
  
  <p>I'd very much like to have the points from a layer drawn on the same pane as the polygons from that layer, so when I order all of the layers, the points for the layer "below" are underneath the polygons on the layer "on top".</p>
  
  <p>Is there an easy/obvious way to do this that I've missed, or is this impossible today?</p>
  
  <p>Thanks very much!</p>
  
  <p><code>HTML:</code>
  </p>
  
  <pre><code>&lt;body&gt;
    &lt;div id='map'&gt;&lt;/div&gt;
  &lt;body&gt;
  </code></pre>
  
  <p><code>JS:</code>
  </p>
  
  <pre><code>var featColl1 = {
    type : 'FeatureCollection',
    features : [
      {
        type: "Feature",
        geometry: {
            type: "Point",
            coordinates: [-100, 48]
        }  
      },
      {
        type: "Feature",
        geometry: {
            type: "Polygon",
            coordinates: [[
              [-104.05, 48.99],
              [-97.22,  48.98],
              [-96.58,  45.94],
              [-104.03, 45.94],
              [-104.05, 48.99]
          ]]
        }  
      }
    ]
  };
  
  var featColl2 = {
    type : 'FeatureCollection',
    features : [
      {
        type: "Feature",
        geometry: {
            type: "Point",
            coordinates: [-103, 47]
        }  
      },
      {
        type: "Feature",
        geometry: {
            type: "Polygon",
            coordinates: [[
              [-104.05, 48.99],
              [-97.22,  48.98],
              [-96.58,  45.94],
              [-104.03, 45.94],
              [-104.05, 48.99]
          ]]
        }  
      }
    ]
  };
  
  var layer1Opts = {
    style :   { color : 'red' },
    pointToLayer : function(feat, latlng) {
      var opts = {
        icon : L.divIcon({ html : "1", iconSize: [15,15] })
      };
      return L.marker(latlng, opts);
    }
  };
  var layer2Opts = {
      pointToLayer : function(feat, latlng) {
      var opts = {
        icon : L.divIcon({ html : "2", iconSize: [15,15] })
      };
      return L.marker(latlng, opts);
    }
  };
  
  
  var map = new L.map('map')
    .setView([-103, 49], 5);
  
  L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg')
    .addTo(map);
  
  var layer1 = L.geoJson(featColl1, layer1Opts).addTo(map);
  var layer2 = L.geoJson(featColl2, layer2Opts).addTo(map);
  
  var bounds = new L.LatLngBounds();
  bounds.extend(layer1.getBounds());
  bounds.extend(layer2.getBounds());
  
  map.fitBounds(bounds);
  </code></pre>