0

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.

1
  • Your code does not use Leaflet WMS plugin, it just loads GeoJSON layer through WFS service.
    – TomazicM
    Dec 22, 2021 at 15:21

1 Answer 1

1

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);
    }
  }
});
1
  • thank you! I just had to add a comma to return(circleMarker); }, and it worked fine. my line with "peru" was to remove too.
    – Vincent Dc
    Jan 3 at 10:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.