How to place image between two marker using css : leaflet

Question

In my application where i use leaflet api, i am able to put two gate markers and polyline drawn between them.

Here, i just wanted to find out the way to put the image from css on the polyline which should fit between two markers.I know the image has width and height.

I beleive there must be some css trick to do that, although i can't use fill pattern method due to limited understanding about leaflet.

Script(putting two markers and line between them)

var polylineGate2 = new L.Polyline([], { color: 'yellow' });
            function gatePlace2(e) {
                // New marker on coordinate, add it to the map
                new L.Marker(e.latlng, { icon: gateIcon, draggable: false }).addTo(currentFeatureGroup);
                // Add coordinate to the polyline
                polylineGate2.addLatLng(e.latlng).addTo(currentFeatureGroup);
                var decorator = L.polylineDecorator(polylineGate2, {
                    patterns: [
                        // define a pattern of 10px-wide dashes, repeated every 20px on the line
                        { offset: 5, repeat: '20px', symbol: new L.Symbol.dash({ pixelSize: 4 }) }
                    ]
                }).addTo(currentFeatureGroup);
                map.off('click', gatePlace2);
                polylineGate2 = new L.Polyline([], { color: 'pink' });
            }

I am looking for the solution but didn't get help online, if someone knew about that kind of thing please help.

score 1 · Accepted Answer · edited May 23 '17 at 10:26

1

I would not use CSS for that.

Instead, I would calculate the coordinates of the middle point and put a custom marker there.

edited May 23 '17 at 10:26

Community

1
1

answered Oct 04 '15 at 15:47

YaFred

9,698
3
28
40

How to place image between two marker using css : leaflet

1 Answers1