Add tooltips for polyline

[Shiva Sai]

Hi Team,

I have drawn a polyline for several coordinates.

When mouse is hovered over the polyline, it should display a tooltip with the nearest coordinate details.

Request your help here.

Thanks & Regards,

Shiva.

[Louis Gamor]

Hi Shiva...share your code please!

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/cb453559-e5ce-4ceb-a385-8dedb7d04b49n%40googlegroups.com.

[Shiva Sai]

Part of the code where I'm inserting the polyline

The coordinates will be fetched dynamically in polylinePointsGeo variable.

 polyline = L.polyline(polylinePointsGeo, {

                                color: 'Green'

                            }).addTo(this.map);

                            markerDisplay.push(L.polylineDecorator(polyline, {

                                patterns: [{ // defines a pattern of 5px-arrow wide dashes, repeated every 70px on the line

                                    offset: 0,

                                    repeat: 70,

                                    symbol: L.Symbol.arrowHead({

                                        pixelSize: 5,

                                        pathOptions: {

                                            stroke: true,

                                            color: 'Green'

                                        }

                                    })

                                }]

                            }).addTo(map));

                            map.panTo(new L.LatLng(eventData[0].gpscoordinate.split(',')[0], eventData[0].gpscoordinate.split(',')[1]));

[Louis Gamor]

Usually tooltips or popups will be added to either the start or end of the polyline. 

The start and end of a polyline will usually be considered as two markers.

Markers extend the Layer type which defines the bindTooltip function.

Polylines extend Path which also extends Layer.

So if my knowledge from OOP Inheritance makes any sense, then the Polyline type should support/implement the bindTooltip function as well.

Try modifying your code with this bit of code and let's see if a tooltip with the text "test polyline tooltip" will be added to your polyline. 

I've simply chained the bindTooltip function to your polyline definition.

polyline = L.polyline(polylinePointsGeo, {

                                color: 'Green'

                            }).bindTooltip("test polyline tooltip").addTo(this.map);

To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/d4dd5cca-9331-4243-b2bb-e6fb4149d08cn%40googlegroups.com.