Schlagwort: two styles

Install 2 different Styles on your Tileserver and Leaflet

Veröffentlicht in Linux-StuffKommentar hinterlassen

This is an example configuration on how to run two different map styles (OSMBright and openstreetmap-carto) on one renderd and leaflet server. For an instruction on how to install a tileserver with openstreetmap-carto and leaflet, see here, for instructions for OSMBright, click here.

osm-multiple-styles

renderd.conf

Each style has an own section with an own tiledir and URI. Make sure that both tiledirs exists and is owned by the user which runs renderd.

[renderd]
socketname=/var/run/renderd/renderd.sock
num_threads=4
tile_dir=/var/lib/mod_tile
stats_file=/var/run/renderd/renderd.stats

[mapnik]
plugins_dir=/usr/lib/mapnik/2.2/input
font_dir=/usr/share/fonts/truetype
font_dir_recurse=1

[default]
URI=/osm_tiles-carto/
TILEDIR=/var/lib/mod_tile-carto
XML=/usr/local/src/openstreetmap-carto-2.29.1/style.xml
HOST=localhost
TILESIZE=256
;HTCPHOST=proxy.openstreetmap.org
;** config options used by mod_tile, but not renderd **
;MINZOOM=0
;MAXZOOM=18
;TYPE=png image/png
;DESCRIPTION=This is a description of the tile layer used in the tile json request
;ATTRIBUTION=&copy;<a href=\"http://www.openstreetmap.org/\">OpenStreetMap</a> and <a href=\"http://wiki.openstreetmap.org/wiki/Contributors\">contributors</a>, <a href=\"http://opendatacommons.org/licenses/odbl/\">ODbL</a>
;SERVER_ALIAS=http://localhost/
;CORS=http://www.openstreetmap.org
;ASPECTX=1
;ASPECTY=1
;SCALE=1.0

[defaultbr]
URI=/osm_tiles/
TILEDIR=/var/lib/mod_tile
XML=/usr/local/share/maps/style/OSMBright/OSMBright.xml
HOST=localhost
TILESIZE=256
;HTCPHOST=proxy.openstreetmap.org
;** config options used by mod_tile, but not renderd **
;MINZOOM=0
;MAXZOOM=18
;TYPE=png image/png
;DESCRIPTION=This is a description of the tile layer used in the tile json request
;ATTRIBUTION=&copy;<a href=\"http://www.openstreetmap.org/\">OpenStreetMap</a> and <a href=\"http://wiki.openstreetmap.org/wiki/Contributors\">contributors</a>, <a href=\"http://opendatacommons.org/licenses/odbl/\">ODbL</a>
;SERVER_ALIAS=http://localhost/
;CORS=http://www.openstreetmap.org
;ASPECTX=1
;ASPECTY=1
;SCALE=1.0

The tiles in http://localhost/osm_tiles are now rendered with OSMBright and http://localhost/osm_tiles-carto with openstreetmap.carto.

Leaflet

<!DOCTYPE html>
<html>
<head>
<title>Full Screen Leaflet Map</title>
<meta charset="utf-8" />
<link
rel="stylesheet"
href="./leaflet.css"
/>
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>

<script
src="./leaflet.js">
</script>

<script>
var osmLink= '<a href="http://openstreetmap.org">OpenStreetMap</a>';

var osmUrlcarto = './osm_tiles-carto/{z}/{x}/{y}.png',
osmUrlbright = './osm_tiles/{z}/{x}/{y}.png',
osmAttrib = '&copy; ' + osmLink + ' Contributors';

var osmMAPcarto = L.tileLayer(osmUrlcarto, {attribution: osmAttrib}),
osmMAPbright = L.tileLayer(osmUrlbright, {attribution: osmAttrib});

var map = L.map('map', {layers: [osmMAPbright]}).setView([48.4394, 14.7703], 14);
var baseLayers = {
"OSM Carto" : osmMAPcarto,
"OSM Bright" : osmMAPbright
};
L.control.layers(baseLayers).addTo(map);
</script>
</body>
</html>