Code syntax highlighting

Source Link

edited Aug 26, 2016 at 11:26

7.3k
21
25

/*  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
});

/*  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
});

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

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

/*  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
});

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

/*  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
});

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

added 150 characters in body; edited tags

Source Link

edited Aug 26, 2016 at 10:21

PolyGeo ♦

65.4k
29
114
345

/* 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 });

/*  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
});

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

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

/* 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 });

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

/*  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
});

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

Source Link

asked Aug 26, 2016 at 10:14

charx

3
2

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

leaflet

Stack Exchange Network

Return to Question

Pop up not displaying