How to Change the Style of a Map

A map style controls the basemap’s colors, labels, roads, buildings, and other visual layers. You may need to switch between light and dark themes, match a product’s visual identity, reduce background detail, or emphasize particular map features.

With MapLibre GL, you can load another complete Geoapify style or change properties of individual style layers. With Leaflet raster maps, the basemap has already been rendered into images, so changing the appearance means replacing the tile layer with a different server-rendered style.

Switch the complete map style with MapLibre GL

Pass a Geoapify style.json URL to map.setStyle() when the user selects another theme. The map keeps its camera position, but changing the complete style removes sources and layers that your application added to the old style.

const apiKey = "YOUR_API_KEY";
const styleUrl = style =>
  `https://maps.geoapify.com/v1/styles/${style}/style.json?apiKey=${apiKey}`;

document.querySelector("#map-style").addEventListener("change", event => {
  map.setStyle(styleUrl(event.target.value));
});

For example, the selector can use osm-bright for a light map and dark-matter for a dark map. If you add application sources or layers, restore them after the new style emits style.load. DOM-based MapLibre markers are outside the style and remain on the map.

Customize map style layers with MapLibre GL

Use paint properties to change colors and layout properties to show or hide layers. Wait for the map style to load before accessing its layers. This example assumes the map uses Geoapify's osm-bright style.

map.on("load", () => {
  // Change the water color.
  if (map.getLayer("water")) {
    map.setPaintProperty("water", "fill-color", "#9bd7f5");
  }

  // Make buildings less prominent.
  if (map.getLayer("building")) {
    map.setPaintProperty("building", "fill-color", "#e6e8eb");
  }

  // Hide points-of-interest labels when the application adds its own places.
  if (map.getLayer("poi-label")) {
    map.setLayoutProperty("poi-label", "visibility", "none");
  }
});

Layer IDs differ between styles. Inspect map.getStyle().layers or use the Map Tiles Playground to find the layers available in the chosen style. Keep customization code next to the selected base style so a later style change does not silently target missing layer IDs.

Switch the raster tile style with Leaflet

A Leaflet L.tileLayer displays pre-rendered raster tiles. Replace the tile layer to change the basemap style; individual roads, labels, or water areas cannot be recolored in the browser.

const apiKey = "YOUR_API_KEY";

function createTileLayer(style) {
  return L.tileLayer(
    `https://maps.geoapify.com/v1/tile/${style}/{z}/{x}/{y}.png?apiKey={apiKey}`,
    {
      apiKey,
      maxZoom: 20,
      attribution: 'Powered by <a href="https://www.geoapify.com/">Geoapify</a> | © OpenMapTiles <a href="https://www.openstreetmap.org/copyright">© OpenStreetMap</a> contributors'
    }
  );
}

let baseLayer = createTileLayer("osm-bright").addTo(map);

function changeMapStyle(style) {
  map.removeLayer(baseLayer);
  baseLayer = createTileLayer(style).addTo(map);
}

changeMapStyle("dark-matter");

Application markers and GeoJSON layers remain separate from the raster basemap, so replacing the tile layer does not remove them.