# 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.buzzy.buzz/the-building-blocks/code-widget-custom-code/examples/service-locations-map.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.