• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

156
Views
styling text at the end of polyline path (leaflet)

i create routing webgis that show multiply route from nearest facility function and
i want to show the distance route using with markinacorpus/Leaflet.TextPathplugin , but it's overlapping in the begining of route

enter image description here

i think it's better to place the text at the end of path. but idont know how to make it here is the code for my styling:

function addDistanceText(Feature, layer) {
            layer.setText(Feature.properties.distance_route + 'km', {offset: 17 });
            }

here is geojson data:

{"type":"FeatureCollection","features":[
{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[110.2382587,-7.9579805],[110.2380463,-7.9581418]]]},"properties":{"distance":"3989.57671272009"}},
{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[110.2374145,-7.9593029],[110.2371966,-7.9598229]]]},"properties":{"distance":"2206.76527447351"}},
{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[110.2374145,-7.9593029],[110.2379765,-7.9594952]]]},"properties":{"distance":"2667.74036482918"}}]}

any body know how to style text path without overlapping?

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

as IvanSanchez and enxaneta recomended, i reverse the geojson array (spesificlly the order of feature)
here is the code:

result.features.forEach((feature) => {
   feature.geometry.coordinates.reverse().forEach(_reversecoordinate);
   function _reversecoordinate(item) {
      item.reverse();}
   });
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error