Pop up not displaying

Question

I am overlaying borehole geoJson file on google maps using Leaflet. I can display the markers but the popup does not display when I click on the feature. Here is my code:

/*  SELECT PROPERTY TO DISPLAY*/
function onEachBholeFeature(feature, layer) {
      if (feature.properties && feature.properties.BH_NO) {
        layer.bindPopup(feature.properties.BH_NO);
    }
}

/********   STYLE THE CIRCLE MARKER **************/

var geojsonMarkerOptions = {
    radius: 4,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};

/*  ******** CIRCLE MARKER DISPLAYS AS  BHOLE FEATURE ************/
var zone1BholesLayer=L.geoJson(bhzone1, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions);
    }
})

/************ ON FEATURE CLICK DISPLAY PROPERTY **************/ 
L.geoJson(bhzone1, {
    onEachFeature: onEachBholeFeature
});

Here is my geojson file

var bhzone1={
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "OBJECTID": 12, "BH_NO": "1005", "LATITUDE": -21.0861, "LONGITUDE": 26.975, "DEPTH": 61, "SWL": 0, "Elevation": 1128, "PROJECTNUM": null }, "geometry": { "type": "Point", "coordinates": [ 26.975, -21.086111 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 64, "BH_NO": "10233", "LATITUDE": -20.0161, "LONGITUDE": 27.0494, "DEPTH": 78, "SWL": 0, "Elevation": 1017, "PROJECTNUM": null }, "geometry": { "type": "Point", "coordinates": [ 27.049444, -20.016111 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 83, "BH_NO": "10311", "LATITUDE": -20.0144, "LONGITUDE": 27.0358, "DEPTH": 18, "SWL": 0, "Elevation": 1017, "PROJECTNUM": null }, "geometry": { "type": "Point", "coordinates": [ 27.035833, -20.014444 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 84, "BH_NO": "10312", "LATITUDE": -20.0194, "LONGITUDE": 27.0469, "DEPTH": 12, "SWL": 0, "Elevation": 1017, "PROJECTNUM": null }, "geometry": { "type": "Point", "coordinates": [ 27.046944, -20.019444 ] } 

Answer 1

When you call your 2nd L.geoJson(bhzone1), it just creates another Layer Group (different from the 1st call). Since you do not add it to map, nothing happens.

But even if you add it to the map, you would just end up with duplicated markers (first group with circle markers, 2nd group with default markers and popup).

You can simply accumulate your options in the same L.geoJson() factory call, separated by a comma (,):

var zone1BholesLayer = L.geoJson(bhzone1, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions);
    },
    onEachFeature: onEachBholeFeature
});