Skip to main content
3 of 3
Code syntax highlighting
ghybs
  • 7.3k
  • 21
  • 25

Pop up not displaying

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 ] }