mapping-component-package-jp 0.2.14 → 0.2.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mapping-component-package-jp",
3
- "version": "0.2.14",
3
+ "version": "0.2.16",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -76,8 +76,9 @@ export class IQLCircleFull {
76
76
  var startHeading = 0;
77
77
  var endHeading = 360;
78
78
 
79
+
79
80
  if(isMobile) {
80
- const svgci =
81
+ var svgci =
81
82
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">' +
82
83
  '<path fill="#ffffff" stroke="#303030" stroke-width="1" d="M12 12 m-4,0 a 4,4,0 0,1 8,0 a 4,4 0 0,1 -8,0z" />' +
83
84
  "</svg>";
@@ -108,7 +109,7 @@ export class IQLCircleFull {
108
109
  id: 'centerIcon'
109
110
  };
110
111
 
111
- const svgup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" width="52" height="52">' +
112
+ var svgup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" width="52" height="52">' +
112
113
  '<path fill="#f1a81e" d="M38.853,5.324c-7.098-7.098-18.607-7.098-25.706,0C6.751,11.72,6.031,23.763,11.459,31L26,52l14.541-21C45.969,23.763,45.249,11.72,38.853,5.324z"/>' +
113
114
  '<g transform="translate(13 6) scale(0.8)">' +
114
115
  '<path fill="#ffffff" d="M 15.78,0.05 C 15.71,0.08 14.74,1.03 13.62,2.14 11.13,4.64 11.25,4.35 12.30,5.38 12.95,6.05 13.01,6.09 13.25,6.09 13.48,6.09 13.54,6.05 14.06,5.53 L 14.62,4.96 V 8.01 C 14.62,11.26 14.63,11.39 14.92,11.55 15.09,11.64 16.90,11.64 17.07,11.55 17.36,11.39 17.37,11.26 17.37,8.01 V 4.96 L 17.93,5.53 C 18.45,6.05 18.51,6.09 18.75,6.09 18.98,6.09 19.04,6.05 19.69,5.38 20.74,4.35 20.86,4.64 18.34,2.12 16.21,-0.00 16.10,-0.08 15.78,0.05 Z"/>' +
@@ -117,12 +118,12 @@ export class IQLCircleFull {
117
118
  '<path fill="#ffffff" d="M 14.91,20.44 C 14.63,20.60 14.62,20.75 14.62,23.98 V 27.03 L 14.06,26.46 C 13.54,25.94 13.48,25.90 13.25,25.90 13.01,25.90 12.95,25.94 12.30,26.61 11.25,27.64 11.13,27.35 13.67,29.88 15.71,31.92 15.75,31.96 16,31.96 16.25,31.96 16.28,31.92 18.32,29.88 20.86,27.35 20.74,27.64 19.69,26.61 19.04,25.94 18.98,25.90 18.75,25.90 18.51,25.90 18.45,25.94 17.93,26.46 L 17.37,27.03 V 23.98 C 17.37,20.73 17.36,20.60 17.07,20.44 16.90,20.35 15.07,20.35 14.91,20.44 Z"/>' +
118
119
  '</g></svg>';
119
120
 
120
- handleIconUp = {
121
+ var handleIconUp = {
121
122
  url: "data:image/svg+xml;charset=UTF-8;base64," + btoa(svgup),
122
123
  anchor: new google.maps.Point(26, 52) // Bottom center
123
124
  };
124
125
 
125
- const svgdown = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" width="52" height="52">' +
126
+ var svgdown = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" width="52" height="52">' +
126
127
  '<g transform="rotate(180 26 26)">' + // Rotate entire pin + arrows
127
128
  '<path fill="#f1a81e" d="M38.853,5.324c-7.098-7.098-18.607-7.098-25.706,0C6.751,11.72,6.031,23.763,11.459,31L26,52l14.541-21C45.969,23.763,45.249,11.72,38.853,5.324z"/>' +
128
129
  '<g transform="translate(13 6) scale(0.8)">' +
@@ -132,7 +133,7 @@ export class IQLCircleFull {
132
133
  '<path fill="#ffffff" d="M 14.91,20.44 C 14.63,20.60 14.62,20.75 14.62,23.98 V 27.03 L 14.06,26.46 C 13.54,25.94 13.48,25.90 13.25,25.90 13.01,25.90 12.95,25.94 12.30,26.61 11.25,27.64 11.13,27.35 13.67,29.88 15.71,31.92 15.75,31.96 16,31.96 16.25,31.96 16.28,31.92 18.32,29.88 20.86,27.35 20.74,27.64 19.69,26.61 19.04,25.94 18.98,25.90 18.75,25.90 18.51,25.90 18.45,25.94 17.93,26.46 L 17.37,27.03 V 23.98 C 17.37,20.73 17.36,20.60 17.07,20.44 16.90,20.35 15.07,20.35 14.91,20.44 Z"/>' +
133
134
  '</g></g></svg>';
134
135
 
135
- handleIconDown = {
136
+ var handleIconDown = {
136
137
  url: "data:image/svg+xml;charset=UTF-8;base64," + btoa(svgdown),
137
138
  anchor: new google.maps.Point(26, 0) // Top center
138
139
  };
@@ -271,6 +272,27 @@ export class IQLCircleFull {
271
272
  marker.setIcon(handleIconDown);
272
273
  });
273
274
 
275
+ google.maps.event.addListener(marker, 'dragend', function () {
276
+ if (controlMarkers && controlMarkers.length > 0) {
277
+ controlMarkers.forEach(function(m) {
278
+ if (!m) return;
279
+ if (m.id == 'centerMarker') {
280
+ m.setIcon(centerIcon);
281
+ } else if (m.id == 'sizerTop') {
282
+ m.setIcon(sizerIconTop);
283
+ } else if (m.id == 'sizerRight') {
284
+ m.setIcon(sizerIconRight);
285
+ } else if (m.id == 'sizerBottom') {
286
+ m.setIcon(sizerIconBottom);
287
+ } else if (m.id == 'sizerLeft') {
288
+ m.setIcon(sizerIconLeft);
289
+ }
290
+ });
291
+ }
292
+
293
+ marker.setIcon(centerIcon);
294
+ });
295
+
274
296
  controlMarkers.push(marker);
275
297
 
276
298
  }
@@ -410,7 +432,25 @@ export class IQLCircleFull {
410
432
  });
411
433
 
412
434
  google.maps.event.addListener(sizerTop, 'dragend', function () {
413
- var min = 5; //min radius in m
435
+ this.setIcon(sizerIconTop);
436
+ if (controlMarkers && controlMarkers.length > 0) {
437
+ controlMarkers.forEach(function(m) {
438
+ if (!m) return;
439
+ if (m.id == 'centerMarker') {
440
+ m.setIcon(centerIcon);
441
+ } else if (m.id == 'sizerTop') {
442
+ m.setIcon(sizerIconTop);
443
+ } else if (m.id == 'sizerRight') {
444
+ m.setIcon(sizerIconRight);
445
+ } else if (m.id == 'sizerBottom') {
446
+ m.setIcon(sizerIconBottom);
447
+ } else if (m.id == 'sizerLeft') {
448
+ m.setIcon(sizerIconLeft);
449
+ }
450
+ });
451
+ }
452
+
453
+ var min = 5; //min radius in m
414
454
  var max = 2000; //max radius in m
415
455
 
416
456
  me.set('sizerTop_position', new google.maps.LatLng(me.get('sizerTop_position').lat(), me.get('center').lng())); //this restricts sizerTop to vertical movement
@@ -505,7 +545,25 @@ export class IQLCircleFull {
505
545
  });
506
546
 
507
547
  google.maps.event.addListener(sizerRight, 'dragend', function () {
508
- var min = 5; //min radius in m
548
+ this.setIcon(sizerIconRight);
549
+ if (controlMarkers && controlMarkers.length > 0) {
550
+ controlMarkers.forEach(function(m) {
551
+ if (!m) return;
552
+ if (m.id == 'centerMarker') {
553
+ m.setIcon(centerIcon);
554
+ } else if (m.id == 'sizerTop') {
555
+ m.setIcon(sizerIconTop);
556
+ } else if (m.id == 'sizerRight') {
557
+ m.setIcon(sizerIconRight);
558
+ } else if (m.id == 'sizerBottom') {
559
+ m.setIcon(sizerIconBottom);
560
+ } else if (m.id == 'sizerLeft') {
561
+ m.setIcon(sizerIconLeft);
562
+ }
563
+ });
564
+ }
565
+
566
+ var min = 5; //min radius in m
509
567
  var max = 2000; //max radius in m
510
568
 
511
569
  me.set('sizerRight_position', new google.maps.LatLng(me.get('center').lat(), me.get('sizerRight_position').lng())); //this restricts sizerRight to horizontal movement
@@ -600,7 +658,25 @@ export class IQLCircleFull {
600
658
  });
601
659
 
602
660
  google.maps.event.addListener(sizerBottom, 'dragend', function () {
603
- var min = 5;
661
+ this.setIcon(sizerIconBottom);
662
+ if (controlMarkers && controlMarkers.length > 0) {
663
+ controlMarkers.forEach(function(m) {
664
+ if (!m) return;
665
+ if (m.id == 'centerMarker') {
666
+ m.setIcon(centerIcon);
667
+ } else if (m.id == 'sizerTop') {
668
+ m.setIcon(sizerIconTop);
669
+ } else if (m.id == 'sizerRight') {
670
+ m.setIcon(sizerIconRight);
671
+ } else if (m.id == 'sizerBottom') {
672
+ m.setIcon(sizerIconBottom);
673
+ } else if (m.id == 'sizerLeft') {
674
+ m.setIcon(sizerIconLeft);
675
+ }
676
+ });
677
+ }
678
+
679
+ var min = 5;
604
680
  var max = 2000;
605
681
 
606
682
  me.set('sizerBottom_position', new google.maps.LatLng(me.get('sizerBottom_position').lat(), me.get('center').lng())); //this restricts sizerBottom to vertical movement
@@ -695,7 +771,25 @@ export class IQLCircleFull {
695
771
  });
696
772
 
697
773
  google.maps.event.addListener(sizerLeft, 'dragend', function () {
698
- var min = 5; //min radius in m
774
+ this.setIcon(sizerIconLeft);
775
+ if (controlMarkers && controlMarkers.length > 0) {
776
+ controlMarkers.forEach(function(m) {
777
+ if (!m) return;
778
+ if (m.id == 'centerMarker') {
779
+ m.setIcon(centerIcon);
780
+ } else if (m.id == 'sizerTop') {
781
+ m.setIcon(sizerIconTop);
782
+ } else if (m.id == 'sizerRight') {
783
+ m.setIcon(sizerIconRight);
784
+ } else if (m.id == 'sizerBottom') {
785
+ m.setIcon(sizerIconBottom);
786
+ } else if (m.id == 'sizerLeft') {
787
+ m.setIcon(sizerIconLeft);
788
+ }
789
+ });
790
+ }
791
+
792
+ var min = 5; //min radius in m
699
793
  var max = 2000; //max radius in m
700
794
 
701
795
  me.set('sizerLeft_position', new google.maps.LatLng(me.get('center').lat(), me.get('sizerLeft_position').lng())); //this restricts sizerLeft to horizontal movement
@@ -76,7 +76,7 @@ export class IQLCircleSector {
76
76
  var endHeading = 120;
77
77
 
78
78
  if(isMobile) {
79
- const svgci =
79
+ var svgci =
80
80
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">' +
81
81
  '<path fill="#ffffff" stroke="#303030" stroke-width="1" d="M12 12 m-4,0 a 4,4,0 0,1 8,0 a 4,4 0 0,1 -8,0z" />' +
82
82
  "</svg>";
@@ -107,7 +107,7 @@ export class IQLCircleSector {
107
107
  id: 'centerIcon'
108
108
  };
109
109
 
110
- const svgup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" width="52" height="52">' +
110
+ var svgup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" width="52" height="52">' +
111
111
  '<path fill="#f1a81e" d="M38.853,5.324c-7.098-7.098-18.607-7.098-25.706,0C6.751,11.72,6.031,23.763,11.459,31L26,52l14.541-21C45.969,23.763,45.249,11.72,38.853,5.324z"/>' +
112
112
  '<g transform="translate(13 6) scale(0.8)">' +
113
113
  '<path fill="#ffffff" d="M 15.78,0.05 C 15.71,0.08 14.74,1.03 13.62,2.14 11.13,4.64 11.25,4.35 12.30,5.38 12.95,6.05 13.01,6.09 13.25,6.09 13.48,6.09 13.54,6.05 14.06,5.53 L 14.62,4.96 V 8.01 C 14.62,11.26 14.63,11.39 14.92,11.55 15.09,11.64 16.90,11.64 17.07,11.55 17.36,11.39 17.37,11.26 17.37,8.01 V 4.96 L 17.93,5.53 C 18.45,6.05 18.51,6.09 18.75,6.09 18.98,6.09 19.04,6.05 19.69,5.38 20.74,4.35 20.86,4.64 18.34,2.12 16.21,-0.00 16.10,-0.08 15.78,0.05 Z"/>' +
@@ -116,12 +116,12 @@ export class IQLCircleSector {
116
116
  '<path fill="#ffffff" d="M 14.91,20.44 C 14.63,20.60 14.62,20.75 14.62,23.98 V 27.03 L 14.06,26.46 C 13.54,25.94 13.48,25.90 13.25,25.90 13.01,25.90 12.95,25.94 12.30,26.61 11.25,27.64 11.13,27.35 13.67,29.88 15.71,31.92 15.75,31.96 16,31.96 16.25,31.96 16.28,31.92 18.32,29.88 20.86,27.35 20.74,27.64 19.69,26.61 19.04,25.94 18.98,25.90 18.75,25.90 18.51,25.90 18.45,25.94 17.93,26.46 L 17.37,27.03 V 23.98 C 17.37,20.73 17.36,20.60 17.07,20.44 16.90,20.35 15.07,20.35 14.91,20.44 Z"/>' +
117
117
  '</g></svg>';
118
118
 
119
- handleIconUp = {
119
+ var handleIconUp = {
120
120
  url: "data:image/svg+xml;charset=UTF-8;base64," + btoa(svgup),
121
121
  anchor: new google.maps.Point(26, 52) // Bottom center
122
122
  };
123
123
 
124
- const svgdown = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" width="52" height="52">' +
124
+ var svgdown = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" width="52" height="52">' +
125
125
  '<g transform="rotate(180 26 26)">' + // Rotate entire pin + arrows
126
126
  '<path fill="#f1a81e" d="M38.853,5.324c-7.098-7.098-18.607-7.098-25.706,0C6.751,11.72,6.031,23.763,11.459,31L26,52l14.541-21C45.969,23.763,45.249,11.72,38.853,5.324z"/>' +
127
127
  '<g transform="translate(13 6) scale(0.8)">' +
@@ -131,12 +131,12 @@ export class IQLCircleSector {
131
131
  '<path fill="#ffffff" d="M 14.91,20.44 C 14.63,20.60 14.62,20.75 14.62,23.98 V 27.03 L 14.06,26.46 C 13.54,25.94 13.48,25.90 13.25,25.90 13.01,25.90 12.95,25.94 12.30,26.61 11.25,27.64 11.13,27.35 13.67,29.88 15.71,31.92 15.75,31.96 16,31.96 16.25,31.96 16.28,31.92 18.32,29.88 20.86,27.35 20.74,27.64 19.69,26.61 19.04,25.94 18.98,25.90 18.75,25.90 18.51,25.90 18.45,25.94 17.93,26.46 L 17.37,27.03 V 23.98 C 17.37,20.73 17.36,20.60 17.07,20.44 16.90,20.35 15.07,20.35 14.91,20.44 Z"/>' +
132
132
  '</g></g></svg>';
133
133
 
134
- handleIconDown = {
134
+ var handleIconDown = {
135
135
  url: "data:image/svg+xml;charset=UTF-8;base64," + btoa(svgdown),
136
136
  anchor: new google.maps.Point(26, 0) // Top center
137
137
  };
138
138
 
139
- const svgpi =
139
+ var svgpi =
140
140
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">' +
141
141
  '<path fill="#ffffff" stroke="#303030" stroke-width="1" d="M12 12 m-4,0 a 4,4,0 0,1 8,0 a 4,4 0 0,1 -8,0z" />' +
142
142
  "</svg>";
@@ -83,7 +83,7 @@ export class IQLCircleSegment {
83
83
 
84
84
  if(isMobile) {
85
85
 
86
- const svgci =
86
+ var svgci =
87
87
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">' +
88
88
  '<path fill="#ffffff" stroke="#303030" stroke-width="1" d="M12 12 m-4,0 a 4,4,0 0,1 8,0 a 4,4 0 0,1 -8,0z" />' +
89
89
  "</svg>";
@@ -114,7 +114,7 @@ export class IQLCircleSegment {
114
114
  id: 'centerIcon'
115
115
  };
116
116
 
117
- const svgup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" width="52" height="52">' +
117
+ var svgup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" width="52" height="52">' +
118
118
  '<path fill="#f1a81e" d="M38.853,5.324c-7.098-7.098-18.607-7.098-25.706,0C6.751,11.72,6.031,23.763,11.459,31L26,52l14.541-21C45.969,23.763,45.249,11.72,38.853,5.324z"/>' +
119
119
  '<g transform="translate(13 6) scale(0.8)">' +
120
120
  '<path fill="#ffffff" d="M 15.78,0.05 C 15.71,0.08 14.74,1.03 13.62,2.14 11.13,4.64 11.25,4.35 12.30,5.38 12.95,6.05 13.01,6.09 13.25,6.09 13.48,6.09 13.54,6.05 14.06,5.53 L 14.62,4.96 V 8.01 C 14.62,11.26 14.63,11.39 14.92,11.55 15.09,11.64 16.90,11.64 17.07,11.55 17.36,11.39 17.37,11.26 17.37,8.01 V 4.96 L 17.93,5.53 C 18.45,6.05 18.51,6.09 18.75,6.09 18.98,6.09 19.04,6.05 19.69,5.38 20.74,4.35 20.86,4.64 18.34,2.12 16.21,-0.00 16.10,-0.08 15.78,0.05 Z"/>' +
@@ -123,12 +123,12 @@ export class IQLCircleSegment {
123
123
  '<path fill="#ffffff" d="M 14.91,20.44 C 14.63,20.60 14.62,20.75 14.62,23.98 V 27.03 L 14.06,26.46 C 13.54,25.94 13.48,25.90 13.25,25.90 13.01,25.90 12.95,25.94 12.30,26.61 11.25,27.64 11.13,27.35 13.67,29.88 15.71,31.92 15.75,31.96 16,31.96 16.25,31.96 16.28,31.92 18.32,29.88 20.86,27.35 20.74,27.64 19.69,26.61 19.04,25.94 18.98,25.90 18.75,25.90 18.51,25.90 18.45,25.94 17.93,26.46 L 17.37,27.03 V 23.98 C 17.37,20.73 17.36,20.60 17.07,20.44 16.90,20.35 15.07,20.35 14.91,20.44 Z"/>' +
124
124
  '</g></svg>';
125
125
 
126
- handleIconUp = {
126
+ var handleIconUp = {
127
127
  url: "data:image/svg+xml;charset=UTF-8;base64," + btoa(svgup),
128
128
  anchor: new google.maps.Point(26, 52) // Bottom center
129
129
  };
130
130
 
131
- const svgdown = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" width="52" height="52">' +
131
+ var svgdown = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" width="52" height="52">' +
132
132
  '<g transform="rotate(180 26 26)">' + // Rotate entire pin + arrows
133
133
  '<path fill="#f1a81e" d="M38.853,5.324c-7.098-7.098-18.607-7.098-25.706,0C6.751,11.72,6.031,23.763,11.459,31L26,52l14.541-21C45.969,23.763,45.249,11.72,38.853,5.324z"/>' +
134
134
  '<g transform="translate(13 6) scale(0.8)">' +
@@ -138,12 +138,12 @@ export class IQLCircleSegment {
138
138
  '<path fill="#ffffff" d="M 14.91,20.44 C 14.63,20.60 14.62,20.75 14.62,23.98 V 27.03 L 14.06,26.46 C 13.54,25.94 13.48,25.90 13.25,25.90 13.01,25.90 12.95,25.94 12.30,26.61 11.25,27.64 11.13,27.35 13.67,29.88 15.71,31.92 15.75,31.96 16,31.96 16.25,31.96 16.28,31.92 18.32,29.88 20.86,27.35 20.74,27.64 19.69,26.61 19.04,25.94 18.98,25.90 18.75,25.90 18.51,25.90 18.45,25.94 17.93,26.46 L 17.37,27.03 V 23.98 C 17.37,20.73 17.36,20.60 17.07,20.44 16.90,20.35 15.07,20.35 14.91,20.44 Z"/>' +
139
139
  '</g></g></svg>';
140
140
 
141
- handleIconDown = {
141
+ var handleIconDown = {
142
142
  url: "data:image/svg+xml;charset=UTF-8;base64," + btoa(svgdown),
143
143
  anchor: new google.maps.Point(26, 0) // Top center
144
144
  };
145
145
 
146
- const svgpi =
146
+ var svgpi =
147
147
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">' +
148
148
  '<path fill="#ffffff" stroke="#303030" stroke-width="1" d="M12 12 m-4,0 a 4,4,0 0,1 8,0 a 4,4 0 0,1 -8,0z" />' +
149
149
  "</svg>";