Skip to content

Рассмотреть альтернативы Google Maps

The plan

Get Open street maps data in osm.pfb format from https://planet.openstreetmap.org/
also check https://wiki.openstreetmap.org/wiki/Downloading_data for smaller options

Convert osm.pfb to Mapbox vector tiles (mvt) format with https://tilemaker.org/

Use mvt to generate style with Mapbox studio https://www.mapbox.com/mapbox-studio
https://docs.mapbox.com/help/glossary/vector-tiles/
https://docs.mapbox.com/help/glossary/style/

Alternatively generate style with maputnik https://maputnik.github.io/editor
https://openmaptiles.org/docs/style/maputnik/

Use generated style as a map for MapLibre GL JS https://maplibre.org/maplibre-gl-js/docs/

Alternatively use vector tiles as vectorTile sorce https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.VectorTileSource/

Add geoJSON source https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.GeoJSONSource/

Related links:

https://openlayers.org/
https://openlayers.org/en/latest/examples/geojson.html

https://www.mapbox.com/maps/dark
https://www.mapbox.com/mapbox-gljs

https://maplibre.org/maplibre-gl-js/docs/
https://www.maptiler.com/
https://openmaptiles.org/styles/

Plan from Bard

Self-hosting your OpenStreetMap vector map with MapLibre GL JS and customizing the style and adding a GeoJSON layer is definitely achievable. Here's a detailed breakdown of the steps and tools involved:

  1. Data Acquisition and Processing:
    a. Download OpenStreetMap data:
    • Choose the area you want to map. Use tools like Overpass Turbo or download regional extracts from Geofabrik.
    • Download the data in .pbf format, which is suitable for vector tile generation.
      b. Convert .pbf to Mapbox Vector Tiles (.mvt):
    • Tools like tilemaker, tippecanoe, or OSRM can handle this conversion.
    • Configure the tools for desired zoom levels, style, and data filtering.
    • Generate the .mvt tiles and store them on your server.
  2. Setting Up Your Server:
  • Choose a web hosting platform that supports static file hosting, like Nginx or Apache.
  • Upload the generated .mvt tiles to a directory on your server.
  • Set up web server configuration to properly serve the .mvt files via the XYZ tile protocol.
  1. Building Your Map with MapLibre GL JS:
  • Install MapLibre GL JS library in your web project.
  • Create an index.html file for your map.
  • Configure MapLibre GL JS with the following elements:
    • Map options: Set center coordinates, zoom level, and base map URL (pointing to your server's tile directory).
    • Map styles: Define custom styles for different map features using Mapbox Style Specification (JSON syntax). You can customize colors, line widths, fonts, etc.
    • GeoJSON layer: Load your GeoJSON data using the Map.addLayer method. Style the GeoJSON features differently from the base map.
  1. Additional Tweaks and Considerations:
  • Implement user interaction features like zooming, panning, and markers.
  • Set attribution for OpenStreetMap data as required by their license.
  • Optimize your .mvt tiles for better performance and file size.
  • Consider cloud storage options for your tiles if self-hosting becomes resource-intensive.

Tools and Services:

  • OpenStreetMap data download: Overpass Turbo, Geofabrik
  • Vector tile generation: tilemaker, tippecanoe, OSRM
  • Web hosting: Nginx, Apache
  • JavaScript library: MapLibre GL JS
  • GeoJSON data creation: Any tools or APIs that output GeoJSON format
  • Map style editor: Mapbox Studio (online tool for Mapbox Studio styling, can be adapted for MapLibre)

Resources and Tutorials:

Remember, the specific configuration and tools might vary depending on your chosen technologies and hosting platform. Don't hesitate to consult the documentation and tutorials for detailed instructions and troubleshooting tips. I hope this gives you a good starting point for self-hosting your personalized OpenStreetMap map with MapLibre GL JS!

Edited by Andrey Yurtaev