Documentation: Show simple example in README

Kessir commented 7 years ago

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.

JamesLMilner commented 7 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: '&copy; <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;
          }

        }

}

Kessir commented 7 years ago

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.