🌿 An interactive, responsive cannabis store locator map with dark/light mode support and internationalization (English/French), built for easy integration into any website.
- Interactive Store Locator: Find cannabis stores near you with an intuitive map interface
- Dark/Light Mode: Toggle between themes with automatic UI adaptation
- Internationalization: Full English and French language support
- Responsive Design: Mobile-first approach with touch-optimized controls
- Province Filtering: Filter stores by Canadian provinces
- Theme Persistence: Theme preference is maintained during the session
- Easy Integration: Simple JavaScript API for quick setup
- CDN Ready: Available via CDN for instant deployment
The easiest way to integrate the map is using our CDN:
<!DOCTYPE html>
<html>
<head>
<title>Cannabis Store Locator</title>
</head>
<body>
<div id="map-container" style="width: 100%; height: 500px;"></div>
<script src="https://cdn.jsdelivr.net/gh/voyera/[email protected]/cannabis-store-map.min.js"></script>
<script>
const map = CannabisStoreMap.createFromAPI(
'map-container',
'https://api.weedcrawler.ca/map/3f84ee30001a0a00f99945627b604bab0383abee5232f732',
{
title: 'Find Cannabis Stores',
height: '100%',
zoom: 6,
provinces: ['ON'],
theme: 'light',
showThemeToggle: true,
language: 'en' // 'en' for English, 'fr' for French
}
);
</script>
</body>
</html>- Download the
cannabis-store-map.jsfile - Include it in your HTML:
<script src="cannabis-store-map.js"></script>Creates a new map instance with store data from the WeedCrawler API.
containerId(string): The ID of the HTML element that will contain the mapapiUrl(string): The WeedCrawler API endpoint URLoptions(object): Configuration options
| Option | Type | Default | Description |
|---|---|---|---|
title |
string | Auto-translated | Map title displayed in the header |
height |
string | '400px' | Map container height |
zoom |
number | 6 | Initial zoom level |
provinces |
array | ['ON'] | Array of province codes to filter stores |
center |
array | [43.6532, -79.3832] | Initial map center coordinates [lat, lng] |
theme |
string | 'light' | Initial theme ('light' or 'dark') |
showThemeToggle |
boolean | true | Whether to show the theme toggle button |
language |
string | 'en' | Interface language ('en' for English, 'fr' for French) |
// Set specific theme
map.setTheme('dark'); // or 'light'
// Toggle theme
map.toggleTheme();
// Get current theme
const theme = map.getTheme(); // returns 'light' or 'dark'// Set language
map.setLanguage('fr'); // or 'en'
// Get current language
const language = map.getLanguage(); // returns 'en' or 'fr'<div id="my-map" style="width: 100%; height: 600px;"></div>
<script src="https://cdn.jsdelivr.net/gh/voyera/[email protected]/cannabis-store-map.min.js"></script>
<script>
const map = CannabisStoreMap.createFromAPI(
'my-map',
'https://api.weedcrawler.ca/map/3f84ee30001a0a00f99945627b604bab0383abee5232f732',
{
title: 'My Cannabis Store Map',
zoom: 8,
provinces: ['ON', 'BC'],
theme: 'dark',
language: 'fr'
}
);
</script>// Set specific language
map.setLanguage('fr');
// Get current language
const language = map.getLanguage();
console.log('Current language:', language);
// Set specific theme
map.setTheme('dark');
// Toggle theme
map.toggleTheme();
// Get current theme
const theme = map.getTheme();
console.log('Current theme:', theme);<div id="french-map" style="width: 100%; height: 600px;"></div>
<script src="https://cdn.jsdelivr.net/gh/voyera/[email protected]/cannabis-store-map.min.js"></script>
<script>
const frenchMap = CannabisStoreMap.createFromAPI(
'french-map',
'https://api.weedcrawler.ca/map/3f84ee30001a0a00f99945627b604bab0383abee5232f732',
{
title: 'Localisateur de Magasins de Cannabis',
language: 'fr',
provinces: ['QC', 'ON'],
theme: 'light'
}
);
</script>- Default language
- All UI elements, buttons, and messages in English
- Default titles and placeholders
- Complete French translation
- All UI elements, buttons, and messages in French
- French-specific titles and placeholders
Check out the interactive demo to see all features in action:
- Main Demo: Open
demo.htmlin your browser - Simple Example: Open
index.htmlfor a basic implementation
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
The map is fully optimized for mobile devices with:
- Touch-friendly controls
- Responsive design
- Mobile-optimized UI elements
- Prevented zoom on input focus (iOS)
This project is licensed under the MIT License.
For questions or support, please visit WeedCrawler or open an issue in this repository.
CDN Link: https://cdn.jsdelivr.net/gh/voyera/[email protected]/cannabis-store-map.min.js