map-gl-compass-pro
Version:
Compass pro for react-map-gl based projects
151 lines (150 loc) • 16.7 kB
JavaScript
import { useRef as x, useEffect as W } from "react";
import { useControl as y } from "react-map-gl";
var M = (e, t, A) => {
if (!t.has(e))
throw TypeError("Cannot " + A);
}, i = (e, t, A) => (M(e, t, "read from private field"), A ? A.call(e) : t.get(e)), Q = (e, t, A) => {
if (t.has(e))
throw TypeError("Cannot add the same private member more than once");
t instanceof WeakSet ? t.add(e) : t.set(e, A);
}, c = (e, t, A, s) => (M(e, t, "write to private field"), s ? s.call(e, A) : t.set(e, A), A), b = (e, t, A) => (M(e, t, "access private method"), A);
const B = "#FFF", S = "#B30000";
function w(e = !1) {
const t = document.createElementNS("http://www.w3.org/2000/svg", "svg"), A = document.createElementNS(
"http://www.w3.org/2000/svg",
"path"
);
A.setAttribute("stroke-linecap", "round"), A.setAttribute("stroke-linejoin", "round"), A.setAttribute("stroke-width", "2");
const [s, n] = e ? [S, B] : [B, S];
return A.setAttribute("stroke", s), A.setAttribute("fill", n), [t, A];
}
function N() {
const [e, t] = w();
return e.setAttribute("viewBox", "0 0 77.539 64.356"), t.setAttribute(
"d",
"M 12.451 51.904 L 12.451 10.303 A 18.812 18.812 0 0 0 11.363 8.72 Q 10.794 7.983 10.208 7.401 A 10.399 10.399 0 0 0 9.814 7.031 A 13.161 13.161 0 0 0 8.469 5.972 A 9.78 9.78 0 0 0 7.08 5.176 Q 5.713 4.541 3.418 3.76 A 117.494 117.494 0 0 1 2.38 3.409 Q 1.259 3.023 0.459 2.718 A 30.822 30.822 0 0 1 0 2.539 L 0 0 L 17.041 0 L 62.988 47.51 L 62.988 16.797 A 28.296 28.296 0 0 0 62.571 11.841 A 22.919 22.919 0 0 0 61.67 8.35 Q 61.133 6.787 60.205 5.908 A 6.22 6.22 0 0 0 59.052 5.037 A 5.288 5.288 0 0 0 58.203 4.639 A 16.833 16.833 0 0 0 57.46 4.39 Q 56.564 4.111 55.322 3.809 A 5.136 5.136 0 0 0 55.181 3.764 Q 54.835 3.66 53.983 3.433 A 147.809 147.809 0 0 0 53.833 3.394 A 12.206 12.206 0 0 1 52.423 2.93 A 10.124 10.124 0 0 1 51.66 2.588 A 23.426 23.426 0 0 1 51.807 0 L 77.539 0 L 77.539 2.637 A 56.956 56.956 0 0 1 74.707 3.857 Q 72.02 5.035 70.581 5.908 A 9.999 9.999 0 0 0 69.775 6.445 A 4.613 4.613 0 0 0 68.536 7.884 Q 68.193 8.488 67.959 9.247 A 8.92 8.92 0 0 0 67.847 9.644 A 12.95 12.95 0 0 0 67.585 10.993 Q 67.272 13.126 67.236 16.748 A 177.965 177.965 0 0 1 67.23 18.143 Q 67.218 19.735 67.179 21.964 A 801.455 801.455 0 0 1 67.139 24.121 Q 67.091 27.742 67.043 33.107 A 3762.812 3762.812 0 0 0 67.041 33.374 A 1129.34 1129.34 0 0 0 67.011 37.795 Q 67.002 39.747 66.997 41.883 A 1997.976 1997.976 0 0 0 66.992 46.338 A 49.853 49.853 0 0 0 67.029 48.145 Q 67.104 50.209 67.336 53.104 A 228.997 228.997 0 0 0 67.578 55.908 Q 68.066 61.279 68.115 64.014 A 4.83 4.83 0 0 1 67.344 64.222 Q 66.947 64.297 66.484 64.33 A 10.775 10.775 0 0 1 65.723 64.355 Q 64.16 64.355 62.939 64.014 A 169.998 169.998 0 0 0 59.18 59.583 A 220.244 220.244 0 0 0 54.932 54.883 L 16.357 14.307 L 16.357 48.584 A 27.097 27.097 0 0 0 17.188 55.176 A 6.052 6.052 0 0 0 17.59 56.357 Q 17.948 57.124 18.507 57.652 A 3.789 3.789 0 0 0 18.604 57.739 A 6.57 6.57 0 0 0 20.094 58.739 A 5.9 5.9 0 0 0 20.825 59.033 A 15.922 15.922 0 0 0 21.656 59.277 Q 22.596 59.528 23.887 59.779 A 53.024 53.024 0 0 0 24.072 59.814 A 25.798 25.798 0 0 1 25.549 60.085 Q 26.966 60.39 27.881 60.796 A 5.868 5.868 0 0 1 28.271 60.986 A 23.426 23.426 0 0 1 28.125 63.574 L 0.586 63.574 Q 0.511 62.901 0.494 61.713 A 52.75 52.75 0 0 1 0.488 60.938 L 2.734 60.352 A 64.338 64.338 0 0 0 4.561 59.868 Q 6.432 59.341 7.69 58.838 A 7.623 7.623 0 0 0 10.521 56.846 A 9.14 9.14 0 0 0 10.864 56.445 Q 12.012 55.026 12.357 52.714 A 12.83 12.83 0 0 0 12.451 51.904 Z"
), e.appendChild(t), e;
}
function Z() {
const [e, t] = w(!0);
return e.setAttribute("viewBox", "0 0 103.662 64.6"), t.setAttribute(
"d",
"M 37.5 46.338 L 50.635 11.279 L 49.463 8.301 A 161.238 161.238 0 0 0 49.094 7.385 Q 48.735 6.504 48.467 5.883 A 35.404 35.404 0 0 0 48.242 5.371 A 2.499 2.499 0 0 0 47.887 5.138 Q 46.977 4.624 44.328 3.599 A 108.224 108.224 0 0 0 44.238 3.564 A 212.21 212.21 0 0 1 42.99 3.061 Q 41.26 2.356 40.381 1.953 Q 39.409 1.508 39.243 1.129 A 0.379 0.379 0 0 1 39.209 0.977 A 0.291 0.291 0 0 1 39.215 0.925 Q 39.239 0.8 39.355 0.488 Q 39.495 0.116 39.546 0.01 A 0.663 0.663 0 0 1 39.551 0 L 70.898 0 A 9.811 9.811 0 0 0 70.927 0.085 Q 70.972 0.216 71.05 0.435 A 74.354 74.354 0 0 0 71.069 0.488 Q 71.189 0.823 71.191 0.97 A 0.366 0.366 0 0 1 71.191 0.977 Q 71.191 1.974 70.363 2.356 A 2.042 2.042 0 0 1 70.142 2.441 Q 69.328 2.706 67.794 2.883 A 33.949 33.949 0 0 1 66.846 2.979 Q 64.355 3.174 63.086 3.638 A 2.019 2.019 0 0 0 62.37 4.069 Q 61.981 4.442 61.865 5.031 A 2.784 2.784 0 0 0 61.816 5.566 A 2.951 2.951 0 0 0 61.902 6.077 Q 62.503 8.752 67.31 23.877 A 3763.265 3763.265 0 0 0 69.534 30.855 Q 73.187 42.273 74.561 46.24 L 75.928 42.09 A 2902.184 2902.184 0 0 0 78.606 34.054 Q 86.565 10.046 87.282 6.183 A 3.453 3.453 0 0 0 87.354 5.615 A 2.399 2.399 0 0 0 87.18 4.681 Q 86.93 4.083 86.317 3.708 A 3.116 3.116 0 0 0 85.889 3.491 A 9.626 9.626 0 0 0 84.847 3.133 Q 83.544 2.76 81.592 2.49 Q 80.42 2.344 79.297 2.1 A 10.95 10.95 0 0 1 78.643 1.937 Q 77.981 1.75 77.546 1.517 A 3.312 3.312 0 0 1 77.539 1.514 L 77.246 0.977 L 77.539 0 L 102.783 0 A 0.587 0.587 0 0 1 102.927 0.02 Q 103.057 0.053 103.218 0.141 A 2.179 2.179 0 0 1 103.271 0.171 Q 103.564 0.342 103.662 0.537 A 0.916 0.916 0 0 1 103.364 1.208 Q 103.083 1.484 102.539 1.685 Q 101.686 2 100.043 2.386 A 62.893 62.893 0 0 1 98.926 2.637 Q 95.345 3.401 93.211 4.281 A 15.831 15.831 0 0 0 93.115 4.321 A 6.059 6.059 0 0 0 91.735 5.113 A 4.366 4.366 0 0 0 90.283 7.08 A 56.573 56.573 0 0 0 89.804 8.493 Q 89.568 9.218 89.324 10.024 A 95.509 95.509 0 0 0 89.16 10.571 A 3902.171 3902.171 0 0 0 88.889 11.488 Q 88.553 12.623 88.371 13.24 A 428.154 428.154 0 0 0 88.33 13.379 A 50.911 50.911 0 0 1 88.19 13.928 Q 88.051 14.457 87.939 14.83 A 11.279 11.279 0 0 1 87.842 15.137 L 73.242 63.525 A 1.168 1.168 0 0 1 72.583 64.258 Q 72.07 64.502 71.191 64.502 Q 70.603 64.502 70.167 64.391 A 2.455 2.455 0 0 1 69.897 64.307 Q 69.385 64.111 69.092 63.525 A 14.726 14.726 0 0 1 68.516 62.238 Q 67.966 60.854 67.416 58.869 A 56.712 56.712 0 0 1 67.236 58.203 L 66.357 55.42 L 52.49 15.039 L 39.844 51.416 A 26.576 26.576 0 0 0 39.603 52.121 Q 39.209 53.32 38.623 55.371 A 175.256 175.256 0 0 1 38.177 56.827 Q 37.737 58.243 37.374 59.309 A 51.596 51.596 0 0 1 37.061 60.205 Q 36.426 61.963 35.645 63.525 A 2.252 2.252 0 0 1 35.42 63.913 Q 35.184 64.236 34.863 64.38 Q 34.489 64.548 33.943 64.588 A 4.865 4.865 0 0 1 33.594 64.6 Q 32.129 64.6 31.104 62.549 A 25.703 25.703 0 0 1 30.334 60.846 Q 29.954 59.922 29.573 58.836 A 56.607 56.607 0 0 1 29.053 57.275 L 28.564 55.713 L 21.875 37.793 A 2379.289 2379.289 0 0 0 10.889 8.496 A 7.493 7.493 0 0 0 10.103 6.985 A 5.538 5.538 0 0 0 8.618 5.493 A 13.254 13.254 0 0 0 7.36 4.753 Q 6.705 4.41 5.926 4.077 A 29.254 29.254 0 0 0 4.639 3.564 Q 3.109 3.001 2.177 2.57 A 13.379 13.379 0 0 1 1.807 2.393 A 6.842 6.842 0 0 1 0.21 1.276 A 7.813 7.813 0 0 1 0 1.074 L 0.342 0 L 31.738 0 Q 31.785 0.141 31.878 0.44 A 58.352 58.352 0 0 1 31.885 0.464 A 3.107 3.107 0 0 1 31.936 0.65 Q 31.982 0.842 31.982 0.977 A 1.529 1.529 0 0 1 31.88 1.552 Q 31.721 1.947 31.315 2.184 A 1.956 1.956 0 0 1 31.03 2.319 A 6.485 6.485 0 0 1 30.381 2.526 Q 29.716 2.704 28.776 2.846 A 26.94 26.94 0 0 1 28.174 2.93 A 22.418 22.418 0 0 0 26.848 3.133 Q 25.451 3.394 24.585 3.784 A 2.085 2.085 0 0 0 23.779 4.398 Q 23.472 4.791 23.38 5.349 A 3.126 3.126 0 0 0 23.34 5.859 A 2.105 2.105 0 0 0 23.422 6.252 Q 23.912 8.085 27.335 17.83 A 1798.185 1798.185 0 0 0 28.589 21.387 Q 32.198 31.592 35.056 39.558 A 2346.226 2346.226 0 0 0 37.5 46.338 Z"
), e.appendChild(t), t.setAttribute("transform", "rotate(-90)"), t.setAttribute("transform-origin", "center"), e;
}
function D() {
const [e, t] = w(!0);
return e.setAttribute("viewBox", "0 0 60.596 64.648"), t.setAttribute(
"d",
"M 60.596 47.363 L 57.373 64.502 A 8.462 8.462 0 0 1 55.811 64.648 A 8.708 8.708 0 0 1 55.215 64.625 Q 54.628 64.585 53.814 64.472 A 40.799 40.799 0 0 1 53.027 64.355 Q 51.505 64.115 50.574 64.072 A 8.215 8.215 0 0 0 50.195 64.063 L 0.098 64.063 L 0 61.67 Q 1.514 60.84 2.808 60.474 A 21.829 21.829 0 0 1 4.348 60.1 A 27.832 27.832 0 0 1 5.664 59.863 A 16.889 16.889 0 0 0 6.68 59.656 Q 7.615 59.432 8.216 59.146 A 3.736 3.736 0 0 0 8.521 58.984 A 2.141 2.141 0 0 0 9.128 58.422 Q 9.603 57.793 9.912 56.665 A 10.002 10.002 0 0 0 10.147 55.508 Q 10.4 53.805 10.4 51.025 L 10.4 14.063 Q 10.4 10.254 9.79 8.447 Q 9.36 7.173 8.65 6.446 A 3.227 3.227 0 0 0 8.008 5.933 Q 7.101 5.385 5.257 4.763 A 40.155 40.155 0 0 0 4.102 4.395 Q 3.662 4.248 2.417 3.857 A 28.326 28.326 0 0 1 0 2.979 L 0.098 0.488 L 49.902 0.488 A 11.107 11.107 0 0 0 50.71 0.457 A 14.362 14.362 0 0 0 51.392 0.391 Q 52.134 0.301 52.482 0.252 A 16.145 16.145 0 0 0 52.539 0.244 Q 53.875 0.021 54.968 0.002 A 11.626 11.626 0 0 1 55.176 0 Q 56.111 0 56.843 0.163 A 5.38 5.38 0 0 1 56.982 0.195 L 56.982 15.381 L 54.443 15.479 A 7.595 7.595 0 0 1 53.076 13.623 Q 52.539 12.598 51.855 10.938 Q 51.216 9.339 50.587 8.2 A 12.24 12.24 0 0 0 49.927 7.129 A 5.015 5.015 0 0 0 48.191 5.595 A 6.787 6.787 0 0 0 47.119 5.127 Q 45.029 4.455 42.168 4.154 A 41.31 41.31 0 0 0 40.332 4.004 Q 36.849 3.794 32.429 3.765 A 220.557 220.557 0 0 0 30.957 3.76 A 144.743 144.743 0 0 0 27.308 3.803 Q 23.578 3.897 21.094 4.199 Q 20.898 6.397 20.898 9.229 L 20.898 29.053 L 34.961 29.053 A 40.674 40.674 0 0 0 36.976 29.006 Q 39.354 28.888 40.723 28.467 A 6.946 6.946 0 0 0 42.225 27.814 A 5.259 5.259 0 0 0 43.677 26.563 A 13.541 13.541 0 0 0 44.252 25.775 Q 45.19 24.402 46.582 21.875 L 47.314 20.557 L 50.098 20.557 L 50.098 41.504 L 47.314 41.65 A 22.988 22.988 0 0 0 45.963 38.653 Q 45.133 37.131 44.138 35.965 A 12.434 12.434 0 0 0 43.335 35.107 A 8.115 8.115 0 0 0 39.183 32.981 A 11.759 11.759 0 0 0 36.865 32.764 L 20.898 32.764 L 20.898 49.219 A 35.072 35.072 0 0 0 20.99 51.856 Q 21.183 54.405 21.781 56.045 A 7.598 7.598 0 0 0 22.095 56.787 A 6.923 6.923 0 0 0 23.192 58.429 A 5.297 5.297 0 0 0 25.562 59.937 A 12.364 12.364 0 0 0 27.169 60.31 Q 28.867 60.597 31.237 60.638 A 46.567 46.567 0 0 0 32.031 60.645 L 36.816 60.645 Q 42.969 60.645 47.437 59.253 A 10.67 10.67 0 0 0 53.916 53.83 A 13.477 13.477 0 0 0 54.053 53.564 L 54.736 52.051 Q 55.615 50.147 56.152 49.194 A 9.049 9.049 0 0 1 57.123 47.807 A 10.614 10.614 0 0 1 57.52 47.363 L 60.596 47.363 Z"
), t.setAttribute("transform", "rotate(90)"), t.setAttribute("transform-origin", "center"), e.appendChild(t), e;
}
function F() {
const [e, t] = w(!0);
return e.setAttribute("viewBox", "0 0 44.972 66.065"), t.setAttribute(
"d",
"M 0 45.264 L 2.881 45.166 Q 3.369 45.996 3.687 46.875 Q 3.9 47.466 4.146 48.299 A 49.579 49.579 0 0 1 4.395 49.17 Q 4.59 49.658 4.736 50.293 Q 6.445 55.908 11.23 58.936 A 19.64 19.64 0 0 0 20.651 61.916 A 24.019 24.019 0 0 0 22.168 61.963 A 17.689 17.689 0 0 0 28.442 60.816 A 12.456 12.456 0 0 0 32.131 58.684 A 11.561 11.561 0 0 0 33.472 57.349 A 8.235 8.235 0 0 0 35.426 52.424 A 10.627 10.627 0 0 0 35.449 51.709 A 8.068 8.068 0 0 0 34.06 47.206 A 10.517 10.517 0 0 0 33.423 46.338 A 20.995 20.995 0 0 0 30.005 43.023 A 25.207 25.207 0 0 0 28.394 41.87 A 76.818 76.818 0 0 0 26.295 40.541 Q 23.912 39.081 20.594 37.229 A 261.77 261.77 0 0 0 20.117 36.963 A 185.123 185.123 0 0 1 15.963 34.607 Q 12.53 32.598 10.059 30.908 Q 6.201 28.272 3.516 24.634 A 13.504 13.504 0 0 1 0.83 16.406 A 16.46 16.46 0 0 1 1.378 12.055 A 12.586 12.586 0 0 1 4.028 7.056 A 18.04 18.04 0 0 1 11.008 2.137 A 21.731 21.731 0 0 1 12.231 1.685 A 32.905 32.905 0 0 1 22.759 0 A 36.915 36.915 0 0 1 22.803 0 A 39.805 39.805 0 0 1 32.349 1.172 Q 37.109 2.344 41.406 4.541 L 42.041 18.457 L 39.014 18.457 Q 38.428 17.334 37.646 14.893 L 37.158 13.477 A 14.074 14.074 0 0 0 34.631 8.95 A 12.931 12.931 0 0 0 31.421 6.226 Q 27.344 3.76 22.021 3.76 A 17.152 17.152 0 0 0 17.112 4.496 A 19.541 19.541 0 0 0 16.504 4.688 A 12.066 12.066 0 0 0 13.378 6.238 A 10.754 10.754 0 0 0 11.841 7.544 A 6.54 6.54 0 0 0 9.961 12.217 A 8.472 8.472 0 0 0 9.961 12.305 Q 9.961 14.942 11.914 17.237 A 20.776 20.776 0 0 0 14.877 20.07 A 25.555 25.555 0 0 0 16.748 21.411 A 79.489 79.489 0 0 0 18.763 22.679 Q 21.053 24.077 24.248 25.867 A 275.413 275.413 0 0 0 24.707 26.123 Q 29.07 28.551 32.32 30.593 A 88.308 88.308 0 0 1 35.229 32.495 A 28.208 28.208 0 0 1 42.114 39.16 A 14.599 14.599 0 0 1 44.971 47.998 A 18.27 18.27 0 0 1 44.371 52.787 A 14.174 14.174 0 0 1 41.602 58.179 A 19.308 19.308 0 0 1 33.871 63.784 A 23.129 23.129 0 0 1 32.886 64.16 A 33.479 33.479 0 0 1 21.908 66.063 A 37.691 37.691 0 0 1 21.533 66.065 A 48.998 48.998 0 0 1 15.236 65.64 A 62.689 62.689 0 0 1 9.985 64.722 Q 5.257 63.694 1.916 62.079 A 21.53 21.53 0 0 1 0 61.035 L 0 45.264 Z"
), e.appendChild(t), t.setAttribute("transform", "rotate(180)"), t.setAttribute("transform-origin", "center"), e;
}
const f = {
west: Z(),
east: D(),
south: F(),
north: N()
};
function g(e) {
return e > -135 && e < -45 ? f.east : e >= -45 && e < 45 ? f.north : e >= 45 && e < 135 ? f.west : f.south;
}
var h, d, m, l, r, L, v, C, k, P, E, p;
class R {
constructor({
size: t = "md",
visualizePitch: A = !1,
displayDirection: s = !1,
onClick: n
} = {}) {
Q(this, v), Q(this, k), Q(this, h, void 0), Q(this, d, void 0), Q(this, m, void 0), Q(this, l, void 0), Q(this, r, void 0), Q(this, L, void 0), Q(this, E, () => {
var o;
i(this, L) ? i(this, L).call(this) : (o = i(this, h)) == null || o.resetNorthPitch();
}), Q(this, p, () => {
if (!i(this, h) || !i(this, r))
return;
const o = -1 * i(this, h).getBearing();
let u = `rotate(${o}deg)`;
if (i(this, m)) {
const a = i(this, h).getPitch();
u += ` rotateX(${a}deg)`;
}
if (i(this, r).style.transform = u, i(this, l)) {
const a = i(this, r).lastElementChild;
if (!a)
return;
const z = g(o);
a.firstChild ? a.replaceChild(z, a.firstChild) : a.appendChild(z);
}
}), c(this, d, t), c(this, m, A), c(this, l, s), c(this, L, n);
}
onAdd(t) {
return c(this, h, t), t.on("rotate", i(this, p)), t.on("pitch", i(this, p)), b(this, k, P).call(this);
}
onRemove(t) {
t.off("rotate", i(this, p)), t.off("pitch", i(this, p));
}
getDefaultPosition() {
return "bottom-left";
}
changeSize(t) {
var A, s, n;
c(this, d, t), (A = i(this, r)) == null || A.setAttribute("data-size", i(this, d)), (n = (s = i(this, r)) == null ? void 0 : s.parentElement) == null || n.setAttribute("data-size", i(this, d));
}
toggle() {
var t, A;
if (!(!i(this, r) || !i(this, h)))
if (c(this, l, !i(this, l)), i(this, l)) {
const s = i(this, h).getBearing(), n = g(-1 * s);
(t = i(this, r).lastChild) == null || t.remove(), (A = i(this, r).lastChild) == null || A.appendChild(n);
} else {
const s = i(this, r).lastElementChild;
s == null || s.removeChild(s.firstChild);
const n = b(this, v, C).call(this);
i(this, r).appendChild(n);
}
}
}
h = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakSet(), C = function() {
const e = document.createElement("div");
return e.classList.add("needlde-north"), e;
}, k = /* @__PURE__ */ new WeakSet(), P = function() {
const e = document.createElement("div");
e.id = "compass", e.classList.add("compass-pro-wrapper"), e.setAttribute("data-size", i(this, d));
const t = document.createElement("div");
t.classList.add("compass-pro"), t.setAttribute("data-size", i(this, d)), t.addEventListener("click", i(this, E));
const A = [];
for (let n = 1; n <= 6; n++) {
const o = document.createElement("div");
o.classList.add("needle"), A.push(o);
}
const s = document.createElement("div");
if (s.classList.add("inner-face"), A.push(s), i(this, l)) {
const n = g(0);
s.appendChild(n);
} else {
const n = b(this, v, C).call(this);
A.push(n);
}
return t.append(...A), c(this, r, t), e.append(t), e;
}, E = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap();
function j(e) {
const { size: t, visualizePitch: A, onClick: s, position: n, displayDirection: o } = e, u = x(new R({ size: t, visualizePitch: A, onClick: s }));
return y(() => u.current, { position: n }), W(() => {
t && u.current.changeSize(t);
}, [t]), W(() => {
if (!o)
return;
const a = u.current;
return a.toggle(), () => a.toggle();
}, [o]), null;
}
export {
j as default
};