# Vanilla JavaScript Integration
## Vanilla JS with Vite
**Pattern: Module imports with initialization function**
```javascript
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import './main.css';
// Set access token
mapboxgl.accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN;
let map;
/**
* Initialize the map
*/
function initMap() {
map = new mapboxgl.Map({
container: 'map-container',
center: [-71.05953, 42.3629],
zoom: 13
});
map.on('load', () => {
console.log('Map is loaded');
});
}
// Initialize when script runs
initMap();
```
**HTML:**
```html
```
**Key points:**
- Store map in module-scoped variable
- Initialize immediately or on DOMContentLoaded
- Listen for 'load' event for post-initialization actions
---
## Vanilla JS (No Bundler - CDN)
**Pattern: Script tag with inline initialization**
> **Note:** This pattern is for prototyping only. Production apps should use npm/bundler for version control and offline builds.
```html
Mapbox GL JS - No Bundler
```
**Key points:**
- **Prototyping only** - not recommended for production
- Replace `3.x.x` with specific version (e.g., `3.7.0`) from [Mapbox docs](https://docs.mapbox.com/mapbox-gl-js/)
- **Don't use `/latest/`** - always pin to specific version for consistency
- Initialize after script loads (bottom of body)
- For production: Use npm + bundler instead
**Why not CDN for production?**
- No version locking (CDN could change)
- Network dependency (breaks offline)
- Slower (no bundler optimization)
- No tree-shaking
- Use npm for production: `npm install mapbox-gl@^3.0.0`