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.
أكثر...
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.
أكثر...