Create your own tile server and map client

osm2pgsql -d gis ~/path/to/data.osm.pbf — style openstreetmap-carto.style
./osm2pgsql -U postgres -H localhost -d gis -W “.\california-latest.osm.pbf” — style openstreetmap-carto.style — slim — number-processes 8
pip install python-mapnik # thanks to Hüseyin Çapan for reporting it./generate_xml.py osm.xml — dbname gis — host localhost — user postgres — accept-none > out.xml
if __name__ == "__main__":
home = os.environ['HOME']
try:
mapfile = os.environ['MAPNIK_MAP_FILE']
except KeyError:
mapfile = home + "/svn.openstreetmap.org/applications/rendering/mapnik/osm-local.xml"
try:
tile_dir = os.environ['MAPNIK_TILE_DIR']
except KeyError:
tile_dir = home + "/osm/tiles/"
if not tile_dir.endswith('/'):
tile_dir = tile_dir + '/'
#---------------------------------------------------------------
#
# Change the following for different bounding boxes and zoom levels
#
minZoom = 10
maxZoom = 16
bbox = (-2, 50.0,1.0,52.0)
render_tiles(bbox, mapfile, tile_dir, minZoom, maxZoom)
import os.path
from flask import Flask, send_file
app = Flask(__name__, static_url_path='/static')@app.route('/tiles/<zoom>/<y>/<x>', methods=['GET', 'POST'])
def tiles(zoom, y, x):
default = '_path_to_default_tile\\tiles\\0\\11\\333\\831.png' # this is a blank tile, change to whatever you want
filename = '_path_to_tiles\\tiles\\0\\%s\\%s\\%s.png' % (zoom, x, y)
if os.path.isfile(filename):
return send_file(filename)
else:
return send_file(default)
@app.route('/', methods=['GET', 'POST'])
def index():
return app.send_static_file('index.html')
if __name__ == '__main__':
app.run(debug=False, host='localhost', port=8080)
<html><head>
<title>My Maps</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<script type="text/javascript" src='leaflet.js'></script>
<link rel="stylesheet" type="text/css" href="leaflet.css">
</head>
<body>
<div id='map'></div>
<script type="text/javascript">
var map = L.map('map', {
center: [40, -110], // change to center at the region you generated the tiles for
zoom: 5,
subdomains: []
});
L.tileLayer('http://localhost:8080/tiles/{z}/{y}/{x}', {
maxZoom: 18,
attribution: '(C) 2016 Nitin Pasumarthy'
}).addTo(map);
</script>
</body>
</html>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store