Set style for geometries in GeometryCollection type with Leaflet

I work on web based GIS system where customers have many layers (sometimes overlaps each other) they can add/edit/delete elements geometry or properties from some layer. In back-end the system is 100% restful api based and have heavy administration structure. Each layer have 4 tables (1 for properties, 1 for geometry, 1 for dynamic data and 1 relation table with other service attributes like custom type, date create, date edit, active, etc.) The layers is saved in different servers. DB is MySQL and PostgreSQL(PostGIS) and MySQL. When we start this project we agree to allow only one type geometry in layer like point, polygon etc. but now i must create a functionality where clients can work with many types in 1 layer but this is not a problem. The real problem is that the system must supports GeometryCollection type and must style each geometries in GeometryCollection.

When i use function like this:

layer.setStyle(some_style_object);

This work for Polygons and MultiPolygons, but then i try to use function to style the icon like this:

layer.setIcon(some_style_object);

This give me a error like this:

Uncaught TypeError: layer.setIcon is not a function at Object.onEachFeature

The GeometryCollection look like this:

{
"type":"Feature","properties":{
"id":"143","DistrictID":"12145","DistrictName":"ЗОНА Б-5","DistrictTypeID":"2","SubcontractorDescription":null,"DispEmpID":"23974","SubstDispEmpID":"21976","CompanyRepEmpID":"22487","TitulCourierEmpID":"20750","TitulCourierEmpName":null,"NearByOfficeID":null,"AreaOfficeID":"110","OfficeID":"142","OfficeName":"BOZHURISHTE","DispEmpName":null,"label":null,"notes":null,"style":"#FFFF00","worker_elements":"a:2:{i:36;a:3:{i:0;i:100036000004686;i:1;i:100036000004688;i:2;i:100036000004689;}i:43;a:3:{i:3;i:100043000000154;i:4;i:100043000000160;i:5;i:100043000000187;}}","attributes_id":"143","geometry_id":"143","type_id":"64","active":"1","createdID":"2","editedID":null,"DateFrom":"2020-09-18 18:08:17","DateTo":null,"BrickID":"100042000000143","dinamic_attributes":{"id":null,"PICKUP_WAYBILLS_COUNT":null,"PICKUP_VISITS_COUNT":null,"PICKUP_COURIERPAYMENT":null,"PICKUP_TOTALINCOME":null,"PICKUP_CALCULATIONWEIGHT":null,"DELIVERY_WAYBILLS_COUNT":null,"DELIVERY_VISITS_COUNT":null,"DELIVERY_COURIERPAYMENT":null,"DELIVERY_TOTALINCOME":null,"DELIVERY_CALCULATIONWEIGHT":null},"layer_id":"42","custom_label":null},
"geometry":{
"type":"GeometryCollection",
"geometries":[
{"type":"Point","coordinates":[23.30802,42.699269]},
{"type":"Point","coordinates":[23.308673,42.698213]},
{"type":"Polygon","coordinates":[[[23.306886,42.698974],[23.307783,42.698843],[23.307511,42.697892],[23.30942,42.697617],[23.309143,42.696712],[23.308979,42.696177],[23.30757,42.696396],[23.307074,42.696472],[23.306153,42.696618],[23.305797,42.69667],[23.305268,42.696749],[23.305194,42.69648],[23.305081,42.696072],[23.304812,42.695107],[23.304593,42.694318],[23.304384,42.693726],[23.304224,42.693922],[23.303618,42.694326],[23.303328,42.694507],[23.302789,42.69485],[23.302718,42.694937],[23.302629,42.695249],[23.302477,42.695856],[23.302316,42.696499],[23.302418,42.696873],[23.302644,42.697745],[23.302289,42.697802],[23.302103,42.697833],[23.302199,42.697907],[23.302425,42.698126],[23.302548,42.69828],[23.302655,42.698464],[23.302723,42.698636],[23.30285,42.699098],[23.302997,42.699581],[23.303157,42.699555],[23.304115,42.699405],[23.305478,42.699199],[23.305966,42.699125],[23.306886,42.698974]]]},
{"type":"Point","coordinates":[23.304481,42.700175]}
]
}
}

The solution where i convert GeometryCollection to points, polygons etc. not work because they have one properties. Is it have a simple and clean way to style GeometryCollection geometries without difficult work to divide the geometries for visualization then put them together.

1 answer

  • answered 2020-09-24 17:14 Falke Design

    use the pointToLayer option to style markers:

    geoGroup = L.geoJson(json,{
        style: {
            "color": "#ff7800",
            "weight": 5,
            "opacity": 0.65
        },
        pointToLayer: function(geoJsonPoint, latlng) {
            return L.marker(latlng, {icon: L.icon({iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-orange.png'})});
        }
    }).addTo(map)