} });
79 | ```
80 |
81 | ## Options
82 |
83 | Arrowheads offers a variety of options for rendering and styling arrowheads. See the options table below.
89 |
90 |
91 | Option
92 | Type
93 | Default
94 | Description
95 |
96 |
99 | yawn
100 | Number ( Degrees )
101 | 60
102 | Defines the width of the opening of the arrowhead, given in degrees. The larger the angle, the wider the arrowhead.
103 |
104 |
107 | size
108 | String ( Meters or Percent or Pixels )
110 | '15%'
111 | Determines the size of the arrowhead. Accepts three types of values:
113 | A string value which is a number with the suffix 'm' ( '1.5m', '20m', '250m', etc. ) will render arrows whose size is that many metres. Ideal for maps with low variance in zoom levels.
114 | A string value which is a number with a percent sign ( '15%', '20%', '25%', etc. ) will render arrows whose size is that percentage of the size of the parent polyline. If the polyline has multiple segments, 'size' will take the percent of the average size of the segments.
115 | A string value which is a number with the suffix 'px' ( '20px', '25px', '30px', etc. ) will render an arrowhead whose size stays at a constant pixel value, regardless of zoom level. Will look strange at low zoom levels or for smaller parent vectors. Ideal for larger parent vectors and at higher zoom levels.
116 |
117 |
118 |
119 |
122 | frequency
123 | Number | String ( Number of arrowheads | Meters, Pixels, 'allvertices', 'endonly' )
125 | 'allvertices'
126 | How many arrowheads are rendered on a polyline.
127 |
128 | 'allvertices' renders an arrowhead on each vertex.
129 | 'endonly' renders only one at the end.
130 | A number value renders that number of arrowheads evenly spaces across the polyline.
131 | A string value with suffix 'm' (i.e. '100m') will render arrowheads spaced evenly along the polyline with roughly that many meters between each one.
132 | A string value with suffix 'px' (i.e. '30px') will render arrowheads spaced evenly with roughly that many pixels between each, regardless of zoom level.
133 |
134 |
135 |
136 |
139 | proportionalToTotal
140 | Boolean
141 | false
142 | Only relevant when size is given as a percent. Useful when frequency is set to 'endonly'. Will render the arrowhead(s) with a size proportional to the entire length of the multi-segmented polyline, rather than proportional to the average length of all the segments.
143 |
144 |
147 | offsets
148 | Object {
149 | undefined
150 | Enables the developer to have the arrowheads start or end at some offset from the start and/or end of the polyline. This option can contain one or both start and end properties. Each must be a string defining the size of the offset in either meters or pixels (i.e. '100m', '15px', etc.)
151 |
152 |
155 | perArrowheadOptions
156 | Function (i: number) => ArrowheadOptions
157 | undefined
158 | Enables the developer to customize arrowheads on a one-by-one basis. Must be in the form of a function of i, which is the index of the arrowhead as it is rendered in the loop through all arrowheads. Must return an object that is options object, the same type of options object that is the agrument for .arrowheads({ <Options> }). Cannnot account for frequency or proportionalToTotal from within the perArrowheadOptions callback. See examples for details.
159 |
160 |
161 |
175 |
176 | Yawn Options
178 |
180 |
181 | L.polyline([]).arrowheads()
182 | (Standard option gives 60 degree yawn)
183 |
184 |
185 |
187 |
188 | L.polyline([]).arrowheads({
189 | yawn: 90
190 | })
191 |
192 |
193 |
195 |
196 |
198 | L.polyline([]).arrowheads({
199 | yawn: 40
200 | }) .arrowheads({
203 | yawn: 40,
204 | fill: true
205 | })
208 |
209 |
210 |
211 |
212 | Color and Fill Options
214 |
216 |
217 | L.polyline([]).arrowheads()
220 |
221 |
223 |
224 | L.polyline([]).arrowheads({
225 | fill: true
226 | })
227 |
228 |
229 |
231 |
232 |
234 | L.polyline([]).arrowheads({
235 | color: 'black'
236 | }) L.polyline([],{
239 | color: 'black'
240 | })
241 | .arrowheads({
242 | fill: true
243 | })
246 |
248 | L.polyline([]).arrowheads({
249 | color: 'black'
250 | }) L.polyline([]).arrowheads({
253 | fill: true,
254 | color: 'black'
255 | fillColor: 'green'
256 | })
259 |
260 |
261 |
262 |
263 | Size Options
265 |
267 | Setting size to a number or percent will give you a fixed size arrowhead (in meters or percent of the size of the segment, respectively), regardless of zoom size. See the frequency examples below for a better idea.
268 |
269 |
271 |
272 | L.polyline([coords]).arrowheads({size: '20px', fill: true})
273 |
274 |
275 |
277 |
278 |
279 |
280 |
281 | Frequency Options
284 | Standard option:
285 | L.polyline([coords], { smoothFactor: 5 })
286 | .arrowheads({ frequency: 'allvertices' });
292 | L.polyline([coords])
293 | .arrowheads({
294 | frequency: 'endonly',
295 | size: '50%'
296 | });
301 | 20 arrowheads evenly distributed
302 | L.polyline([coords]).arrowheads({ frequency: 20 });
307 | Arrowheads every ~500 m evenly distributed
308 | L.polyline([coords]).arrowheads({ frequency: '500m' });
313 | Arrowheads every 50px regardless of zoom
314 | L.polyline([coords])
315 | .arrowheads({
316 | frequency: '50px',
317 | size: '12px'
318 | });
322 |
323 |
324 | Offset Options
327 | L.polyline([coords])
328 | .arrowheads({
329 | frequency: 'endonly',
330 | size: '30px',
331 | offsets: { end: '15px' }
332 | });
337 | L.polyline([coords])
338 | .arrowheads({ frequency: 20,
339 | size: '300m',
340 | offsets: { end: '15px' }
341 | });
346 | L.polyline([coords1, coords2])
347 | .arrowheads({ frequency: '1000m',
348 | size: '300m',
349 | offsets: {
350 | start: '5000m',
351 | end: '15px'
352 | }
353 | });
357 |
358 |
359 | Per-Arrowhead Options
363 | L.polyline([coords], { color: 'black', weight: '2' })
364 | .arrowheads({
365 | frequency: '500m',
366 | color: 'darkblue',
367 | perArrowheadOptions: (i) => ({
368 | size: i % 3 === 0 ? '30%' : '15%',
369 | color: i % 2 === 0 ? 'red' : undefined,
370 | fill: (i + 1) % 4 === 0,
371 | yawn: (i + 1) % 4 === 0 ? 35 : undefined,
372 | }),
373 | });
380 | L.polyline([coords])
381 | .arrowheads({
382 | size: '20px',
383 | fill: true,
384 | yawn: 30,
385 | frequency: 20,
386 | perArrowheadOptions: (i) => ({
387 | color: `rgba(150, 20, ${0 + 20 * i}, 1)`,
388 | }),
389 | });
393 |
394 | ## Alternatives
395 |
396 | After writing this plugin I discovered [Leaflet.PolylineDecorator](https://github.com/bbecquet/Leaflet.PolylineDecorator). This offers some great methods to decorate your lines, potentially with arrowheads.
397 |
398 | ## Limitations
399 |
400 | Arrowheads sometimes look like they're in slightly the wrong orientation in areas of high curvature. This is because of the way leaflet-arrowheads chooses and interpolates the points that it uses to calculate bearings. This may be able to be improved. Feel free to contribute / open a PR.
401 |
--------------------------------------------------------------------------------
/example/boat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/slutske22/leaflet-arrowheads/ded413300e7d1cdfb459324120a2c25b6494f54e/example/boat.png
--------------------------------------------------------------------------------
/example/index.css:
--------------------------------------------------------------------------------
1 | html,
2 | body,
3 | #mapID {
4 | width: 100%;
5 | height: 100%;
6 | margin: 0;
7 | padding: 0;
8 | }
9 |
10 | .norwayLink {
11 | color: #0078a8;
12 | }
13 |
14 | .norwayLink:hover {
15 | text-decoration: underline;
16 | cursor: pointer;
17 | }
18 |
--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Leaflet Arrowheads
6 |
7 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
1 | var mapOptions = {
2 | center: [32.02556114475524, -119.78169059753418],
3 | zoom: 9,
4 | wheelPxPerZoomLevel: 100,
5 | };
6 |
7 | const map = L.map('mapID', mapOptions);
8 |
9 | map.on('popupopen', () => {
10 | hljs.highlightAll();
11 | });
12 |
13 | const myLayer = new L.TileLayer(
14 | 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
15 | {
16 | attribution:
17 | 'Map data © OpenStreetMap contributors',
18 | }
19 | );
20 |
21 | myLayer.addTo(map);
22 |
23 | var boatIcon = L.icon({
24 | iconUrl: 'boat.png',
25 | iconSize: [32, 32],
26 | shadowSize: [0, 0],
27 | iconAnchor: [16, 16],
28 | shadowAnchor: [4, 62],
29 | popupAnchor: [-3, -76],
30 | });
31 |
32 | // ------- GROUP 1: Arrowhead Color, Fill, and Yawn Options --------------//
33 |
34 | let group1Offsetx = 0.4,
35 | group1Offsety = 0.55;
36 |
37 | var simpleVector0 = L.polyline(
38 | [
39 | [
40 | map.getCenter().lat - 0.05 + group1Offsetx,
41 | map.getCenter().lng - group1Offsety - 0.25,
42 | ],
43 | [
44 | map.getCenter().lat + 0.05 + group1Offsetx,
45 | map.getCenter().lng - group1Offsety - 0.25 + 0.05,
46 | ],
47 | ],
48 | { color: 'black' }
49 | )
50 | .arrowheads()
51 | .bindPopup(`L.polyline(coords).arrowheads()L.polyline(coords, { color: 'blue', weight: 2 })
72 | .arrowheads();var simpleVector1 = L.polyline(coords)
92 | .arrowheads({ fill: true });L.polyline(coords, { color: 'green' })
112 | .arrowheads({ color: 'black' })L.polyline(coords, { color: 'orange', weight: 2 })
132 | .arrowheads({ yawn: 40 });var simpleVector1 = L.polyline()
152 | .arrowheads({ fill: true, color: 'purple' });L.polyline(coords).arrowheads()L.polyline(coords)
239 | .arrowheads({
240 | size: '10%',
241 | frequency: 'endonly'
242 | });L.polyline(coords)
278 | .arrowheads({
279 | size: '10%',
280 | frequency: '3000m'
281 | });L.polyline(coords)
317 | .arrowheads({
318 | size: '10%',
319 | frequency: '50px',
320 | fill: true,
321 | yawn: 30
322 | });L.polyline(coords)
358 | .arrowheads({
359 | size: '15px',
360 | frequency: '50px',
361 | fill: true,
362 | yawn: 30
363 | });L.polyline(coords).arrowheads({})L.polyline(coords)
497 | .arrowheads({
498 | size: '50%',
499 | frequency: 'endonly'
500 | });var path3 = L.polyline(coords)
508 | .arrowheads({
509 | size: '25%',
510 | frequency: 'endonly',
511 | proportionalToTotal: true
512 | });var path4 = L.polyline(coords)
529 | .arrowheads({
530 | frequency: '500m',
531 | color: 'darkblue',
532 | perArrowheadOptions: (i) => ({
533 | color: i % 2 === 0 ? 'red' : undefined,
534 | size: i % 3 === 0 ? '30%' : '15%',
535 | fill: (i + 1) % 4 === 0,
536 | yawn: (i + 1) % 4 === 0 ? 35 : undefined,
537 | })
538 | });L.polyline(coords).arrowheads({ frequency: '50px' });L.polyline(coords)
553 | .arrowheads({
554 | size: '15px',
555 | frequency: '50px'
556 | });L.polyline(coords)
573 | .arrowheads({
574 | size: '300m',
575 | frequency: 20,
576 | offsets: {
577 | end: '15px'
578 | }
579 | });L.polyline(coords)
595 | .arrowheads({
596 | size: '30px',
597 | frequency: 'endonly',
598 | offsets: {
599 | end: '15px'
600 | }
601 | });L.polyline(coords)
626 | .arrowheads({
627 | size: '300m',
628 | frequency: '1000m',
629 | offsets: {
630 | start: '5000m',
631 | end: '10px'
632 | }
633 | });L.polyline(coords)
687 | .arrowheads({
688 | size: '20px',
689 | fill: true,
690 | yawn: 30,
691 | frequency: 20,
692 | perArrowheadOptions: (i) => ({
693 | color: \`rgba(150, 20, \${0 + 20 * i}, 1)\`,
694 | }),
695 | });To Norway!
705 | `);
706 |
707 | somePopup.addTo(map);
708 |
709 | function flyToNorway() {
710 | map.flyTo([47.57652571374621, -27.333984375], 3, {
711 | animate: true,
712 | duration: 5,
713 | });
714 |
715 | somePopup.closePopup();
716 | }
717 |
718 | // GeoJSON Examples:
719 |
720 | const samplegeojson = {
721 | type: 'FeatureCollection',
722 | features: [
723 | {
724 | type: 'Feature',
725 | properties: {},
726 | geometry: {
727 | type: 'LineString',
728 | coordinates: [
729 | [-119.94323730468749, 31.487235582017444],
730 | [-119.92401123046875, 31.508312698943445],
731 | [-119.89654541015624, 31.529385064020936],
732 | [-119.85260009765624, 31.541089879585808],
733 | [-119.81689453125, 31.54577139493626],
734 | [-119.75372314453125, 31.548112064557003],
735 | [-119.7015380859375, 31.53640812943961],
736 | [-119.66583251953124, 31.52470272697062],
737 | [-119.62188720703125, 31.508312698943445],
738 | [-119.5806884765625, 31.49191979634118],
739 | [-119.52850341796875, 31.477866449675865],
740 | [-119.47631835937499, 31.47083898476439],
741 | [-119.41589355468749, 31.47083898476439],
742 | [-119.34722900390625, 31.48020882071693],
743 | [-119.2950439453125, 31.49426181553272],
744 | ],
745 | },
746 | },
747 | {
748 | type: 'Feature',
749 | properties: {},
750 | geometry: {
751 | type: 'LineString',
752 | coordinates: [
753 | [-119.44885253906251, 31.512995857454676],
754 | [-119.39941406249999, 31.52470272697062],
755 | [-119.33624267578124, 31.53640812943961],
756 | [-119.278564453125, 31.5504526754715],
757 | [-119.22088623046875, 31.55981453201843],
758 | [-119.1412353515625, 31.56449510799119],
759 | [-119.08355712890625, 31.555133721172034],
760 | [-119.02862548828125, 31.53640812943961],
761 | [-118.98468017578125, 31.512995857454676],
762 | [-118.91326904296874, 31.501287521196705],
763 | [-118.86383056640625, 31.512995857454676],
764 | [-118.80889892578126, 31.53640812943961],
765 | [-118.75396728515625, 31.573855555238104],
766 | [-118.73199462890626, 31.608948861695676],
767 | ],
768 | },
769 | },
770 | ],
771 | };
772 |
773 | const geojsonExample = L.geoJSON(samplegeojson, { arrowheads: { size: '25%' } })
774 | .bindPopup(
775 | `L.geoJSON(sampleGeoJSON, {
776 | arrowheads: {
777 | size: '25%'
778 | }
779 | });m'
13 | * @param {string} value
14 | * @returns Boolean
15 | */
16 | function isInMeters(value) {
17 | return (
18 | value
19 | .toString()
20 | .trim()
21 | .slice(value.toString().length - 1, value.toString().length) === 'm'
22 | );
23 | }
24 |
25 | /**
26 | * Whether or not a string is in the format '%'
27 | * @param {string} value
28 | * @returns Boolean
29 | */
30 | function isInPercent(value) {
31 | return (
32 | value
33 | .toString()
34 | .trim()
35 | .slice(value.toString().length - 1, value.toString().length) === '%'
36 | );
37 | }
38 |
39 | /**
40 | * Whether or not a string is in the format 'px'
41 | * @param {string} value
42 | * @returns Boolean
43 | */
44 | function isInPixels(value) {
45 | return (
46 | value
47 | .toString()
48 | .trim()
49 | .slice(value.toString().length - 2, value.toString().length) === 'px'
50 | );
51 | }
52 |
53 | function pixelsToMeters(pixels, map) {
54 | let refPoint1 = map.getCenter();
55 | let xy1 = map.latLngToLayerPoint(refPoint1);
56 | let xy2 = {
57 | x: xy1.x + Number(pixels),
58 | y: xy1.y,
59 | };
60 | let refPoint2 = map.layerPointToLatLng(xy2);
61 | let derivedMeters = map.distance(refPoint1, refPoint2);
62 | return derivedMeters;
63 | }
64 |
65 | L.Polyline.include({
66 | /**
67 | * Adds arrowheads to an L.polyline
68 | * @param {object} options The options for the arrowhead. See documentation for details
69 | * @returns The L.polyline instance that they arrowheads are attached to
70 | */
71 | arrowheads: function (options = {}) {
72 | // Merge user input options with default options:
73 | const defaults = {
74 | yawn: 60,
75 | size: '15%',
76 | frequency: 'allvertices',
77 | proportionalToTotal: false,
78 | };
79 |
80 | this.options.noClip = true;
81 |
82 | let actualOptions = Object.assign({}, defaults, options);
83 | this._arrowheadOptions = actualOptions;
84 |
85 | this._hatsApplied = true;
86 | return this;
87 | },
88 |
89 | buildVectorHats: function (options) {
90 | // Reset variables from previous this._update()
91 | if (this._arrowheads) {
92 | this._arrowheads.remove();
93 | }
94 |
95 | if (this._ghosts) {
96 | this._ghosts.remove();
97 | }
98 |
99 | // -------------------------------------------------------- //
100 | // ------------ FILTER THE OPTIONS ----------------------- //
101 | /*
102 | * The next 3 lines folds the options of the parent polyline into the default options for all polylines
103 | * The options for the arrowhead are then folded in as well
104 | * All options defined in parent polyline will be inherited by the arrowhead, unless otherwise specified in the arrowhead(options) call
105 | */
106 |
107 | let defaultOptionsOfParent = Object.getPrototypeOf(
108 | Object.getPrototypeOf(this.options)
109 | );
110 |
111 | // merge default options of parent polyline (this.options's prototype's prototype) with options passed to parent polyline (this.options).
112 | let parentOptions = Object.assign({}, defaultOptionsOfParent, this.options);
113 |
114 | // now merge in the options the user has put in the arrowhead call
115 | let hatOptions = Object.assign({}, parentOptions, options);
116 |
117 | // ...with a few exceptions:
118 | hatOptions.smoothFactor = 1;
119 | hatOptions.fillOpacity = 1;
120 | hatOptions.fill = options.fill ? true : false;
121 | hatOptions.interactive = false;
122 |
123 | // ------------ FILTER THE OPTIONS END -------------------- //
124 | // --------------------------------------------------------- //
125 |
126 | // --------------------------------------------------------- //
127 | // ------ LOOP THROUGH EACH POLYLINE SEGMENT --------------- //
128 | // ------ TO CALCULATE HAT SIZES AND CAPTURE IN ARRAY ------ //
129 |
130 | let size = options.size.toString(); // stringify if its a number
131 | let allhats = []; // empty array to receive hat polylines
132 | const { frequency, offsets } = options;
133 |
134 | if (offsets?.start || offsets?.end) {
135 | this._buildGhosts({ start: offsets.start, end: offsets.end });
136 | }
137 |
138 | const lineToTrace = this._ghosts || this;
139 |
140 | lineToTrace._parts.forEach((peice, index) => {
141 | // Immutable variables for each peice
142 | const latlngs = peice.map((point) => this._map.layerPointToLatLng(point));
143 |
144 | const totalLength = (() => {
145 | let total = 0;
146 | for (var i = 0; i < peice.length - 1; i++) {
147 | total += this._map.distance(latlngs[i], latlngs[i + 1]);
148 | }
149 | return total;
150 | })();
151 |
152 | // TBD by options if tree below
153 | let derivedLatLngs;
154 | let derivedBearings;
155 | let spacing;
156 | let noOfPoints;
157 |
158 | // Determining latlng and bearing arrays based on frequency choice:
159 | if (!isNaN(frequency)) {
160 | spacing = 1 / frequency;
161 | noOfPoints = frequency;
162 | } else if (isInPercent(frequency)) {
163 | console.error(
164 | 'Error: arrowhead frequency option cannot be given in percent. Try another unit.'
165 | );
166 | } else if (isInMeters(frequency)) {
167 | spacing = frequency.slice(0, frequency.length - 1) / totalLength;
168 | noOfPoints = 1 / spacing;
169 | // round things out for more even spacing:
170 | noOfPoints = Math.floor(noOfPoints);
171 | spacing = 1 / noOfPoints;
172 | } else if (isInPixels(frequency)) {
173 | spacing = (() => {
174 | let chosenFrequency = frequency.slice(0, frequency.length - 2);
175 | let derivedMeters = pixelsToMeters(chosenFrequency, this._map);
176 | return derivedMeters / totalLength;
177 | })();
178 |
179 | noOfPoints = 1 / spacing;
180 |
181 | // round things out for more even spacing:
182 | noOfPoints = Math.floor(noOfPoints);
183 | spacing = 1 / noOfPoints;
184 | }
185 |
186 | if (options.frequency === 'allvertices') {
187 | derivedBearings = (() => {
188 | let bearings = [];
189 | for (var i = 1; i < latlngs.length; i++) {
190 | let bearing =
191 | L.GeometryUtil.angle(
192 | this._map,
193 | latlngs[modulus(i - 1, latlngs.length)],
194 | latlngs[i]
195 | ) + 180;
196 | bearings.push(bearing);
197 | }
198 | return bearings;
199 | })();
200 |
201 | derivedLatLngs = latlngs;
202 | derivedLatLngs.shift();
203 | } else if (options.frequency === 'endonly' && latlngs.length >= 2) {
204 | derivedLatLngs = [latlngs[latlngs.length - 1]];
205 |
206 | derivedBearings = [
207 | L.GeometryUtil.angle(
208 | this._map,
209 | latlngs[latlngs.length - 2],
210 | latlngs[latlngs.length - 1]
211 | ) + 180,
212 | ];
213 | } else {
214 | derivedLatLngs = [];
215 | let interpolatedPoints = [];
216 | for (var i = 0; i < noOfPoints; i++) {
217 | let interpolatedPoint = L.GeometryUtil.interpolateOnLine(
218 | this._map,
219 | latlngs,
220 | spacing * (i + 1)
221 | );
222 |
223 | if (interpolatedPoint) {
224 | interpolatedPoints.push(interpolatedPoint);
225 | derivedLatLngs.push(interpolatedPoint.latLng);
226 | }
227 | }
228 |
229 | derivedBearings = (() => {
230 | let bearings = [];
231 |
232 | for (var i = 0; i < interpolatedPoints.length; i++) {
233 | let bearing = L.GeometryUtil.angle(
234 | this._map,
235 | latlngs[interpolatedPoints[i].predecessor + 1],
236 | latlngs[interpolatedPoints[i].predecessor]
237 | );
238 | bearings.push(bearing);
239 | }
240 | return bearings;
241 | })();
242 | }
243 |
244 | let hats = [];
245 |
246 | // Function to build hats based on index and a given hatsize in meters
247 | const pushHats = (size, localHatOptions = {}) => {
248 | let yawn = localHatOptions.yawn ?? options.yawn;
249 |
250 | let leftWingPoint = L.GeometryUtil.destination(
251 | derivedLatLngs[i],
252 | derivedBearings[i] - yawn / 2,
253 | size
254 | );
255 |
256 | let rightWingPoint = L.GeometryUtil.destination(
257 | derivedLatLngs[i],
258 | derivedBearings[i] + yawn / 2,
259 | size
260 | );
261 |
262 | let hatPoints = [
263 | [leftWingPoint.lat, leftWingPoint.lng],
264 | [derivedLatLngs[i].lat, derivedLatLngs[i].lng],
265 | [rightWingPoint.lat, rightWingPoint.lng],
266 | ];
267 |
268 | let hat = options.fill
269 | ? L.polygon(hatPoints, { ...hatOptions, ...localHatOptions })
270 | : L.polyline(hatPoints, { ...hatOptions, ...localHatOptions });
271 |
272 | hats.push(hat);
273 | }; // pushHats()
274 |
275 | // Function to build hats based on pixel input
276 | const pushHatsFromPixels = (size, localHatOptions = {}) => {
277 | let sizePixels = size.slice(0, size.length - 2);
278 | let yawn = localHatOptions.yawn ?? options.yawn;
279 |
280 | let derivedXY = this._map.latLngToLayerPoint(derivedLatLngs[i]);
281 |
282 | let bearing = derivedBearings[i];
283 |
284 | let thetaLeft = (180 - bearing - yawn / 2) * (Math.PI / 180),
285 | thetaRight = (180 - bearing + yawn / 2) * (Math.PI / 180);
286 |
287 | let dxLeft = sizePixels * Math.sin(thetaLeft),
288 | dyLeft = sizePixels * Math.cos(thetaLeft),
289 | dxRight = sizePixels * Math.sin(thetaRight),
290 | dyRight = sizePixels * Math.cos(thetaRight);
291 |
292 | let leftWingXY = {
293 | x: derivedXY.x + dxLeft,
294 | y: derivedXY.y + dyLeft,
295 | };
296 | let rightWingXY = {
297 | x: derivedXY.x + dxRight,
298 | y: derivedXY.y + dyRight,
299 | };
300 |
301 | let leftWingPoint = this._map.layerPointToLatLng(leftWingXY),
302 | rightWingPoint = this._map.layerPointToLatLng(rightWingXY);
303 |
304 | let hatPoints = [
305 | [leftWingPoint.lat, leftWingPoint.lng],
306 | [derivedLatLngs[i].lat, derivedLatLngs[i].lng],
307 | [rightWingPoint.lat, rightWingPoint.lng],
308 | ];
309 |
310 | let hat = options.fill
311 | ? L.polygon(hatPoints, { ...hatOptions, ...localHatOptions })
312 | : L.polyline(hatPoints, { ...hatOptions, ...localHatOptions });
313 |
314 | hats.push(hat);
315 | }; // pushHatsFromPixels()
316 |
317 | // ------- LOOP THROUGH POINTS IN EACH SEGMENT ---------- //
318 | for (var i = 0; i < derivedLatLngs.length; i++) {
319 | let { perArrowheadOptions, ...globalOptions } = options;
320 |
321 | perArrowheadOptions = perArrowheadOptions ? perArrowheadOptions(i) : {};
322 | perArrowheadOptions = Object.assign(
323 | globalOptions,
324 | definedProps(perArrowheadOptions)
325 | );
326 |
327 | size = perArrowheadOptions.size ?? size;
328 |
329 | // ---- If size is chosen in meters -------------------------
330 | if (isInMeters(size)) {
331 | let hatSize = size.slice(0, size.length - 1);
332 | pushHats(hatSize, perArrowheadOptions);
333 |
334 | // ---- If size is chosen in percent ------------------------
335 | } else if (isInPercent(size)) {
336 | let sizePercent = size.slice(0, size.length - 1);
337 | let hatSize = (() => {
338 | if (
339 | options.frequency === 'endonly' &&
340 | options.proportionalToTotal
341 | ) {
342 | return (totalLength * sizePercent) / 100;
343 | } else {
344 | let averageDistance = totalLength / (peice.length - 1);
345 | return (averageDistance * sizePercent) / 100;
346 | }
347 | })(); // hatsize calculation
348 |
349 | pushHats(hatSize, perArrowheadOptions);
350 |
351 | // ---- If size is chosen in pixels --------------------------
352 | } else if (isInPixels(size)) {
353 | pushHatsFromPixels(options.size, perArrowheadOptions);
354 |
355 | // ---- If size unit is not given -----------------------------
356 | } else {
357 | console.error(
358 | 'Error: Arrowhead size unit not defined. Check your arrowhead options.'
359 | );
360 | } // if else block for Size
361 | } // for loop for each point witin a peice
362 |
363 | allhats.push(...hats);
364 | }); // forEach peice
365 |
366 | // --------- LOOP THROUGH EACH POLYLINE END ---------------- //
367 | // --------------------------------------------------------- //
368 |
369 | let arrowheads = L.layerGroup(allhats);
370 | this._arrowheads = arrowheads;
371 |
372 | return this;
373 | },
374 |
375 | getArrowheads: function () {
376 | if (this._arrowheads) {
377 | return this._arrowheads;
378 | } else {
379 | return console.error(
380 | `Error: You tried to call '.getArrowheads() on a shape that does not have a arrowhead. Use '.arrowheads()' to add a arrowheads before trying to call '.getArrowheads()'`
381 | );
382 | }
383 | },
384 |
385 | /**
386 | * Builds ghost polylines that are clipped versions of the polylines based on the offsets
387 | * If offsets are used, arrowheads are drawn from 'this._ghosts' rather than 'this'
388 | */
389 | _buildGhosts: function ({ start, end }) {
390 | if (start || end) {
391 | let latlngs = this.getLatLngs();
392 |
393 | latlngs = Array.isArray(latlngs[0]) ? latlngs : [latlngs];
394 |
395 | const newLatLngs = latlngs.map((segment) => {
396 | // Get total distance of original latlngs
397 | const totalLength = (() => {
398 | let total = 0;
399 | for (var i = 0; i < segment.length - 1; i++) {
400 | total += this._map.distance(segment[i], segment[i + 1]);
401 | }
402 | return total;
403 | })();
404 |
405 | // Modify latlngs to end at interpolated point
406 | if (start) {
407 | let endOffsetInMeters = (() => {
408 | if (isInMeters(start)) {
409 | return Number(start.slice(0, start.length - 1));
410 | } else if (isInPixels(start)) {
411 | let pixels = Number(start.slice(0, start.length - 2));
412 | return pixelsToMeters(pixels, this._map);
413 | }
414 | })();
415 |
416 | let newStart = L.GeometryUtil.interpolateOnLine(
417 | this._map,
418 | segment,
419 | endOffsetInMeters / totalLength
420 | );
421 |
422 | segment = segment.slice(
423 | newStart.predecessor === -1 ? 1 : newStart.predecessor + 1,
424 | segment.length
425 | );
426 | segment.unshift(newStart.latLng);
427 | }
428 |
429 | if (end) {
430 | let endOffsetInMeters = (() => {
431 | if (isInMeters(end)) {
432 | return Number(end.slice(0, end.length - 1));
433 | } else if (isInPixels(end)) {
434 | let pixels = Number(end.slice(0, end.length - 2));
435 | return pixelsToMeters(pixels, this._map);
436 | }
437 | })();
438 |
439 | let newEnd = L.GeometryUtil.interpolateOnLine(
440 | this._map,
441 | segment,
442 | (totalLength - endOffsetInMeters) / totalLength
443 | );
444 |
445 | segment = segment.slice(0, newEnd.predecessor + 1);
446 | segment.push(newEnd.latLng);
447 | }
448 |
449 | return segment;
450 | });
451 |
452 | this._ghosts = L.polyline(newLatLngs, {
453 | ...this.options,
454 | color: 'rgba(0,0,0,0)',
455 | stroke: 0,
456 | smoothFactor: 0,
457 | interactive: false,
458 | });
459 | this._ghosts.addTo(this._map);
460 | }
461 | },
462 |
463 | deleteArrowheads: function () {
464 | if (this._arrowheads) {
465 | this._arrowheads.remove();
466 | delete this._arrowheads;
467 | delete this._arrowheadOptions;
468 | this._hatsApplied = false;
469 | }
470 | if (this._ghosts) {
471 | this._ghosts.remove();
472 | }
473 | },
474 |
475 | _update: function () {
476 | if (!this._map) {
477 | return;
478 | }
479 |
480 | this._clipPoints();
481 | this._simplifyPoints();
482 | this._updatePath();
483 |
484 | if (this._hatsApplied) {
485 | this.buildVectorHats(this._arrowheadOptions);
486 | this._map.addLayer(this._arrowheads);
487 | }
488 | },
489 |
490 | remove: function () {
491 | if (this._arrowheads) {
492 | this._arrowheads.remove();
493 | }
494 | if (this._ghosts) {
495 | this._ghosts.remove();
496 | }
497 | return this.removeFrom(this._map || this._mapToAdd);
498 | },
499 | });
500 |
501 | L.LayerGroup.include({
502 | removeLayer: function (layer) {
503 | var id = layer in this._layers ? layer : this.getLayerId(layer);
504 |
505 | if (this._map && this._layers[id]) {
506 | if (this._layers[id]._arrowheads) {
507 | this._layers[id]._arrowheads.remove();
508 | }
509 | this._map.removeLayer(this._layers[id]);
510 | }
511 |
512 | delete this._layers[id];
513 |
514 | return this;
515 | },
516 |
517 | onRemove: function (map, layer) {
518 | for (var layer in this._layers) {
519 | if (this._layers[layer]) {
520 | this._layers[layer].remove();
521 | }
522 | }
523 |
524 | this.eachLayer(map.removeLayer, map);
525 | },
526 | });
527 |
528 | L.Map.include({
529 | removeLayer: function (layer) {
530 | var id = L.Util.stamp(layer);
531 |
532 | if (layer._arrowheads) {
533 | layer._arrowheads.remove();
534 | }
535 | if (layer._ghosts) {
536 | layer._ghosts.remove();
537 | }
538 |
539 | if (!this._layers[id]) {
540 | return this;
541 | }
542 |
543 | if (this._loaded) {
544 | layer.onRemove(this);
545 | }
546 |
547 | if (layer.getAttribution && this.attributionControl) {
548 | this.attributionControl.removeAttribution(layer.getAttribution());
549 | }
550 |
551 | delete this._layers[id];
552 |
553 | if (this._loaded) {
554 | this.fire('layerremove', { layer: layer });
555 | layer.fire('remove');
556 | }
557 |
558 | layer._map = layer._mapToAdd = null;
559 |
560 | return this;
561 | },
562 | });
563 |
564 | L.GeoJSON.include({
565 | geometryToLayer: function (geojson, options) {
566 | var geometry = geojson.type === 'Feature' ? geojson.geometry : geojson,
567 | coords = geometry ? geometry.coordinates : null,
568 | layers = [],
569 | pointToLayer = options && options.pointToLayer,
570 | _coordsToLatLng =
571 | (options && options.coordsToLatLng) || L.GeoJSON.coordsToLatLng,
572 | latlng,
573 | latlngs,
574 | i,
575 | len;
576 |
577 | if (!coords && !geometry) {
578 | return null;
579 | }
580 |
581 | switch (geometry.type) {
582 | case 'Point':
583 | latlng = _coordsToLatLng(coords);
584 | return this._pointToLayer(pointToLayer, geojson, latlng, options);
585 |
586 | case 'MultiPoint':
587 | for (i = 0, len = coords.length; i < len; i++) {
588 | latlng = _coordsToLatLng(coords[i]);
589 | layers.push(
590 | this._pointToLayer(pointToLayer, geojson, latlng, options)
591 | );
592 | }
593 | return new L.FeatureGroup(layers);
594 |
595 | case 'LineString':
596 | case 'MultiLineString':
597 | latlngs = L.GeoJSON.coordsToLatLngs(
598 | coords,
599 | geometry.type === 'LineString' ? 0 : 1,
600 | _coordsToLatLng
601 | );
602 | var polyline = new L.Polyline(latlngs, options);
603 | if (options.arrowheads) {
604 | polyline.arrowheads(options.arrowheads);
605 | }
606 | return polyline;
607 |
608 | case 'Polygon':
609 | case 'MultiPolygon':
610 | latlngs = L.GeoJSON.coordsToLatLngs(
611 | coords,
612 | geometry.type === 'Polygon' ? 1 : 2,
613 | _coordsToLatLng
614 | );
615 | return new L.Polygon(latlngs, options);
616 |
617 | case 'GeometryCollection':
618 | for (i = 0, len = geometry.geometries.length; i < len; i++) {
619 | var layer = this.geometryToLayer(
620 | {
621 | geometry: geometry.geometries[i],
622 | type: 'Feature',
623 | properties: geojson.properties,
624 | },
625 | options
626 | );
627 |
628 | if (layer) {
629 | layers.push(layer);
630 | }
631 | }
632 | return new L.FeatureGroup(layers);
633 |
634 | default:
635 | throw new Error('Invalid GeoJSON object.');
636 | }
637 | },
638 |
639 | addData: function (geojson) {
640 | var features = L.Util.isArray(geojson) ? geojson : geojson.features,
641 | i,
642 | len,
643 | feature;
644 |
645 | if (features) {
646 | for (i = 0, len = features.length; i < len; i++) {
647 | // only add this if geometry or geometries are set and not null
648 | feature = features[i];
649 | if (
650 | feature.geometries ||
651 | feature.geometry ||
652 | feature.features ||
653 | feature.coordinates
654 | ) {
655 | this.addData(feature);
656 | }
657 | }
658 | return this;
659 | }
660 |
661 | var options = this.options;
662 |
663 | if (options.filter && !options.filter(geojson)) {
664 | return this;
665 | }
666 |
667 | var layer = this.geometryToLayer(geojson, options);
668 | if (!layer) {
669 | return this;
670 | }
671 | layer.feature = L.GeoJSON.asFeature(geojson);
672 |
673 | layer.defaultOptions = layer.options;
674 | this.resetStyle(layer);
675 |
676 | if (options.onEachFeature) {
677 | options.onEachFeature(geojson, layer);
678 | }
679 |
680 | return this.addLayer(layer);
681 | },
682 |
683 | _pointToLayer: function (pointToLayerFn, geojson, latlng, options) {
684 | return pointToLayerFn
685 | ? pointToLayerFn(geojson, latlng)
686 | : new L.Marker(
687 | latlng,
688 | options && options.markersInheritOptions && options
689 | );
690 | },
691 | });
692 |
--------------------------------------------------------------------------------
7 | 
186 | 
194 | 
222 | 
230 | 
276 | 
289 | 
298 | 
304 | 
310 | 
320 | 
334 | 
343 | 
355 | 
375 | 
391 |