Custom Styles

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",
      "tiles": ["https://tiles.maps.guru/v1/planet-vector/{z}/{x}/{y}.pbf?key=YOUR_KEY"]
    }
  },
  "sprite": "https://tiles.maps.guru/sprites/v2/basic",
  "glyphs": "https://tiles.maps.guru/fonts/{fontstack}/{range}.pbf",
  "layers": [...]
}

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://api.maps.guru/v1/styles/your-style-slug/style.json?key=YOUR_KEY'
});