5

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);
  • 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 '17 at 13:46
  • i m using leaflet – Gaurav Singh Feb 13 '17 at 14:30
  • i have updated my code – Gaurav Singh Feb 13 '17 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 '17 at 14:32
16

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);
0

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, privacy policy and cookie policy

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