Self Hosting a Google Maps Alternative with OpenStreetMap

• maplibre-gl-js

  55 5,676 9.9 TypeScript

  MapLibre GL JS - Interactive vector tile maps in WebGL2

  

How come these map projects still use raster tiles? Are there no open source map projects that render the OSM data to vector data, and renders that vector data on the clients GPU? Maybe raster tiles are better at something I'm missing, but vector maps are easier to style[0], localize, they're sharper, easier to rotate and zoom smoothly. Maybe it's harder than I think to render it on all sorts of clients including mobile?

When writing this I found out that MapTiler[1] is maintaining MapLibre GL JS[2], a fork of a Mapbox project to do just that. It would be interesting to see the difference between self hosting raster and vector maps and compare pros and cons. You can even render raster tiles from vector tiles on the server if the client needs it[3].

[0] https://openmaptiles.org/docs/style/mapbox-gl-style-spec/

[1] https://www.maptiler.com/open-source/

[2] https://github.com/MapLibre/maplibre-gl-js

[3] https://openmaptiles.org/docs/host/tileserver-gl/

• OpenTopoMap

  9 442 0.0 JavaScript

  A topographic map from OpenStreetMap and SRTM data

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• openstreetmap-tile-server

  11 1,135 1.3 Shell

  Docker file for a minimal effort OpenStreetMap tile server

Author here: the docker project for the tile server allows setting up automatic syncing fairly easily:

https://github.com/Overv/openstreetmap-tile-server#enabling-...

I'm not sure about Nominatim or Valhalla's ability to auto-sync the latest changes, at least with the dockerized version, but it may be possible.

• maplibre-gl-leaflet

  4 106 3.1 JavaScript

  This is a binding from MapLibre GL JS to the familiar Leaflet API.

  

Seems like MapTiler is maintaining an open source full stack vector alternative, and OpenLayers[0] looks good as well, so maybe it's time for legacy libraries to add vector support, or for users to switch libraries? There's even bindings from Maplibre GL to Leaflet [1].

I at least would find it interesting to see the two compared by someone other than me ;).

[0] https://openlayers.org/

[1] https://github.com/maplibre/maplibre-gl-leaflet

• OpenLayers3

  60 10,858 9.9 JavaScript

  OpenLayers

  

Seems like MapTiler is maintaining an open source full stack vector alternative, and OpenLayers[0] looks good as well, so maybe it's time for legacy libraries to add vector support, or for users to switch libraries? There's even bindings from Maplibre GL to Leaflet [1].

I at least would find it interesting to see the two compared by someone other than me ;).

[0] https://openlayers.org/

[1] https://github.com/maplibre/maplibre-gl-leaflet

• protomaps-leaflet

  2 682 7.9 TypeScript

  Lightweight vector map rendering + labeling and symbology for Leaflet

  

• osm-seed

  3 139 6.7 Shell

  A collection of Dockerfiles to run a containerized version of OpenStreetMap

  

For those interested in deploying their own OSM stack including all the bells and whistles like Overpass, TagInfo etcetera, have a look at osmseed: https://github.com/developmentseed/osm-seed

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• Leaflet.MapboxVectorTile

  1 291 10.0 JavaScript

  A Leaflet Plugin that renders Mapbox Vector Tiles on HTML5 Canvas.

  

Thanks for this. I remember using MVTs on HTML Canvas with Leaflet via plugin way back in 2017.[1] It wasn't perfect, but browser rendering has definitely been the bigger issue than anything with Leaflet.

[1]: https://github.com/SpatialServer/Leaflet.MapboxVectorTile

• planetiler

  30 1,148 9.3 Java

  Flexible tool to build planet-scale vector tilesets from OpenStreetMap data fast

  

• TileServer GL

  12 2,053 9.5 JavaScript

  Vector and raster maps with GL styles. Server side rendering by MapLibre GL Native. Map tile server for MapLibre GL JS, Android, iOS, Leaflet, OpenLayers, GIS via WMTS, etc.

  

• Openstreetmap

  734 2,022 9.9 Ruby

  The Rails application that powers OpenStreetMap

  

> MapLibre GL JS[2]

Here's a nice example of the maps in action (though the other links also have showcases): https://openmaptiles.org/docs/website/maplibre-gl-js/

The transitions seem really smooth and the user experience is pleasant... until I open them on an Android device that came out just 2 years ago (one of those rugged models), in Firefox.

I'm sure that the slowness has something to do with rendering vector data, because all of the sudden those maps become unusable - slow zooming, slow loading (possibly the data is fetched reasonably quickly, just slow to display), slow scrolling. In a word, laggy. When looking at an area of my choice, using the vector maps (even after letting them load fully) I get probably less than 10 frames per second so panning feels choppy.

On the other hand, the raster maps are basically what you'd get when panning across an image - the latter experience remains reasonably smooth. There, the only disadvantage is the typical swapping out of raster tiles as you zoom in or out, but that's a small nuisance at best, apart from the visual difference in quality.

Have a look at OpenStreetMap, which the first link uses for its data: https://www.openstreetmap.org

As it currently stands, if we all used only vector data, I feel like a lot of people on lower spec devices would be left out. I wonder whether any serious tests have been made on the battery usage or performance of both types, but even tests this simple show that there are certain problems with the current implementations of vector maps.

I actually did a blog post about this just now, with a video example of the two types of maps running side by side: https://blog.kronis.dev/everything%20is%20broken/vector-maps...

Note: this isn't meant to be a super accurate comparison, but rather a quick look into some of the immediately apparent practical differences in what the user experience is like.

• omapsapp

  268 8,499 9.9 C++

  🍃 Organic Maps is a free Android & iOS offline maps app for travelers, tourists, hikers, and cyclists. It uses crowd-sourced OpenStreetMap data and is developed with love by MapsWithMe (MapsMe) founders and our community. No ads, no tracking, no data collection, no crapware. Please donate to support the development!

  

I found that Organic Maps (https://organicmaps.app) is a good open-source OSM-based alternative to Google Maps. Please check it out.

• osm2streets

  4 78 9.1 Rust

  Convert OSM to street networks with detailed geometry

  

• qwantmaps

  30 376 3.7

  Central repository for Qwant Maps resources

  

• headway

  41 2,263 9.1 Vue

  Discontinued Self-hostable maps stack, powered by OpenStreetMap.

  

In a similar vain, there is maps.earth / headway:

https://github.com/headwaymaps/headway

https://about.maps.earth/

https://news.ycombinator.com/item?id=32551273

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

Suggest a related project