[GIS] GeoJSON properties not displaying in popup-leaflet GeoDjango

Question

I want to show the markers in different colours based on column(rastervalues) values in leaflet. My geojson data is

{'geojson': "[{'type': 'FeatureCollection', 'features': [{'type': 'Feature', 'ge
ometry': {'type': 'Point', 'coordinates': [74.886779, 33.571307]}, 'properties':
 {'rastvalues': 9, 'id': 1, 'species': 'Poa pratensis L.'}}, {'type': 'Feature',
 'geometry': {'type': 'Point', 'coordinates': [75.015556, 33.588333]}, 'properti
es': {'rastvalues': 9, 'id': 2, 'species': 'Poa pratensis L.'}}, {'type': 'Featu
re', 'geometry': {'type': 'Point', 'coordinates': [75.06231, 33.592838]}, 'prope
rties': {'rastvalues': 9, 'id': 3, 'species': 'Phleum alpinium L.'}}, {'type': '
Feature', 'geometry': {'type': 'Point', 'coordinates': [75.196944, 33.550556]},
'properties': {'rastvalues': 12, 'id': 4, 'species': 'Pinus roxburghii Sargent'}
}, {'type': 'Feature', 'geometry': {'type': 'Point', 'coordinates': [75.224722,
33.540278]}, 'properties': {'rastvalues': 12, 'id': 5, 'species': 'Pinus roxburg
hii Sargent'}}, {'type': 'Feature', 'geometry': {'type': 'Point', 'coordinates':
 [75.103889, 34.485833]}, 'properties': {'rastvalues': 3, 'id': 6, 'species': 'P
inus roxburghii Sargent'}}, {'type': 'Feature', 'geometry': {'type': 'Point', 'c
oordinates': [75.143611, 34.536667]}, 'properties': {'rastvalues': 3, 'id': 7, '
species': 'Phleum alpinium L.'}}, {'type': 'Feature', 'geometry': {'type': 'Poin
t', 'coordinates': [74.329145, 33.818276]}, 'properties': {'rastvalues': 9, 'id'
: 8, 'species': 'Pinus roxburghii Sargent'}}]}]"}

My javacript code is

function main_map_init (map, options) {
             var promise  = $.getJSON('{% url "datapot" %}');
            // Download GeoJSON via Ajax
            promise.then(function(data) {
            var allbusinesses = L.geoJson(data);
            var cafes = L.geoJson(data, {
            filter: function(feature, layer) {
                return feature.properties.rastvalues == "3";
                },
                pointToLayer: function(feature, latlng) {
                return L.marker(latlng, {

                }).on('mouseover', function() {
                    this.bindPopup(feature.properties.species).openPopup();
                });
            }
        });

             var others = L.geoJson(data, {
            filter: function(feature, layer) {
                return feature.properties.rastvalues != "3";
            },
            pointToLayer: function(feature, latlng) {
                return L.marker(latlng, {
                }).on('mouseover', function() {
                    this.bindPopup(feature.properties.species).openPopup();
                });
            }
        });
         map.fitBounds(allbusinesses.getBounds(), {
            padding: [50, 50]
        });
        cafes.addTo(map)
        others.addTo(map)

        });
        }
    </script>

In chrome debugger, for the line filter: function(feature, layer) {
I'm getting the following value

feature = Object {type: "Feature", id: 1,properties: Object, geometry: Object}, layer = undefined

Properties namely species and rastvalues are not appearing.

How to solve this?

solution is

def extract_raster_points(request):
    conn = psycopg2.connect(dbname="geodjango",host='localhost',user='postgres',          password='postgres', port=5433)
    cur=conn.cursor()
    dict_cur = conn.cursor(cursor_factory=psycopg2.extras.DictCursor)
    res=dict_cur.execute("""SELECT row_to_json(fc) FROM ( SELECT      'FeatureCollection' As type, array_to_json(array_agg(f)) As features FROM (SELECT 'Feature' As type, ST_AsGeoJSON(lg.geom)::json As geometry ,row_to_json((SELECT l FROM (SELECT id, species,rastvalues) As l )) As properties FROM pft_account As lg   ) As f )  As fc;""")

    points=dict_cur.fetchone()
    #datapot = json.loads(str(points))
    datapot = json.loads(json.dumps(points))
    datapotg=datapot[0]
    print(datapotg)
    return JsonResponse(datapotg,safe=False)

Answer 1

Your GeoJSON is not valid, remove the {'geojson': "[]"} wrapper.

Not sure if that is the cause of your issue, but try with this GeoJSON instead, and see if that solves it:

{"type": "FeatureCollection", "features": [{"type": "Feature", "geometry": {"type": "Point", "coordinates": [74.886779, 33.571307]}, "properties": {"rastvalues": 9, "id": 1, "species": "Poa pratensis L."}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [75.015556, 33.588333]}, "properties": {"rastvalues": 9, "id": 2, "species": "Poa pratensis L."}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [75.06231, 33.592838]}, "properties": {"rastvalues": 9, "id": 3, "species": "Phleum alpinium L."}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [75.196944, 33.550556]},"properties": {"rastvalues": 12, "id": 4, "species": "Pinus roxburghii Sargent"}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [75.224722,33.540278]}, "properties": {"rastvalues": 12, "id": 5, "species": "Pinus roxburghii Sargent"}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [75.103889, 34.485833]}, "properties": {"rastvalues": 3, "id": 6, "species": "Pinus roxburghii Sargent"}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [75.143611, 34.536667]}, "properties": {"rastvalues": 3, "id": 7, "species": "Phleum alpinium L."}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [74.329145, 33.818276]}, "properties": {"rastvalues": 9, "id": 8, "species": "Pinus roxburghii Sargent"}}]}

GeoJSON Lint can be a useful service to validate GeoJson. After removing the {'geojson': "[]"} wrapper and changing single to double quotes, it shows this map: