Leaflet – How to Change Point Marker in GeoJSON Layer

leafletwfs

I successfully loaded a WFS in Leaflet, with https://cdn.rawgit.com/heigeo/leaflet.wms/gh-pages/dist/leaflet.wms.js if I recall;

var start_at_zoom = 10;

function onEachFeature(feature, layer) {
    // pour afficher seulement une ou deux ou plus, données dans l'infobulle
    if (feature.properties && feature.properties.appelation) {
        layer.bindPopup(feature.properties.appelation + '</br>' + feature.properties.legende) ;
    }
}

function loadGeoJson(data) {
   // console.log(data);
    $("#total").html(data.features.length);
    featureLayer.clearLayers();
    featureLayer.addData(data);
}

map.on('moveend', load_wfs);

function load_wfs() {
    if (map.getZoom() > start_at_zoom) {
        var geoJsonUrl = 'http://mappingforyou.eu/geoserver/wfs?';
        var defaultParameters = {
            service: 'WFS',
            version: '1.0.0',
            request: 'getFeature',
            typeName: 'worldmap:france.patrim.mh.toutpoint',
            maxFeatures: 300,
            outputFormat: 'text/javascript',
            format_options: 'callback: getJson',
            srsName: 'EPSG:4326'
        };

        var customParams = {
            bbox: map.getBounds().toBBoxString()
        };
        var parameters = L.Util.extend(defaultParameters, customParams);
        console.log(geoJsonUrl + L.Util.getParamString(parameters));

        $.ajax({
            jsonp: false,
            url: geoJsonUrl + L.Util.getParamString(parameters),
            dataType: 'jsonp',
            jsonpCallback: 'getJson',
            success: loadGeoJson
        });
    } else {
        featureLayer.clearLayers();
    }
}

function styled(feature) {
    return {
        weight: 9,
        opacity: 1,
        color: color,
        fillColor: fillColor,
        fillOpacity: 0.5,
    };
}  
  // specify popup options 
    var customOptions =
        {
        maxHeight: 200, maxWidth: 200
        }

var featureLayer = new L.GeoJSON(
null, {
    style: styled(color= 'Peru', fillColor = 'Peru'),
    onEachFeature: function popUpall(feature, layer) {
        //console.info(feature);
        var out = [];
        if (feature.properties) {
            for (var key in feature.properties) {
                out.push(key + ": " + feature.properties[key]);
            }
            layer.bindPopup(out.join("<br />"), customOptions);
        }
    }
});

But I need to use this custom marker for point markers, instead of the default one:

var markerOptions = {
    radius: 3,
    fillColor: '#0099FF',
    color: "#fff",
    weight: 3,
    opacity: 0.5,
    fillOpacity: 0.5
};

How could how to do that ? I can change the colors for areas, but not point features.

Best Answer

To modify default marker for GeoJSON layer points you have to use pointToLayer option when creating layer (reading docs and tutorials can actually help, see https://leafletjs.com/reference.html#geojson-pointtolayer and https://leafletjs.com/examples/geojson/).

In your case code for creating GeoJSON layer could then look something like this:

var featureLayer = new L.GeoJSON(null, {
  style: styled(color= 'Peru', fillColor = 'Peru'),
  pointToLayer: function (feature, latlng) {
    var circleMarker = L.circleMarker(latlng, {
      radius: 3,
      fillColor: '#0099FF',
      color: "#fff",
      weight: 3,
      opacity: 0.5,
      fillOpacity: 0.5
    });
    return(circleMarker);
  }
  onEachFeature:  function (feature, layer) {
    var out = [];
    if (feature.properties) {
      for (var key in feature.properties) {
        out.push(key + ": " + feature.properties[key]);
      }
      layer.bindPopup(out.join("<br />"), customOptions);
    }
  }
});
Related Question