Research: Styling OpenStreetMap

(this article is work in progress …)

I often wondered whether you could create your own styles for OpenStreetMap by some CSS and avoid commercial solutions like Mapbox.

Here are the links to resources about OpenStreetMap and how to style the maps on web pages.

Leaflet Styles

Leaflet is a cool JavaScript / CSS library for adding markers, popups and similar to OpenStreetMap maps. Since the library has a CSS library, you could tweak the setings by additional CSS after the link to the Leaflet CSS. E.g.:

  /** tweak something here ... see below */

Here are the typical Leaflet Styles: see it here.

If we look into these styles an alternative CSS could be added, eg.:

/* visual tweaks */
.leaflet-container {
	background: #ddd;
	outline-offset: 1px;

In the we should be able to tweak a map and change the background color hex to somethig different here.

Since Leaflet has tweaks to font styles you could change the look and feel of things here.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Enable Notifications OK No thanks

We use cookies - more information will set a few cookies from Doubleclick, Google and the Social Media plugins they ay set some cookies. Some of my pages use APIs - such as YouTube, LinkedIn, Google Fonts, Google Maps, Mapbox, Spotify, Jetpack, Twitter, Facebook &c.. Such plugins may set the odd cookie.