Map Integration
Custom Styles
Create and customize map styles using the maps.guru style editor.
maps.guru provides a visual style editor for creating custom map designs. You can also edit styles programmatically using the MapLibre style specification.
Style Editor
Access the style editor from Dashboard → Maps → Styles. The editor provides:
- Layer management — Toggle visibility, reorder, and configure layers
- Color theming — Customize colors for land, water, roads, and buildings
- 3D terrain — Enable hillshading and 3D building extrusion
- Data overlays — Upload CSV/GeoJSON datasets as custom layers
Style JSON Format
Maps.guru styles follow the MapLibre Style Specification:
{
"version": 8,
"name": "My Custom Style",
"sources": {
"openmaptiles": {
"type": "vector",
"url": "https://maps.guru/api/v1/tiles/planet-vector.json?key=YOUR_KEY"
}
},
"sprite": "https://maps.guru/api/v1/sprites/v2/basic",
"glyphs": "https://maps.guru/api/v1/fonts/{fontstack}/{range}.pbf",
"layers": [...]
}
When you fetch a style via the API (e.g.,
/api/v1/styles/standard/light/style.json?key=YOUR_KEY), all tile, sprite, and glyph URLs are automatically configured with your API key. You don't need to construct these URLs manually.Available Presets
| Preset | Description |
|---|---|
| Basic | Clean, minimal style for general use |
| Dark | Dark theme for data visualization overlays |
| Satellite | Satellite imagery with optional labels |
| Vintage | Warm, muted tones inspired by vintage cartography |
| High Contrast | Accessibility-focused with strong contrast ratios |
Brand Style Generator
Generate a map style that matches your brand identity:
- Go to Dashboard → Maps → Brand Style
- Enter your website URL
- The AI analyzes your site's colors and design
- A custom map style is generated using your brand palette
The generator extracts 5 key colors (primary, secondary, accent, background, text) and applies them to map features while maintaining cartographic best practices.
Using Custom Styles
Once created, use your style via the API:
const map = new maplibregl.Map({
container: 'map',
style: 'https://maps.guru/api/v1/styles/your-style-slug/style.json?key=YOUR_KEY'
});