11

I am using geojson-vt for genreating polygon on leaflet map.polygon which is genreated is having some color...here i want to give different color to polygon border ...below is my geojson

{
  "type": "FeatureCollection",
  "features": [
    {
      "geometry": {
        "coordinates": [
          [
            [
              74.276821428571402,
              20.089249999999982
            ],
            [
              74.267821428571402,
              20.089249999999982
            ],
            [
              74.267821428571402,
              20.098249999999982
            ],
            [
              74.276821428571402,
              20.098249999999982
            ],
            [
              74.276821428571402,
              20.089249999999982
            ]
          ]
        ],
        "type": "Polygon"
      },
      "type": "Feature",
      "properties": {
        "description": "This is crop value",
        "color":"#ffb6c1",
        "pixel": {
          "latitude": 20.093749999999982,
          "vci": 2,
          "longitude": 74.272321428571402
        }
      }
    }

what changes should i do to genreate polygon with different border color.

am using leaflet to display polygon and geojson vt for drawing the polygon

       tileIndex = geojsonvt(data, tileOptions);




    tileLayer = L.canvasTiles()
                  .params({ debug: false, padding: 5 })
                  .drawing(drawingOnCanvas)


    var pad = 0;


tileLayer.addTo(leafletMap);
4
  • You have tagged your question both leaflet and mapbox-gl-js. What libary are you actually trying to display the polygon in?
    – atlefren
    Feb 13, 2017 at 13:46
  • i m using leaflet Feb 13, 2017 at 14:30
  • i have updated my code Feb 13, 2017 at 14:31
  • Do you expect the polygon to be styled using the properties of your GeoJSON feature? If not, the answer @Bill-chappel provided should work
    – atlefren
    Feb 13, 2017 at 14:32

2 Answers 2

33

When you style a polygon you can have the border one color and the fill another.

function polystyle(feature) {
    return {
        fillColor: 'blue',
        weight: 2,
        opacity: 1,
        color: 'white',  //Outline color
        fillOpacity: 0.7
    };
}

L.geoJson(polyData, {style: polystyle}).addTo(map);
5
2

For different style in each feature in Geojson file, I copied from ThomazicM's answer:

function setStyle(feature) {
  return {
    fillColor: feature.properties.fillColor,
    color: feature.properties.strokeColor,
    fillOpacity: feature.properties.fillOpacity,
    opacity: feature.properties.strokeOpacity
  };
}

and then call this function like

L.geoJson("polyData.geojson", {style: setStyle}).addTo(map);

Your Answer

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

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