openvoiceui 1.0.0

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 (185) hide show
  1. package/.env.example +104 -0
  2. package/Dockerfile +30 -0
  3. package/LICENSE +21 -0
  4. package/README.md +638 -0
  5. package/SETUP.md +360 -0
  6. package/app.py +232 -0
  7. package/auto-approve-devices.js +111 -0
  8. package/cli/index.js +372 -0
  9. package/config/__init__.py +4 -0
  10. package/config/default.yaml +43 -0
  11. package/config/flags.yaml +67 -0
  12. package/config/loader.py +203 -0
  13. package/config/providers.yaml +71 -0
  14. package/config/speech_normalization.yaml +182 -0
  15. package/config/theme.json +4 -0
  16. package/data/greetings.json +25 -0
  17. package/default-pages/ai-image-creator.html +915 -0
  18. package/default-pages/bulk-image-uploader.html +492 -0
  19. package/default-pages/desktop.html +2865 -0
  20. package/default-pages/file-explorer.html +854 -0
  21. package/default-pages/interactive-map.html +655 -0
  22. package/default-pages/style-guide.html +1005 -0
  23. package/default-pages/website-setup.html +1623 -0
  24. package/deploy/openclaw/Dockerfile +46 -0
  25. package/deploy/openvoiceui.service +30 -0
  26. package/deploy/setup-nginx.sh +50 -0
  27. package/deploy/setup-sudo.sh +306 -0
  28. package/deploy/skill-runner/Dockerfile +19 -0
  29. package/deploy/skill-runner/requirements.txt +14 -0
  30. package/deploy/skill-runner/server.py +269 -0
  31. package/deploy/supertonic/Dockerfile +22 -0
  32. package/deploy/supertonic/server.py +79 -0
  33. package/docker-compose.pinokio.yml +11 -0
  34. package/docker-compose.yml +59 -0
  35. package/greetings.json +25 -0
  36. package/index.html +65 -0
  37. package/inject-device-identity.js +142 -0
  38. package/package.json +82 -0
  39. package/profiles/default.json +114 -0
  40. package/profiles/manager.py +354 -0
  41. package/profiles/schema.json +337 -0
  42. package/prompts/voice-system-prompt.md +149 -0
  43. package/providers/__init__.py +39 -0
  44. package/providers/base.py +63 -0
  45. package/providers/llm/__init__.py +12 -0
  46. package/providers/llm/base.py +71 -0
  47. package/providers/llm/clawdbot_provider.py +112 -0
  48. package/providers/llm/zai_provider.py +115 -0
  49. package/providers/registry.py +320 -0
  50. package/providers/stt/__init__.py +12 -0
  51. package/providers/stt/base.py +58 -0
  52. package/providers/stt/webspeech_provider.py +49 -0
  53. package/providers/stt/whisper_provider.py +100 -0
  54. package/providers/tts/__init__.py +20 -0
  55. package/providers/tts/base.py +91 -0
  56. package/providers/tts/groq_provider.py +74 -0
  57. package/providers/tts/supertonic_provider.py +72 -0
  58. package/requirements.txt +38 -0
  59. package/routes/__init__.py +10 -0
  60. package/routes/admin.py +515 -0
  61. package/routes/canvas.py +1315 -0
  62. package/routes/chat.py +51 -0
  63. package/routes/conversation.py +2158 -0
  64. package/routes/elevenlabs_hybrid.py +306 -0
  65. package/routes/greetings.py +98 -0
  66. package/routes/icons.py +279 -0
  67. package/routes/image_gen.py +364 -0
  68. package/routes/instructions.py +190 -0
  69. package/routes/music.py +838 -0
  70. package/routes/onboarding.py +43 -0
  71. package/routes/pi.py +62 -0
  72. package/routes/profiles.py +215 -0
  73. package/routes/report_issue.py +68 -0
  74. package/routes/static_files.py +533 -0
  75. package/routes/suno.py +664 -0
  76. package/routes/theme.py +81 -0
  77. package/routes/transcripts.py +199 -0
  78. package/routes/vision.py +348 -0
  79. package/routes/workspace.py +288 -0
  80. package/server.py +1510 -0
  81. package/services/__init__.py +1 -0
  82. package/services/auth.py +143 -0
  83. package/services/canvas_versioning.py +239 -0
  84. package/services/db_pool.py +107 -0
  85. package/services/gateway.py +16 -0
  86. package/services/gateway_manager.py +333 -0
  87. package/services/gateways/__init__.py +12 -0
  88. package/services/gateways/base.py +110 -0
  89. package/services/gateways/compat.py +264 -0
  90. package/services/gateways/openclaw.py +1134 -0
  91. package/services/health.py +100 -0
  92. package/services/memory_client.py +455 -0
  93. package/services/paths.py +26 -0
  94. package/services/speech_normalizer.py +285 -0
  95. package/services/tts.py +270 -0
  96. package/setup-config.js +262 -0
  97. package/sounds/air_horn.mp3 +0 -0
  98. package/sounds/bruh.mp3 +0 -0
  99. package/sounds/crowd_cheer.mp3 +0 -0
  100. package/sounds/gunshot.mp3 +0 -0
  101. package/sounds/impact.mp3 +0 -0
  102. package/sounds/lets_go.mp3 +0 -0
  103. package/sounds/record_stop.mp3 +0 -0
  104. package/sounds/rewind.mp3 +0 -0
  105. package/sounds/sad_trombone.mp3 +0 -0
  106. package/sounds/scratch_long.mp3 +0 -0
  107. package/sounds/yeah.mp3 +0 -0
  108. package/src/adapters/ClawdBotAdapter.js +264 -0
  109. package/src/adapters/_template.js +133 -0
  110. package/src/adapters/elevenlabs-classic.js +841 -0
  111. package/src/adapters/elevenlabs-hybrid.js +812 -0
  112. package/src/adapters/hume-evi.js +676 -0
  113. package/src/admin.html +1339 -0
  114. package/src/app.js +8802 -0
  115. package/src/core/Config.js +173 -0
  116. package/src/core/EmotionEngine.js +307 -0
  117. package/src/core/EventBridge.js +180 -0
  118. package/src/core/EventBus.js +117 -0
  119. package/src/core/VoiceSession.js +607 -0
  120. package/src/face/BaseFace.js +259 -0
  121. package/src/face/EyeFace.js +208 -0
  122. package/src/face/HaloSmokeFace.js +509 -0
  123. package/src/face/manifest.json +27 -0
  124. package/src/face/previews/eyes.svg +16 -0
  125. package/src/face/previews/orb.svg +29 -0
  126. package/src/features/MusicPlayer.js +620 -0
  127. package/src/features/Soundboard.js +128 -0
  128. package/src/providers/DeepgramSTT.js +472 -0
  129. package/src/providers/DeepgramStreamingSTT.js +766 -0
  130. package/src/providers/GroqSTT.js +559 -0
  131. package/src/providers/TTSPlayer.js +323 -0
  132. package/src/providers/WebSpeechSTT.js +479 -0
  133. package/src/providers/tts/BaseTTSProvider.js +81 -0
  134. package/src/providers/tts/HumeProvider.js +77 -0
  135. package/src/providers/tts/SupertonicProvider.js +174 -0
  136. package/src/providers/tts/index.js +140 -0
  137. package/src/shell/adapter-registry.js +154 -0
  138. package/src/shell/caller-bridge.js +35 -0
  139. package/src/shell/camera-bridge.js +28 -0
  140. package/src/shell/canvas-bridge.js +32 -0
  141. package/src/shell/commercial-bridge.js +44 -0
  142. package/src/shell/face-bridge.js +44 -0
  143. package/src/shell/music-bridge.js +60 -0
  144. package/src/shell/orchestrator.js +233 -0
  145. package/src/shell/profile-discovery.js +303 -0
  146. package/src/shell/sounds-bridge.js +28 -0
  147. package/src/shell/transcript-bridge.js +61 -0
  148. package/src/shell/waveform-bridge.js +33 -0
  149. package/src/styles/base.css +2862 -0
  150. package/src/styles/face.css +417 -0
  151. package/src/styles/pi-overrides.css +89 -0
  152. package/src/styles/theme-dark.css +67 -0
  153. package/src/test-tts.html +175 -0
  154. package/src/ui/AppShell.js +544 -0
  155. package/src/ui/ProfileSwitcher.js +228 -0
  156. package/src/ui/SessionControl.js +240 -0
  157. package/src/ui/face/FacePicker.js +195 -0
  158. package/src/ui/face/FaceRenderer.js +309 -0
  159. package/src/ui/settings/PlaylistEditor.js +366 -0
  160. package/src/ui/settings/SettingsPanel.css +684 -0
  161. package/src/ui/settings/SettingsPanel.js +419 -0
  162. package/src/ui/settings/TTSVoicePreview.js +210 -0
  163. package/src/ui/themes/ThemeManager.js +213 -0
  164. package/src/ui/visualizers/BaseVisualizer.js +29 -0
  165. package/src/ui/visualizers/PartyFXVisualizer.css +291 -0
  166. package/src/ui/visualizers/PartyFXVisualizer.js +637 -0
  167. package/static/emulators/jsdos/js-dos.css +1 -0
  168. package/static/emulators/jsdos/js-dos.js +22 -0
  169. package/static/favicon.svg +55 -0
  170. package/static/icons/apple-touch-icon.png +0 -0
  171. package/static/icons/favicon-32.png +0 -0
  172. package/static/icons/icon-192.png +0 -0
  173. package/static/icons/icon-512.png +0 -0
  174. package/static/install.html +449 -0
  175. package/static/manifest.json +26 -0
  176. package/static/sw.js +21 -0
  177. package/tts_providers/__init__.py +136 -0
  178. package/tts_providers/base_provider.py +319 -0
  179. package/tts_providers/groq_provider.py +155 -0
  180. package/tts_providers/hume_provider.py +226 -0
  181. package/tts_providers/providers_config.json +119 -0
  182. package/tts_providers/qwen3_provider.py +371 -0
  183. package/tts_providers/resemble_provider.py +315 -0
  184. package/tts_providers/supertonic_provider.py +557 -0
  185. package/tts_providers/supertonic_tts.py +399 -0
package/default-pages/interactive-map.html ADDED
@@ -0,0 +1,655 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Interactive Map</title>
7
+ <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
9
+ <style>
10
+ /* === Leaflet CSS (inlined — canvas CSP blocks external stylesheets) === */
11
+ .leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane>svg,.leaflet-pane>canvas,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}.leaflet-container{overflow:hidden}.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.leaflet-tile::selection{background:transparent}.leaflet-safari .leaflet-tile{image-rendering:-webkit-optimize-contrast}.leaflet-safari .leaflet-tile-container{width:1600px;height:1600px;-webkit-transform-origin:0 0}.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-container .leaflet-overlay-pane svg{max-width:none!important;max-height:none!important}.leaflet-container .leaflet-marker-pane img,.leaflet-container .leaflet-shadow-pane img,.leaflet-container .leaflet-tile-pane img,.leaflet-container img.leaflet-image-layer,.leaflet-container .leaflet-tile{max-width:none!important;max-height:none!important;width:auto;padding:0}.leaflet-container img.leaflet-tile{mix-blend-mode:plus-lighter}.leaflet-container.leaflet-touch-zoom{-ms-touch-action:pan-x pan-y;touch-action:pan-x pan-y}.leaflet-container.leaflet-touch-drag{-ms-touch-action:pinch-zoom;touch-action:none;touch-action:pinch-zoom}.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom{-ms-touch-action:none;touch-action:none}.leaflet-container{-webkit-tap-highlight-color:transparent}.leaflet-container a{-webkit-tap-highlight-color:rgba(51,181,229,.4)}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-zoom-box{width:0;height:0;-moz-box-sizing:border-box;box-sizing:border-box;z-index:800}.leaflet-overlay-pane svg{-moz-user-select:none}.leaflet-pane{z-index:400}.leaflet-tile-pane{z-index:200}.leaflet-overlay-pane{z-index:400}.leaflet-shadow-pane{z-index:500}.leaflet-marker-pane{z-index:600}.leaflet-tooltip-pane{z-index:650}.leaflet-popup-pane{z-index:700}.leaflet-map-pane canvas{z-index:100}.leaflet-map-pane svg{z-index:200}.leaflet-vml-shape{width:1px;height:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{position:relative;z-index:800;pointer-events:visiblePainted;pointer-events:auto}.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{float:left;clear:both}.leaflet-right .leaflet-control{float:right}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}.leaflet-fade-anim .leaflet-popup{opacity:0;-webkit-transition:opacity .2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{opacity:1}.leaflet-zoom-animated{-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}svg.leaflet-zoom-animated{will-change:transform}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform .25s cubic-bezier(0,0,.25,1);-moz-transition:-moz-transform .25s cubic-bezier(0,0,.25,1);transition:transform .25s cubic-bezier(0,0,.25,1)}.leaflet-zoom-anim .leaflet-tile,.leaflet-pan-anim .leaflet-tile{-webkit-transition:none;-moz-transition:none;transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-interactive{cursor:pointer}.leaflet-grab{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.leaflet-crosshair,.leaflet-crosshair .leaflet-interactive{cursor:crosshair}.leaflet-popup-pane,.leaflet-control{cursor:auto}.leaflet-dragging .leaflet-grab,.leaflet-dragging .leaflet-grab .leaflet-interactive,.leaflet-dragging .leaflet-marker-draggable{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-image-layer,.leaflet-pane>svg path,.leaflet-tile-container{pointer-events:none}.leaflet-marker-icon.leaflet-interactive,.leaflet-image-layer.leaflet-interactive,.leaflet-pane>svg path.leaflet-interactive,svg.leaflet-image-layer.leaflet-interactive path{pointer-events:visiblePainted;pointer-events:auto}.leaflet-container{background:#ddd;outline-offset:1px}.leaflet-container a{color:#0078A8}.leaflet-zoom-box{border:2px dotted #38f;background:rgba(255,255,255,.5)}.leaflet-container{font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;font-size:12px;font-size:.75rem;line-height:1.5}.leaflet-bar{box-shadow:0 1px 5px rgba(0,0,0,.65);border-radius:4px}.leaflet-bar a{background-color:#fff;border-bottom:1px solid #ccc;width:26px;height:26px;line-height:26px;display:block;text-align:center;text-decoration:none;color:#000}.leaflet-bar a,.leaflet-control-layers-toggle{background-position:50% 50%;background-repeat:no-repeat;display:block}.leaflet-bar a:hover,.leaflet-bar a:focus{background-color:#f4f4f4}.leaflet-bar a:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-bar a:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:none}.leaflet-bar a.leaflet-disabled{cursor:default;background-color:#f4f4f4;color:#bbb}.leaflet-touch .leaflet-bar a{width:30px;height:30px;line-height:30px}.leaflet-touch .leaflet-bar a:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.leaflet-touch .leaflet-bar a:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.leaflet-control-zoom-in,.leaflet-control-zoom-out{font:bold 18px 'Lucida Console',Monaco,monospace;text-indent:1px}.leaflet-touch .leaflet-control-zoom-in,.leaflet-touch .leaflet-control-zoom-out{font-size:22px}.leaflet-control-layers{box-shadow:0 1px 5px rgba(0,0,0,.4);background:#fff;border-radius:5px}.leaflet-control-layers-toggle{width:36px;height:36px}.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{padding:6px 10px 6px 6px;color:#333;background:#fff}.leaflet-control-layers-scrollbar{overflow-y:scroll;overflow-x:hidden;padding-right:5px}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label{display:block;font-size:13px;font-size:1.08333em}.leaflet-control-layers-separator{height:0;border-top:1px solid #ddd;margin:5px -10px 5px -6px}.leaflet-container .leaflet-control-attribution{background:#fff;background:rgba(255,255,255,.8);margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{padding:0 5px;color:#333;line-height:1.4}.leaflet-control-attribution a{text-decoration:none}.leaflet-control-attribution a:hover,.leaflet-control-attribution a:focus{text-decoration:underline}.leaflet-attribution-flag{display:inline!important;vertical-align:baseline!important;width:1em;height:.6669em}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{border:2px solid #777;border-top:none;line-height:1.1;padding:2px 5px 1px;white-space:nowrap;-moz-box-sizing:border-box;box-sizing:border-box;background:rgba(255,255,255,.8);text-shadow:1px 1px #fff}.leaflet-control-scale-line:not(:first-child){border-top:2px solid #777;border-bottom:none;margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{box-shadow:none}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{border:2px solid rgba(0,0,0,.2);background-clip:padding-box}.leaflet-popup{position:absolute;text-align:center;margin-bottom:20px}.leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:12px}.leaflet-popup-content{margin:13px 24px 13px 20px;line-height:1.3;font-size:13px;font-size:1.08333em;min-height:1px}.leaflet-popup-content p{margin:17px 0;margin:1.3em 0}.leaflet-popup-tip-container{width:40px;height:20px;position:absolute;left:50%;margin-top:-1px;margin-left:-20px;overflow:hidden;pointer-events:none}.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;pointer-events:auto;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#fff;color:#333;box-shadow:0 3px 14px rgba(0,0,0,.4)}.leaflet-container a.leaflet-popup-close-button{position:absolute;top:0;right:0;border:none;text-align:center;width:24px;height:24px;font:16px/24px Tahoma,Verdana,sans-serif;color:#757575;text-decoration:none;background:transparent}.leaflet-container a.leaflet-popup-close-button:hover,.leaflet-container a.leaflet-popup-close-button:focus{color:#585858}.leaflet-popup-scrolled{overflow:auto}.leaflet-div-icon{background:#fff;border:1px solid #666}.leaflet-tooltip{position:absolute;padding:6px;background-color:#fff;border:1px solid #fff;border-radius:3px;color:#222;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,.4)}.leaflet-tooltip.leaflet-interactive{cursor:pointer;pointer-events:auto}.leaflet-tooltip-top:before,.leaflet-tooltip-bottom:before,.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{position:absolute;pointer-events:none;border:6px solid transparent;background:transparent;content:""}.leaflet-tooltip-bottom{margin-top:6px}.leaflet-tooltip-top{margin-top:-6px}.leaflet-tooltip-bottom:before,.leaflet-tooltip-top:before{left:50%;margin-left:-6px}.leaflet-tooltip-top:before{bottom:0;margin-bottom:-12px;border-top-color:#fff}.leaflet-tooltip-bottom:before{top:0;margin-top:-12px;margin-left:-6px;border-bottom-color:#fff}.leaflet-tooltip-left{margin-left:-6px}.leaflet-tooltip-right{margin-left:6px}.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{top:50%;margin-top:-6px}.leaflet-tooltip-left:before{right:0;margin-right:-12px;border-left-color:#fff}.leaflet-tooltip-right:before{left:0;margin-left:-12px;border-right-color:#fff}
12
+ /* === MarkerCluster CSS (inlined) === */
13
+ .leaflet-cluster-anim .leaflet-marker-icon,.leaflet-cluster-anim .leaflet-marker-shadow{-webkit-transition:-webkit-transform .3s ease-out,opacity .3s ease-in;-moz-transition:-moz-transform .3s ease-out,opacity .3s ease-in;transition:transform .3s ease-out,opacity .3s ease-in}.leaflet-cluster-spider-leg{-webkit-transition:-webkit-stroke-dashoffset .3s ease-out,-webkit-stroke-opacity .3s ease-in;-moz-transition:-moz-stroke-dashoffset .3s ease-out,-moz-stroke-opacity .3s ease-in;transition:stroke-dashoffset .3s ease-out,stroke-opacity .3s ease-in}
14
+ .marker-cluster-small{background-color:rgba(181,226,140,.6)}.marker-cluster-small div{background-color:rgba(110,204,57,.6)}.marker-cluster-medium{background-color:rgba(241,211,87,.6)}.marker-cluster-medium div{background-color:rgba(240,194,12,.6)}.marker-cluster-large{background-color:rgba(253,156,115,.6)}.marker-cluster-large div{background-color:rgba(241,128,23,.6)}.marker-cluster{background-clip:padding-box;border-radius:20px}.marker-cluster div{width:30px;height:30px;margin-left:5px;margin-top:5px;text-align:center;border-radius:15px;font:12px "Helvetica Neue",Arial,Helvetica,sans-serif}.marker-cluster span{line-height:30px}
15
+ </style>
16
+ <style>
17
+ /* ================================================================
18
+ INTERACTIVE MAP — Customizable Canvas Page
19
+ ================================================================
20
+ AGENT: Edit the MAP_CONFIG object below to customize this map
21
+ for your client. Change title, colors, categories, data source,
22
+ and sample data. Everything is driven by that one config block.
23
+ ================================================================ */
24
+ * { margin: 0; padding: 0; box-sizing: border-box; }
25
+
26
+ body {
27
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
28
+ background: #0f172a;
29
+ height: 100vh;
30
+ overflow: hidden;
31
+ color: #e2e8f0;
32
+ }
33
+
34
+ .header {
35
+ background: rgba(15, 23, 42, 0.97);
36
+ backdrop-filter: blur(12px);
37
+ padding: 14px 24px;
38
+ display: flex;
39
+ justify-content: space-between;
40
+ align-items: center;
41
+ border-bottom: 2px solid var(--accent, #3b82f6);
42
+ z-index: 1001;
43
+ position: relative;
44
+ }
45
+
46
+ .header h1 {
47
+ font-size: 20px;
48
+ font-weight: 700;
49
+ background: linear-gradient(135deg, #60a5fa, #a78bfa);
50
+ -webkit-background-clip: text;
51
+ -webkit-text-fill-color: transparent;
52
+ letter-spacing: 0.5px;
53
+ }
54
+
55
+ .header-right { display: flex; align-items: center; gap: 20px; }
56
+ .stats { display: flex; gap: 24px; }
57
+ .stat-item { text-align: center; }
58
+
59
+ .stat-number {
60
+ font-size: 28px; font-weight: 700; color: #60a5fa; line-height: 1;
61
+ }
62
+
63
+ .stat-label {
64
+ font-size: 10px; color: #64748b; text-transform: uppercase;
65
+ letter-spacing: 1.5px; font-weight: 600;
66
+ }
67
+
68
+ .stat-number.green { color: #4ade80; }
69
+
70
+ .controls { display: flex; gap: 8px; }
71
+
72
+ .controls select {
73
+ background: #1e293b; color: #e2e8f0; border: 1px solid #334155;
74
+ padding: 6px 10px; border-radius: 6px; font-size: 12px; outline: none; cursor: pointer;
75
+ }
76
+
77
+ .controls select:focus { border-color: #3b82f6; }
78
+
79
+ #map { height: calc(100vh - 64px); width: 100%; background: #0f172a; }
80
+
81
+ .legend {
82
+ position: absolute; bottom: 24px; right: 24px;
83
+ background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(12px);
84
+ padding: 16px 20px; border-radius: 10px;
85
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); z-index: 1000;
86
+ min-width: 180px; border: 1px solid #334155;
87
+ max-height: 50vh; overflow-y: auto;
88
+ }
89
+
90
+ .legend h3 {
91
+ margin-bottom: 10px; font-size: 12px; color: #64748b;
92
+ text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700;
93
+ }
94
+
95
+ .legend-item {
96
+ display: flex; align-items: center; margin-bottom: 6px; font-size: 12px;
97
+ color: #cbd5e1; cursor: pointer; padding: 2px 4px; border-radius: 4px;
98
+ transition: background 0.15s;
99
+ }
100
+
101
+ .legend-item:hover { background: rgba(59, 130, 246, 0.1); }
102
+ .legend-item.dimmed { opacity: 0.3; }
103
+
104
+ .legend-color {
105
+ width: 14px; height: 14px; border-radius: 50%; margin-right: 10px;
106
+ flex-shrink: 0; border: 2px solid rgba(255, 255, 255, 0.2);
107
+ }
108
+
109
+ .legend-count {
110
+ margin-left: auto; color: #64748b; font-size: 11px;
111
+ font-weight: 600; padding-left: 8px;
112
+ }
113
+
114
+ .info-panel {
115
+ position: absolute; bottom: 24px; left: 24px;
116
+ background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(12px);
117
+ padding: 12px 16px; border-radius: 10px; border: 1px solid #334155;
118
+ z-index: 1000; font-size: 12px; color: #94a3b8;
119
+ }
120
+
121
+ .info-panel .mapped { color: #4ade80; font-weight: 600; }
122
+ .info-panel .unmapped { color: #fbbf24; font-weight: 600; }
123
+
124
+ /* Popup styling — dark theme */
125
+ .leaflet-popup-content-wrapper {
126
+ background: #1e293b; color: #e2e8f0; border-radius: 10px;
127
+ border: 1px solid #334155; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
128
+ }
129
+
130
+ .leaflet-popup-tip { background: #1e293b; }
131
+ .popup-content { min-width: 220px; }
132
+
133
+ .popup-title {
134
+ font-size: 16px; font-weight: 700; color: #f1f5f9;
135
+ margin-bottom: 8px; line-height: 1.2;
136
+ }
137
+
138
+ .popup-detail { margin: 4px 0; font-size: 13px; color: #94a3b8; }
139
+ .popup-detail strong { color: #cbd5e1; }
140
+ .popup-detail a { color: #60a5fa; text-decoration: none; }
141
+ .popup-detail a:hover { text-decoration: underline; }
142
+
143
+ .popup-tags { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
144
+
145
+ .popup-tag {
146
+ display: inline-block; padding: 3px 10px; border-radius: 4px;
147
+ font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600;
148
+ }
149
+
150
+ .popup-tag.cat { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
151
+ .popup-tag.status-new { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
152
+ .popup-tag.status-active { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
153
+ .popup-tag.status-pending { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }
154
+ .popup-tag.status-completed { background: rgba(34, 211, 238, 0.2); color: #22d3ee; }
155
+ .popup-tag.status-closed { background: rgba(100, 100, 100, 0.2); color: #94a3b8; }
156
+ .popup-tag.approx { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
157
+
158
+ /* Cluster overrides */
159
+ .marker-cluster-small { background-color: rgba(59, 130, 246, 0.3) !important; }
160
+ .marker-cluster-small div { background-color: rgba(59, 130, 246, 0.7) !important; color: white !important; font-weight: 700; }
161
+ .marker-cluster-medium { background-color: rgba(139, 92, 246, 0.3) !important; }
162
+ .marker-cluster-medium div { background-color: rgba(139, 92, 246, 0.7) !important; color: white !important; font-weight: 700; }
163
+ .marker-cluster-large { background-color: rgba(236, 72, 153, 0.3) !important; }
164
+ .marker-cluster-large div { background-color: rgba(236, 72, 153, 0.7) !important; color: white !important; font-weight: 700; }
165
+
166
+ .loading-overlay {
167
+ position: absolute; top: 64px; left: 0; right: 0; bottom: 0;
168
+ background: rgba(15, 23, 42, 0.9); display: flex; align-items: center;
169
+ justify-content: center; z-index: 2000; flex-direction: column; gap: 12px;
170
+ }
171
+
172
+ .loading-overlay .spinner {
173
+ width: 40px; height: 40px; border: 3px solid #334155;
174
+ border-top: 3px solid #3b82f6; border-radius: 50%;
175
+ animation: spin 0.8s linear infinite;
176
+ }
177
+
178
+ @keyframes spin { to { transform: rotate(360deg); } }
179
+ .loading-overlay .msg { color: #94a3b8; font-size: 14px; }
180
+
181
+ /* Dark map tiles */
182
+ .leaflet-tile-pane { filter: saturate(0.3) brightness(0.7); }
183
+ .leaflet-control-zoom a { background: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 !important; }
184
+ .leaflet-control-zoom a:hover { background: #334155 !important; }
185
+ .leaflet-control-attribution { background: rgba(15, 23, 42, 0.8) !important; color: #64748b !important; }
186
+ .leaflet-control-attribution a { color: #64748b !important; }
187
+ </style>
188
+ </head>
189
+ <body>
190
+ <div class="header">
191
+ <h1 id="map-title">Interactive Map</h1>
192
+ <div class="header-right">
193
+ <div class="controls">
194
+ <select id="filter-status"><option value="all">All Statuses</option></select>
195
+ <select id="filter-category"><option value="all">All Categories</option></select>
196
+ </div>
197
+ <div class="stats">
198
+ <div class="stat-item">
199
+ <div class="stat-number" id="total-items">--</div>
200
+ <div class="stat-label">Total</div>
201
+ </div>
202
+ <div class="stat-item">
203
+ <div class="stat-number green" id="mapped-items">--</div>
204
+ <div class="stat-label">On Map</div>
205
+ </div>
206
+ <div class="stat-item">
207
+ <div class="stat-number" id="total-regions">--</div>
208
+ <div class="stat-label">Regions</div>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+
214
+ <div id="map"></div>
215
+
216
+ <div class="legend" id="legend">
217
+ <h3 id="legend-title">Categories</h3>
218
+ <div id="legend-items"></div>
219
+ </div>
220
+
221
+ <div class="info-panel" id="info-panel">
222
+ <span class="mapped" id="info-mapped">--</span> mapped &bull;
223
+ <span class="unmapped" id="info-unmapped">--</span> no location &bull;
224
+ Click clusters to zoom
225
+ </div>
226
+
227
+ <div class="loading-overlay" id="loading">
228
+ <div class="spinner"></div>
229
+ <div class="msg" id="loading-msg">Loading data...</div>
230
+ </div>
231
+
232
+ <script>
233
+ // ╔═══════════════════════════════════════════════════════════════════╗
234
+ // ║ MAP CONFIGURATION — EDIT THIS BLOCK TO CUSTOMIZE THE MAP ║
235
+ // ║ ║
236
+ // ║ Agent: Change these values to adapt the map for any use case. ║
237
+ // ║ Supports: leads, jobs, tasks, locations, assets, properties, ║
238
+ // ║ service areas, deliveries, fleet tracking, or any geo data. ║
239
+ // ╚═══════════════════════════════════════════════════════════════════╝
240
+ const MAP_CONFIG = {
241
+ // --- Display ---
242
+ title: 'Interactive Map',
243
+ legendTitle: 'Categories',
244
+ centerLat: 39.8283,
245
+ centerLon: -98.5795,
246
+ defaultZoom: 4,
247
+
248
+ // --- Data Source ---
249
+ // Option A: API endpoint (set apiUrl, leave items empty)
250
+ // Option B: Inline data (set items array, leave apiUrl null)
251
+ apiUrl: null, // e.g. '/social-api/api/leads' or '/api/map-data'
252
+ apiParams: {}, // e.g. { tenant: 'josh' }
253
+ apiItemsKey: 'items', // key in response that holds the array (e.g. 'leads', 'jobs', 'items')
254
+ refreshInterval: 300000, // auto-refresh ms (0 = disabled, 300000 = 5min)
255
+
256
+ // --- Field Mapping ---
257
+ // Map your data fields to what the map expects
258
+ fields: {
259
+ title: 'name', // primary display name
260
+ subtitle: 'company', // secondary name (shown in popup)
261
+ category: 'category', // used for color grouping + legend
262
+ status: 'status', // used for status filter + badge
263
+ address: 'address', // street address for geocoding
264
+ phone: 'phone', // phone number (used for area code geolocation)
265
+ email: 'email', // email (shown in popup)
266
+ lat: 'lat', // latitude (if pre-geocoded)
267
+ lon: 'lon', // longitude (if pre-geocoded)
268
+ id: 'id', // unique identifier
269
+ },
270
+
271
+ // --- Status Options ---
272
+ statuses: ['new', 'active', 'pending', 'completed', 'closed'],
273
+
274
+ // --- Category Colors ---
275
+ // Keys should match values in your data's category field
276
+ categoryColors: {
277
+ 'default': '#3b82f6',
278
+ 'construction': '#f59e0b',
279
+ 'services': '#8b5cf6',
280
+ 'retail': '#10b981',
281
+ 'food': '#ec4899',
282
+ 'fitness': '#ef4444',
283
+ 'transport': '#06b6d4',
284
+ 'other': '#64748b',
285
+ },
286
+
287
+ // --- Sample Data ---
288
+ // Replace with your real data or set apiUrl above to fetch from server
289
+ items: [
290
+ { id: 1, name: 'Acme Construction', company: 'Acme LLC', category: 'construction', status: 'active', address: '123 Main St, Phoenix, AZ 85001', phone: '6025551234', email: 'info@acme.com' },
291
+ { id: 2, name: 'Fresh Bites Catering', company: 'Fresh Bites', category: 'food', status: 'new', address: '456 Oak Ave, Austin, TX 78701', phone: '5125559876', email: 'hello@freshbites.com' },
292
+ { id: 3, name: 'Peak Fitness Gym', company: 'Peak Fitness', category: 'fitness', status: 'active', phone: '3035554567', email: 'contact@peakfit.com' },
293
+ { id: 4, name: 'Skyline Roofing', company: 'Skyline LLC', category: 'construction', status: 'pending', address: '789 Elm Dr, Denver, CO 80202', phone: '7205553210' },
294
+ { id: 5, name: 'QuickShip Logistics', company: 'QuickShip', category: 'transport', status: 'completed', address: '321 Harbor Blvd, Miami, FL 33101', phone: '3055558888' },
295
+ { id: 6, name: 'Urban Cuts Barbershop', company: 'Urban Cuts', category: 'services', status: 'new', phone: '2125557777' },
296
+ { id: 7, name: 'Mountain View Plumbing', company: 'MV Plumbing', category: 'services', status: 'active', address: '900 Pine St, Salt Lake City, UT 84101', phone: '8015552222' },
297
+ { id: 8, name: 'Taco Truck Express', company: 'TTE LLC', category: 'food', status: 'new', address: '555 Sunset Blvd, Los Angeles, CA 90028', phone: '3235556666' },
298
+ ],
299
+ };
300
+
301
+ // ╔═══════════════════════════════════════════════════════════════════╗
302
+ // ║ GEOCODING ENGINE — US state centers + area code lookup ║
303
+ // ║ No external API needed. Works offline for US addresses. ║
304
+ // ╚═══════════════════════════════════════════════════════════════════╝
305
+ const STATE_COORDS = {
306
+ AL:[32.81,-86.79],AK:[61.37,-152.40],AZ:[33.73,-111.43],AR:[34.97,-92.37],
307
+ CA:[36.12,-119.68],CO:[39.06,-105.31],CT:[41.60,-72.76],DE:[39.32,-75.51],
308
+ FL:[27.77,-81.69],GA:[33.04,-83.64],HI:[21.09,-157.50],ID:[44.24,-114.48],
309
+ IL:[40.35,-88.99],IN:[39.85,-86.26],IA:[42.01,-93.21],KS:[38.53,-96.73],
310
+ KY:[37.67,-84.67],LA:[31.17,-91.87],ME:[44.69,-69.38],MD:[39.06,-76.80],
311
+ MA:[42.23,-71.53],MI:[43.33,-84.54],MN:[45.69,-93.90],MS:[32.74,-89.68],
312
+ MO:[38.46,-92.29],MT:[46.92,-110.45],NE:[41.13,-98.27],NV:[38.31,-117.06],
313
+ NH:[43.45,-71.56],NJ:[40.30,-74.52],NM:[34.84,-106.25],NY:[42.17,-74.95],
314
+ NC:[35.63,-79.81],ND:[47.53,-99.78],OH:[40.39,-82.76],OK:[35.57,-96.93],
315
+ OR:[44.57,-122.07],PA:[40.59,-77.21],RI:[41.68,-71.51],SC:[33.86,-80.95],
316
+ SD:[44.30,-99.44],TN:[35.75,-86.69],TX:[31.05,-97.56],UT:[40.15,-111.86],
317
+ VT:[44.05,-72.71],VA:[37.77,-78.17],WA:[47.40,-121.49],WV:[38.49,-80.95],
318
+ WI:[44.27,-89.62],WY:[42.76,-107.30],DC:[38.90,-77.03],
319
+ };
320
+
321
+ const AREA_CODE_COORDS = {
322
+ 201:[40.88,-74.16],202:[38.90,-77.04],203:[41.18,-73.19],205:[33.52,-86.80],
323
+ 206:[47.61,-122.33],207:[44.31,-69.78],208:[43.62,-116.20],209:[37.95,-121.29],
324
+ 210:[29.42,-98.49],212:[40.78,-73.97],213:[34.05,-118.24],214:[32.78,-96.80],
325
+ 215:[40.00,-75.13],216:[41.50,-81.69],217:[39.78,-89.65],218:[46.78,-92.10],
326
+ 219:[41.60,-87.33],224:[42.05,-87.93],225:[30.45,-91.19],228:[30.40,-88.88],
327
+ 231:[44.25,-86.25],234:[41.10,-81.52],239:[26.64,-81.87],240:[39.14,-77.21],
328
+ 248:[42.59,-83.36],251:[30.69,-88.04],252:[35.60,-77.37],253:[47.25,-122.44],
329
+ 254:[31.55,-97.15],256:[34.73,-86.59],260:[41.08,-85.14],262:[42.73,-88.00],
330
+ 267:[40.00,-75.13],269:[42.29,-85.59],270:[37.04,-86.45],281:[29.76,-95.37],
331
+ 301:[39.00,-76.95],302:[39.16,-75.52],303:[39.74,-104.99],304:[38.35,-81.63],
332
+ 305:[25.76,-80.19],307:[42.85,-106.33],308:[41.13,-100.77],309:[40.69,-89.59],
333
+ 310:[33.94,-118.39],312:[41.88,-87.63],313:[42.33,-83.05],314:[38.63,-90.20],
334
+ 315:[43.05,-75.69],316:[37.69,-97.34],317:[39.77,-86.16],318:[32.51,-93.75],
335
+ 319:[41.98,-91.67],320:[45.56,-94.16],321:[28.54,-80.65],323:[34.05,-118.24],
336
+ 325:[32.45,-99.73],330:[41.08,-81.52],334:[32.37,-86.30],336:[36.07,-79.79],
337
+ 337:[30.22,-92.02],346:[29.76,-95.37],347:[40.65,-73.95],352:[29.22,-82.16],
338
+ 360:[48.75,-122.48],361:[27.80,-97.40],385:[40.76,-111.89],386:[29.21,-81.02],
339
+ 401:[41.82,-71.41],402:[41.26,-95.94],404:[33.75,-84.39],405:[35.47,-97.52],
340
+ 406:[46.59,-112.04],407:[28.54,-81.38],408:[37.34,-121.89],409:[30.08,-94.13],
341
+ 410:[39.29,-76.61],412:[40.44,-79.99],413:[42.10,-72.59],414:[43.04,-87.91],
342
+ 415:[37.78,-122.42],417:[37.22,-93.29],419:[41.65,-83.54],423:[35.05,-85.31],
343
+ 424:[34.05,-118.24],425:[47.61,-122.19],432:[31.95,-102.18],434:[37.54,-78.95],
344
+ 435:[40.76,-111.89],440:[41.48,-81.52],443:[39.29,-76.61],458:[44.05,-123.09],
345
+ 469:[32.78,-96.80],470:[33.75,-84.39],478:[32.84,-83.63],479:[36.07,-94.17],
346
+ 480:[33.41,-111.83],484:[40.00,-75.47],501:[34.75,-92.29],502:[38.25,-85.76],
347
+ 503:[45.51,-122.68],504:[29.95,-90.07],505:[35.08,-106.65],507:[44.02,-93.47],
348
+ 508:[42.06,-71.24],509:[47.66,-117.43],510:[37.80,-122.27],512:[30.27,-97.74],
349
+ 513:[39.10,-84.51],515:[41.59,-93.62],516:[40.72,-73.60],517:[42.73,-84.56],
350
+ 518:[42.65,-73.76],520:[32.22,-110.97],530:[40.58,-122.39],539:[36.15,-95.99],
351
+ 540:[37.27,-79.94],541:[44.05,-121.31],559:[36.74,-119.77],561:[26.72,-80.05],
352
+ 562:[33.77,-118.19],567:[41.65,-83.54],570:[41.24,-75.88],571:[38.88,-77.17],
353
+ 573:[38.58,-92.17],574:[41.68,-86.25],580:[34.62,-98.43],585:[43.16,-77.61],
354
+ 586:[42.56,-82.93],601:[32.30,-90.18],602:[33.45,-112.07],603:[43.21,-71.54],
355
+ 605:[43.55,-96.73],606:[37.83,-83.38],607:[42.10,-75.91],608:[43.07,-89.40],
356
+ 609:[40.22,-74.76],610:[40.06,-75.47],612:[44.98,-93.27],614:[39.96,-82.99],
357
+ 615:[36.16,-86.78],616:[42.96,-85.66],617:[42.36,-71.06],618:[38.63,-89.99],
358
+ 619:[32.72,-117.16],623:[33.49,-112.31],626:[34.14,-118.13],630:[41.75,-88.15],
359
+ 631:[40.82,-73.20],636:[38.63,-90.57],646:[40.78,-73.97],650:[37.49,-122.23],
360
+ 651:[44.95,-93.09],657:[33.79,-117.85],661:[35.37,-119.02],678:[33.75,-84.39],
361
+ 682:[32.75,-97.33],701:[46.88,-96.79],702:[36.17,-115.14],703:[38.88,-77.17],
362
+ 704:[35.23,-80.84],706:[33.47,-82.01],707:[38.51,-122.81],708:[41.84,-87.84],
363
+ 713:[29.76,-95.37],714:[33.74,-117.94],715:[44.52,-89.57],716:[42.89,-78.88],
364
+ 717:[40.27,-76.88],718:[40.65,-73.95],719:[38.83,-104.82],720:[39.74,-104.99],
365
+ 724:[40.36,-79.94],727:[27.96,-82.79],732:[40.49,-74.26],734:[42.28,-83.74],
366
+ 737:[30.27,-97.74],740:[39.96,-82.01],747:[34.18,-118.31],754:[26.12,-80.14],
367
+ 757:[36.85,-76.29],760:[33.13,-117.16],763:[45.07,-93.35],770:[33.95,-84.15],
368
+ 773:[41.88,-87.63],774:[42.06,-71.24],775:[39.53,-119.81],781:[42.45,-71.07],
369
+ 785:[39.05,-95.68],786:[25.76,-80.19],801:[40.76,-111.89],802:[44.26,-72.58],
370
+ 803:[34.00,-81.03],804:[37.54,-77.44],805:[34.95,-120.43],806:[34.47,-101.95],
371
+ 808:[21.31,-157.86],810:[42.97,-83.69],812:[38.44,-87.09],813:[27.95,-82.46],
372
+ 814:[41.45,-79.98],815:[41.52,-88.43],816:[39.10,-94.58],817:[32.75,-97.33],
373
+ 818:[34.18,-118.31],828:[35.60,-82.55],830:[29.30,-98.17],831:[36.60,-121.89],
374
+ 832:[29.76,-95.37],843:[32.78,-79.93],845:[41.50,-74.01],847:[42.16,-87.83],
375
+ 850:[30.44,-87.22],856:[39.95,-75.12],857:[42.36,-71.06],858:[32.90,-117.20],
376
+ 859:[38.05,-84.50],860:[41.77,-72.68],862:[40.74,-74.17],863:[27.95,-81.64],
377
+ 864:[34.85,-82.40],865:[35.96,-83.92],901:[35.15,-90.05],903:[32.35,-95.30],
378
+ 904:[30.33,-81.66],906:[46.49,-87.40],907:[61.22,-149.90],908:[40.67,-74.41],
379
+ 909:[34.06,-117.59],910:[35.05,-78.88],912:[32.08,-81.09],913:[39.11,-94.63],
380
+ 914:[41.03,-73.76],915:[31.76,-106.45],916:[38.58,-121.49],917:[40.78,-73.97],
381
+ 918:[36.15,-95.99],919:[35.79,-78.64],920:[44.02,-88.54],925:[37.95,-122.06],
382
+ 928:[35.20,-111.65],929:[40.65,-73.95],937:[39.76,-84.19],940:[33.91,-97.14],
383
+ 941:[27.34,-82.53],949:[33.62,-117.71],951:[33.95,-117.40],954:[26.12,-80.14],
384
+ 970:[40.49,-105.08],971:[45.51,-122.68],972:[32.95,-96.73],973:[40.74,-74.17],
385
+ 978:[42.65,-71.14],980:[35.23,-80.84],984:[47.61,-122.33],985:[29.70,-90.56],
386
+ };
387
+
388
+ function stateFromZip(zip) {
389
+ const z = parseInt(zip.substring(0, 3));
390
+ if(z>=10&&z<=69)return'MA';if(z>=70&&z<=89)return'RI';if(z>=90&&z<=99)return'CT';
391
+ if(z>=100&&z<=149)return'NY';if(z>=150&&z<=196)return'PA';if(z>=197&&z<=199)return'DE';
392
+ if(z>=200&&z<=205)return'DC';if(z>=206&&z<=219)return'MD';if(z>=220&&z<=246)return'VA';
393
+ if(z>=247&&z<=268)return'WV';if(z>=270&&z<=289)return'NC';if(z>=290&&z<=299)return'SC';
394
+ if(z>=300&&z<=319)return'GA';if(z>=320&&z<=349)return'FL';if(z>=350&&z<=369)return'AL';
395
+ if(z>=370&&z<=385)return'TN';if(z>=386&&z<=397)return'MS';if(z>=400&&z<=427)return'KY';
396
+ if(z>=430&&z<=458)return'OH';if(z>=460&&z<=479)return'IN';if(z>=480&&z<=499)return'MI';
397
+ if(z>=500&&z<=528)return'IA';if(z>=530&&z<=549)return'WI';if(z>=550&&z<=567)return'MN';
398
+ if(z>=570&&z<=577)return'SD';if(z>=580&&z<=588)return'ND';if(z>=590&&z<=599)return'MT';
399
+ if(z>=600&&z<=629)return'IL';if(z>=630&&z<=658)return'MO';if(z>=660&&z<=679)return'KS';
400
+ if(z>=680&&z<=693)return'NE';if(z>=700&&z<=714)return'LA';if(z>=716&&z<=729)return'AR';
401
+ if(z>=730&&z<=749)return'OK';if(z>=750&&z<=799)return'TX';if(z>=800&&z<=816)return'CO';
402
+ if(z>=820&&z<=831)return'WY';if(z>=832&&z<=838)return'ID';if(z>=840&&z<=847)return'UT';
403
+ if(z>=850&&z<=865)return'AZ';if(z>=870&&z<=884)return'NM';if(z>=889&&z<=898)return'NV';
404
+ if(z>=900&&z<=966)return'CA';if(z>=967&&z<=968)return'HI';if(z>=970&&z<=979)return'OR';
405
+ if(z>=980&&z<=994)return'WA';if(z>=995&&z<=999)return'AK';return null;
406
+ }
407
+
408
+ // ================================================================
409
+ // Location extraction — tries lat/lon, address, then area code
410
+ // ================================================================
411
+ function extractLocation(item) {
412
+ const f = MAP_CONFIG.fields;
413
+
414
+ // 1. Pre-geocoded coordinates
415
+ const lat = parseFloat(item[f.lat]);
416
+ const lon = parseFloat(item[f.lon]);
417
+ if (!isNaN(lat) && !isNaN(lon) && lat !== 0 && lon !== 0) {
418
+ return { lat, lon, precision: 'exact', state: null };
419
+ }
420
+
421
+ // 2. Parse address for state/zip
422
+ const addr = String(item[f.address] || '');
423
+ if (addr) {
424
+ const stMatch = addr.match(/\b([A-Z]{2})\s*\d{5}/) ||
425
+ addr.match(/,\s*([A-Z]{2})\s*$/) ||
426
+ addr.match(/\b([A-Z]{2})\b(?:\s*\d{5})?/);
427
+ if (stMatch && STATE_COORDS[stMatch[1]]) {
428
+ const c = STATE_COORDS[stMatch[1]], j = () => (Math.random() - 0.5) * 1.5;
429
+ return { lat: c[0] + j(), lon: c[1] + j(), precision: 'state', state: stMatch[1] };
430
+ }
431
+ const zipMatch = addr.match(/\b(\d{5})(?:-\d{4})?\b/);
432
+ if (zipMatch) {
433
+ const st = stateFromZip(zipMatch[1]);
434
+ if (st && STATE_COORDS[st]) {
435
+ const c = STATE_COORDS[st], j = () => (Math.random() - 0.5) * 1.5;
436
+ return { lat: c[0] + j(), lon: c[1] + j(), precision: 'zip', state: st };
437
+ }
438
+ }
439
+ }
440
+
441
+ // 3. Phone area code
442
+ const phone = String(item[f.phone] || '').replace(/\D/g, '');
443
+ let ac = null;
444
+ if (phone.length === 10) ac = phone.substring(0, 3);
445
+ else if (phone.length === 11 && phone[0] === '1') ac = phone.substring(1, 4);
446
+ if (ac && AREA_CODE_COORDS[parseInt(ac)]) {
447
+ const c = AREA_CODE_COORDS[parseInt(ac)], j = () => (Math.random() - 0.5) * 0.8;
448
+ return { lat: c[0] + j(), lon: c[1] + j(), precision: 'area-code', state: null };
449
+ }
450
+
451
+ return null;
452
+ }
453
+
454
+ // ================================================================
455
+ // Map setup
456
+ // ================================================================
457
+ const map = L.map('map', { zoomControl: true, attributionControl: true })
458
+ .setView([MAP_CONFIG.centerLat, MAP_CONFIG.centerLon], MAP_CONFIG.defaultZoom);
459
+
460
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
461
+ attribution: '&copy; OpenStreetMap', maxZoom: 18
462
+ }).addTo(map);
463
+
464
+ const markers = L.markerClusterGroup({
465
+ maxClusterRadius: 50, spiderfyOnMaxZoom: true,
466
+ showCoverageOnHover: false, zoomToBoundsOnClick: true, disableClusteringAtZoom: 10,
467
+ });
468
+ map.addLayer(markers);
469
+
470
+ // ================================================================
471
+ // Data + render
472
+ // ================================================================
473
+ let allItems = [];
474
+ let categoryFilter = 'all';
475
+ let statusFilter = 'all';
476
+ let legendFilter = null;
477
+
478
+ function getField(item, fieldName) {
479
+ return item[MAP_CONFIG.fields[fieldName]] || '';
480
+ }
481
+
482
+ function getCategoryColor(cat) {
483
+ return MAP_CONFIG.categoryColors[cat] || MAP_CONFIG.categoryColors['default'] || '#64748b';
484
+ }
485
+
486
+ function formatCategoryName(cat) {
487
+ return String(cat || 'other').replace(/[-_]/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
488
+ }
489
+
490
+ function esc(s) { const d = document.createElement('div'); d.textContent = s || ''; return d.innerHTML; }
491
+
492
+ async function fetchItems() {
493
+ if (MAP_CONFIG.apiUrl) {
494
+ let allData = [];
495
+ let offset = 0;
496
+ const limit = 200;
497
+ let hasMore = true;
498
+ while (hasMore) {
499
+ const params = new URLSearchParams({ ...MAP_CONFIG.apiParams, limit, offset });
500
+ const url = `${MAP_CONFIG.apiUrl}?${params}`;
501
+ const res = await fetch(url);
502
+ if (!res.ok) throw new Error(`API ${res.status}`);
503
+ const data = await res.json();
504
+ const items = data[MAP_CONFIG.apiItemsKey] || data.items || data.data || [];
505
+ allData = allData.concat(items);
506
+ if (items.length < limit) hasMore = false;
507
+ else offset += limit;
508
+ }
509
+ return allData;
510
+ }
511
+ return MAP_CONFIG.items || [];
512
+ }
513
+
514
+ function renderMap(items) {
515
+ markers.clearLayers();
516
+ let mapped = 0, unmapped = 0;
517
+ const regions = new Set();
518
+ const catCounts = {};
519
+ const f = MAP_CONFIG.fields;
520
+
521
+ const filtered = items.filter(item => {
522
+ const status = getField(item, 'status');
523
+ const cat = getField(item, 'category');
524
+ if (statusFilter !== 'all' && status !== statusFilter) return false;
525
+ if (categoryFilter !== 'all' && cat !== categoryFilter) return false;
526
+ if (legendFilter && cat !== legendFilter) return false;
527
+ return true;
528
+ });
529
+
530
+ filtered.forEach(item => {
531
+ const cat = getField(item, 'category') || 'other';
532
+ catCounts[cat] = (catCounts[cat] || 0) + 1;
533
+
534
+ const loc = extractLocation(item);
535
+ if (!loc) { unmapped++; return; }
536
+ mapped++;
537
+ if (loc.state) regions.add(loc.state);
538
+
539
+ const color = getCategoryColor(cat);
540
+ const title = getField(item, 'title') || 'Unknown';
541
+ const subtitle = getField(item, 'subtitle');
542
+ const phone = getField(item, 'phone');
543
+ const email = getField(item, 'email');
544
+ const addr = getField(item, 'address');
545
+ const status = getField(item, 'status') || 'new';
546
+ const catName = formatCategoryName(cat);
547
+
548
+ const popup = `
549
+ <div class="popup-content">
550
+ <div class="popup-title">${esc(title)}</div>
551
+ ${subtitle && subtitle !== title ? `<div class="popup-detail"><strong>${esc(subtitle)}</strong></div>` : ''}
552
+ ${addr ? `<div class="popup-detail">${esc(addr)}</div>` : ''}
553
+ ${phone ? `<div class="popup-detail"><a href="tel:${esc(phone)}">${esc(phone)}</a></div>` : ''}
554
+ ${email ? `<div class="popup-detail"><a href="mailto:${esc(email)}">${esc(email)}</a></div>` : ''}
555
+ <div class="popup-tags">
556
+ <span class="popup-tag cat" style="background:${color}22;color:${color}">${esc(catName)}</span>
557
+ <span class="popup-tag status-${status}">${status}</span>
558
+ ${loc.precision === 'exact' ? '' : '<span class="popup-tag approx">approx</span>'}
559
+ </div>
560
+ </div>`;
561
+
562
+ const marker = L.circleMarker([loc.lat, loc.lon], {
563
+ radius: 8, fillColor: color, color: '#fff', weight: 2, opacity: 0.9, fillOpacity: 0.75,
564
+ });
565
+ marker.bindPopup(popup, { maxWidth: 300 });
566
+ marker.on('mouseover', function() { this.setRadius(12); this.setStyle({ fillOpacity: 1, weight: 3 }); });
567
+ marker.on('mouseout', function() { this.setRadius(8); this.setStyle({ fillOpacity: 0.75, weight: 2 }); });
568
+ markers.addLayer(marker);
569
+ });
570
+
571
+ document.getElementById('total-items').textContent = items.length;
572
+ document.getElementById('mapped-items').textContent = mapped;
573
+ document.getElementById('total-regions').textContent = regions.size;
574
+ document.getElementById('info-mapped').textContent = mapped;
575
+ document.getElementById('info-unmapped').textContent = unmapped;
576
+ renderLegend(catCounts);
577
+ }
578
+
579
+ function renderLegend(catCounts) {
580
+ const sorted = Object.entries(catCounts).sort((a, b) => b[1] - a[1]);
581
+ document.getElementById('legend-items').innerHTML = sorted.map(([cat, count]) => {
582
+ const color = getCategoryColor(cat);
583
+ const name = formatCategoryName(cat);
584
+ const dim = legendFilter && legendFilter !== cat ? 'dimmed' : '';
585
+ return `<div class="legend-item ${dim}" onclick="toggleLegend('${cat}')">
586
+ <div class="legend-color" style="background:${color}"></div>
587
+ <span>${name}</span><span class="legend-count">${count}</span></div>`;
588
+ }).join('');
589
+ }
590
+
591
+ function populateFilters(items) {
592
+ const f = MAP_CONFIG.fields;
593
+ // Status filter
594
+ const statusSel = document.getElementById('filter-status');
595
+ statusSel.innerHTML = '<option value="all">All Statuses</option>';
596
+ MAP_CONFIG.statuses.forEach(s => {
597
+ const opt = document.createElement('option');
598
+ opt.value = s; opt.textContent = formatCategoryName(s);
599
+ statusSel.appendChild(opt);
600
+ });
601
+ // Category filter
602
+ const cats = {};
603
+ items.forEach(i => { const c = i[f.category] || 'other'; cats[c] = (cats[c] || 0) + 1; });
604
+ const catSel = document.getElementById('filter-category');
605
+ catSel.innerHTML = '<option value="all">All Categories</option>';
606
+ Object.entries(cats).sort((a, b) => b[1] - a[1]).forEach(([cat, count]) => {
607
+ const opt = document.createElement('option');
608
+ opt.value = cat; opt.textContent = `${formatCategoryName(cat)} (${count})`;
609
+ catSel.appendChild(opt);
610
+ });
611
+ }
612
+
613
+ function toggleLegend(cat) {
614
+ legendFilter = legendFilter === cat ? null : cat;
615
+ renderMap(allItems);
616
+ }
617
+
618
+ // Event listeners
619
+ document.getElementById('filter-status').addEventListener('change', e => {
620
+ statusFilter = e.target.value; legendFilter = null; renderMap(allItems);
621
+ });
622
+ document.getElementById('filter-category').addEventListener('change', e => {
623
+ categoryFilter = e.target.value; legendFilter = null; renderMap(allItems);
624
+ });
625
+
626
+ // Apply config to UI
627
+ document.getElementById('map-title').textContent = MAP_CONFIG.title;
628
+ document.getElementById('legend-title').textContent = MAP_CONFIG.legendTitle;
629
+ document.getElementById('loading-msg').textContent = MAP_CONFIG.apiUrl ? 'Loading data from server...' : 'Loading map...';
630
+
631
+ // Initialize
632
+ (async function init() {
633
+ try {
634
+ allItems = await fetchItems();
635
+ populateFilters(allItems);
636
+ renderMap(allItems);
637
+ document.getElementById('loading').style.display = 'none';
638
+ } catch (err) {
639
+ document.getElementById('loading').innerHTML = `
640
+ <div style="color:#f87171;font-size:16px;text-align:center">
641
+ Failed to load data: ${err.message}<br>
642
+ <span style="color:#64748b;font-size:13px">Check your MAP_CONFIG.apiUrl or items array</span>
643
+ </div>`;
644
+ }
645
+ })();
646
+
647
+ // Auto-refresh
648
+ if (MAP_CONFIG.refreshInterval > 0 && MAP_CONFIG.apiUrl) {
649
+ setInterval(async () => {
650
+ try { allItems = await fetchItems(); renderMap(allItems); } catch (e) {}
651
+ }, MAP_CONFIG.refreshInterval);
652
+ }
653
+ </script>
654
+ </body>
655
+ </html>