I am working with the application which uses leaflet api.
Introduction
I needed to draw different types of fences, using decorators i can somewhat apply good visuals to the polylines but not much.
Problem
I was willing to show twisted wires instead of dashes, dots or plain lines and I know the twisted wire line will be an image but can't find help about applying custom css to polylines.
Script Example
var fence2Icon = L.icon({ iconUrl: 'xxxx.png', iconSize: [5, 20] iconAnchor: [5, 18] }); // Add coordinate to the polyline var polylineFence2 = new L.Polyline([], { color: 'red' }); function fencePlace2(e) { // New marker on coordinate, add it to the map new L.Marker(e.latlng, { icon: fence2Icon, draggable: false }).addTo(curr); // Add coordinate to the polyline polylineFence2.addLatLng(e.latlng).addTo(curr); var decorator = L.polylineDecorator(polylineFence2, { patterns:[{offset:5,repeat:'20px',symbol:new L.Symbol.Dash({pixelSize:5}) }] }).addTo(curr); } L.easyButton('fa-flash', function () { $('.leaflet-container').css('cursor', 'crosshair'); map.on('click', fencePlace2); polylineFence2 = new L.Polyline([], { color: 'red' }); }).addTo(map); If someone know anything about polyline or another way please do help.
أكثر...
Introduction
I needed to draw different types of fences, using decorators i can somewhat apply good visuals to the polylines but not much.
Problem
I was willing to show twisted wires instead of dashes, dots or plain lines and I know the twisted wire line will be an image but can't find help about applying custom css to polylines.
Script Example
var fence2Icon = L.icon({ iconUrl: 'xxxx.png', iconSize: [5, 20] iconAnchor: [5, 18] }); // Add coordinate to the polyline var polylineFence2 = new L.Polyline([], { color: 'red' }); function fencePlace2(e) { // New marker on coordinate, add it to the map new L.Marker(e.latlng, { icon: fence2Icon, draggable: false }).addTo(curr); // Add coordinate to the polyline polylineFence2.addLatLng(e.latlng).addTo(curr); var decorator = L.polylineDecorator(polylineFence2, { patterns:[{offset:5,repeat:'20px',symbol:new L.Symbol.Dash({pixelSize:5}) }] }).addTo(curr); } L.easyButton('fa-flash', function () { $('.leaflet-container').css('cursor', 'crosshair'); map.on('click', fencePlace2); polylineFence2 = new L.Polyline([], { color: 'red' }); }).addTo(map); If someone know anything about polyline or another way please do help.
أكثر...