Closed Kessir closed 6 years ago
Hey @Kessir, thanks for your interest in the project, glad to hear from you.
Personally I'm not entirely sure if it makes sense to put a Leaflet specific example in the README, but I think you're right perhaps some generic instructions on how Labelgun works would be beneficial. I'll look into this.
In the mean time here is the leaflet example with all the benchmarking logic removed:
console.log("Leaflet Example");
var totalTime = 0;
var totalMarkers;
var labelEngine;
// Leaflet map
var map = L.map('map').setView([0, 0], 6);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Labelgun!
var hideLabel = function(label){ label.labelObject.style.opacity = 0;};
var showLabel = function(label){ label.labelObject.style.opacity = 1;};
labelEngine = new labelgun.default(hideLabel, showLabel);
var id = 0;
var labels = [];
var totalMarkers = 0;
var markers = L.geoJSON(geojson, {
onEachFeature : function(feature, label) {
label.bindTooltip("Test " + totalMarkers, {permanent: true});
labels.push(label);
totalMarkers += 1;
}
});
var i = 0;
markers.eachLayer(function(label){
label.added = true;
addLabel(label, i);
i++;
});
markers.addTo(map);
map.on("zoomend", function(){
resetLabels(markers);
});
map.fitBounds(markers.getBounds());
var cover = document.getElementById("cover");
cover.parentNode.removeChild(cover);
resetLabels(markers);
function resetLabels(markers) {
labelEngine.destroy();
markers.eachLayer(function(label){
addLabel(label)
;});
labelEngine.update();
}
function addLabel(layer, id) {
var label = layer.getTooltip()._source._tooltip._container;
if (label) {
var rect = label.getBoundingClientRect();
var bottomLeft = map.containerPointToLatLng([rect.left, rect.bottom]);
var topRight = map.containerPointToLatLng([rect.right, rect.top]);
var boundingBox = {
bottomLeft : [bottomLeft.lng, bottomLeft.lat],
topRight : [topRight.lng, topRight.lat]
};
labelEngine.ingestLabel(
boundingBox,
id,
parseInt(Math.random() * (5 - 1) + 1), // Weight
label,
"Test " + id,
false
)
if (!layer.added) {
layer.addTo(map);
layer.added = true;
}
}
}
Thanks for your response @JamesMilnerUK. I was able to figure it out and I'm using it in one of my projects.
Would the Wiki be a good place to put Leaflet/OpenLayers specific documentation? I'm willing to help with that. This is a great library and I would love to help reduce the learning curve.
I think @Kessir is right. The simplest thing is to strip back the examples, Leaflet and OpenLayers, to a bare minimum - ie remove all the benchmarking code. As an indifferent JS coder, I found the examples a tad hard to apply to my own code (in fact I still haven't).
I'm happy to make a PR, but it won't be soon, I'm afraid.
Thanks for your feedback @tomchadwin and @Kessir . Definitely taken on board. I have tried my hardest to make the API for Labelgun as simple as possible, the problem mostly lies in the complexities of finding the coordinate bounding boxes of the labels, which to make labelgun agnostic must happen outside the library.
Specifically I've removed the benchmarking code from the Leaflet example and placed it in a benchmarking
folder. I've also added comments to the file to hopefully make it more understandable! Let me know what you think.
Much better - and much appreciated. I really do want to implement this in qgis2web when I get the chance (https://github.com/tomchadwin/qgis2web/issues/398), and this will make it much easier. Thanks!
@tomchadwin when I have some more time I'd like to help you with that as it would be a great use case! I'll keep this issue open if people have specific ideas about how to improve the examples.
Thanks! It would improve the output no end (obviously). I've just not got round to trying to code it up. All I really need to do is load a single layer, leave all qgis2web default settings, export, and then retrofit Labelgun to the output. Once that works, it's simple just to pull the revised output back into the export routine. #mañana...
Just to let you know that the simplified Leaflet example has done just what I needed - I've managed to implement it myself. Many thanks for taking the time to address our concerns. Much appreciated.
And Labelgun is now initially implemented in qgis2web (try master branch). Issues:
I'd really appreciate your help with 2, @JamesMilnerUK, but I don't want to clutter up this issue and repo, so if you do have some time to help out over at https://github.com/tomchadwin/qgis2web/issues/398, I'd be really grateful.
Weirdly I just updated to the latest version (5.0.0). I forked qgis2web but I couldn't see any labelgun code in there on the master branch. Did you push it? Happy to look into it for you.
No, I totally failed to push. Done so now. Apologies.
Fully implemented in Leaflet export now - do take a look.
Now that you've added the simple OL4 example, I think this issue can probably be closed. What do you think, @Kessir?
I agree.
On Mon, Sep 18, 2017 at 3:57 PM, Tom Chadwin notifications@github.com wrote:
Now that you've added the simple OL4 example, I think this issue can probably be closed. What do you think, @Kessir https://github.com/kessir ?
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Geovation/labelgun/issues/16#issuecomment-330268812, or mute the thread https://github.com/notifications/unsubscribe-auth/ACOYOjXn3_My00lCs6NV-ZrK4hdPgoMHks5sjpLvgaJpZM4NZnGi .
-- M. Kessir Adjaho Software Developer Problem solver @ nyucted.org http://nyucted.org
Thanks for all the feedback! I will close this now. If either you too or anyone else sees this and feels that things are still unclear, please create a new issue expressing your concerns and I'll do my best to get back to you.
It would be great to have a simple example in the README. This would be helpful especially to beginners. I went through the leaflet example but it was hard to understand as there was a lot of configuration being done outside the library.