5

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]
Improve this question

1 Answer 1

Reset to default
4

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);
Improve this answer
10
  • do you know if it is possible to use the values from the geojson file for style (because the style is already there in the geojson file) like marker-color etc etc
    – bcman
    Aug 13, 2015 at 18:41
  • Yes. Did you try what I suggested? For paths (lines, polygons, etc.), many of the styles will come across directly - just format the name correctly (opacity: feature.stroke-opacity) Check leaflet documentation for path. For markers, no, because you will have to change the icon, which is a png, not an svg path. Unless there is a more "MapBox" way of doing this? Not sure.
    – toms
    Aug 13, 2015 at 18:46
  • Yes and I just put it in Jsfiddle jsfiddle.net/bcman/vf0vjnvx/3 But I do not have it working yet thanks for you help by the way!
    – bcman
    Aug 13, 2015 at 19:23
  • the jsfiddle is useful. Here is an updated version, working for paths: jsfiddle.net/vf0vjnvx/4 I also updated the code in the answer above.
    – toms
    Aug 13, 2015 at 19:50
  • that is perfect! thanks do you have any idea why with your code the popup do not work anymore? the moment I remove you code it works again
    – bcman
    Aug 13, 2015 at 20:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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