Problems with measurement

[YTheaudin96t]

Hi,

I have two 2 problems

1 > showTooltipOnHover: true not working

My code map.pm.setGlobalOptions({ measurements: { measurement: true, displayFormat: 'metric', showTooltipOnHover: true, showTooltip: true, radius: true, area: true, segmentLength: true, totalLength: true, showTooltip: true, perimeter: true, coordinates: true } })

Resize circle OK

Mouse hover KO

2
I would like to retrieve element select , + its measure and create a makerText do you have a solution

Regards,
Yvan

[YTheaudin96t]

Complément by contextMenu

[Falke-Design]

The first issue is a real bug (#1348), we will fix this in the next release. Until then you can use this workaround:

map.on('pm:create',(x)=>{
  x.layer.on('pm:edit',(e)=>{
    e.layer.pm.calcMeasurement(e.layer);
    e.layer.pm.addMeasurementTooltipToLayer(e.layer);
  })
})

Sorry but I don't understand your second point, can you please try to explain it more

[YTheaudin96t]

Yes sorry

[YTheaudin96t]

with the Add Size I want to insert the measurements
sorry if i'm not clear

[YTheaudin96t]

You need to apply the workaround on the imported layers too. For example after importing with L.GeoJSON():

var layers = L.geoJSON(YOUR_GEOJSON);
layer.eachLayer((layer)=>{
  layer.on('pm:edit',(e)=>{
    e.layer.pm.calcMeasurement(e.layer);
    e.layer.pm.addMeasurementTooltipToLayer(e.layer);
  })
})

I always try the same thing no tooltips

function createLayersFromJson(data) {
const layers = [];
var layerGroup = L.layerGroup();

         L.geoJSON(data, {
                 pointToLayer: (feature, latlng) => {
                 //console.log(feature.properties);
                 if (feature.properties.radius) {
                     //console.log(feature);
                         layerGroup.addLayer( new L.Circle(latlng, feature.properties.radius));
                 } else {
                     if (feature.properties.TextInfo) {
                         layerGroup.addLayer(new L.Marker(latlng, {
                             textMarker: true,
                             text: feature.properties.TextInfo}));
                     }
                     else if (feature.properties.iconUrl =='Telepilote') {
                         layerGroup.addLayer(new L.Marker(latlng, { icon: Telepilote }));
                     }
                     else if (feature.properties.iconUrl =='Spotter') {
                         layerGroup.addLayer(new L.Marker(latlng, { icon: Spotter }));
                     }
                     else {
                         
                         layerGroup.addLayer(new L.Marker(latlng));
                     }
                         
                     }
                 },
                 onEachFeature: (feature, layer) => {
                     
                     layer.on('pm:edit', (e) => {
                         e.layer.pm.calcMeasurement(e.layer);
                         e.layer.pm.addMeasurementTooltipToLayer(e.layer);
                     })
                     layerGroup.addLayer(layer)
                 },
             });

         return layerGroup;
     };

[Falke-Design]

I know now the problem. The layer has after importing no measurement and also the GlobalOptions (showTooltipOnHover) are not applied. Use this for now:

var layers = L.geoJSON(JSON.parse(data)).addTo(map);
map.pm.setGlobalOptions({ measurements: { measurement: true, displayFormat: 'metric', showTooltipOnHover: true, showTooltip: true} })
layers.eachLayer((layer)=>{
  layer.on('pm:edit',(e)=>{
    e.layer.pm.calcMeasurement(e.layer);
    e.layer.pm.addMeasurementTooltipToLayer(e.layer);
  });

  layer.pm.calcMeasurement(layer);
  layer.pm.addMeasurementTooltipToLayer(layer);
  layer.closeTooltip();
})

PS: It is important to apply the measurement logic exactly like above and not in onEachFeature.

I try to fix this with the next version too.

[Falke-Design]

with the Add Size I want to insert the measurements sorry if i'm not clear

function onSizeBtnClick(layer){
  const measurements = layer.pm.measurements || {};

  const text = Object.entries(measurements).map(([key, value]) => `${key}: ${value}`).join('\n');

  let latlng;

  if(layer.getLatLng){
    latlng = layer.getLatLng();
  } else if(layer.getCenter) {
    latlng = layer.getCenter()
  } else if(layer.getBounds) {
    latlng = layer.getBounds().getCenter();
  } else if(layer.getBounds) {
    latlng = layer.getBounds().getCenter();
  } else if(layer.getLatLngs){
    latlng = L.latLngBounds(layer.getLatLngs()).getCenter();
  } else {
    throw new Error('Center not found!');
  }

  L.marker(latlng, {
    textMarker: true,
    text: text,
  }).addTo(map);
}

[YTheaudin96t]

Thank you for the answer,

1. on the other hand how you select the layer

sorry i start with your library