Azulejos de vector Mapbox autosuficiente

Question

Como se presenta en una charla en FOSS4G Mapbox Studio permite crear Mapbox vector de azulejos y exportarlos como un .mbtiles archivo.

El mapbox-gl.js la biblioteca puede ser utilizada de forma dinámica y estilo de procesamiento Mapbox vector de azulejos en el cliente (navegador).

La parte que falta: ¿Cómo puedo auto-host Mapbox vector de iconos (.mbtiles) por lo que puedo consumirlas con mapbox-gl.js?

Nota: sé que Mapbox Studio puede cargar el vector de azulejos para el Mapbox servidor y dejar de acogida de los azulejos. Pero eso no es opción para mí, quiero alojar el vector de azulejos en mi propio servidor.

Edit3: El TileStream aproximación por debajo de la que resultó ser un callejón sin salida. Ver mi respuesta para una solución de trabajo con Tilelive.

Editar:

Traté de TileStream que puede servir de imagen de baldosas de .mbtiles ficheros:

Mi página web utiliza mapbox-gl v0.4.0:

<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.4.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.4.0/mapbox-gl.js'></script>

y se crea un mapboxgl.Mapa en una secuencia de comandos de JavaScript:

  var map = new mapboxgl.Map({
    container: 'map',
    center: [46.8104, 8.2452],
    zoom: 9,
    style: 'c.json'
  });

El c.json archivo de estilo configura el vector de baldosa fuente:

{
  "version": 6,
  "sprite": "https://www.mapbox.com/mapbox-gl-styles/sprites/bright",
  "glyphs": "mapbox://fontstack/{fontstack}/{range}.pbf",
  "constants": {
    "@land": "#808080",
    "@earth": "#805040",
    "@water": "#a0c8f0",
    "@road": "#000000"
  },
  "sources": {
    "osm_roads": {
      "type": "vector",
      "url": "tile.json"
    }
  },
  "layers": [{
    "id": "background",
    "type": "background",
    "paint": {
      "background-color": "@land"
    }
  }, {
    "id": "roads",
    "type": "line",
    "source": "osm_roads",
    "source-layer": "roads",
    "paint": {
      "line-color": "@road"
    }
  }]
}

... con las siguientes TileJSON especificación en tile.json:

{
  "tilejson": "2.1.0",
  "tiles": [
    "http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.png"
  ],
  "minzoom": 0,
  "maxzoom": 12
}

... que mis puntos a TileStream server que se ejecuta en localhost:8888. TileStream se ha iniciado con:

node index.js start --tiles="..\tiles"

... donde el ..\tiles carpeta contiene mi osm_roads.mbtiles archivo.

Con esta configuración, puedo abrir mi página web, pero sólo ver la capa de fondo. En el navegador de la red de seguimiento, puedo ver que las baldosas son de hecho cargado cuando acercar, pero el navegador con JavaScript error de la consola contiene varios errores de forma

Error: Invalid UTF-8 codepoint: 160      in mapbox-gl.js:7

Desde el vector de las baldosas no son .png imágenes sino ProtoBuf archivos, los iconos URL http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.pbf realmente haría más sentido, pero que no funciona.

Alguna idea?

Edit 2: Añadido enlace a TileStream

Answer 1

Como se ha señalado por @Greg, en lugar de TileStream (mi primer intento) debe utilizar Tilelive el anfitrión de su propio vector de azulejos.

Tilelive no es un servidor de sí mismo, sino un backend marco que se ocupa de los azulejos en diferentes formatos y de fuentes diferentes. Pero se basa en Node.js así que usted puede convertir en un servidor en un bastante recta hacia adelante. Para leer las baldosas de un .mbtiles origen de la exportación Mapbox Studio, usted necesita el nodo-mbtiles tilelive módulo.

Nota: Actual Mapbox Studio tiene un bug en Windows y OS X que impide que un exportados .mbtiles archivo a su destino elegido. Solución: basta tomar la última export-xxxxxxxx.mbtiles archivo ~/.mapbox-studio/cache.

He encontrado dos implementaciones de servidor (ten20 azulejo servidor alexbirkett y TileServer por hanchao) que tanto uso Express.js como una aplicación web server.

Aquí está mi enfoque minimalista en el que se basa libremente en estas implementaciones:

1. Instalar Node.js
2. Coge el nodo de paquetes, npm install tilelive mbtiles express

3. Implementar el servidor en el archivo server.js:

   var express = require('express');
   var http = require('http');
   var app = express();
   var tilelive = require('tilelive');
   require('mbtiles').registerProtocols(tilelive);
   
   tilelive.load('mbtiles://path/to/osm_roads.mbtiles', function(err, source) {
   
       if (err) {
           throw err;
       }
       app.set('port', 7777);
   
       app.use(function(req, res, next) {
           res.header("Access-Control-Allow-Origin", "*");
           res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
           next();
       });
   
       app.get(/^\/v2\/tiles\/(\d+)\/(\d+)\/(\d+).pbf$/, function(req, res){
   
           var z = req.params[0];
           var x = req.params[1];
           var y = req.params[2];
   
           console.log('get tile %d, %d, %d', z, x, y);
   
           source.getTile(z, x, y, function(err, tile, headers) {
               if (err) {
                   res.status(404)
                   res.send(err.message);
                   console.log(err.message);
               } else {
                 res.set(headers);
                 res.send(tile);
               }
           });
       });
   
       http.createServer(app).listen(app.get('port'), function() {
           console.log('Express server listening on port ' + app.get('port'));
       });
   });
   

   Nota: El Access-Control-Allow-... encabezados habilitar cross-origin resource sharing (CORS) para que las páginas web servidas desde un servidor diferente puede acceder a las fichas.

4. Ejecutar con node server.js

5. Configurar la página web Mapbox GL JS en minimal.html:

   <!DOCTYPE html >
   <html>
     <head>
       <meta charset='UTF-8'/>
       <title>Mapbox GL JS rendering my own tiles</title>
       <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.4.0/mapbox-gl.css' rel='stylesheet' />
       <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.4.0/mapbox-gl.js'></script>
       <style>
         body { margin:0; padding:0 }
         #map { position:absolute; top:0; bottom:50px; width:100%; }
       </style>
     </head>
     <body>
       <div id='map'>
       </div>
       <script>
         var map = new mapboxgl.Map({
           container: 'map',
           center: [46.8, 8.5],
           zoom: 7,
           style: 'minimal.json'
         });
       </script>
     </body>
   </html>
   

6. Indicar la ubicación de los azulejos de la fuente y el estilo de las capas con las siguientes minimal.json:

   {
     "version": 6,
     "constants": {
       "@background": "#808080",
       "@road": "#000000"
     },
     "sources": {
       "osm_roads": {
         "type": "vector",
         "tiles": [
           "http://localhost:7777/v2/tiles/{z}/{x}/{y}.pbf"
         ],
         "minzoom": 0,
         "maxzoom": 12
       }
     },
     "layers": [{
       "id": "background",
       "type": "background",
       "paint": {
         "background-color": "@background"
       }
     }, {
       "id": "roads",
       "type": "line",
       "source": "osm_roads",
       "source-layer": "roads",
       "paint": {
         "line-color": "@road"
       }
     }]
   }
   

7. Servir la página web y se regocijan.

Answer 2

El alojamiento del vector de azulejos en su propia es relativamente sencillo. Los MBTiles contiene .pbf archivos que deben ser expuestos a la web. Eso es todo.

Probablemente lo más sencillo es utilizar un simple servidores de código abierto, tales como TileServer-PHP y poner los MBTiles archivo a la misma carpeta que los archivos de proyecto. El TileServer hacer todo el alojamiento config para usted (CORS, TileJSON, corregir gzip encabezados, etc). Instalación de medios desembalaje en una habilitado para PHP servidor web.

Si desea iniciar la TileServer-PHP en su computadora portátil que usted puede con ventana acoplable. Listo para el uso de contenedores es en DockerHub. Bajo Mac OS X y Windows que se ejecuta en un par de minutos con el Kitematic interfaz gráfica de usuario: https://kitematic.com/. En Kitematic sólo la búsqueda para "tileserver-php" y listo para usar/contenedor de la máquina virtual con el proyecto en el interior. A continuación, haga clic en "Volúmenes" y colocar en la carpeta de su MBTiles archivo. Usted obtener una ejecución de alojamiento para su vector de azulejos!

Tal vector de las baldosas puede ser abierto en el MapBox Studio como una fuente, o se muestran con MapBox GL JS WebGL visor.

Técnicamente es posible, incluso para alojar el vector de baldosas como una simple carpeta en cualquier servidor web o un almacenamiento en la nube, o incluso GitHub, si desempaquetar el individuo .pbf de los MBtiles contenedor con una utilidad como mbutil, establecer el CORS, TileJSON y gzip correctamente. Bellow es una de GitHub del proyecto de demostración de tal enfoque.

Pruebe este visor:

y ver las relacionadas con los repos:

• https://github.com/klokantech/tileserver-php
• https://github.com/klokantech/vector-tiles-sample
• https://github.com/klokantech/mapbox-gl-js-offline-example

Answer 3

No toot mi propio cuerno, pero https://github.com/spatialdev/PGRestAPI es un proyecto en el que he estado trabajando en el que se hospeda .mbtiles vector de baldosas de las exportaciones de Mapbox Studio.

Todavía se necesita mucha documentación, pero básicamente, la caída de su .mbtiles archivos en /data/pbf_mbtiles y reinicie el nodo de la aplicación. Leerá través de esa carpeta y ofrecer a los extremos de su vector de azulejos.

También mirar a través de /data/shapefiles, y crear dinámicas de Mapbox Vector de Azulejos sobre la marcha en función de su .shp. Usted también puede apuntar a una PostGIS instancia y obtener dinámica vector de azulejos.

Hacemos uso de ellos en conjunción con https://github.com/SpatialServer/Leaflet.MapboxVectorTile, un Folleto/Mapbox Vector de Baldosa biblioteca también hemos estado trabajando.

Espero que ayude.

Answer 4

Gracias por el gran pregunta. Yo no sabía que se habían lanzado finalmente una versión estable de vector de azulejos. Por otra parte, puede que tenga que trabajar con esta respuesta, ya que es una fuente de ideas para su "alguna idea?" pregunta. No me tiene en ejecución un estudio todavía.

Creo que uno de los problemas que tienes es que estás usando una tilejson archivo. Usted necesita un tilejson servicio para el uso a que tipo de archivo. Por tanto, creo que usted necesita para cambiar las fuentes de la sección a en línea en la URL. Trate de

"sources": {
"osm_roads": {
  "type": "vector",
  "url": "http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.png"
 }
},

o

"sources": { 
"osm_orads": {
  "type": "vector",
  "tiles": [
    "http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.png"
  ],
  "minzoom": 0,
  "maxzoom": 12
 }
},

Cuando se utilice mapbox:// como el protocolo, que es un alias/notación abreviada para sus servicios. Las fuentes sección se discuten brevemente alrededor de las 8:40 del vídeo.

A un paso del nuevo vector de baldosa proceso es seleccionar el vector de datos mediante el ajuste de lo que usted desea en los datos. El otro paso es llevar el vector de datos en MapBox Studio y representar los datos/crear una hoja de estilo. osm_roads sería el paso uno, mientras que el c.archivo json es la hoja de estilo. Usted puede necesitar un azulejo en vivo servidor versos de un azulejo de la corriente como se discutió alrededor de las 15:01 el vídeo. El video dice que necesita más datos de metadatos en el archivo xml.

Lo raro aquí es que hace referencia a la .pbf y la hoja de estilo en otros lugares, pero la url que proporcionar es la resultante de las baldosas .los archivos png que se generan a partir de los datos vectoriales.

Que no se diga, si usted tiene un MapBox clave. Para tu propio hosting, creo que tendrás que copiar el github de los estilos y de los glifos con su propio servidor. Aviso de nuevo que no es un mapbox:// protocolo en los glifos de la etiqueta. Estas dos marcas pueden no ser necesarios porque usted es la representación de la llanura líneas y polígonos, y no Pdi a través de iconos. Vale la pena echar un vistazo.

Finalmente, en el video se dice que usted puede tomar un generada capa de vector de nuevo en el estudio para el estilo. Puede que desee hacer referencia a la capa vectorial y aplicar su id:antecedentes y id:caminos de estilo en el estudio primero. En el video se dice que el azulejo en vivo es el servidor detrás de la escena de MapBox Studio. La idea aquí es asegurarse de que usted tiene todo el paso dos problemas entendido y se fija antes de intentar servir hasta el final de vector de iconos que son presentadas dinámicamente.

Answer 5

Es posible que desee probar nuestra tilehut.js servidor. Básicamente hace todo lo que usted necesita = hosting vector de azulejos y viene con niza ejemplos / docs ... y es en combinación con openshift se encuentra a 5 min de instalación cosa. Por favor, eche un vistazo:

https://github.com/b-g/tilehut https://github.com/b-g/tilehut/tree/master/examples/simplemap_vector https://github.com/b-g/tilehut#your-own-hosted-tileserver-in-5-minutes