CODEWITHSUNDEEP
javascriptjsonleafletgeojson
Janice Sutherland
Janice Sutherland

Reputation: 23

Why are markers not showing - Leaflet and JSON response format?

I'm using leaflet and a json response from API call.Data shows up in the variables for marker, properties and geometry in the debugger, but it won't display a marker. Is my JSON format wrong? I am new at this.. data response looks like this: Array of 6. Longitude is a positive string in the response.

0: {sampleID: "4531", visitNum: "1083", gearType: "EZ cast net 4 ft radius, 0.75 lb", habitatID: "511", seineCode: "", …}

I have tried pointToLayer, OnEachFeature. I would like to show popups for the markers if I get them to show.

I tried to stringify with JSON.stringify(data); I'm not sure what format I should have.

    var jsonstring;

    $.getJSON("http://localhost:29694/api/Sample?VisitNum=1083", function (data) {
        jsonstring = JSON.stringify(data);
        jsondata = JSON.parse(jsonstring);
        var outGeoJson = {}
        for (i = 0 ; i < data.length; i++) {
            var longdata = data[i]["longStart"] * -1;
            var latdata = data[i]["latStart"] * 1;
            var latlng = [];
            latlng = [longdata, latdata];
            outGeoJson['properties'] = data[i]
            outGeoJson['type'] = "Feature"
            outGeoJson['geometry'] = {
                "type": "Point", "coordinates":
                    [longdata, latdata]
            }
            console.log(outGeoJson);

            var properties = [];
            properties = outGeoJson.properties;

            L.geoJSON(outGeoJson, {                                        
                pointToLayer: function (feature, latlng) {
                   var pmarker =   L.circleMarker(latlng, {
                        radius: 5,
                        fillColor: "#ff7800",
                        color: "#000",
                        weight: 1,
                        opacity: 1,
                        fillOpacity: 0.8
                    });
                 return pmarker;
            }
            }).addTo(map);

        }

    function lngLatToLatLng(lngLat) {
            return [latlng[1], latlng[0]];
        }
    });

The console.log output is:

{properties: {…}, type: "Feature", geometry: {…}}
geometry:
coordinates: (2) [-132.12211, 32.12122]
type: "Point"
__proto__: Object
properties:
depthSample: ""
depthWater: ""
duration: ""
endTime: "3/18/2019 12:00:00 AM"
gearType: "backpack efishing"
habitatID: "512"
latEnd: ""
latStart: "32.12122"
lengthTrawl: ""
longEnd: ""
longStart: "132.12211"
netter: "6"
notes: ""
percentOpen: ""
sampleCode: "EFISHBP1-HONK-18Mar2019"
sampleID: "4544"
seineCode: ""
startTime: "3/18/2019 12:00:00 AM"
towDirection: ""
visitNum: "1083"
volts: ""
width: ""
__proto__: Object
type: "Feature"
__proto__: Object

Upvotes: 2

Views: 302

Answers (1)

ghybs
ghybs

Reputation: 53185

Welcome to SO!

You just forgot to return your newly created pmarker Circle Marker from your pointToLayer function.

BTW, there is no need to build a GeoJSON object at runtime just for the sake of displaying in Leaflet; you can directly build Leaflet layers. See Leaflet with markers and line

Upvotes: 1

Related Questions