diff --git a/assets/js/app.js b/assets/js/app.js index aa6f931..05f2812 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -25,11 +25,110 @@ import {LiveSocket} from "phoenix_live_view" import {hooks as colocatedHooks} from "phoenix-colocated/localspot" import topbar from "../vendor/topbar" +// Custom hooks +const Geolocation = { + mounted() { + this.el.addEventListener("click", () => { + if ("geolocation" in navigator) { + this.el.disabled = true + this.el.textContent = "Getting location..." + navigator.geolocation.getCurrentPosition( + (position) => { + this.pushEvent("set_location", { + latitude: position.coords.latitude.toString(), + longitude: position.coords.longitude.toString() + }) + }, + (error) => { + console.error("Geolocation error:", error) + this.el.disabled = false + this.el.textContent = "Use My Location" + alert("Could not get your location. Please check your browser permissions.") + } + ) + } else { + alert("Geolocation is not supported by your browser.") + } + }) + } +} + +const LeafletMap = { + mounted() { + // Load Leaflet CSS dynamically + if (!document.querySelector('link[href*="leaflet"]')) { + const link = document.createElement('link') + link.rel = 'stylesheet' + link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css' + document.head.appendChild(link) + } + + // Load Leaflet JS dynamically + if (!window.L) { + const script = document.createElement('script') + script.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js' + script.onload = () => this.initMap() + document.head.appendChild(script) + } else { + this.initMap() + } + }, + + initMap() { + const businesses = JSON.parse(this.el.dataset.businesses) + const center = JSON.parse(this.el.dataset.center) + const zoom = parseInt(this.el.dataset.zoom) + + // Clear the loading indicator + this.el.innerHTML = '' + + // Initialize map + this.map = L.map(this.el).setView([center.lat, center.lng], zoom) + + // Add OpenStreetMap tiles + L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution: '© OpenStreetMap contributors' + }).addTo(this.map) + + // Add markers for each business + this.markers = businesses.map(business => { + const marker = L.marker([business.lat, business.lng]) + .addTo(this.map) + .bindPopup(` +
+ {@business.description} +
+ +{@selected_business.category.name}
++ {@selected_business.description} +
+ +Showing {length(@businesses)} businesses on the map.
++ Coordinates help customers find you on the map. You can find yours on Google Maps. +
++ Enter a URL to an image of your business. Direct image links work best. +
+{@business.description}
+ + <%!-- Local ownership info --%> ++ This business has confirmed they are locally owned and operated, not a chain or franchise. +
+{@business.street_address}
+{@business.city}, {@business.state} {@business.zip_code}
+Hours not available
+ <% else %> ++ No categories yet. Check back soon! +
+ <% else %> ++ {Map.get(@category_counts, category.id, 0)} businesses +
++ {category.description} +
++ {@business.description} +
+ +