1

I am new to Leaflet, I am currently trying to add two labels, at the first and last joint of my GeoJSON polyline. I tried to open tooltips directly on map and adding markers with coordinates and a bounded tooltip but no luck.
When refresh function is called, polylines are added to map, but permanent tooltips bounded to the markers I add to map in the onEachFeature function don't appear. Even tooltips added by iterating the labels variable aren't shown.

Here is my messy code:

refresh(state, map) {
  console.log("refreshing");
  if(this.geoJSONLayer) {
    this.geoJSONLayer.clearLayers();
  }
  var labels = [];
  L.geoJSON(state.support_map).addTo(map);
  this.geoJSONLayer = L.geoJSON(state.document_map, {
    onEachFeature: function(feature, layer) {
      layer.on('click', (e) => {
        e.target.editing.enable();
      });
      L.marker(feature.geometry.coordinates[0]).bindTooltip('HEY!', {
        permanent: true
      }).addTo(map);
      L.marker(feature.geometry.coordinates[feature.geometry.coordinates.length - 1]).bindTooltip('HEY!', {
        permanent: true
      }).addTo(map);
      labels.push({
        lat: feature.geometry.coordinates[0][0],
        lng: feature.geometry.coordinates[0][1]
      });
      labels.push({
        lat: feature.geometry.coordinates[feature.geometry.coordinates.length - 1][0],
        lng: feature.geometry.coordinates[feature.geometry.coordinates.length - 1][1]
      });
    }
  });
  this.geoJSONLayer.addTo(map);
  if(state.draw === 'polyline') {
    this.polylineDrawer = new L.Draw.Polyline(map, {});
    this.polylineDrawer.enable();
  } else {
    this.polylineDrawer.disable();
  }
  labels.forEach((label)=>{
    map.openTooltip('HEY!', label, { permanent: true });
  });
}

The state variable contains what to render on map, which is a reference to the Leaflet map. In the code there are both the two approach I tried: adding markers with tooltip and open tooltips right from map. I would simply like to show a label at the start of my polyline and one at the end of it.

What did I do wrong?

You can see the whole code here.

1
  • @TomazicM I update my question
    – Francesco
    May 29, 2022 at 21:47

1 Answer 1

1

Your tooltips and markers are shown, but at the wrong location. Zooming out enough you would see them. Reason for this is that Leaflet for the input to it's methods/functions expects [lat, lng] order, but GeoJSON coordinates are given in [lng, lat] order.

So what is needed is just to swap the GeoJSON coordinates when using them as input to Leaflet methods, for example:

function onEachFeature(feature, layer) {
  if (feature.geometry.type == 'LineString') {
    var firstCoord = feature.geometry.coordinates[0];
    var lastCoord = feature.geometry.coordinates[feature.geometry.coordinates.length - 1];
    map.openTooltip('First', [firstCoord[1], firstCoord[0]], {permanent: true});
    map.openTooltip('Last', [lastCoord[1], lastCoord[0]], {permanent: true});
  }
}  

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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