L.esri.LabelLayer

[patrickarlt]

Creating label layer would be fairly easy using something like https://github.com/Geovation/labelgun or https://github.com/MazeMap/Leaflet.LayerGroup.Collision as a new plugin.

[patrickarlt]

@jgravois made a sweet prototype http://jsbin.com/matufo/edit?html,output using https://github.com/Geovation/labelgun

[goldenlimit]

@patrickarlt I just talked with @jgravois that I can try to PR this issue as a weekend project.

[goldenlimit]

Take about couple hours on this, and I need you guys helps to look at this issues that I run into. When I try to add the new LabelLayer.js file into our src file, there are two major issues that I can't figure it out how to resolve.

1. How to make sure that the new js file will be load and updates?

I tried both ways to load the js file locally, and I can see my new added "LabelLayer.js" from developer tool, however, the problem is that file seems not sync all the time, for example, when I save my changes, and I did "npm run build" and the file still not sync in developer tool, as you can see from the below screenshot:

2. How would we reference the "labelgun" node module correctly into our reference? I tried to npm install that component into our npm module, and I saw the "labelgun" is added as dependecies in package.json file, however, the npm returns me this error all the time:

And I saw @patrickarlt mentioned this related issue on here: https://github.com/rollup/rollup/issues/220

PS: Talked with @jgravois and not sure do we suppose to change anything here to make it load the new add "LabelLayer.js" file? When I add this line "export { LabelLayer } from './Layers/LabelLayer/LabelLayer';" Sometimes it will causing "labelLayer.js"file not show when debugging the code. This is also makes me really confused:

Would you guys provide some helps about how to make it load correctly?

[jgravois]

i have a couple suggestions:

1. we don't want to add L.esri.labelLayer to esri-leaflet core. we want it to be its own plugin (like cluster and heatmap already are).

2. don't make label-gun or rbush and internal dependency to your plugin, leave them outside (ie: expect that they've been loaded in their own script tag before your plugin has been loaded). cluster and heatmap do this with external dependencies too.

3. don't worry about ES6 syntax and rollup if you aren't ready to deal with all that. the plugin will work just as well if you rely on any of the other popular techniques developers use to extend leaflet.

just assuming L will be available https://github.com/henrythasler/Leaflet.Geodesic/blob/master/Leaflet.Geodesic.js

UMD module https://github.com/domoritz/leaflet-locatecontrol/blob/gh-pages/src/L.Control.Locate.js

etc. etc.

[goldenlimit]

@jgravois Thanks for the suggestions. However, I am still confused about where to start. I understand that we want to use this LabelLayer as external plugin. So how we reference it and what we suppose to put into LabelLayer.js file?

Based on this heatmap example: https://github.com/Esri/esri-leaflet-heatmap/blob/master/src/HeatmapFeatureLayer.js

We still need to add this HeatmapFeatureLayer.js and how could we debug to make sure this file is loaded?

[jgravois]

how could we debug to make sure this file is loaded?

take a look at esri-leaflet-heatmap/debug/sample.html

calling npm start spins up a local web server and uses rollup to create the built file which is loaded via the sample's script tag every time a change in the raw source is detected.

the build process is only necessary because the plugin is written in ES6.