maputnik v1.7.0, martin v0.12.0 serving OpenMapTiles osm-2020-02-10-v3.11_north-america.mbtiles

[NH-RedAnt]

Platform is Beelink 5700U miniPC running Ubuntu 23.10 fully updated.

Martin

Martin serves the mbtiles bundle perfectly on port 3000 with the command line reference:
martin ./osm-2020-02-10-v3.11_north-america.mbtiles

Maputnik

Running the Linux maputnik with:

./maputnik

1. Open browser to http://localhost:8000
2. Use "Open" to select "Empty Style".
3. Then "Data Sources", "Add New Source" with values:

Source ID = openmaptiles
Source Type = Vector(TileJSON URL)
TheJSON URL = http://localhost:3000/osm-2020-02-10-v3.11_north-america

4. followed by "Add Source".

Once the Source window is closed, change the "View" to "Inspect".

Inspection data is displayed and layers can be defined to show data when the View is set back to "Map" . For example adding a Layer for id="water" can be filled with blue.

Map tiles are each displayed correctly but NOT correctly located. I believe they are being selected by x,y,z and NOT the z,x,y format value given "tiles" in the martin supplied json. This value appears to be ignored, or perhaps a TyleJSON URL always defaults to x,y,z access?

From Maputnik you can "Export" and "Download" the generated style. Directly using the DL style in MapLibreGL also seems to tile oddly.

This can be fixed by editing the saved style and changing the appropriate "Sources" line from:

"url": "http://127.0.0.1:3000/osm-2020-02-10-v3.11_north-america"

to:

"tiles": ["http://localhost:3000/osm-2020-02-10-v3.11_north-america/{z}/{x}/{y}"]

MapLibreGL and Maputnik (with "--file DL.json") will then show the tiles located correctly in the newly defined style.

Which is great except that in Maputnik View="Inspect" no long knows about the "fields" it saw using the TileJSON style.

Ending up the same place you do by selecting "Data Sources":

Source ID = openmaptiles
Sources Type = Vector (XYZ URLs)
1st Tile URL = http://localhost:3000/osm-2020-02-10-v3.11_north-america/{z}/{x}/{y}

Is there a way to alter what martin sends in the mbtile reference? Is Maputnik just not interpreting it correctly? Should I open a issue with them?

[NH-RedAnt]

I expected something to work in a manner that it just doesn't.

Honestly I'm not sure why I expected the TileJSON type of Maputnik to understand whatever json Martin is serving on the base MBTiles URL. I suppose I thought I was onto something when I was able to see data in Maputnik's Inspect view.

So Here's what I've done that seems to be working great for me. Unsure if this is the best approach. but I figured I would at least share what worked.

Martin has always worked fine, so nothing changes in the simple Martin startup above.

Export "myStyle.json" from Maputnik

I run Maputnik first to generate an almost "empty_style.json" file.
Run Maputnik locally. Define the Martin server in "Data Sources" and then "Export" it to a local file "myStyle.json".

./maputnik

In the Maputnik browser window at: http://localhost:8000

1. Use "Open" to select the "Empty Style" located at the bottom of the list.
2. Use "Data Sources" and in the "Add New Source" section enter:

Source ID = openmaptiles
Source Type = Vector (XYZ URLs)
1st Tile URL = http://localhost:3000/osm-2020-02-10-v3.11_north-america/{z}/{x}/{y}
Min Zoom = 0
Max Zoom = 14

3. Then click the "Add Source" button.
4. You should see the new source in the "Active Sources" list at the top of the screen.
5. Close the window with the "X" at top right.
6. Now "Add Layer" and enter:

ID = water
Type = Fill
Source = openmaptiles
Source Layer = water

7. You should now see data in both View=Map and View=Inspect.
8. Changing the "Paint properties" entry for "Color" should change the color in the View=Map mode, but you may need to zoom or move to see the change.
9. Now use "Export" to download the current style and save it locally to "myStyle.json".
10. You can now stop the Maputnik server. From now on you want it updating your local myStyle.json file.

Restart Maptunik with live edits

You may use the downloaded "myStyle.json" (or any other name given) in the place you stored it. In this example I copy "myStyle.json" into a "static" folder, because I use it later in that location. The file copy and restart of a local Maputnik with additional options looks like this:

mkdir static
cp myStyle.json static/
./maputnik --watch --file static/myStyle.json

Normally I use the Google-chrome web browser. But Firefox offers a very nice JSON view. And JSON is what Martin return when you navigate to it's base MBtiles URL. In my case that base url is: "http://localhost:3000/osm-2020-02-10-v3.11_north-america". Under the tag "vector_layers" you will fine the tags of "id" and "fields".

Maputnik's "Add Layer" form has four fields: ID, Type, Source, Source Layer. Use any "ID" that makes sense to you. Select a "Type" of map viewable object to create (like Fill, Line, or Symbol). For the "Add Layer" form's last two fields are: "Source" and "Source Layer". "Source" must match a "Source ID" value previously entered in "Data Sources" (I used "openmaptiles" because many other styles used it). The "Source Layer" field must match an "id" value found under "vector_layers" in the JSON. The Maputnik form "Source Layer" value must exactly match one of the JSON "id" values. Inside the JSON file under "vector_layers" you will find multiple "id" tags with values like: water, transportation, places. That value goes into the "Source Layer" form. While working with this layer the associated JSON "fields" will be of interest, almost certainly the one called "class".

Matching hints

Once you have added Layer, make sure it's selected in Maputnik before you start editing. If you just added a new layer, you may find yourself editing the prior layer, I did it frequently. The View=Inspect is really useful to see what field values you wish to match on. However you will only see objects that match your currently selected layer's "Filter". Once you define a Filter you don't see any other options. To see what you have filtered away just invert the Filter by selecting "no filter matches". Remember to swap it back when you're done.

Matching and using Maputnik function syntax is confusing. Even the small amount I know would take at least as much space as this to scratch the surface. My hints are:

Maputnik "fx" functions are text arrays.
To select a data "field" like "class" use: ["get", "class"]
To return a color: ["literal", "#aabbcc"] or ["literal", "rgba(100, 100,100,0.5)"]
Besides get, literal; some other functions are: match, case, ==,

MapLibre GL live view from Flask

You may continue editing and viewing in Maputnik. I wished to confirm the style worked in my own web server, and also save working versions. I did this by created a Flask static server with a MapLibre GL website instance under static/. Here is my app.py:

'''
Install:with:
  python3 -m venv --system-site-packages flask-venv
  ./flask-venv/bin/pip3 install flask [flask_cors
RUN with:
  flask-venv/bin/flask run
'''
from flask import Flask, redirect
from flask_cors import cross_origin

app = Flask(__name__)

@app.route('/')
@cross_origin(allow_headers=['Content-Type'])
def index():
  return redirect('/static/index.html')

Assuming the "static/index.html" referenced a "style:" path of: "/static/myStyle.json".

Continue editing the style using the Maputnik web service (with the --file flag and json file reference). Maputnik will keep the "static/myStyle.json" file updated as you work on it. You may preserve "static/myStyle.json" by making additional file copies (or git commit) whenever you wish to. Any web instance using "static/myStyle.json" can be shift-reloaded to view the current Maputnik style.

Hope this helps some other newbie trying to sort all this out. And leaves more time for the great work being done on this project.

[NH-RedAnt]

Getting further along on my style I've noticed that Maputnik doesn't correctly read the Sources and all the Layers when the style is sent in from the command line. It works a lot better if you "Open" and then "Upload" your style.json. The "Export" and "Download" from Maputnik seem to work correctly.

Martin is handling the OSM Vector dataset, as well as NaturalEarth. In the next few sessions I expect to also test a raster-dem MBTiles. So far I'm not using an special Sprites or Fonts. But I'm likely to test some just to make sure I could deploy a 100% offline target for demos.

[nyurik]

@NH-RedAnt thx for all the notes - I think the work being done in #1119 will eventually make it far easier to use maputnik directly from martin, without all the complexity. But clearly it is not there yet. The main tracking issue is #1120 and Maputnik-specific is #852 (which you already found)

Let me know if there are any specific questions you have