0

I'm trying to label a shape drawn by GeoJSON data in a way that keeps the label visible even if part or most of the shape is off screen. The code I am replacing uses a marker given fixed coordinates and therefore it is easy to pan the map and lose that point and the marker.

I'm now trying a tooltip but it often appears in completely the wrong place. These screenshots show the park with a rough circle in blue, and the tooltip with a white shape around it.

enter image description here

enter image description here

The code

 const parkStyle = {
   stroke: '#FF0000',
   opacity: 1,
   weight: 2,
   fillOpacity: 0,
 };
 const parkLayer = L.geoJSON(park.geometry, { style: parkStyle});
 parkLayer.bindTooltip(park.name, {permanent: true, className: 'park-tooltip'});
 parkLayer.addTo(this.map);

The GeoJSON

{"type":"Feature",
            "geometry":{"type":"MultiPolygon","coordinates":[[[[174.05775,-39.20426],[173.9917,-39.228962],[173.96663,-39.25221],[173.951402,-39.29586],[173.958095,-39.32588],[173.9772,-39.3520],[174.00701,-39.37177],[174.04410,-39.38188],[174.102089,-39.378061],[174.135973,-39.36288],[174.16105,-39.33972],[174.174412,-39.311416],[174.169730,-39.26711],[174.136330,-39.22888],[174.05775,-39.20426]]]]},
            "properties":{"name":"Egmont National Park", center: [173.96481435000607,-39.1332981]}},

relevant CSS

.leaflet-touch {
  .leaflet-tooltip {
    background-color: rgba(0, 0, 0, 0);
    border: 0px;
    color: #232D45;
    box-shadow: none;
    -webkit-text-stroke-width: 0.25px;
    -webkit-text-stroke-color: white;
    margin: 0px !important;
    font-size: 14px;
    line-height: 16px;
    font-weight: 900;
  }
  .leaflet-tooltip.park-tooltip {
    border-radius: 20px;
    background-color: #FFF;
    padding-left: 15px;
    padding-right: 15px;
    font-weight: bold;
    color: #232D45;
    font-family: Roboto, "Open Sans", sans-serif;
  }
  .leaflet-tooltip-right:before, .leaflet-tooltip-left:before {
    border-color: rgba(0, 0, 0, 0);
  }
}
7
  • Your code should work OK. How does park-tooltip style look like? – TomazicM Dec 8 '20 at 20:46
  • @TomazicM I've added the CSS related to this – Craig Dec 8 '20 at 22:58
  • For me it work OK (see jsfiddle.net/TomazicM/suk2xdL5). It's hard to say why it doesn't work for you. It must be in some way connected to CSS and leaflet-touch. I left this out in my jsFiddle, since I have no touch test environment to try it. – TomazicM Dec 9 '20 at 9:21
  • Thanks for looking into it @TomazicM. That jsFiddle link you sent has only the CSS though, did you paste the wrong thing? – Craig Dec 9 '20 at 9:56
  • It looks like I forgot to save after adding the JS part. It's OK now. – TomazicM Dec 9 '20 at 10:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.