@abi-software/flatmap-viewer 2.7.2 → 2.7.3-a.2

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.
Files changed (120) hide show
  1. package/dist/assets/index.css +1 -0
  2. package/dist/index.js +80577 -0
  3. package/dist/lib/index.d.ts +4 -0
  4. package/package.json +10 -7
  5. package/lib/index.ts +0 -10
  6. package/src/contextmenu.js +0 -97
  7. package/src/controls/annotation.js +0 -302
  8. package/src/controls/controls.js +0 -645
  9. package/src/controls/flightpaths.js +0 -95
  10. package/src/controls/info.js +0 -291
  11. package/src/controls/minimap.js +0 -442
  12. package/src/controls/paths.js +0 -143
  13. package/src/controls/search.js +0 -113
  14. package/src/controls/systems.js +0 -75
  15. package/src/controls/taxons.js +0 -73
  16. package/src/flatmap-viewer.js +0 -1789
  17. package/src/images.js +0 -66
  18. package/src/interactions.js +0 -1569
  19. package/src/layers/cluster.js +0 -177
  20. package/src/layers/filter.js +0 -310
  21. package/src/layers/flightpaths.js +0 -383
  22. package/src/layers/index.js +0 -478
  23. package/src/layers/styling.js +0 -1077
  24. package/src/main.js +0 -272
  25. package/src/mapserver.js +0 -64
  26. package/src/mathjax.js +0 -100
  27. package/src/pathways.js +0 -427
  28. package/src/search.js +0 -137
  29. package/src/systems.js +0 -146
  30. package/src/utils.js +0 -152
  31. package/static/css/flatmap-viewer.css +0 -238
  32. package/static/icons/favicon.ico +0 -0
  33. package/static/images/active.png +0 -0
  34. package/static/images/inactive.png +0 -0
  35. package/static/images/reset-map-active.png +0 -0
  36. package/static/images/reset-map-button.png +0 -0
  37. package/static/images/rounded-background.png +0 -0
  38. package/static/images/zoom-in-active.png +0 -0
  39. package/static/images/zoom-in-button.png +0 -0
  40. package/static/images/zoom-out-active.png +0 -0
  41. package/static/images/zoom-out-button.png +0 -0
  42. package/thirdParty/maplibre-gl-svg/CHANGELOG.md +0 -13
  43. package/thirdParty/maplibre-gl-svg/LICENSE +0 -21
  44. package/thirdParty/maplibre-gl-svg/LICENSE.md +0 -21
  45. package/thirdParty/maplibre-gl-svg/README.md +0 -24
  46. package/thirdParty/maplibre-gl-svg/assets/Add custom SVG template to template manager.jpg +0 -0
  47. package/thirdParty/maplibre-gl-svg/assets/All built-in SVG templates as HTML markers.jpg +0 -0
  48. package/thirdParty/maplibre-gl-svg/assets/All built-in SVG templates as symbols.jpg +0 -0
  49. package/thirdParty/maplibre-gl-svg/assets/Fill polygon with built-in SVG template.jpg +0 -0
  50. package/thirdParty/maplibre-gl-svg/assets/HTML Marker with Custom SVG Template.jpg +0 -0
  51. package/thirdParty/maplibre-gl-svg/assets/HTML Marker with built-in SVG template.jpg +0 -0
  52. package/thirdParty/maplibre-gl-svg/assets/Line layer with built-in SVG template.jpg +0 -0
  53. package/thirdParty/maplibre-gl-svg/assets/Load SVG from URL.jpg +0 -0
  54. package/thirdParty/maplibre-gl-svg/assets/SVG template options.jpg +0 -0
  55. package/thirdParty/maplibre-gl-svg/assets/Smiley_face_changed.svg +0 -37
  56. package/thirdParty/maplibre-gl-svg/assets/Symbol layer with built-in SVG template.jpg +0 -0
  57. package/thirdParty/maplibre-gl-svg/assets/image-templates/arrow-up-thin.png +0 -0
  58. package/thirdParty/maplibre-gl-svg/assets/image-templates/arrow-up.png +0 -0
  59. package/thirdParty/maplibre-gl-svg/assets/image-templates/car.png +0 -0
  60. package/thirdParty/maplibre-gl-svg/assets/image-templates/checker-rotated.png +0 -0
  61. package/thirdParty/maplibre-gl-svg/assets/image-templates/checker.png +0 -0
  62. package/thirdParty/maplibre-gl-svg/assets/image-templates/circles-spaced.png +0 -0
  63. package/thirdParty/maplibre-gl-svg/assets/image-templates/circles.png +0 -0
  64. package/thirdParty/maplibre-gl-svg/assets/image-templates/diagonal-lines-down.png +0 -0
  65. package/thirdParty/maplibre-gl-svg/assets/image-templates/diagonal-lines-up.png +0 -0
  66. package/thirdParty/maplibre-gl-svg/assets/image-templates/diagonal-stripes-down.png +0 -0
  67. package/thirdParty/maplibre-gl-svg/assets/image-templates/diagonal-stripes-up.png +0 -0
  68. package/thirdParty/maplibre-gl-svg/assets/image-templates/dots.png +0 -0
  69. package/thirdParty/maplibre-gl-svg/assets/image-templates/flag-triangle.png +0 -0
  70. package/thirdParty/maplibre-gl-svg/assets/image-templates/flag.png +0 -0
  71. package/thirdParty/maplibre-gl-svg/assets/image-templates/grid-lines.png +0 -0
  72. package/thirdParty/maplibre-gl-svg/assets/image-templates/hexagon-rounded-thick.png +0 -0
  73. package/thirdParty/maplibre-gl-svg/assets/image-templates/hexagon-rounded.png +0 -0
  74. package/thirdParty/maplibre-gl-svg/assets/image-templates/hexagon-thick.png +0 -0
  75. package/thirdParty/maplibre-gl-svg/assets/image-templates/hexagon.png +0 -0
  76. package/thirdParty/maplibre-gl-svg/assets/image-templates/marker-arrow.png +0 -0
  77. package/thirdParty/maplibre-gl-svg/assets/image-templates/marker-ball-pin.png +0 -0
  78. package/thirdParty/maplibre-gl-svg/assets/image-templates/marker-circle.png +0 -0
  79. package/thirdParty/maplibre-gl-svg/assets/image-templates/marker-flat.png +0 -0
  80. package/thirdParty/maplibre-gl-svg/assets/image-templates/marker-square-cluster.png +0 -0
  81. package/thirdParty/maplibre-gl-svg/assets/image-templates/marker-square-rounded-cluster.png +0 -0
  82. package/thirdParty/maplibre-gl-svg/assets/image-templates/marker-square-rounded.png +0 -0
  83. package/thirdParty/maplibre-gl-svg/assets/image-templates/marker-square.png +0 -0
  84. package/thirdParty/maplibre-gl-svg/assets/image-templates/marker-thick.png +0 -0
  85. package/thirdParty/maplibre-gl-svg/assets/image-templates/marker.png +0 -0
  86. package/thirdParty/maplibre-gl-svg/assets/image-templates/pin-round.png +0 -0
  87. package/thirdParty/maplibre-gl-svg/assets/image-templates/pin.png +0 -0
  88. package/thirdParty/maplibre-gl-svg/assets/image-templates/rotated-grid-lines.png +0 -0
  89. package/thirdParty/maplibre-gl-svg/assets/image-templates/rotated-grid-stripes.png +0 -0
  90. package/thirdParty/maplibre-gl-svg/assets/image-templates/rounded-square-thick.png +0 -0
  91. package/thirdParty/maplibre-gl-svg/assets/image-templates/rounded-square.png +0 -0
  92. package/thirdParty/maplibre-gl-svg/assets/image-templates/triangle-arrow-left.png +0 -0
  93. package/thirdParty/maplibre-gl-svg/assets/image-templates/triangle-arrow-up.png +0 -0
  94. package/thirdParty/maplibre-gl-svg/assets/image-templates/triangle-thick.png +0 -0
  95. package/thirdParty/maplibre-gl-svg/assets/image-templates/triangle.png +0 -0
  96. package/thirdParty/maplibre-gl-svg/assets/image-templates/x-fill.png +0 -0
  97. package/thirdParty/maplibre-gl-svg/assets/image-templates/zig-zag-vertical.png +0 -0
  98. package/thirdParty/maplibre-gl-svg/assets/image-templates/zig-zag.png +0 -0
  99. package/thirdParty/maplibre-gl-svg/build/build.js +0 -210
  100. package/thirdParty/maplibre-gl-svg/dist/maplibre-gl-svg.js +0 -339
  101. package/thirdParty/maplibre-gl-svg/dist/maplibre-gl-svg.min.js +0 -4
  102. package/thirdParty/maplibre-gl-svg/docs/docs.md +0 -375
  103. package/thirdParty/maplibre-gl-svg/examples/Add custom SVG template to template manager.html +0 -101
  104. package/thirdParty/maplibre-gl-svg/examples/All built-in SVG templates as HTML markers.html +0 -82
  105. package/thirdParty/maplibre-gl-svg/examples/All built-in SVG templates as symbols.html +0 -124
  106. package/thirdParty/maplibre-gl-svg/examples/Fill polygon with built-in SVG template.html +0 -94
  107. package/thirdParty/maplibre-gl-svg/examples/HTML Marker with Custom SVG Template.html +0 -86
  108. package/thirdParty/maplibre-gl-svg/examples/HTML Marker with built-in SVG template.html +0 -83
  109. package/thirdParty/maplibre-gl-svg/examples/Line layer with built-in SVG template.html +0 -129
  110. package/thirdParty/maplibre-gl-svg/examples/Load SVG from URL.html +0 -96
  111. package/thirdParty/maplibre-gl-svg/examples/SVG template options.html +0 -264
  112. package/thirdParty/maplibre-gl-svg/examples/Symbol layer with built-in SVG template.html +0 -93
  113. package/thirdParty/maplibre-gl-svg/index.html +0 -151
  114. package/thirdParty/maplibre-gl-svg/package-lock.json +0 -5882
  115. package/thirdParty/maplibre-gl-svg/package.json +0 -49
  116. package/thirdParty/maplibre-gl-svg/src/SvgManager.ts +0 -186
  117. package/thirdParty/maplibre-gl-svg/src/SvgTemplateManager.ts +0 -144
  118. package/thirdParty/maplibre-gl-svg/src/index.ts +0 -4
  119. package/thirdParty/maplibre-gl-svg/tsconfig.json +0 -31
  120. package/thirdParty/maplibre-gl-svg/typings/index.d.ts +0 -111
@@ -1,4 +0,0 @@
1
- /* MIT License - Copyright (c) Ricky Brundritt. */
2
-
3
-
4
- !function(t){"use strict";a.addTemplate=function(t,e,l){var o=a._imageTemplates;!l&&o[t.toLowerCase()]||(o[t.toLowerCase()]=e)},a.getElement=function(t,e,l,o,c){void 0===e&&(e=""),void 0===l&&(l="#1A73AA"),void 0===o&&(o="white"),void 0===c&&(c=1);var s=document.createElement("div");return s.innerHTML=a._applyStyle(t,e,l,o,c),s},a.getTemplate=function(t,e){void 0===e&&(e=1),e=Math.abs(e||1);var l=a._imageTemplates;if("string"==typeof t&&l[t.toLowerCase()]){for(var o=l[t.toLowerCase()],c=/calc\(([0-9.]+)[px]*\s*\*\s*\{scale\}\)/gi,s=o,r=c.exec(o);r;)s=s.replace(r[0],parseFloat(r[1])*e+""),r=c.exec(o);return s=s.replace("{scale}",e+"")}throw new Error("Invalid templateName.")},a.getAllTemplateNames=function(){return Object.keys(a._imageTemplates)},a._applyStyle=function(t,e,l,o,c){return void 0===e&&(e=""),l=(l=void 0===l?"#1A73AA":l)||"#1A73AA",o=(o=void 0===o?"white":o)||"#fff",a.getTemplate(t,c=void 0===c?1:c).replace(/{color}/g,l).replace(/{secondaryColor}/g,o).replace(/{text}/g,e||"")},a._imageTemplates={marker:'<svg xmlns="http://www.w3.org/2000/svg" width="calc(27 * {scale})" height="calc(39 * {scale})" viewBox="-1 -1 26 38"><path d="M12.25.25a12.254 12.254 0 0 0-12 12.494c0 6.444 6.488 12.109 11.059 22.564.549 1.256 1.333 1.256 1.882 0C17.762 24.853 24.25 19.186 24.25 12.744A12.254 12.254 0 0 0 12.25.25Z" style="fill:{color};stroke:{secondaryColor};stroke-width:1"/><text x="12.5" y="17.5" style="font-size:14px;fill:#fff;text-anchor:middle">{text}</text></svg>',"marker-thick":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(28 * {scale})" height="calc(39 * {scale})" viewBox="-1 -1 27 38"><path d="M12.25.25a12.254 12.254 0 0 0-12 12.494c0 6.444 6.488 12.109 11.059 22.564.549 1.256 1.333 1.256 1.882 0C17.762 24.853 24.25 19.186 24.25 12.744A12.254 12.254 0 0 0 12.25.25Z" style="fill:{color};stroke:{secondaryColor};stroke-width:2"/><text x="12.5" y="18.5" style="font-size:14px;fill:#fff;text-anchor:middle">{text}</text></svg>',"marker-circle":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(28 * {scale})" height="calc(39 * {scale})" viewBox="-1 -1 27 38"><path d="M12.25.25a12.254 12.254 0 0 0-12 12.494c0 6.444 6.488 12.109 11.059 22.564.549 1.256 1.333 1.256 1.882 0C17.762 24.853 24.25 19.186 24.25 12.744A12.254 12.254 0 0 0 12.25.25Z" style="fill:{color};stroke:{secondaryColor};stroke-width:1"/><circle cx="12.5" cy="12.5" r="9" fill="{secondaryColor}"/><text x="12" y="17.5" style="font-size:14px;fill:#000;text-anchor:middle">{text}</text></svg>',pin:'<svg xmlns="http://www.w3.org/2000/svg" width="calc(24 * {scale})" height="calc(28 * {scale})" viewBox="0 0 24 28"><path d="m11.988 16.615a5.15 5.15 0 0 1-2.268-.525 4.909 4.909 0 0 1-2.805-4.442 5.019 5.019 0 0 1 5.072-4.936h.012a5.03 5.03 0 0 1 5.085 4.961 4.907 4.907 0 0 1-.549 2.224 5.114 5.114 0 0 1-4.548 2.718zm0-8.06a3.173 3.173 0 0 0-3.226 3.099 3.081 3.081 0 0 0 1.77 2.782 3.299 3.299 0 0 0 4.365-1.386 3.049 3.049 0 0 0 .342-1.381 3.184 3.184 0 0 0-3.239-3.114h-.012z" fill="{secondaryColor}"/><path d="m11.999.922a10.908 10.908 0 0 0-11.076 10.732 10.639 10.639 0 0 0 4.418 8.598l6.658 6.464 6.658-6.463a10.537 10.537 0 0 0 2.198-15.041 11.182 11.182 0 0 0-8.856-4.289zm1.873 14.341a4.221 4.221 0 0 1-5.589-1.789 3.945 3.945 0 0 1-.445-1.8 4.164 4.164 0 0 1 8.323-.037 4.028 4.028 0 0 1-2.289 3.626Z" fill="{color}"/><path d="m11.999 28-7.256-7.044a11.611 11.611 0 0 1-4.743-9.303 11.844 11.844 0 0 1 11.988-11.652.102 .102 0 0 1 .02 0 12.164 12.164 0 0 1 9.577 4.647 11.357 11.357 0 0 1 2.299 8.614 11.521 11.521 0 0 1-4.63 7.695zm-.01-26.157a9.997 9.997 0 0 0-10.143 9.812 9.769 9.769 0 0 0 4.04 7.853l.099.083 6.014 5.838 6.113-5.922a9.7 9.7 0 0 0 3.945-6.505 9.533 9.533 0 0 0-1.933-7.229 10.305 10.305 0 0 0-8.116-3.931h-.021zm.021 14.772a5.11 5.11 0 0 1-4.547-2.718 4.868 4.868 0 0 1 .932-5.743 5.118 5.118 0 0 1 3.58-1.46h.024a5.031 5.031 0 0 1 5.084 4.938 4.92 4.92 0 0 1-2.805 4.457h0a5.152 5.152 0 0 1-2.269.525zm-.011-8.079h-.015a3.277 3.277 0 0 0-2.295.933 3.029 3.029 0 0 0-.587 3.58 3.297 3.297 0 0 0 4.364 1.386h0a3.092 3.092 0 0 0 1.772-2.795 3.185 3.185 0 0 0-3.239-3.105z" fill="{secondaryColor}"/><text x="12" y="17" style="font-size:14px;fill:#000;text-anchor:middle">{text}</text></svg>',"pin-round":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(25 * {scale})" height="calc(25 * {scale})" viewBox="0 0 25 25"><g transform="translate(0 1)"><circle cx="12.25" cy="11.5833" r="11" fill="{color}"/><path d="m12.25 23.583a12 12 0 1 1 12-12 12 12 0 0 1-12 12zm0-22a10 10 0 1 0 10 10 10 10 0 0 0-10-10z" fill="{secondaryColor}"/><circle cx="12.25" cy="11.5833" r="4.2386" fill="{secondaryColor}"/></g><text x="12.5" y="17" style="font-size:14px;fill:#000;text-anchor:middle">{text}</text></svg>',"marker-flat":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(27 * {scale})" height="calc(42.8 * {scale})" viewBox="0 0 1600 2570"><g fill="{color}"><path d="M691 2419c-409-575-641-1086-683-1504-10-106-10-136 5-224 31-188 105-330 241-458 129-124 270-190 453-214 69-9 113-10 182-1 373 46 655 326 703 698 40 308-120 801-424 1309-134 224-348 535-369 535-4 0-53-63-108-141z"/></g><g fill="rgba(0,0,0,0.15)" style="transform:scale(-1,1);transform-origin:center"><path d="M691 2419c-407-571-639-1083-682-1498-14-139-3-249 37-371 69-208 254-402 459-481 68-27 217-59 271-59h24v160 180 940 635c0 349-2 635-5 635-2 0-49-63-104-141z"/></g><circle cx="800" cy="800" r="600" fill="{secondaryColor}"/><text x="800" y="1100" style="font-size:800px;fill:#000;text-anchor:middle">{text}</text></svg>',"marker-arrow":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(25.47 * {scale})" height="calc(35.18 * {scale})" viewBox="0 0 4330 5980"><g fill="{color}"><path d="m2080 5969c-49-20-93-63-115-113-25-55-1928-5486-1953-5573-40-138 67-282 210-283 36 0 246 73 987 345 518 190 947 345 955 345 8 0 438-155 955-345 615-226 954-345 979-345 87 0 165 47 204 123 46 91 107-95-957 2942-537 1535-986 2805-997 2823-11 18-43 46-72 62-41 24-62 30-111 29-33 0-71-5-85-10z"/></g><g fill="{secondaryColor}"><path d="m2200 1600c-36 10-83 2-484-84-243-53-451-94-461-91-11 4-22 18-25 31-5 19 114 371 436 1292 244 697 448 1273 454 1281 19 24 50 30 71 12z"/><path d="m2200 1600c-36 10-83 2-484-84-243-53-451-94-461-91-11 4-22 18-25 31-5 19 114 371 436 1292 244 697 448 1273 454 1281 19 24 50 30 71 12z" style="transform:scale(-1,1);transform-origin:center"/></g><g fill="rgba(0,0,0,0.2)" ><path d="m2165 685c8 0 438-155 955-345 615-226 954-345 979-345 87 0 165 47 204 123 46 91 107-95-957 2942-537 1535-986 2805-997 2823-11 18-43 46-72 62-41 24-62 30-111 29z"/></g><text x="2165" y="3300" style="font-size:2500px;fill:#fff;text-anchor:middle">{text}</text></svg>',"marker-ball-pin":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(15.67 * {scale})" height="calc(33.33 * {scale})" viewBox="0 0 235 452"><g transform="translate(-135 10)"><path fill="{secondaryColor}" d="m256 442 0 0c-13 0-18-11-18-24l-6-323c0-13 11-24 24-24h0c13 0 24 11 24 24l-6 323c0 13-5 24-18 24z"/><circle style="fill:{color};stroke-width:10;stroke:{secondaryColor}" cx="256" cy="112" r="111"/><ellipse transform="matrix(0.834 0.5518 -0.5518 0.834 65.7916 -97.18)" fill="rgba(255,255,255,0.3)" cx="194.399" cy="60.749" rx="19.076" ry="32.428"/></g><text x="117.5" y="160" style="font-size:160px;fill:#fff;text-anchor:middle">{text}</text></svg>',"marker-square":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(26.67 * {scale})" height="calc(32.27 * {scale})" viewBox="0 0 2000 2420"><g transform="translate(100 100)" style="stroke:{secondaryColor};stroke-width:100;fill:{color}"><path d="M845 2152c-22-37-58-95-80-129-22-35-62-99-90-143l-50-80-312 0-313 0 0-900 0-900 900 0 900 0 0 900 0 900-313 0-313 0-34 58c-19 31-38 59-42 60-5 2-8 8-8 12 0 9-69 123-88 145-5 6-11 15-13 21-16 39-77 123-89 124-8 0-33-31-55-68z"/></g><text x="1000" y="1300" style="font-size:1000px;fill:#fff;text-anchor:middle">{text}</text></svg>',"marker-square-cluster":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(33.33 * {scale})" height="calc(38.8 * {scale})" viewBox="0 0 2500 2910"><g transform="translate(100 100)" style="stroke:{secondaryColor};stroke-width:100;fill:{color}"><path d="m866 2652c-17-31-37-68-46-82-9-14-32-54-51-90-19-36-50-92-70-125l-36-60-332-3-331-2 0-905 0-905 660 0 660 0 0-38c0-71 50-196 102-258 71-85 189-164 244-164 12 0 26-4 29-10 8-13 222-13 230 0 3 6 17 10 30 10 25 0 117 45 154 76 130 107 191 232 191 392 0 155-63 284-190 386-36 29-129 76-150 76-11 0-22 5-25 10-3 6-31 10-61 10l-54 0 0 660 0 660-332 2-332 3-29 50c-17 28-48 84-70 125-22 41-47 86-56 100-9 14-30 51-46 83-17 32-36 57-45 57-8 0-28-25-44-58z"/></g><text x="1650" y="900" style="font-size:1000px;fill:#fff">+</text><text x="1000" y="1800" style="font-size:1000px;fill:#fff;text-anchor:middle">{text}</text></svg>',"marker-square-rounded":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(26.8 * {scale})" height="calc(32.27 * {scale})" viewBox="0 0 2010 2410"><g transform="translate(100 100)" style="stroke:{secondaryColor};stroke-width:100;fill:{color}"><path d="M856 2155c-20-30-36-59-36-65 0-5-4-10-10-10-5 0-10-5-10-11 0-5-18-37-40-69-22-32-40-64-40-69 0-6-4-11-10-11-5 0-10-5-10-10 0-6-15-33-32-60l-33-50-127 0c-74 0-129-4-133-10-3-5-17-10-30-10-25 0-116-45-155-76-87-69-142-151-178-265-15-46-17-1075-2-1084 5-3 10-17 10-30 0-13 5-27 10-30 6-3 10-13 10-22 0-22 83-135 122-168 57-46 62-50 112-75l50-25 585 0 586 0 63 34c84 46 169 133 212 218l35 68 0 565 0 565-28 59c-32 69-100 157-139 180-15 9-33 22-40 29-23 22-99 57-123 57-13 0-27 5-30 10-4 6-60 10-135 10l-128 0-128 205c-84 136-133 205-144 205-10 0-33-24-54-55z"/></g><text x="1000" y="1300" style="font-size:1000px;fill:#fff;text-anchor:middle">{text}</text></svg>',"marker-square-rounded-cluster":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(33.33 * {scale})" height="calc(32.13 * {scale})" viewBox="0 0 2500 2900"><g transform="translate(100 100)" style="stroke:{secondaryColor};stroke-width:100;fill:{color}"><path d="m874 2669c-9-18-26-49-37-68-11-20-30-55-43-78-13-24-36-64-51-90-14-27-38-69-52-95l-26-48-142 0c-84 0-144-4-148-10-3-5-17-10-30-10-25 0-118-46-154-76-91-76-136-142-175-254-13-38-16-119-16-554 0-358 3-520 12-545 40-125 106-219 195-278 127-84 116-83 646-83l467 0 0-42c0-46 11-87 45-163 54-121 169-220 306-264 46-14 232-14 278 0 165 53 284 175 340 350 19 61 14 204-10 273-32 91-94 178-169 240-38 31-130 76-155 76-13 0-27 5-30 10-3 6-28 10-56 10l-49 0 0 462c0 446-1 464-21 522-32 91-94 178-169 240-38 31-130 76-155 76-13 0-27 5-30 10-4 6-65 10-149 10-138 0-143 1-154 23-12 23-62 114-112 202-16 28-44 79-63 115-42 77-67 88-93 39z"/></g><text x="1650" y="900" style="font-size:1000px;fill:#fff">+</text><text x="1000" y="1800" style="font-size:1000px;fill:#fff;text-anchor:middle">{text}</text></svg>',flag:'<svg xmlns="http://www.w3.org/2000/svg" width="calc(23.5 * {scale})" height="calc(40 * {scale})" viewBox="34 28 198 308"><path style="stroke:{secondaryColor};stroke-width:15;stroke-linecap:round;" d="M42 327l0 -291"/><path style="fill:{color};stroke:{secondaryColor};stroke-width:10;stroke-linejoin:round;" d="M49 50c70 30 104 28 178 2-21 42-21 74 0 116-72 25-101 25-178 0l0-118z"/><text x="130" y="165" style="font-size:100px;fill:#fff;text-anchor:middle">{text}</text></svg>',"flag-triangle":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(27 * {scale})" height="calc(35.33 * {scale})" viewBox="0 0 40.5 53"><g transform="translate(-31 -20)"><path fill="{secondaryColor}" d="M34.7,73.3V48.4l34.6-10.1c0.7-0.2,1.2-0.8,1.2-1.5s-0.4-1.4-1-1.7L33.7,20.5c-0.5-0.2-1.1-0.2-1.6,0.2 c-0.5,0.3-0.7,0.8-0.7,1.4v51.2H34.7z"/><polygon points="34.7,24.5 66,36.5 34.7,45 34.7,10" fill="{color}"/></g><text x="11" y="21" style="font-size:14px;fill:#fff;text-anchor:middle">{text}</text></svg>',"rounded-square":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(34 * {scale})" height="calc(34 * {scale})" viewBox="0 0 34 34"><g transform="translate(2 2)"><rect x="0" y="0" rx="8" ry="8" width="30" height="30" style="stroke:{secondaryColor};stroke-width:2;fill:{color}"/></g><text x="17" y="22" style="font-size:14px;fill:#fff;text-anchor:middle">{text}</text></svg>',"rounded-square-thick":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(38 * {scale})" height="calc(38 * {scale})" viewBox="0 0 38 38"><g transform="translate(4 4)"><rect x="0" y="0" rx="8" ry="8" width="30" height="30" style="stroke:{secondaryColor};stroke-width:4;fill:{color}"/></g><text x="19" y="24" style="font-size:14px;fill:#fff;text-anchor:middle">{text}</text></svg>',triangle:'<svg xmlns="http://www.w3.org/2000/svg" width="calc(36 * {scale})" height="calc(36 * {scale})" viewBox="0 0 36 36"><g transform="translate(2 2)"><polygon points="16,0 32,32 0,32 16,0" style="stroke:{secondaryColor};stroke-width:2;fill:{color}"/></g><text x="17.5" y="30" style="font-size:12px;fill:#fff;text-anchor:middle">{text}</text></svg>',"triangle-thick":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(40 * {scale})" height="calc(40 * {scale})" viewBox="0 0 40 40"><g transform="translate(4 4)"><polygon points="16,0 32,32 0,32 16,0" style="stroke:{secondaryColor};stroke-width:4;fill:{color}"/></g><text x="19.5" y="32" style="font-size:12px;fill:#fff;text-anchor:middle">{text}</text></svg>',hexagon:'<svg xmlns="http://www.w3.org/2000/svg" width="calc(35 * {scale})" height="calc(40 * {scale})" viewBox="0 0 35 40"><g transform="translate(2 2)"><path d="M31 9 15.5 0 0 9 0 27 15.5 36 31 27 31 9Z" style="stroke:{secondaryColor};stroke-width:2;fill:{color}"/></g><text x="17.5" y="25" style="font-size:14px;fill:#fff;text-anchor:middle">{text}</text></svg>',"hexagon-thick":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(39 * {scale})" height="calc(44 * {scale})" viewBox="0 0 39 44"><g transform="translate(4 4)"><path d="M31 9 15.5 0 0 9 0 27 15.5 36 31 27 31 9Z" style="stroke:{secondaryColor};stroke-width:4;fill:{color}"/></g><text x="19.5" y="27" style="font-size:14px;fill:#fff;text-anchor:middle">{text}</text></svg>',"hexagon-rounded":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(40 * {scale})" height="calc(40 * {scale})" viewBox="0 0 1100 1100"><g transform="translate(50 50)"><path style="stroke:{secondaryColor};stroke-width:50;fill:{color}" d="M881 210 561 25c-33-19-88-19-121 0L119 210c-33 19-61 67-61 105v370c0 39 27 86 61 105l321 185c33 19 88 19 122 0l321-185c33-19 61-67 61-105V315C942 276 915 229 881 210z"/></g><text x="550" y="700" style="font-size:400px;fill:#fff;text-anchor:middle">{text}</text></svg>',"hexagon-rounded-thick":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(40 * {scale})" height="calc(40 * {scale})" viewBox="0 0 1200 1200"><g transform="translate(100 100)"><path style="stroke:{secondaryColor};stroke-width:100;fill:{color}" d="M881 210 561 25c-33-19-88-19-121 0L119 210c-33 19-61 67-61 105v370c0 39 27 86 61 105l321 185c33 19 88 19 122 0l321-185c33-19 61-67 61-105V315C942 276 915 229 881 210z"/></g><text x="600" y="750" style="font-size:400px;fill:#fff;text-anchor:middle">{text}</text></svg>',"triangle-arrow-up":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(28 * {scale})" height="calc(28 * {scale})" viewBox="0 0 28 28"><g transform="translate(2 2)"><polygon points="12,0 0,24 12,17 24,24" stroke-width="2" stroke="{secondaryColor}" fill="{color}"/></g><text x="14" y="17" style="font-size:8px;fill:#fff;text-anchor:middle">{text}</text></svg>',"triangle-arrow-left":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(28 * {scale})" height="calc(28 * {scale})" viewBox="0 0 28 28"><g transform="translate(2 2)"><polygon points="24,12 0,0 7,12 0,24" stroke-width="2" stroke="{secondaryColor}" fill="{color}"/></g><text x="14" y="16.5" style="font-size:8px;fill:#fff;text-anchor:middle">{text}</text></svg>',"arrow-up":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(12.16 * {scale})" height="calc(30.1 * {scale})" viewBox="0 0 902 364"><g fill="{color}" transform="matrix(0,2.4,-2.4,0,897,-930)"><polygon points="902,222 233,222 233,364 0,182 233,0 233,141 902,141 902,222"/></g><text x="450" y="700" style="font-size:900px;fill:#000;text-anchor:middle">{text}</text></svg>',"arrow-up-thin":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(16 * {scale})" height="calc(33.33 * {scale})" viewBox="0 0 12 25"><g transform="translate(-136.91823 -751.91998)"><path fill="{color}" d="m148.271 760.71c-1.641-.547-3.186-1.47-4.633-2.769l0 18.07-1.675 0 0-18.07c-1.447 1.299-2.986 2.222-4.616 2.769l0-1.231c2.325-1.596 4.006-3.812 5.043-6.65l.838 0c1.037 2.838 2.718 5.055 5.043 6.65l0 1.231z"/></g><text x="6" y="20" style="font-size:10px;fill:#000;text-anchor:middle">{text}</text></svg>',car:'<svg xmlns="http://www.w3.org/2000/svg" width="calc(21.93 * {scale})" height="calc(40.9 * {scale})" viewBox="0 0 6580 12270"><g transform="translate(0 12270) rotate(-90)"><path fill="{secondaryColor}" d="M7045 6566c-42-13-105-44-105-51 0-2 23-105 50-228 28-123 50-230 50-236 0-8-241-11-907-11-855 0-1145 6-1513 30-85 6-189 13-230 15-41 3-133 10-205 15-286 21-430 32-705 50-953 63-1459 18-2335-205-304-77-746-209-799-238-131-72-221-408-285-1062-34-345-42-532-48-1130-16-1557 108-2532 336-2649 32-17 469-149 676-205 409-110 819-191 1205-238 116-14 224-18 540-18 395 1 494 5 1140 50 1124 79 1224 82 2496 78l641-3-53-237c-29-131-52-238-51-239 1-1 31-14 66-29 56-23 76-26 142-23 67 3 83 7 120 33 23 17 50 41 61 55 10 14 51 117 91 230l73 205 674 3 675 2 90-39c98-43 198-72 315-93 122-21 829-18 990 5 321 45 626 143 849 270 293 168 516 378 704 662 266 402 416 893 467 1527 15 174 8 882-9 998-6 41-18 127-27 190-69 502-253 969-523 1325-79 105-262 284-381 374-189 142-355 229-574 300-336 110-526 139-952 148-457 9-685-23-887-124l-47-24-678-6-678-6-64 179c-79 224-92 253-121 284-67 70-177 97-274 66zm-2752-5073c-23-2-64-2-90 0-26 2-7 3 42 3 50 0 71-1 48-3zm395 0c-21-2-55-2-75 0-21 2-4 4 37 4 41 0 58-2 38-4z"/><path fill="{color}" d="M7043 6498c-13-6-23-19-23-28 0-9 23-117 50-240 28-123 50-230 50-237 0-22-2126-13-2465 10-132 10-400 28-595 42-661 47-824 55-1160 62-435 7-656-8-1040-73-415-70-865-183-1447-365-168-53-272-556-325-1569-16-319-16-1311 0-1630 45-872 129-1366 257-1518 22-26 51-39 172-77 557-177 1122-310 1563-369 271-36 351-40 690-40 361 1 463 6 1165 54 1122 78 1288 83 2337 79 460-2 840-7 843-11 4-4-17-117-47-252l-55-245 39-16c76-30 180-8 224 47 10 13 54 124 98 246l79 222 709 0 709 0 47-24c74-37 219-83 322-101 122-22 606-32 802-16 374 29 658 102 933 238 124 62 271 155 361 230l61 51 6 100c19 278 103 497 247 643 88 89 173 136 278 152l70 11 41 131c116 369 159 673 168 1170 10 584-38 984-167 1397l-40 126-70 12c-193 33-348 175-441 405-56 139-89 302-89 445 0 43-3 47-58 91-290 235-644 384-1068 450-191 29-796 39-974 16-135-18-263-54-368-102l-75-35-701 0-701 0-79 223c-82 232-102 267-163 293-38 16-138 17-170 2zm-2023-820c332-15 1155-12 1835 6 308 8 563 12 566 8 4-4 10-21 13-38 7-30 6-31-92-77-518-244-1197-396-2112-474-295-25-1282-25-1579 0-231 20-473 46-479 51-6 7 49 110 93 171 160 226 416 335 855 365 142 10 539 5 900-12zm3304-263c525-111 899-887 934-1935 19-557-37-1023-172-1435-186-563-521-900-896-899-81 0-158 14-525 92-426 91-431 92-540 146-195 96-287 207-306 368-12 104-11 2985 1 3078 22 170 135 291 365 389 49 21 191 55 480 115 226 47 419 87 430 89 45 10 164 6 229-8zm-5570-485c112-43 197-156 216-291 12-83 13-2623 1-2706-23-158-125-273-270-304-44-9-100-1-542 75-272 47-514 91-539 98-266 68-487 424-594 958-56 280-70 548-40 800 56 484 207 878 414 1081 115 114 122 116 702 218 277 49 524 90 550 90 26 1 72-8 102-19zm2111-3440c1023-44 1884-213 2462-486l113-53-7-33c-3-18-8-35-10-37-2-3-236 1-521 7-993 24-1271 26-1708 11-541-18-1128-18-1249-1-377 56-588 181-734 437-32 55-41 79-32 84 12 8 246 32 491 51 356 28 815 36 1195 20z"/></g><text x="3250" y="8250" style="font-size:3000px;fill:#fff;text-anchor:middle">{text}</text></svg>',checker:'<svg xmlns="http://www.w3.org/2000/svg" width="calc(16 * {scale})" height="calc(16 * {scale})" viewBox="0 0 16 16"><pattern id="p" x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse"><rect fill="{color}" x="0" width="8" height="8" y="0"/><rect fill="{color}" x="8" width="8" height="8" y="8"/></pattern><rect x="0" y="0" width="16" height="16" fill="{secondaryColor}"/><rect x="0" y="0" width="16" height="16" fill="url(#p)"/></svg>',"checker-rotated":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(16 * {scale})" height="calc(16 * {scale})" viewBox="0 0 60 60"><rect width="60" height="60" fill="{secondaryColor}"/><rect width="42.42" height="42.42" transform="translate(30 0) rotate(45)" fill="{color}"/></svg>',"zig-zag":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(15 * {scale})" height="calc(15 * {scale})" viewBox="0 0 120 120"><rect x="0" y="0" width="120" height="120" fill="{secondaryColor}"/><polygon fill="{color}" points="120 120 60 120 90 90 120 60 120 0 120 0 60 60 0 0 0 60 30 90 60 120 120 120"/></svg>',"zig-zag-vertical":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(15 * {scale})" height="calc(15 * {scale})" viewBox="0 0 120 120"><rect x="0" y="0" width="120" height="120" fill="{secondaryColor}"/><polygon fill="{color}" points="120 0 120 60 90 30 60 0 0 0 0 0 60 60 0 120 60 120 90 90 120 60 120 0"/></svg>',"circles-spaced":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(20 * {scale})" height="calc(20 * {scale})" viewBox="0 0 20 20"><defs><pattern id="p" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="2" stroke="none" fill="{color}"/></pattern></defs><rect x="0" y="0" width="20" height="20" fill="{secondaryColor}"/><rect x="0" y="0" width="100" height="100" fill="url(#p)"/></svg>',circles:'<svg xmlns="http://www.w3.org/2000/svg" width="calc(7 * {scale})" height="calc(7 * {scale})" viewBox="0 0 20 20"><defs><pattern id="p" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="6" stroke="none" fill="{color}"/></pattern></defs><rect x="0" y="0" width="20" height="20" fill="{secondaryColor}"/><rect x="0" y="0" width="100" height="100" fill="url(#p)"/></svg>',"diagonal-lines-up":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(18 * {scale})" height="calc(18 * {scale})" viewBox="0 0 6 6"><rect x="0" y="0" width="6" height="6" fill="{secondaryColor}"/><g fill="{color}"><path d="M5 0h1L0 6V5zM6 5v1H5z"/></g></svg>',"diagonal-lines-down":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(18 * {scale})" height="calc(18 * {scale})" viewBox="0 0 6 6"><rect x="0" y="0" width="6" height="6" fill="{secondaryColor}"/><g transform="rotate(90 3 3)" fill="{color}"><path d="M5 0h1L0 6V5zM6 5v1H5z"/></g></svg>',"diagonal-stripes-up":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(20 * {scale})" height="calc(20 * {scale})" viewBox="0 0 40 40"><rect x="0" y="0" width="40" height="40" fill="{secondaryColor}"/><g fill="{color}"><path d="M0 40L40 0H20L0 20M40 40V20L20 40"/></g></svg>',"diagonal-stripes-down":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(20 * {scale})" height="calc(20 * {scale})" viewBox="0 0 40 40"><rect x="0" y="0" width="40" height="40" fill="{secondaryColor}"/><g transform="rotate(90 20 20)" fill="{color}"><path d="M0 40L40 0H20L0 20M40 40V20L20 40"/></g></svg>',"grid-lines":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(14 * {scale})" height="calc(14 * {scale})" viewBox="0 0 6 6"><rect x="0" y="0" width="6" height="6" fill="{secondaryColor}"/><g transform="rotate(45 3 3)" fill="{color}"><path d="M5 0h1L0 6V5zM6 5v1H5z"/></g><g fill="{color}" transform="rotate(-45 3 3)"><path d="M5 0h1L0 6V5zM6 5v1H5z"/></g></svg>',"rotated-grid-lines":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(18 * {scale})" height="calc(18 * {scale})" viewBox="0 0 6 6"><rect x="0" y="0" width="6" height="6" fill="{secondaryColor}"/><g transform="rotate(90 3 3)" fill="{color}"><path d="M5 0h1L0 6V5zM6 5v1H5z"/></g><g fill="{color}"><path d="M5 0h1L0 6V5zM6 5v1H5z"/></g></svg>',"rotated-grid-stripes":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(20 * {scale})" height="calc(20 * {scale})" viewBox="0 0 40 40"><rect x="0" y="0" width="40" height="40" fill="{secondaryColor}"/><g transform="rotate(90 20 20)" fill="{color}"><path d="M0 40L40 0H20L0 20M40 40V20L20 40"/></g><g fill="{color}"><path d="M0 40L40 0H20L0 20M40 40V20L20 40"/></g></svg>',"x-fill":'<svg xmlns="http://www.w3.org/2000/svg" width="calc(40 * {scale})" height="calc(40 * {scale})" viewBox="0 0 40 40"><rect x="0" y="0" width="45.3" height="45.3" fill="{secondaryColor}"/><g fill="{color}"><path d="M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z"/></g></svg>',dots:'<svg xmlns="http://www.w3.org/2000/svg" width="calc(13 * {scale})" height="calc(13 * {scale})" viewBox="0 0 20 20"><rect x="0" y="0" width="20" height="20" fill="{secondaryColor}"/><g fill="{color}"><circle cx="3" cy="3" r="3"/><circle cx="13" cy="13" r="3"/></g></svg>'};var r=a;function a(){}function e(t){this._images={},this._map=t}e.prototype.add=function(a,e,i,h){var g=this;return void 0===i&&(i=100),void 0===h&&(h=100),new Promise(function(l,o){var c,t,s=g._images,r=g._map;s[a]?l():"string"==typeof e&&(t={url:c=/<svg/i.test(e)&&!/^data:/i.test(e)?"data:image/svg+xml;base64,"+window.btoa(e):e},r._requestManager._transformRequestFn&&(t=r._requestManager.transformRequest(c,"Image")),fetch(t.url,t).then(function(t){return t.blob()}).then(function(t){var e=new Image;e.onload=function(){var t;0<i&&0<h&&(e.width>i||e.height>h)&&(t=Math.min(i/e.width,h/e.height))<1&&(e.width=e.width*t,e.height=e.height*t),r.addImage(a,e),s[a]=c,l()},e.onerror=e.onabort=function(){o('Failed to load "'.concat(a,'" image.'))},e.src=URL.createObjectURL(t)}).catch(function(){o('Failed to load "'.concat(a,'" image.'))}))})},e.prototype.clear=function(){var e=this;Object.keys(e._images).forEach(function(t){e._map.removeImage(t)}),e._images={}},e.prototype.getImageIds=function(){return Object.keys(this._images)},e.prototype.hasImage=function(t){return!!this._images[t]},e.prototype.createFromTemplate=function(t,e,l,o,c,s){e=r._applyStyle(e,s=void 0===s?"":s,l=void 0===l?"#1A73AA":l,o=void 0===o?"white":o,c=void 0===c?1:c);return this.add(t,e)},e.prototype.remove=function(t){this._map.removeImage(t),delete this._images[t]},e.prototype.reload=function(){var l=this,o=this;Object.keys(o._images).forEach(function(t){var e;o._map.hasImage(t)||((e=new Image).onload=function(){o._map.addImage(t,e)},e.src=l._images[t])})},t.SvgManager=e,t.SvgTemplateManager=r}(this.maplibregl=this.maplibregl||{});
@@ -1,375 +0,0 @@
1
- # How to the use the MapLibre GL SVG Plugin
2
-
3
- Images can be used with HTML markers and various layers within MapLibre:
4
-
5
- - Symbol layers can render points on the map with an image icon. Symbols can also be rendered along a lines path.
6
- - Polygon/Fill layers can be rendered with a fill pattern image.
7
- - HTML markers can render points using images and other HTML elements.
8
-
9
- Be sure to check out the [examples page](https://rbrundritt.github.io/maplibre-gl-svg/index.html).
10
-
11
- - **Content**
12
- - [How to the use the MapLibre GL SVG Plugin](#how-to-the-use-the-maplibre-gl-svg-plugin)
13
- - [Getting started](#getting-started)
14
- - [Use the SvgTemplateManager](#use-the-svgtemplatemanager)
15
- - [Use an SVG template with an HTML marker](#use-an-svg-template-with-an-html-marker)
16
- - [Use an SVG along a lines path](#use-an-svg-along-a-lines-path)
17
- - [Use an SVG with a fill layer](#use-an-svg-with-a-fill-layer)
18
- - [Create a custom SVG template](#create-a-custom-svg-template)
19
- - [List of image templates](#list-of-image-templates)
20
-
21
- ## Getting started
22
-
23
- Download the project and copy the `maplibre-gl-svg` JavaScript file from the `dist` folder into your project.
24
-
25
- > NPM package may be made available in the future once the initial version is locked in.
26
-
27
- This plugin has two main classes;
28
-
29
- - `SvgManager` - A class that takes in a map instance and that makes it easy to load SVGs into the map sprite and manages the life cycle of SVG images within the map.
30
- - `SvgTemplateManager` - A static class the manages reusable SVG templates.
31
-
32
- The `SvgManager` class provides the following functions.
33
-
34
- | Name | Return Type | Description |
35
- |------|-------------|-------------|
36
- | `add(id: string, svg: string, maxWidth?: number, maxHeight?: number)` | `Promise<void>` | Adds an SVG image to the maps image sprite. The SVG can be either a URL to an SVG file, an inline SVG string, or SVG data URI. A max width or height will be used to scale down an SVG if needed. By default these max values are set to 100 pixels. |
37
- | `clear()` | | Removes all SVG images loaded into the maps sprite. |
38
- | `getImageIds()`| `string[]` | Gets a list of all the image ids that have been added to the maps image sprite. |
39
- | `hasImage(id: string)` | `boolean` | Checks to see if an image is already loaded into the maps image sprite. |
40
- | `createFromTemplate(id: string, templateName: string, color?: string, secondaryColor?: string, scale?: number, text?: string)` | `Promise<void>` | Creates and adds an image to the maps image sprite from an SVG template. Provide the name of the built-in or pre-loaded template to use, and a color to apply. |
41
- | `remove(id: string)` | | Removes an SVG image from the maps image sprite. |
42
- | `reload()` | | It's possible that the map's image sprite may be cleared by the user outside of this manager. Calling this method will reload all images in this manager. |
43
-
44
- SVG templates can be added to the map image sprite resources by using the `createFromTemplate` function of an `SvgManager` instance. This function allows up to five parameters to be passed in;
45
-
46
- ```javascript
47
- createFromTemplate(id: string, templateName: string, color: string = '#1A73AA', secondaryColor: string = 'white', scale: number = 1, text = ''): Promise<void>
48
- ```
49
-
50
- The `id` is a unique identifier you create. The `id` is assigned to the image when it's added to the maps image sprite. Use this identifier in the layers to specifying which image resource to render. The `templateName` specifies which image template to use. The `color` option sets the primary color of the image and the `secondaryColor` options sets the secondary color of the image. The `scale` option scales the image template before applying it to the image sprite. When the image is applied to the image sprite, it's converted into a PNG. To ensure crisp rendering, it's better to scale up the image template before adding it to the sprite, than to scale it up in a layer.
51
-
52
- This function asynchronously loads the image into the image sprite. Thus, it returns a `Promise` that you can wait for this function to complete.
53
-
54
- The following code shows how to create an image from one of the built-in templates, and use it with a symbol layer.
55
-
56
- ```javascript
57
- //Create a new instance of the SVG manager.
58
- var svgManager = new maplibregl.SvgManager(map);
59
-
60
- //Load an SVG templated icon into the map.
61
- svgManager.createFromTemplate('myTemplatedImage', 'marker-flat', 'teal', '#fff').then(() => {
62
-
63
- //Add a layer to display a filled polygon.
64
- map.addLayer({
65
- 'id': 'symbol-layer',
66
- 'type': 'symbol',
67
- 'source': {
68
- 'type': 'geojson',
69
- 'data': {
70
- 'type': 'FeatureCollection',
71
- 'features': [
72
- {
73
- 'type': 'Feature',
74
- 'properties': {
75
- },
76
- 'geometry': {
77
- 'type': 'Point',
78
- 'coordinates': [0,0]
79
- }
80
- }
81
- ]
82
- }
83
- },
84
- 'layout': {
85
- //Reference the templated icon.
86
- 'icon-image': 'myTemplatedImage'
87
- }
88
- });
89
- });
90
- ```
91
-
92
- In order to ensure good performance with layers, load the images into the map image sprite before rendering.
93
-
94
- > **NOTE**
95
- > When loaded into the maps image sprite SVG's are converted into a data URI, and loaded as a static image into the maps image sprite. This means animations and CSS classes are not supported. All CSS styles should be embedded within the SVG. SVG's used with HTML markers will support CSS classes and animations as usual.
96
-
97
- ## Use the SvgTemplateManager
98
-
99
- If your application uses the same image with different styles, possible with multiple map instances, you can create reusable SVG templates which allow you to programmatically generate styled versions of your images. The static `maplibregl.SvgTemplateManager` class provides the following functions.
100
-
101
- | Name | Return Type | Description |
102
- |------|-------------|-------------|
103
- | `addTemplate(templateName: string, template: string, override: boolean)` | | Adds an image template to the SvgTemplateManager. |
104
- | `getElement(templateName: string, text?: string, color?: string, secondaryColor?: string, scale?: number)` | `HTMLElement` | Inflates a template and converts it into an HTMLElement. |
105
- | `getTemplate(templateName: string, scale?: number)`| string | Retrieves an SVG template by name. |
106
- | `getAllTemplateNames()` | `string[]` | Retrieves an SVG template by name. |
107
-
108
- ## Use an SVG template with an HTML marker
109
-
110
- An SVG template can be retrieved using the `maplibregl.SvgTemplateManager.getElement` function to retrieve an HTML element rendered version of the SVG template. This HTML element can then be passed into the markers `element` option.
111
-
112
- ```javascript
113
- // Create marker element from SVG template.
114
- const el = maplibregl.SvgTemplateManager.getElement('marker-arrow', 'AB', 'red', 'pink');
115
-
116
- // Add marker to map
117
- marker = new maplibregl.Marker({
118
- element: el,
119
- anchor: 'bottom'
120
- }).setLngLat(center).addTo(map);
121
- ```
122
-
123
- > **TIP**
124
- > SVG templates can be used outside of the map too. The `getTemplate` funciton returns an SVG string that has placeholders; `{color}`, `{secondaryColor}`, `{scale}`, `{text}`. Replace these placeholder values to create a valid SVG string. You can then either add the SVG string directly to the HTML DOM, retrieve an HTML element version of the rendered template, or convert it into a data URI and insert it into an image tag or canvas. For example:
125
- >
126
- > ```JavaScript
127
- > //Get an HTML element version of the template.
128
- > var elm = maplibregl.SvgTemplateManager.getElement('marker', '', 'red', 'white', 1);
129
- >
130
- > //Retrieve an SVG template string and replace the placeholder values.
131
- > var svg = maplibregl.SvgTemplateManager.getTemplate('marker').replace(/{color}/, 'red').replace(/{secondaryColor}/, 'white').replace(/{text}/, '').replace(/{scale}/, 1);
132
- >
133
- > //Convert to data URI for use in image tags.
134
- > var dataUri = 'data:image/svg+xml;base64,' + btoa(svg);
135
- > ```
136
-
137
- ## Use an SVG along a lines path
138
-
139
- Once an SVG is loaded into the map image sprite, it can be rendered along the path of a line by adding a `LineString` to a data source and using a symbol layer with a `symbol-placement` option set to `line` and by referencing the ID of the image resource in the `icon-image` option.
140
-
141
- ```javascript
142
- //Create a new instance of the SVG manager.
143
- var svgManager = new maplibregl.SvgManager(map);
144
-
145
- //Load an SVG templated icon into the map.
146
- svgManager.createFromTemplate('myTemplatedImage', 'car', 'DodgerBlue', '#fff').then(() => {
147
-
148
- //Add a source for thelines.
149
- map.addSource('lines', {
150
- 'type': 'geojson',
151
- 'data': {
152
- 'type': 'FeatureCollection',
153
- 'features': [
154
- {
155
- 'type': 'Feature',
156
- 'properties': {
157
- },
158
- 'geometry': {
159
- 'type': 'LineString',
160
- 'coordinates': [
161
- [-122.18822, 47.63208],
162
- [-122.18204, 47.63196],
163
- [-122.17243, 47.62976],
164
- [-122.16419, 47.63023],
165
- [-122.15852, 47.62942],
166
- [-122.15183, 47.62988],
167
- [-122.14256, 47.63451],
168
- [-122.13483, 47.64041],
169
- [-122.13466, 47.64422],
170
- [-122.13844, 47.65440],
171
- [-122.13277, 47.66515],
172
- [-122.12779, 47.66712],
173
- [-122.11595, 47.66712],
174
- [-122.11063, 47.66735],
175
- [-122.10668, 47.67035],
176
- [-122.10565, 47.67498]
177
- ]
178
- }
179
- }
180
- ]
181
- }
182
- });
183
-
184
- //Add a layer to display the lines.
185
- map.addLayer({
186
- 'id': 'lines',
187
- 'type': 'line',
188
- 'source': 'lines',
189
- 'paint': {
190
- 'line-width': 5,
191
- 'line-color': 'Blue'
192
- }
193
- });
194
-
195
- //Add a layer for symbols along the line.
196
- map.addLayer({
197
- 'id': 'line-symbols',
198
- 'type': 'symbol',
199
- 'source': 'lines',
200
- 'layout': {
201
- //Reference the templated icon.
202
- 'icon-image': 'myTemplatedImage',
203
- 'symbol-placement': 'line',
204
- 'symbol-spacing': 100,
205
- 'icon-rotate': 90
206
- }
207
- });
208
- });
209
- ```
210
-
211
- > **TIP**
212
- > If the SVG template points up, set the `rotation` icon option of the symbol layer to 90 if you want it to point in the same direction as the line.
213
-
214
- ## Use an SVG with a fill layer
215
-
216
- Once an SVG template is loaded into the map image sprite, it can be rendered as a fill pattern in a fill layer by referencing the image resource ID in the `fill-pattern` option of the layer.
217
-
218
- The [Fill polygon with built-in icon template] sample demonstrates how to render a polygon layer using the `dot` image template with a red primary color and a transparent secondary color, as shown in the following screenshot. For the source code for this sample, see [Fill polygon with built-in icon template sample code].
219
-
220
- ```javascript
221
- //Create a new instance of the SVG manager.
222
- var svgManager = new maplibregl.SvgManager(map);
223
-
224
- //Load an SVG templated icon into the map.
225
- svgManager.createFromTemplate('myFillPattern', 'dots', 'red', 'transparent').then(() => {
226
-
227
- //Add a layer to display a filled polygon.
228
- map.addLayer({
229
- 'id': 'fill-layer',
230
- 'type': 'fill',
231
- 'source': {
232
- 'type': 'geojson',
233
- 'data': {
234
- 'type': 'FeatureCollection',
235
- 'features': [
236
- {
237
- 'type': 'Feature',
238
- 'properties': {
239
- },
240
- 'geometry': {
241
- 'type': 'Polygon',
242
- 'coordinates': [[[-50, -20], [0, 40], [50, -20], [-50, -20]]]
243
- }
244
- }
245
- ]
246
- }
247
- },
248
- 'paint': {
249
- //Apply the fill pattern.
250
- 'fill-pattern': 'myFillPattern',
251
- 'fill-opacity': 1
252
- }
253
- });
254
- });
255
- ```
256
-
257
- > **TIP**
258
- > Setting an alpha value on the secondary color of fill patterns makes it easier to see the underlying map while still providing the primary pattern.
259
-
260
- ## Create a custom SVG template
261
-
262
- SVG image templates are inline SVG strings that support the following placeholder values:
263
-
264
- | Placeholder | Description |
265
- |-------------|--------------------|
266
- | `{color}` | The primary color. |
267
- | `{secondaryColor}` | The secondary color. |
268
- | `{scale}` | The SVG image is converted to an png image when added to the map image sprite. This placeholder can be used to scale a template before it's converted to ensure it renders clearly. |
269
- | `{text}` | The location to render text when used with an HTML Marker. |
270
-
271
- Below is an example of how to create a custom SVG template string, add it to the `SvgTemplateManager` and use it as a polygon fill pattern .
272
-
273
- ```javascript
274
- //A custom icon template created using an inline SVG string with placeholders for {scale}, {color}, and {secondaryColor}.
275
- var customTemplate = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width="calc(80px * {scale})" height="calc(80px * {scale})"><rect x="0" y="0" width="80" height="80" fill="{secondaryColor}"/><path fill="{color}" d="M14 16H9v-2h5V9.87a4 4 0 1 1 2 0V14h5v2h-5v15.95A10 10 0 0 0 23.66 27l-3.46-2 8.2-2.2-2.9 5a12 12 0 0 1-21 0l-2.89-5 8.2 2.2-3.47 2A10 10 0 0 0 14 31.95V16zm40 40h-5v-2h5v-4.13a4 4 0 1 1 2 0V54h5v2h-5v15.95A10 10 0 0 0 63.66 67l-3.47-2 8.2-2.2-2.88 5a12 12 0 0 1-21.02 0l-2.88-5 8.2 2.2-3.47 2A10 10 0 0 0 54 71.95V56zm-39 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm40-40a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM15 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm40 40a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path></svg>';
276
-
277
- //Add the custom template to the SVG template manager.
278
- maplibregl.SvgTemplateManager.addTemplate('anchor-fill', customTemplate);
279
-
280
- //Create a new instance of the SVG manager.
281
- svgManager = new maplibregl.SvgManager(map);
282
-
283
- //Load an SVG templated icon into the map.
284
- svgManager.createFromTemplate('myFillPattern', 'anchor-fill', 'navy', 'rgba(0,150,150,0.5)').then(() => {
285
-
286
- //Add a layer to display a filled polygon.
287
- map.addLayer({
288
- 'id': 'fill-layer',
289
- 'type': 'fill',
290
- 'source': {
291
- 'type': 'geojson',
292
- 'data': {
293
- 'type': 'FeatureCollection',
294
- 'features': [
295
- {
296
- 'type': 'Feature',
297
- 'properties': {
298
- },
299
- 'geometry': {
300
- 'type': 'Polygon',
301
- 'coordinates': [[[-50, -20], [0, 40], [50, -20], [-50, -20]]]
302
- }
303
- }
304
- ]
305
- }
306
- },
307
- 'paint': {
308
- //Apply the fill pattern.
309
- 'fill-pattern': 'myFillPattern',
310
- 'fill-opacity': 1
311
- }
312
- });
313
- });
314
- ```
315
-
316
- > **TIP**
317
- > Custom SVG template strings should have a `viewbox`, `width`, and `height` specified to represent the expected default size. Use CSS `calc` in the `width` and `height` properties to support scaling the template.
318
-
319
- ## List of image templates
320
-
321
- In total there are 42 image templates provided: 27 symbol icons and 15 polygon fill patterns. This table lists all image templates currently available within the `SvgTemplateManager`. By default, the primary color is blue and the secondary color is white. To make the secondary color easier to see on a white background, the following images have the secondary color set to black for documentation purposes.
322
-
323
- **Symbol icon templates**
324
-
325
- | Template name | Template |
326
- |---------------|----------|
327
- | `marker` | ![marker](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/marker.png) |
328
- | `marker-thick` | ![marker-thick](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/marker-thick.png) |
329
- | `marker-circle` | ![marker-circle](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/marker-circle.png) |
330
- | `pin` | ![pin](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/pin.png) |
331
- | `pin-round` | ![pin-round](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/pin-round.png) |
332
- | `marker-flat` | ![marker-flat](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/marker-flat.png) |
333
- | `marker-arrow` | ![marker-arrow](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/marker-arrow.png) |
334
- | `marker-ball-pin` | ![marker-ball-pin](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/marker-ball-pin.png) |
335
- | `marker-square` | ![marker-square](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/marker-square.png) |
336
- | `marker-square-cluster` | ![marker-square-cluster](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/marker-square-cluster.png) |
337
- | `marker-square-rounded` | ![marker-square-rounded](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/marker-square-rounded.png) |
338
- | `marker-square-rounded-cluster` | ![marker-square-rounded-cluster](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/marker-square-rounded-cluster.png) |
339
- | `flag` | ![flag](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/flag.png) |
340
- | `flag-triangle` | ![flag-triangle](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/flag-triangle.png) |
341
- | `rounded-square` | ![rounded-square](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/rounded-square.png) |
342
- | `rounded-square-thick` | ![rounded-square-thick](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/rounded-square-thick.png) |
343
- | `triangle` | ![triangle](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/triangle.png) |
344
- | `triangle-thick` | ![triangle-thick](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/triangle-thick.png) |
345
- | `hexagon` | ![hexagon](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/hexagon.png) |
346
- | `hexagon-thick` | ![hexagon-thick](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/hexagon-thick.png) |
347
- | `hexagon-rounded` | ![hexagon-rounded](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/hexagon-rounded.png) |
348
- | `hexagon-rounded-thick` | ![hexagon-rounded-thick](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/hexagon-rounded-thick.png) |
349
- | `triangle-arrow-up` | ![triangle-arrow-up](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/triangle-arrow-up.png) |
350
- | `triangle-arrow-left` | ![triangle-arrow-left](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/triangle-arrow-left.png) |
351
- | `arrow-up` | ![arrow-up](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/arrow-up.png) |
352
- | `arrow-up-thin` | ![arrow-up-thin](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/arrow-up-thin.png) |
353
- | `car` | ![car](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/car.png) |
354
-
355
-
356
- **Polygon fill pattern templates**
357
-
358
- | Template name | Template |
359
- |---------------|----------|
360
- | `checker` | ![checker](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/checker.png) |
361
- | `checker-rotated` | ![checker-rotated](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/checker-rotated.png) |
362
- | `zig-zag` | ![zig-zag](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/zig-zag.png) |
363
- | `zig-zag-vertical` | ![zig-zag-vertical](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/zig-zag-vertical.png) |
364
- | `circles-spaced` | ![circles-spaced](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/circles-spaced.png) |
365
- | `circles` | ![circles](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/circles.png) |
366
- | `diagonal-lines-up` | ![diagonal-lines-up](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/diagonal-lines-up.png) |
367
- | `diagonal-lines-down` | ![diagonal-lines-down](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/diagonal-lines-down.png) |
368
- | `diagonal-stripes-up` | ![diagonal-stripes-up](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/diagonal-stripes-up.png) |
369
- | `diagonal-stripes-down` | ![diagonal-stripes-down](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/diagonal-stripes-down.png) |
370
- | `grid-lines` | ![grid-lines](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/grid-lines.png) |
371
- | `rotated-grid-lines` | ![rotated-grid-lines](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/rotated-grid-lines.png) |
372
- | `rotated-grid-stripes` | ![rotated-grid-stripes](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/rotated-grid-stripes.png) |
373
- | `x-fill` | ![x-fill](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/x-fill.png) |
374
- | `dots` | ![dots](https://raw.githubusercontent.com/rbrundritt/maplibre-gl-svg/main/assets/image-templates/dots.png) |
375
-
@@ -1,101 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <title>Add custom SVG template to template manager</title>
5
- <meta charset='utf-8'>
6
- <meta name="viewport" content="width=device-width, initial-scale=1">
7
- <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css' />
8
- <script src='https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js'></script>
9
-
10
- <script src="../dist/maplibre-gl-svg.js"></script>
11
-
12
- <style>
13
- body { margin: 0; padding: 0; }
14
- html, body { height: 100%; }
15
- #map { position: relative; width:100%; height:100%; }
16
- fieldset { position: absolute; top: 10px; left: 10px; width: 300px;z-index: 1; background-color: white;}
17
- legend {background-color: white;border-radius: 5px;border:1px solid #000;}
18
- </style>
19
- </head>
20
- <body>
21
- <div id="map"></div>
22
-
23
- <fieldset>
24
- <legend>Add custom SVG template to template manager</legend>
25
- This sample shows how to add more image templates to the SVG template manager.
26
- </fieldset>
27
-
28
- <script>
29
- var marker, svgManager;
30
-
31
- //A custom icon template created using an inline SVG string with placeholders for {scale}, {color}, and {secondaryColor}.
32
- var customTemplate = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width="calc(80px * {scale})" height="calc(80px * {scale})"><rect x="0" y="0" width="80" height="80" fill="{secondaryColor}"/><path fill="{color}" d="M14 16H9v-2h5V9.87a4 4 0 1 1 2 0V14h5v2h-5v15.95A10 10 0 0 0 23.66 27l-3.46-2 8.2-2.2-2.9 5a12 12 0 0 1-21 0l-2.89-5 8.2 2.2-3.47 2A10 10 0 0 0 14 31.95V16zm40 40h-5v-2h5v-4.13a4 4 0 1 1 2 0V54h5v2h-5v15.95A10 10 0 0 0 63.66 67l-3.47-2 8.2-2.2-2.88 5a12 12 0 0 1-21.02 0l-2.88-5 8.2 2.2-3.47 2A10 10 0 0 0 54 71.95V56zm-39 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm40-40a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM15 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm40 40a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path></svg>';
33
-
34
- const map = new maplibregl.Map({
35
- container: 'map',
36
- style: {
37
- 'version': 8,
38
- 'sources': {
39
- 'osm-tiles': {
40
- 'type': 'raster',
41
- 'tiles': [ 'https://tile.openstreetmap.org/{z}/{x}/{y}.png' ],
42
- 'tileSize': 256,
43
- 'attribution': '&copy; <a href="https://www.openstreetmap.org/about" target="_blank">OpenStreetMap</a>'
44
- }
45
- },
46
- 'layers': [
47
- {
48
- 'id': 'osm-tiles',
49
- 'type': 'raster',
50
- 'source': 'osm-tiles',
51
- 'minzoom': 0,
52
- 'maxzoom': 19
53
- }
54
- ]
55
- },
56
- zoom: 2
57
- });
58
-
59
- map.on('load', () => {
60
-
61
- //Add the custom template to the SVG template manager.
62
- maplibregl.SvgTemplateManager.addTemplate('anchor-fill', customTemplate);
63
-
64
- //Create a new instance of the SVG manager.
65
- svgManager = new maplibregl.SvgManager(map);
66
-
67
- //Load an SVG templated icon into the map.
68
- svgManager.createFromTemplate('myFillPattern', 'anchor-fill', 'navy', 'rgba(0,150,150,0.5)').then(() => {
69
-
70
- //Add a layer to display a filled polygon.
71
- map.addLayer({
72
- 'id': 'fill-layer',
73
- 'type': 'fill',
74
- 'source': {
75
- 'type': 'geojson',
76
- 'data': {
77
- 'type': 'FeatureCollection',
78
- 'features': [
79
- {
80
- 'type': 'Feature',
81
- 'properties': {
82
- },
83
- 'geometry': {
84
- 'type': 'Polygon',
85
- 'coordinates': [[[-50, -20], [0, 40], [50, -20], [-50, -20]]]
86
- }
87
- }
88
- ]
89
- }
90
- },
91
- 'paint': {
92
- //Apply the fill pattern.
93
- 'fill-pattern': 'myFillPattern',
94
- 'fill-opacity': 1
95
- }
96
- });
97
- });
98
- });
99
- </script>
100
- </body>
101
- </html>
@@ -1,82 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <title>All built-in SVG templates as HTML markers</title>
5
- <meta charset='utf-8'>
6
- <meta name="viewport" content="width=device-width, initial-scale=1">
7
- <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css' />
8
- <script src='https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js'></script>
9
-
10
- <script src="../dist/maplibre-gl-svg.js"></script>
11
-
12
- <style>
13
- body { margin: 0; padding: 0; }
14
- html, body { height: 100%; }
15
- #map { position: relative; width:100%; height:100%; }
16
- fieldset { position: absolute; top: 10px; left: 10px; width: 300px;z-index: 1; background-color: white;}
17
- legend {background-color: white;border-radius: 5px;border:1px solid #000;}
18
- </style>
19
- </head>
20
- <body>
21
- <div id="map"></div>
22
-
23
- <fieldset>
24
- <legend>All built-in SVG templates as HTML markers</legend>
25
- This sample shows all the built-in SVG templates rendered as HTML markers. "00" is added as the text value for each icon so that you can see where the text will render on the marker.
26
- </fieldset>
27
-
28
- <script>
29
- const center = [20, -10];
30
- var marker;
31
-
32
- const map = new maplibregl.Map({
33
- container: 'map',
34
- center: center,
35
- zoom: 4,
36
- style: {
37
- 'version': 8,
38
- 'sources': {
39
- },
40
- 'layers': [
41
- {
42
- "id": "background",
43
- "type": "background",
44
- "paint": {
45
- "background-color": "gray"
46
- }
47
- }
48
- ]
49
- },
50
- });
51
-
52
- map.on('load', () => {
53
- //Get all image templates available in the map control.
54
- var keys = maplibregl.SvgTemplateManager.getAllTemplateNames();
55
-
56
- //Create a grid of the HTML markers, each using a different SVG template.
57
- var cols = 6;
58
- var rows = Math.ceil(keys.length / cols);
59
-
60
- for (var row = 0; row < rows; row++) {
61
- for (var col = 0; col < cols; col++) {
62
- var idx = cols * row + col;
63
- if (idx < keys.length) {
64
- createIcon(keys[idx], row, col);
65
- }
66
- }
67
- }
68
- });
69
-
70
- function createIcon(id, row, col) {
71
- // Create marker element from SVG template.
72
- //Add '00' as placeholder for where text would be rendered on the icon.
73
- const el = maplibregl.SvgTemplateManager.getElement(id, '00');
74
-
75
- new maplibregl.Marker({
76
- element: el,
77
- anchor: 'bottom'
78
- }).setLngLat( [8 * col, -3.5 * row]).addTo(map);
79
- }
80
- </script>
81
- </body>
82
- </html>