Created
May 16, 2024 20:35
-
-
Save shreyasborse/1b9e57a4a9c52d308ff6be79807ef53f to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/bin/bash | |
| # Update and upgrade system packages | |
| sudo apt update | |
| sudo apt upgrade -y | |
| # Install required packages | |
| sudo apt install -y wget git build-essential cmake libprotobuf-dev protobuf-compiler libsqlite3-dev zlib1g-dev osmium-tool nodejs npm nginx | |
| # Download OSM data for Berlin | |
| wget http://download.geofabrik.de/europe/germany/berlin-latest.osm.pbf -O berlin.osm.pbf | |
| # Clone and build tippecanoe for creating vector tiles | |
| git clone https://github.com/mapbox/tippecanoe.git | |
| cd tippecanoe | |
| make -j | |
| sudo make install | |
| cd .. | |
| # Convert OSM data to GeoJSON | |
| osmium export berlin.osm.pbf -o berlin.geojson | |
| # Generate vector tiles from GeoJSON using tippecanoe with multiple layers | |
| tippecanoe -o berlin.mbtiles --read-parallel --layer=buildings --layer=roads --layer=landuse --maximum-zoom=14 --minimum-zoom=0 berlin.geojson | |
| # Install tileserver-gl-light to serve vector tiles | |
| sudo npm install -g tileserver-gl-light | |
| # Create a directory to store the tileserver configuration and data | |
| mkdir -p /var/www/tileserver | |
| cp berlin.mbtiles /var/www/tileserver/ | |
| # Create a tileserver-gl-light configuration file | |
| echo '{ | |
| "options": { | |
| "paths": { | |
| "root": "/var/www/tileserver" | |
| } | |
| }, | |
| "layers": [{ | |
| "options": { | |
| "minzoom": 0, | |
| "maxzoom": 14 | |
| }, | |
| "source": "mbtiles://berlin.mbtiles", | |
| "name": "berlin" | |
| }] | |
| }' | sudo tee /var/www/tileserver/config.json | |
| # Create a systemd service file for tileserver-gl-light | |
| echo "[Unit] | |
| Description=tileserver-gl-light | |
| After=network.target | |
| [Service] | |
| ExecStart=/usr/bin/tileserver-gl-light --config /var/www/tileserver/config.json | |
| Restart=always | |
| User=nobody | |
| Group=nogroup | |
| Environment=NODE_ENV=production | |
| WorkingDirectory=/var/www/tileserver | |
| [Install] | |
| WantedBy=multi-user.target" | sudo tee /etc/systemd/system/tileserver-gl-light.service | |
| # Enable and start the tileserver-gl-light service | |
| sudo systemctl enable tileserver-gl-light | |
| sudo systemctl start tileserver-gl-light | |
| # Configure Nginx to proxy requests to tileserver-gl-light | |
| echo "server { | |
| listen 80; | |
| server_name _; | |
| location /data { | |
| proxy_pass http://localhost:8080/; | |
| proxy_set_header Host \$host; | |
| proxy_set_header X-Real-IP \$remote_addr; | |
| proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for; | |
| proxy_set_header X-Forwarded-Proto \$scheme; | |
| } | |
| }" | sudo tee /etc/nginx/sites-available/tileserver | |
| # Enable the Nginx configuration | |
| sudo ln -s /etc/nginx/sites-available/tileserver /etc/nginx/sites-enabled/ | |
| sudo systemctl restart nginx | |
| # Create the HTML file to use MapLibre GL JS | |
| sudo mkdir -p /var/www/html/map | |
| echo "<!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=\"utf-8\"> | |
| <title>MapLibre GL JS Example</title> | |
| <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> | |
| <script src=\"https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js\"></script> | |
| <link href=\"https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css\" rel=\"stylesheet\" /> | |
| <style> | |
| body { margin: 0; padding: 0; } | |
| #map { position: absolute; top: 0; bottom: 0; width: 100%; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id=\"map\"></div> | |
| <script> | |
| var map = new maplibregl.Map({ | |
| container: 'map', // container id | |
| style: { | |
| \"version\": 8, | |
| \"sources\": { | |
| \"osm\": { | |
| \"type\": \"vector\", | |
| \"url\": \"http://18.219.190.33/data/berlin.json\" | |
| } | |
| }, | |
| \"layers\": [{ | |
| \"id\": \"buildings-layer\", | |
| \"type\": \"fill\", | |
| \"source\": \"osm\", | |
| \"source-layer\": \"buildings\", | |
| \"paint\": { | |
| \"fill-color\": \"#888\", | |
| \"fill-opacity\": 0.4 | |
| } | |
| }, { | |
| \"id\": \"roads-layer\", | |
| \"type\": \"line\", | |
| \"source\": \"osm\", | |
| \"source-layer\": \"roads\", | |
| \"layout\": { | |
| \"line-join\": \"round\", | |
| \"line-cap\": \"round\" | |
| }, | |
| \"paint\": { | |
| \"line-color\": \"#888\", | |
| \"line-width\": 2 | |
| } | |
| }, { | |
| \"id\": \"landuse-layer\", | |
| \"type\": \"fill\", | |
| \"source\": \"osm\", | |
| \"source-layer\": \"landuse\", | |
| \"paint\": { | |
| \"fill-color\": \"#aaa\", | |
| \"fill-opacity\": 0.5 | |
| } | |
| }] | |
| }, | |
| center: [13.4050, 52.5200], // starting position [lng, lat] | |
| zoom: 12 // starting zoom | |
| }); | |
| </script> | |
| </body> | |
| </html>" | sudo tee /var/www/html/map/index.html | |
| # Print completion message | |
| echo "Setup complete. You can access the map at http://18.219.190.33:8080/data/v3/#8.74/47.3785/8.255" |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
If the tileserver is not running, run this command again
sudo tileserver-gl-light --config /var/www/tileserver/config.json