Merge pull request #1 from ect123/patch-1

edited

README.md

@@ -1,27 +1,27 @@
-# Layering overlapping polygon geoJSON files using panes and zindex. [HTML]
+# Layering overlapping polygon geoJSONs in Leaflet.js using panes and zindex. [HTML, JS]
 
-In the image below, it can be see that there are 3 rectangle polygons (green, blue, and red). In the HTML code, one must indicate the layer order of these polygons so users are able to click the smaller red rectangle even though there are two encompassing polygons ‘overlapping’ it.
+You can see in the image below that there are 3 rectangle polygons. In order to allow hover or click actions on the smallest polygon it must not be overlapped by the larger ones.  We assigned different layer panes for each polygon and ordered them logically to solve the problem of large polygons overlapping small ones.
 
 ![Alt text](/TemplatePNGreadme.png "Overlapping GeoJSON Polygons")
 
-## [Step 1] Panes create layers that have and ordering sequence which can be manufactured.
+## [Step 1] Panes = map layers that have and ordering sequence that can be defined.
 
-In the script and below the ‘var = map’ insert the following 3 lines of code:
+In the script below the map variable:
 
 > map.createPane('pane250'); 
 
-This line creates the pane, which was named ‘pane250’
+Creates the pane, which was named ‘pane250’
 
 > map.getPane('pane250').style.zIndex = 250;
 
-This line sets ‘pane250’ equal to a zindex value of ‘250’ 
+Sets ‘pane250’ equal to a zindex value of ‘250’ 
 
 > map.getPane('pane250').style.pointerEvents = 'none';
 
 
-‘zindex’ is the sequential layering indicator tool. The higher the zindex value, the closer the layer will be to the webpage viewer/user. In example image, the red polygon geoJSON should have the highest zindex. Therefore, it will be closer to the user and therefore they will be able to click it. The lower the zindex, the further away the layer is from the user. Therefore, we would want the large green rectangle to be behind the other two so it does not interfere with the click targeting.
+‘zindex’ is the sequential layering indicator tool. The higher the zindex value, the closer the layer will be to the webpage viewer/user. In example image, the red polygon geoJSON should have the highest zindex. Therefore, it will be closer to the user and they will be able to click it. The lower the zindex, the further away the layer is from the user. Ideally, the large green rectangle should be behind the other two so it does not interfere with the click targeting.
 
-### This chart will help visualize the layering scheme: 
+### Visualize the layering scheme: 
 
 zindex ___________________1:	Furthest from user
 
@@ -29,12 +29,16 @@ zindex ___________________50:	On top of 1, but under 100
 
 zindex ___________________100:	Closest to user
 
-### The current code from the CSS file of leaflet base tile map has panes set accordingly:
+### Leaflet.js currently has panes set accordingly:
+
+.leaflet-map-pane canvas { z-index: 100; }    
+
+.leaflet-tile-pane    { z-index: 200; }     
+
+.leaflet-map-pane svg    { z-index: 200; }	
 
 .leaflet-pane         { z-index: 400; }
 
-.leaflet-tile-pane    { z-index: 200; }
-
 .leaflet-overlay-pane { z-index: 400; }
 
 .leaflet-shadow-pane  { z-index: 500; }
@@ -45,18 +49,12 @@ zindex ___________________100:	Closest to user
 
 .leaflet-popup-pane   { z-index: 700; }
 
-.leaflet-map-pane canvas { z-index: 100; }
 
-.leaflet-map-pane svg    { z-index: 200; }	
 
-These are preset in the 'CSS link href' located toward the top of the html document and do not need to be entered. This is only to visualize why first pane is set to a zindex of 250. The 3 overlapping polygons should be above the tile pane (the map) which is set at 200. If I set the rectangle polygons under 200, the user wouldn’t be able to see them because the map would be covering it. I also wanted to keep the panes below 400 to that other feature of the maps like popup windows would still show above the overlapping polygons.
+The 3 overlapping polygons should be above the tile pane (the map tiles) which is set at 200. If the rectangle polygons under 200, the user won’t be able to see them because the map tiles would be covering it. I also wanted to keep the panes below 400 to that other feature of the maps like popup windows would still show above the overlapping polygons. Panes are relative, so as long as they are relative to a preferred layer ordering, the specific range of zindex number is not as important.
 
-If you have a different base file not from leaflet. Understand that the panes should be above the tile map. Panes are relative. So as long as they are relative to a preferred layer ordering, the specific range of zindex number is not as important.
 
-Web pages automatically load HTML script from top to bottom. In theory you could just load the large polygon first and the small polygon last. Therefore, small polygon would load onto the previously loaded larger polygons. This may work, but it is not reliable due to inconsistent loading and refreshing errors. 
-Similarly, using the BringToFront and BringToBack methods can work for a small number of overlapping layers. This method will incur inconsistent loading and refreshing errors if there are too many overlapping layers.
-
-## [Step 2] We must repeat step 1 for however many panes needed. In the example image there are 3 overlapping polygons. Therefore, 3 panes will be created for each. Enter the follow code after the 250 pane:
+## [Step 2] Create a pane for however many panes needed:
 
 Second Pane:
 
@@ -74,7 +72,7 @@ Third Pane:
 
 > map.getPane('pane252').style.pointerEvents = 'none';
 
-## [Step 3] Next, load the geoJSON polygons and then dictate what pane they belong to. This should be done in the 'script' somewhere under the previous code:
+## [Step 3] Load the geoJSON polygons and set the pane:
 
 
 > var LARGEGEOJ;
@@ -82,9 +80,7 @@ Third Pane:
 > LARGEGEOJ = L.geoJson(data, {onEachFeature: onEachFeaturestylelargegeoj, pane: 'pane250'}).addTo(map);
 >  });
 
-First a variable is created whichisnamed LARGEGEOJ. Then using AJAX the geoJSON is loaded. Next, set the variable equal to a ‘L.geoJson’ which styles the polygon using onEachFeature. The onEachFeature gives the style to the polygon, for example, the red color and opacity of the smallest geoJSON. This can be removed.
-
-Finally, ‘pane: ‘pane250’’ tells the geoJSON is told which pane to live on using the panes given name. The largest polygon should be furthest away and was attached to the ‘pane250’.
+Create a variable for the large polygon (LARGEGEOJ) and add the large geoJson to your map.  Set the map pane.  The largest polygon should be furthest away and in this case attached to the ‘pane250’.
 
 ## [Step 4] Add the remaining polygons and repeat step 3 with the appropriate pane:
 
@@ -102,10 +98,6 @@ Finally, ‘pane: ‘pane250’’ tells the geoJSON is told which pane to live
 ## Now all the polygons are loaded and set according to the appropriate zindex/pane that allows the user to click the smallest geoJSON regardless if it is being overlapped by a larger one.
 
 
-The Norman B. Leventhal Map Center used this method to create a finding aide index for its collection of Des Barres Atlantic Neptune historic nautical charts and views.
-
-Browse the collection here: http://maps.bpl.org/explore/publisher/des-barres-joseph-fw-6 
-