5

Is there a way to display a label or textbox on a specific geo-place on a map produced by leaflet.js.?

I know about the Marker- and Polygon Method But I can't find a way to put text in the polygon. I want the text and box to be the same size on every zoom level. And when dragging the map the box should be stuck to the map; like a sticky note.

Is there a way to achieve this with Leafletjs or with SVG?

2

I would simply add a custom popup to the leaflet map.

The popup can be displayed independently from markers, and styled however you would like. It will remain the same size and pan with the map.

var map = L.map('map', { closePopupOnClick: false}).setView([39.7392, -104.9903], 17);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var popup = L.popup({
          closeButton: false,
          autoClose: false
        })
        .setLatLng([39.7392, -104.9903])
        .setContent('<p>Text box on a map</p>')
        .openOn(map);

and custom css:

.custom-popup .leaflet-popup-content-wrapper {
  background:#2c3e50;
  color:#fff;
  font-size:16px;
  line-height:24px;
  border-radius: 0px;
  }
.custom-popup .leaflet-popup-content-wrapper a {
    color:rgba(255,255,255,0.1);
  }
.custom-popup .leaflet-popup-tip-container {
  width:30px;
  height:15px;
  }
.custom-popup .leaflet-popup-tip {
    background: transparent;
    border: none;
    box-shadow: none;
  }

See example: http://codepen.io/owenjam/pen/xRPMao

Your Answer

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

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