problem using the served map within mapbox js api

[heaversm]

Hi - I've got tessera up and running, and can view the map by pointing my browser to:

http://localhost:8080/#11/37.389/-122.0684

which is really great! I'm just not sure how to use it in production code. When I attempt to replace my mapbox hosted URL in the javascript:

map = L.mapbox.map('map', 'heaversm.b8aa0d0a',{

with the url from tessera:

map = L.mapbox.map('map', 'http://localhost:8080',{ 

I get an html error:

Uncaught SyntaxError: Unexpected token <

How do I use the tessera-served map in mapbox js?

[mojodna]

L.mapbox.map is for Leaflet layers that are hosted by Mapbox and makes a number of assumptions about URLs.

It's possible that this will work (full URLs may be treated as TileJSON, which is what index.json outputs):

map = L.mapbox.map('map', 'http://localhost:8080/index.json',{ 

If that doesn't work, try this instead:

var map = L.map('map', {
    center: [51.505, -0.09],
    zoom: 13
});

// add the layer to the map
L.tileLayer('http://localhost:8080/{z}/{x}/{y}.png').addTo(map);

[heaversm]

Ah - this does work to point it to the json file. Getting closer...

However, is this actually hosting the tiles locally, or doing anything to render the map quicker / reduce external dependencies? I'm a bit confused as to how this works, as there are no locally hosted png files in this directory.

This is what the json file looks like:

source: "mapbox:///mapbox.mapbox-streets-v5",
tiles: [
"http://localhost:8080/{z}/{x}/{y}.png"
],
tilejson: "2.0.0"

If I go into mapbox studio and create a blank source file, and then run

tessera tmsource://./lightsource.tm2source

I get a tm2source folder with the data.yml and data.xml files, but then if I attempt to access my page with the map again, I get a 500 error for all the tiles, and tessera throws an error as well:

Invalid tilesource protocol: xray+tmsource:
    at Object.tilelive.load (/usr/local/lib/node_modules/tilelive/lib/tilelive.js:92:25)

Am I missing the point in trying to serve these tiles from a local server?

[mojodna]

To fix Invalid tilesource protocol: xray+tmsource:, npm install tilelive-xray.

If you're using tmsource:, you're producing vector tiles from whatever your data sources are. These are served up (dynamically, so you won't find files on the filesystem) as /{z}/{x}/{y}.pbf and are intended to be rendered either by a Mapbox Studio style (vs. source) or by Mapbox GL (or something else, but we'll ignore that here).

tilelive-xray is a version of Mapbox Studio's "xray" view. It renders a skeletal (unstyled) view of the data contained in the vector tiles.

If you're using tmstyle:, it will dynamically render the same images that you see in Mapbox studio.

Am I missing the point in trying to serve these tiles from a local server?

Depends what you're trying to do. Can you elaborate?

[heaversm]

Well, in a perfect world, I wouldn't have to connect to mapbox for anything - everything could be run locally, so that if there were a network connection issue, the application would not stop running. A secondary goal is to make things as fast as possible - zooming in or out would load tiles as quickly as possible with minimal flicker / tiling / etc.

Does tessera help with this?

My understanding is that, if I run tmstyle, I should be able to view the map that is viewable from mapbox studio, however the host of the actual tiles is mapbox.

If I run tmsource, I should be able to view a custom map (though I am only editing the style of a geographic map from mapbox studio, so maybe that's not of any use to me?)

It seems as though tessera's purpose is to allow you to serve map files from multiple sources, but if I wanted to just serve mapbox tiles locally, I might need something like this:

https://github.com/lliss/tile-converter

to serve up local, raster graphics?

[mojodna]

Well, in a perfect world, I wouldn't have to connect to mapbox for anything - everything could be run locally, so that if there were a network connection issue, the application would not stop running. A secondary goal is to make things as fast as possible - zooming in or out would load tiles as quickly as possible with minimal flicker / tiling / etc.

Does tessera help with this?

Yes. However, to do that, you'd need to have a fully locally available vector data source (it looks like you're using mapbox-streets-v5 as the source right now, so that's dependent on a network connection and a Mapbox account).

As for speed, locally rendering won't necessarily help that. You'd be best-served by having a fully static copy of raster tiles available locally, but that's often not feasible. Rendering from vector tiles to raster tiles is the next best thing and will generally be about the same speed as what you're seeing in Mapbox studio (because it uses the same plumbing under the hood).

My understanding is that, if I run tmstyle, I should be able to view the map that is viewable from mapbox studio, however the host of the actual tiles is mapbox.

The host of the data tiles is Mapbox (if that's in fact the data source), the host of the raster tiles is your local machine.

If I run tmsource, I should be able to view a custom map (though I am only editing the style of a geographic map from mapbox studio, so maybe that's not of any use to me?)

tmsource will provide Mapbox Studio (or tmstyle) a locally-available source of data tiles. Generally, this is most useful when you are styling data that's not available through Mapbox, though it's also handy for the offline use-case.

It seems as though tessera's purpose is to allow you to serve map files from multiple sources, but if I wanted to just serve mapbox tiles locally, I might need something like this:

https://github.com/lliss/tile-converter

to serve up local, raster graphics?

There are a few different options (dynamic vs. static), but creating a local cache of raster tiles (which is what tile-converter does) will certainly be the most performance (although there may be complications w/r/t to the Mapbox ToS for this specific case).

[heaversm]

Thank you so much - you've cleared up a lot! I'll see what I can do
regarding obtaining a local vector data source. I really appreciate you
making your code available through github.

On Mon, Sep 28, 2015 at 7:25 PM, Seth Fitzsimmons [email protected]
wrote:

Well, in a perfect world, I wouldn't have to connect to mapbox for
anything - everything could be run locally, so that if there were a network
connection issue, the application would not stop running. A secondary goal
is to make things as fast as possible - zooming in or out would load tiles
as quickly as possible with minimal flicker / tiling / etc.

Does tessera help with this?

Yes. However, to do that, you'd need to have a fully locally available
vector data source (it looks like you're using mapbox-streets-v5 as the
source right now, so that's dependent on a network connection and a Mapbox
account).

As for speed, locally rendering won't necessarily help that. You'd be
best-served by having a fully static copy of raster tiles available
locally, but that's often not feasible. Rendering from vector tiles to
raster tiles is the next best thing and will generally be about the same
speed as what you're seeing in Mapbox studio (because it uses the same
plumbing under the hood).

My understanding is that, if I run tmstyle, I should be able to view the
map that is viewable from mapbox studio, however the host of the actual
tiles is mapbox.

The host of the data tiles is Mapbox (if that's in fact the data source),
the host of the raster tiles is your local machine.

If I run tmsource, I should be able to view a custom map (though I am only
editing the style of a geographic map from mapbox studio, so maybe that's
not of any use to me?)

tmsource will provide Mapbox Studio (or tmstyle) a locally-available
source of data tiles. Generally, this is most useful when you are styling
data that's not available through Mapbox, though it's also handy for the
offline use-case.

It seems as though tessera's purpose is to allow you to serve map files
from multiple sources, but if I wanted to just serve mapbox tiles locally,
I might need something like this:

https://github.com/lliss/tile-converter

to serve up local, raster graphics?

There are a few different options (dynamic vs. static), but creating a
local cache of raster tiles (which is what tile-converter does) will
certainly be the most performance (although there may be complications
w/r/t to the Mapbox ToS for this specific case).

—
Reply to this email directly or view it on GitHub
#27 (comment).

Mike Heavers
mikeheavers.com
917-345-6634

[heaversm]

Hi - I hope you don't mind but I've given this a month and am still stuck - I've tried three different tile serving solutions, and no matter which I use, I always end up with a map which serves the tiles properly, but all the tiles are just gray, no styling, no features.

You can view what I have here

I just want to be able to reproduce my mapbox map in a browser without needing to connect to the internet (using a local server only). Here are the steps I've taken with tessera:

• install tessera and all dependencies ( as far as I know)
• copy my mapbox tm2 project folder into the tessera folder
• if I go into the tm2 folder's project.yml file I can view my map by leaving the source intact: source: "mapbox:///mapbox.mapbox-streets-v5 however then I must use the internet to view the map. I've tried to change this using a variety of methods:
• use tilemill and export an mbtiles format, and use that as the source (ends up with gray boxes, have tried swapping out the styles as well)
• find the cache mbtiles file for mapbox - ~/.mapbox-studio/cache and copy it into the project and reference that in the source path.
• copy the tiles using tile-converter - seems to be a node error with this.

How do I get tessera to serve up map tiles with actual features on them? If you can point me in the right direction I'd be really grateful. I'm not even that particular about the map style - it's more the marker / distance / route functionalities that mapbox provides which are needed.

[jvolker]

You could take a look at these posts explaining how to use tl to render tiles to a local storage:

https://www.azavea.com/blog/2015/05/29/converting-mapbox-studio-vector-tiles-to-rasters-2/
http://www.acuriousanimal.com/2015/07/26/generate-and-host-your-own-raster-tiles-customized-with-mapbox-studio.html