Leaflet Styling – How to Resolve Style Problems with Leaflet and GeoJSON

geojsonleafletstyle

I got my first leaflet + geojson project partly working! (even the popup with content from the geojson file!)

but I still have a problem with style

the geojson (export from mapbox) file has point, polygon etc in it including fields like fill, fill=opacity etc

I would like to use that styling in my project other that the standard style (blue)

Can someone give me some direction how to use the style fields within the geojson file in my leaflet map

A part of the geojson file:

var items = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"id":"marker-icgis1jl1","title":"De Bostoren","description":"40 meter hoog, lees meer","marker-size":"medium","marker-color":"#1087bf","marker-symbol":"monument"},"geometry":{"coordinates":[5.628132,52.249322],"type":"Point"},"id":"2011ff2da55dd4d1f6d8b252674517a7"},{"type":"Feature","properties":{"title":"Josinapark","description":"1929","id":"marker-icgj3dk57","stroke":"#a3e46b","stroke-width":4,"stroke-opacity":1,"fill":"#a3e46b","fill-opacity":0.6000000238418579},"geometry":{"coordinates":[[[5.625464,52.251564],[5.624924,52.251493],[5.625308,52.251068],[5.625099,52.25093],[5.625008,52.250745],[5.625195,52.250559],[5.625455,52.25051],[5.626019,52.250646],[5.625826,52.251158],[5.625885,52.251405],[5.625464,52.251564]]],"type":"Polygon"},"id":"2e8117fd2199faacbc43bf022884507b"},{"type":"Feature","properties":{"id":"marker-id21rbbg3","title":"","description":"","marker-size":"medium","marker-color":"#1087bf","marker-symbol":"5"},"geometry":{"coordinates":[5.627043,52.247792],"type":"Point"},"id":"3cb601aa00b4514f831bddc5c66ef045"},{"type":"Feature","properties":{"title":" Bomenwandeling ","description":"","stroke":"#008000","stroke-width":5,"stroke-opacity":1},"geometry":{"coordinates":[[5.626421,52.252968],[5.626582,52.253657],[5.62677,52.253717],[5.626882,52.253145],[5.627301,52.253007],[5.627751,52.252958],[5.627682,52.253188],[5.62781,52.253398],[5.627784,52.253526],[5.627607,52.253634],[5.627269,52.253713],[5.62707,52.253868],[5.626652,52.253956],[5.626051,52.254078],[5.625788,52.254122],[5.625689,52.254086],[5.625683,52.253864],[5.625622,52.253744],[5.625726,52.253296],[5.626453,52.253157],[5.62641,52.252969],[5.625238,52.253237],[5.624793,52.252766],[5.623953,52.253004],[5.623291,52.252625],[5.624831,52.252027],[5.625067,52.252053],[5.625445,52.251933],[5.62516,52.251694],[5.625203,52.251516],[5.624914,52.251483],[5.625257,52.25103],[5.625128,52.250951],[5.624989,52.250728],[5.62519,52.250534],[5.625225,52.250286],[5.625311,52.250101],[5.626711,52.249477],[5.626861,52.249326],[5.626936,52.249073],[5.627526,52.249181],[5.62803,52.249368],[5.628148,52.249503],[5.62817,52.249861],[5.628175,52.250091],[5.628567,52.250961],[5.628787,52.250764],[5.630766,52.250242],[5.630841,52.250144],[5.631963,52.250383],[5.632279,52.25124],[5.63222,52.251441],[5.632091,52.251529],[5.631689,52.251618],[5.630058,52.251966],[5.628932,52.252042],[5.628524,52.252029],[5.628261,52.251927],[5.6281,52.251802],[5.628256,52.251378],[5.627467,52.251644],[5.627864,52.252081],[5.628004,52.25237],[5.62779,52.252516],[5.627586,52.252628],[5.627655,52.252699],[5.62641,52.252978]],"type":"LineString"},"id":"3e98e30887b4b75f27f987d79303e0be"},{"type":"Feature","properties":{"id":"marker-icgjnwtqb","title":"Museum ( De Tien Malen )","description":"Museum De Tien Malen geeft bezoekers een kijkje in de geschiedenis van putten en omstreken, vanaf de prehistorie tot het heden.","marker-size":"medium","marker-color":"#1087bf","marker-symbol":"m"},"geometry":{"coordinates":[5.626333,52.251787],"type":"Point"},"id":"408bc766465244a510209d3af55f5712"},{"type":"Feature","properties":{"id":"marker-icgivrzl5","title":"De Werkstee","description":"De Werkstee is een een Veluwse schuur met een langwerpige ruimte met open kap en oude balken en een open haard. lees meer ","marker-size":"medium","marker-color":"#1087bf","marker-symbol":"w"},"geometry":{"coordinates":[5.627735,52.251369],"type":"Point"},"id":"4ddd0901102c2caba84235d739bb654c"},{"type":"Feature","properties":{"id":"marker-id22srxq0","title":"Driecontinentenbos","description":"Naast de tuinen bestaat het landgoed uit 150 hectare bos. In het Driecontinentenbos groeien coniferen uit Azië, Noord Amerika en Europa. lees meer","marker-size":"medium","marker-color":"#1087bf","marker-symbol":"b"},"geometry":{"coordinates":[5.633797,52.246288],"type":"Point"},"id":"54f2d0363c4fd899435bcaea03bd1322"},{"type":"Feature","properties":{"title":"Arboretum","description":"In deze wat ruimer opgezette bomentuin loopt u over zachte graspaden tussen groene ‘continenten' door. lees meer","id":"marker-icgj7gin8","stroke":"#a3e46b","stroke-width":4,"stroke-opacity":1,"fill":"#a3e46b","fill-opacity":0.6000000238418579},"geometry":{"coordinates":[[[5.63008,52.252002],[5.631984,52.251595],[5.632359,52.251464],[5.632327,52.250899],[5.632016,52.250318],[5.631217,52.250098],[5.630954,52.250052],[5.630922,52.25006],[5.630718,52.250114],[5.630085,52.250304],[5.629591,52.250452],[5.629012,52.250643],[5.628728,52.250751],[5.628358,52.25103],[5.628143,52.251391],[5.628046,52.251828],[5.628492,52.252114],[5.63008,52.252002]]],"type":"Polygon"},"id":"6c5a2732dbb38f014f9e9ce853eac47b"},{"type":"Feature","properties":{"id":"marker-id21yy0p7","title":"Josina park","description":"Aan de overkant van de Gardenseweg ligt, eveneens op het grondgebied van landgoed Schovenhorst, ligt het Josinapark. Het park werd in 1929 beplant. lees meer","marker-size":"medium","marker-color":"#1087bf","marker-symbol":"3"},"geometry":{"coordinates":[5.625579,52.250997],"type":"Point"},"id":"7b62c384a7ca41e99121ba6f06393f3f"},{"type":"Feature","properties":{"id":"marker-id21ym8j6","title":"Kleine Pinetum","description":"Hier begon mr. Schober in 1848 zijn proeftuin en boomkwekerij. Een aantal bomen dat toen is aangeplant, is in die 160 jaar 40 meter hoog gegroeid. lees meer","marker-size":"medium","marker-color":"#1087bf","marker-symbol":"1"},"geometry":{"coordinates":[5.627639,52.252127],"type":"Point"},"id":"878b894c9c59cc670e329f1315ef17aa"},{"type":"Feature","properties":{"id":"marker-id21jly20","title":"Het Speelbos","description":"Hutten bouwen, ravotten en klauteren: het kan allemaal in het Speelbos. lees meer","marker-size":"medium","marker-color":"#1087bf","marker-symbol":"playground"},"geometry":{"coordinates":[5.634098,52.250452],"type":"Point"},"id":"8937452b8f8f184031878dd2687e771f"},{"type":"Feature","properties":{"title":"","description":"","stroke":"#1087bf","stroke-width":4,"stroke-opacity":1,"fill":"#1087bf","fill-opacity":0.20000000298023224},"geometry":{"coordinates":[[[5.633025,52.248942],[5.634613,52.249717],[5.632166,52.250347],[5.631415,52.249533],[5.633025,52.248942]]],"type":"Polygon"},"id":"8a18d375fe6eb11f42a0bc17e5127196"},{"type":"Feature","properties":{"title":"Grote Pinetum","description":"Het Grote Pinetum werd ingericht omdat er geen plek meer was in het Kleine Pinetum. In 2004 is de proeftuin omgetoverd in ‘De Verborgen Tuin'. lees meer ","id":"marker-icgipkwu0","stroke":"#a3e46b","stroke-width":4,"stroke-opacity":1,"fill":"#a3e46b","fill-opacity":0.4000000059604645},"geometry":{"coordinates":[[[5.625316,52.253812],[5.625091,52.254557],[5.628046,52.253703],[5.627982,52.252666],[5.625214,52.253257],[5.625316,52.253812]]],"type":"Polygon"},"id":"8b45212e414a007c3bef3e004b59cfb3"},{"type":"Feature","properties":{"title":"","description":"","stroke":"#a3e46b","stroke-width":4,"stroke-opacity":1,"fill":"#3ca0d3","fill-opacity":0.20000000298023224},"geometry":{"coordinates":[[[5.634806,52.249756],[5.636951,52.250833],[5.632896,52.251595],[5.632209,52.250373],[5.634806,52.249756]]],"type":"Polygon"},"id":"8bd921c09ee661a40b0108a8e14f592a"},{"type":"Feature","properties":{"id":"marker-id21xscy5","title":"Arboretum","description":"In deze wat ruimer opgezette bomentuin loopt u over zachte graspaden tussen groene ‘continenten' door. lees meer","marker-size":"medium","marker-color":"#1087bf","marker-symbol":"4"},"geometry":{"coordinates":[5.630214,52.251188],"type":"Point"},"id":"92a06a1a933498a6d0041d7f8f48ef68"},{"type":"Feature","properties":{"id":"marker-icgiv56c4","title":"Het Koetshuis","description":"Het Koetshuis is ook een officiele trouwlocatie van de gemeente Putten. lees meer","marker-size":"medium","marker-color":"#1087bf","marker-symbol":"k"},"geometry":{"coordinates":[5.626459,52.252278],"type":"Point"},"id":"a20a8298e08b8523be7610313d1483ca"},{"type":"Feature","properties":{"id":"marker-id20tceq0","title":"Gratis Parkeren","description":"Parkeren op Landgoed Schovenhorst lees meer","marker-size":"medium","marker-color":"#1087bf","marker-symbol":"car"},"geometry":{"coordinates":[5.632842,52.249572],"type":"Point"},"id":"a5e67eb715cf7d4065322469cf67f3fe"},{"type":"Feature","properties":{"title":"Cultuurhistorische wandeling","description":"","id":"marker-ici2qx8t0","stroke":"#f86767","stroke-width":5,"stroke-opacity":1},"geometry":{"coordinates":[[5.62765,52.252705],[5.627526,52.252575],[5.626909,52.251976],[5.626341,52.251375]

Best Answer

I'm not sure exactly how your geojson is formed, but the style argument in L.geoJson allows you to set styles for each feature.

From this example:

L.geoJson(states, {
    style: function(feature) {
        switch (feature.properties.party) {
            case 'Republican': return {color: "#ff0000"};
            case 'Democrat':   return {color: "#0000ff"};
        }
    }
}).addTo(map);

In your case something like: 

L.geoJson(data, {
    style: function(feature) {
        return {
            fillColor: feature.properties['fill'],
            fillOpacity: feature.properties['fill-opacity'],
            color: feature.properties['stroke'],
            width: feature.properties['stroke-width'],
            opacity: feature.properties['opacity']
        };
    }
}).addTo(map);
Related Question