Leaflet PointToLayer Style on AJAX Loaded GeoJson Data

Question

I'm having a bit of difficulty fixing the default point style on my Leaflet map, currently the points appear in the correct positions after being loaded via ajax.

But the current code does not alter the style and I am left with the default light-blue circle styling of the points:

function addressStyle(feature) {
        return {
            color: '#000',
            fillColor: '#199900',
            fillOpacity: 0.5,
            radius: 100,
        };
    }


    var address_points = new L.geoJson('', {
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, addressStyle);
        },
        onEachFeature: function (feature, layer) {
            layer.bindPopup('<h1>'+feature.properties.address+'</h1>');
        },
    });
    address_points.addTo(map);

    $.ajax({
        dataType: "json",
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        url:  "{{url('/addresses/geojson')}}",
        success: function(data) {
            $(data.features).each(function(key, data) {
                address_points.addData(data);
            });
        },
        error: function(data){

        }
    });

Is there a better way to handle this? I am just getting into AJAX loading of related GeoJSON data but am stuck on how to proceed with styling of this features when I am having no difficulty with my other layers that aren't points.

question from:https://stackoverflow.com/questions/65910189/leaflet-pointtolayer-style-on-ajax-loaded-geojson-data

Answer 1

If you want to apply the style to all layers (except markers) then change your code to:

var address_points = new L.geoJson('', {
        style: addressStyle,
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng);
        },
        onEachFeature: function (feature, layer) {
            layer.bindPopup('<h1>'+feature.properties.address+'</h1>');
        },
    });

When you only want to apply the style to the CircleMarker you need to pass the style as object and not as function.

You can simply call the addressStyle function:

var address_points = new L.geoJson('', {
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, addressStyle());
        },
        onEachFeature: function (feature, layer) {
            layer.bindPopup('<h1>'+feature.properties.address+'</h1>');
        },
    });

or define addessStyle as object:

var addressStyle = {
            color: '#000',
            fillColor: '#199900',
            fillOpacity: 0.5,
            radius: 100,
        };

var address_points = new L.geoJson('', {
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, addressStyle);
        },
        onEachFeature: function (feature, layer) {
            layer.bindPopup('<h1>'+feature.properties.address+'</h1>');
        },
    });