# Service Locations Map This example demonstrates an interactive map widget using Leaflet.js to display service locations with popups, navigation, and real-time updates. ## Key Features * **Interactive Leaflet.js map** with zoom and pan controls * **Custom markers** for each service location * **Information popups** with service details and images * **Navigation integration** to service detail screens * **Automatic map bounds** fitting all service locations * **Real-time updates** when service data changes * **Responsive design** that works on all devices * **Error handling** with user-friendly messages ## Use Cases Perfect for applications requiring: * Service location directories and finders * Store locators and branch finders * Event venue mapping * Real estate property maps * Delivery service coverage areas * Field service management * Tourism and travel guides ## Implementation Overview This widget uses the **Other Tables Data** pattern, fetching data from a "Service Locations" or "Services" datatable. Key implementation features: * Leaflet.js integration for professional mapping * GeoJSON coordinate handling for location data * Popup content generation with images and details * Automatic map bounds calculation * Real-time data synchronization ## Code Example ```html Service Locations Map
``` ## Key Concepts ### Leaflet.js Map Integration * **Professional Mapping**: Uses industry-standard Leaflet.js for reliable map functionality * **Custom Markers**: Places markers at service locations with tooltips * **Interactive Popups**: Rich popups with images, descriptions, and action buttons * **Map Controls**: Zoom controls and pan functionality built-in ### Location Data Handling * **GeoJSON Support**: Handles standard GeoJSON coordinate format \[longitude, latitude] * **Data Validation**: Validates coordinates to ensure they're within valid ranges * **Error Handling**: Graceful handling of invalid or missing location data * **Flexible Data Sources**: Works with "Service Locations" or "Services" tables ### Advanced Map Features * **Auto-fitting Bounds**: Automatically zooms to show all service locations * **Responsive Popups**: Popups adapt to mobile and desktop layouts * **Navigation Integration**: Popup buttons navigate to service detail screens * **Real-time Updates**: Map updates immediately when service data changes ### User Experience * **Loading States**: Clear loading indicators while data is fetched * **Error Messages**: User-friendly error messages for various failure scenarios * **Mobile Optimization**: Touch-friendly controls and responsive design * **Accessibility**: ARIA labels and keyboard navigation support This map widget demonstrates how code widgets can integrate sophisticated mapping libraries to create professional location-based applications with rich interactivity and real-time data updates.