Leaflet.LabelTextCollision icon indicating copy to clipboard operation
Leaflet.LabelTextCollision copied to clipboard

labelTextCollission with GeoJSON

Open markslawton opened this issue 4 years ago • 2 comments

Hello, Your plug-in looks perfect for my project. Could you tell me how I could implement it using GeoJSON polygons.
L.geoJSON(settings.polygons, {})

markslawton avatar Nov 26 '20 20:11 markslawton

same question.

mlzk avatar Mar 24 '22 04:03 mlzk

Steps to get labels on GeoJSON

  1. Create collision as described
  2. Add it as as renderer to map
  3. Create geojson obj:
let geojson = L.geoJSON(null, {
style: (feature) => {
           // value of text needs to be added from feature object. Can be under properties or directly under feature itself
          // text what will be shown on the label
           return {color: "red", text: feature.properties.text};
        }
})
let listOfGeoJSONFeatures = [];
// load in data
geojson.addData(listOfGeoJSONFeatures).addTo(map);
  1. If you run into issue, (i ran into error when trying to implement this solution. Specifically: TypeError: Cannot set properties of undefined (setting '45')) then take the code from doc/dist/L.LabelTextCollision.js. It has extra code in the initialize method, compared to the one in repo dist/L.LabelTextCollision.js. I got the working code from demo example, after trying to figure out the issue for couple of hours

RaulVS14 avatar Mar 31 '22 18:03 RaulVS14