klokantech / mapbox-gl-js-offline-example Goto Github PK

Hello

I tried using your demo locally by modifying the source a bit

var idx = location.pathname.lastIndexOf("index.html");
var loc = location.origin+location.pathname;
if (idx > 0)
  loc = location.origin+location.pathname.substring(0,idx);

var style = {
  "version": 8,
  "sources": {
    "countries": {
      "type": "vector",
      "tiles": [loc+"/countries/{z}/{x}/{y}.pbf"],
      "maxzoom": 6
    }
  },
  "glyphs": loc+"font/{fontstack}/{range}.pbf",
  "layers": [{

the Problem was, that ocation.origin+location.pathname created a String like

file:///var/foo/bar/somewhere/index.html ..

The Problem that I'm having tight now, is the fact that I simply get a Page with all the Navigation-Widgets but no map is being displayd ..

Any hints what I'm doing wrong ?

.....

If i change the version of mapbox-gl whether this project works?If it would work,can you tell me how to generate the newest version of "mapbox-gl.js.map".I already have "mapbox-gl.js" and "mapbox-gl.css".And THANK YOU SO MUCH FOR CREATING THIS PROJECT.

From the readme...
This is an example of hosting vector tiles with custom style and a local copy of MapBox GL JS library on your own server.

On my own server is still online? Is there a configuration for hosting completely offiline?

Hi, I have tested your project in my github server and it works pretty well. But I see the map only shows the states of US, and cannot display more accurate content, such as street, avenue. Can I ask if you have any ideas to make the map more detailed? Thank you!

Apologies if this isn't the best place for this.

Trying to do a quick-and-dirty test of the full strength, I unpacked the USA.mbtiles to z/x/y .pbf files, added a "tiles:" line rather than a "url:", and inserted the positron .json file in place of the original style used for the countries in index.html:

var mappath = "http://momcat/Maps/TILES" ;
var style = {
"version": 8,
"name": "Positron",
"metadata": {
"mapbox:autocomposite": false,
"mapbox:type": "template",
"mapbox:groups": {
"b6371a3f2f5a9932464fa3867530a2e5": {
"name": "Transportation",
"collapsed": false
},
"a14c9607bc7954ba1df7205bf660433f": {
"name": "Boundaries"
},
"101da9f13b64a08fa4b6ac1168e89e5f": {
"name": "Places",
"collapsed": false
}
},
"openmaptiles:version": "3.x",
"openmaptiles:mapbox:owner": "openmaptiles",
"openmaptiles:mapbox:source:url": "mapbox://openmaptiles.4qljc88t"
},
"center": [
10.184401828277089,
-1.1368683772161603e-13
],
"zoom": 0.8902641636539237,
"bearing": 0,
"pitch": 0,
"sources": {
"openmaptiles": {
"type": "vector",
// "url": "https://free.tilehosting.com/data/v3.json?key={key}"
"tiles": ["http://momcat/Maps/TILES/{z}/{x}/{y}.pbf"]
}
},
"sprite": "https://openmaptiles.github.io/positron-gl-style/sprite",
"glyphs": "https://free.tilehosting.com/fonts/{fontstack}/{range}.pbf?key={key}",
"layers": [
{
"id": "background",
"type": "background",
"paint": {
"background-color": "rgb(242,243,240)"
}
},
...usw.

Opening the index page with firebug turned on, I see that the 3 GETs succeeded, but then it halted with the error msg in the title line before it did more than put the controls onto the screen.

The expansion is:
Style/r</< http://momcat/Maps/mapbox-gl.js:114:610
forEach self-hosted:251:13
Style/r< http://momcat/Maps/mapbox-gl.js:114:582
bound self-hosted:919:17
bound bound self-hosted:1000:17

I've no clue whether it's a bug in the GL code, a bug in the tile, or some dopey error I made in modifying the index file.

[location.origin+location.pathname+"countries/{z}/{x}/{y}.pbf]
resolves to
["http://[svrname]/[mappath]/index.htmlcountries/[digit]/[digit]/[digit].pbf"]
which doesn't work: index.html is not a subtree identifier. The same error affects the reference to the "fonts" subtree.

I substituted the literal path root ("http://svrname/mappath/") for "location.origin+location.pathname", and that solved the problem. I wanted to re-use location.origin and location.pathname, but had to discard them because I couldn't discover where they're defined.

@klokan, love the work you've done here- it's been a great help for myself in trying to set up an offline mb gl map.

I was wondering what steps you took to generate the multi-layered pbf directory here. In particular what commands you ran to get from the .mbtiles to the pbf directory.

I'm currently running mb-util [output].mbtiles [input] --image_format=pbf, but the end result keeps kicking errors unfortunately. I'd much appreciate it if you could point to any potential things I'm missing at that step.

Thanks in advance.

I run the index.html ,but can not display the map