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.

• MapCSS: https://wiki.openstreetmap.org/wiki/MapCSS/0.2
• Tutorial: Styling OpenStreetMap with MapCSS.

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.:

<link 
        rel="stylesheet" 
        href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
        crossorigin=""/>
<style>
  /** tweak something here ... see below */
</style>

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.