---
title: "Styles & Providers"
description: "MapLibre GL JS renders the map in the browser. It does not include a basemap or a hosted tile service."
canonical_url: "https://scripts.nuxt.com/scripts/maplibre/guides/styles-and-providers"
last_updated: "2026-08-11T04:27:01.678Z"
---

MapLibre GL JS renders the map in the browser. It does not include a basemap or a hosted tile service.

<table>
<thead>
  <tr>
    <th>
      Part
    </th>
    
    <th>
      What it does
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      MapLibre GL JS
    </td>
    
    <td>
      Renders vector or raster sources with WebGL and handles map interaction.
    </td>
  </tr>
  
  <tr>
    <td>
      Style JSON
    </td>
    
    <td>
      Defines sources, layers, fonts, icons, colors, and labels.
    </td>
  </tr>
  
  <tr>
    <td>
      Tile service
    </td>
    
    <td>
      Hosts the vector or raster tiles referenced by the style.
    </td>
  </tr>
  
  <tr>
    <td>
      Geographic data
    </td>
    
    <td>
      Supplies roads, places, boundaries, and other mapped features.
    </td>
  </tr>
</tbody>
</table>

The style URL passed to `map-style` selects the rest of the stack:

```vue
<ScriptMapLibreMap
  :center="[144.9631, -37.8136]"
  map-style="https://tiles.openfreemap.org/styles/liberty"
/>
```

## OpenFreeMap

OpenFreeMap provides public MapLibre-compatible styles without an API key. Its styles include OpenStreetMap attribution, and its [terms](https://openfreemap.org/tos/) describe the public service as provided as-is and subject to change or discontinuation.

The public instance works well for evaluation, prototypes, and projects that can tolerate that availability model. Choose a provider with contractual availability or self-host the [OpenFreeMap stack](https://github.com/hyperknot/openfreemap) when the map is operationally critical.

## OpenMapTiles and OpenStreetMap

These names refer to different parts of the stack:

- **OpenMapTiles** is an open vector-tile schema, toolchain, and set of styles. Use it through a hosted provider or serve compatible styles and tiles yourself.
- **OpenStreetMap** supplies open geographic data. A provider can turn that data into vector tiles consumed by a MapLibre style.
- **OpenStreetMap's standard tile service** serves raster images under a separate usage policy. It is not the vector style used in the example above.

MapLibre can load any URL or inline object that follows the MapLibre Style Specification. Check that every source, sprite, and font URL in a self-hosted style is reachable from the browser.

## Credentials and Attribution

Hosted providers may require an API key in the style URL or one of its source URLs. Treat browser map credentials as public and restrict them by origin, API scope, and quota in the provider dashboard.

MapLibre displays attribution declared by the active sources. Verify it in the rendered map, especially after editing a style or replacing its sources. Do not cover or remove required attribution.

## Keep the Provider Replaceable

Store the style URL in runtime config when environments use different services:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      mapStyleUrl: 'https://tiles.openfreemap.org/styles/liberty',
    },
  },
})
```

```vue
<script setup lang="ts">
const config = useRuntimeConfig()
</script>

<template>
  <ScriptMapLibreMap
    :center="[144.9631, -37.8136]"
    :map-style="config.public.mapStyleUrl"
  />
</template>
```