I want to show label/Text with polylines, Here is my code

function displayDottedLine(latA, longA, latB, longB, label) {
    var pointA = new L.LatLng(latA, longA);
    var pointB = new L.LatLng(latB, longB);
    var pointList = [pointA, pointB];
    var firstpolyline = new L.Polyline(pointList, {
        color: 'white',
        weight: 1.5,
        opacity: 0.5,
        dashArray: "10 10",
        smoothFactor: 1
    });
    firstpolyline.addTo(map);
}

there is label parameter in the function, i need to attach this label with polylines.

Thanks in advance.

I want to show label/Text with polylines, Here is my code

function displayDottedLine(latA, longA, latB, longB, label) {
    var pointA = new L.LatLng(latA, longA);
    var pointB = new L.LatLng(latB, longB);
    var pointList = [pointA, pointB];
    var firstpolyline = new L.Polyline(pointList, {
        color: 'white',
        weight: 1.5,
        opacity: 0.5,
        dashArray: "10 10",
        smoothFactor: 1
    });
    firstpolyline.addTo(map);
}

there is label parameter in the function, i need to attach this label with polylines.

Thanks in advance.

• javascript
• angularjs
• leaflet

1 Answer 1

You can try leaflet.textpath.js plugin

window.addEventListener('load', function() {
  var map = L.map('map').setView([51.328125, 42.2935], 18);

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

  var plane = L.polyline([
    [3.33984375, 46.6795944656402],
    [29.53125, 46.55886030311719],
    [51.328125, 42.293564192170095],
  ]).addTo(map);
  map.fitBounds(plane.getBounds());
  
  plane.setText('SAMPLE TEXT', {center: true});
});

#map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

<link rel="stylesheet" href="https://unpkg./[email protected]/dist/leaflet.css" />
<script src="https://unpkg./[email protected]/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/leaflet.textpath.min.js"></script>

<div id="map"></div>