geojson properties not executing i.e. onEachFeature, pointToLayer

[J@y]

I can't seem to get the GeoJson properties activated with the below code. 

Basically trying to create individual layers and add points with customised properties i.e. markers, popups etc.  The following only lets me create the individual layers and add the default markers on the geoJson points. 

Where am I going wrong?


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

// create a new layer for dynamically adding new geoJson 'place'
var primaryLayer = new L.geoJson();

// add the new geoJson 'place' and properties
// ** the onEachFeature and pointToLayer are not actioned nor are there errors reported **
primaryLayer.addData(place, {

    pointToLayer: function (feature, latlng) {
        L.circleMarker(latlng, geojsonMarkerOptions);
    },

    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.PlaceName);
    }

});

[Michael Savarese]

You are adding the geojson to the map somewhere aren't you?
.addTo(map)

[J@y]

Hi Michael, thanks so much for getting back to me - I'm ready to pull my hair out lol.  Here's a working example as I'm not using addTo(map). 

I wish to create a layer and dynamically add geojson places onto it dynamically. I'm trying to work towards keep different types of geoson based on a particular property to be on a particular layer i.e. primaryLayer, secondaryLayer, so eventually I can just remove or add layers in order to hide/show them with some button presses.

At the moment, as proof of concept, I can't seem to get the logic to customise the geojson markers and popups using the built in leaflet features of pointToLayer and onEachFeature....so frustrating as it works without the leaflet features.....please helppp :(

// *** working logic
// adds new geojson places onto a map one by one using method: AddMapLocationMarker(place)

// create independent layers

var primaryLayer = new L.geoJson();

 var secondaryLayer = new L.geoJson();
 map.addLayer(primaryLayer);
 map.addLayer(secondaryLayer);

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

function AddMapLocationMarker(place) {
    primaryLayer.addData(place);
}

***************

Want to replace the AddMapLocation(place) method with the below modified method in red but it doesnt activate the pointToLayer or onEachFeature. 
The map tends to use the default blue markers. 
(Side note: noticed if I do map.fitBounds(primaryLayer.getBounds()) it only shows expands to two points not the whole collection of points).

function AddMapLocationMarker(place) {

    primaryLayer.addData(place.addData(place, {

        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, geojsonMarkerOptions);
        },

[Wil Black]

Hi J@y,

Did you ever get this resolved. I have a similar problem. I can add a geojson layer fine and bindpopups but when I try to use the pointToLayer method, I get nothing. The layer is created fine becuse my zoomToFit function works, but the markers will not show up. So frustrating. 

Working Example:

window.newLayer = new L.geoJson(features,{

            onEachFeature : function (feature, layer) {

                var text = feature.properties.popup;

                layer.bindPopup(text);

            }

}).addTo(self.map);

Non-working Example:

window.newLayer = new L.geoJson(features,{

            onEachFeature : function (feature, layer) {

                var text = feature.properties.popup;

                layer.bindPopup(text);

            },            

            pointToLayer: function (feature, latlng) {

                var marker = new L.circleMarker(latlng, 

                    {

                        radius: 10,

                        fillColor: "#ff7800",

                        color: "#ffee22",

                        weight: 1,

                        opacity: 1,

                        fillOpacity: 0.8

                    }

                );

                console.log(marker);

                return marker;

            }

}).addTo(self.map);

[Jamal Bari]

HI mate, sorry for late reply basically I created a global variable to hold the layer.  I could then add to the layer and remove it.  My main issue was being able to address the layer from other functions after creation but this resolved it.  Hope that helps.

--
 
---

You received this message because you are subscribed to a topic in the Google Groups "Leaflet" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/leaflet-js/LrfHZeDT3eE/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to leaflet-js+...@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.