Changing styles sprite reference

[chebourne]

Hi,
I'm trying to change the sprite URL in the style settings to a different server - I want to use custom sprites/icons.

I have download sprite.json, [email protected], sprite.png, [email protected] for OSM-Bright and am serving them without problem on https://www.pma.co.uk/sprite/ e.g. https://www.pma.co.uk/sprite/sprite.json

The URL I am entering is https://www.pma.co.uk/sprite/sprite which I believe should then have @2x and .json or .png appended as neccessary.

However, as soon as I enter this URL and close the style settings I get nothing appearing in map mode.

Am I missing some other configuration that is required for sprites or is this a bug?

[orangemug]

Hi @chebourne I'm assuming you're doing this on http://maputnik.github.io/editor if you look in the web inspector you'll see the error

/editor/#1.81/30.3/-31.9:1 Failed to load https://www.pma.co.uk/sprite/[email protected]: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://maputnik.github.io' is therefore not allowed access.

You'll need to add a CORS header to the response from your server. See https://enable-cors.org/ for details.

[orangemug]

@chebourne also note, github pages has CORS enabled (access-control-allow-origin:*), so might be a good option for testing.

[chebourne]

Thanks orangemug,

In the end I copied the sprite files to an Apache2 server on the same virtual machine as the Tileserver GL implementation I am working on.

Had to add the CORS header as instructed at https://enable-cors.org/

Is working perfectly with Maputnik now pointing at that server.

[orangemug]

@chebourne good to hear. By the way we're always interested with how/what people are using maputnik for, if you'd like to share please leave a comment in ticket #164

[salberty]

Hi Orangemug,

I'm also trying to get different icons to load in maputnik via changing the sprite URL in Style Settings. For example, I've found 4 sprite files (.png ,.json, @2x.png, @2x.json) at this github page:

https://github.com/openmaptiles/osm-liberty-gl-style/tree/gh-pages/sprites

However, I cannot seem to get any of these icons to show in maputnik. The sprite URL I'm attempting to add is:

"https://github.com/openmaptiles/osm-liberty-gl-style/tree/gh-pages/sprites"

Then I'm changing the image (in icon layout properties) to, say, "airport_15", and no icons are showing.

Any chance you could try to walk me through what I'm doing wrong? I think it's likely related to the sprite URL or the format/location of the files...because I can use any of these public URLs to successfully access the sprites, such as:

https://openmaptiles.github.io/osm-bright-gl-style/sprite
https://maputnik.github.io/osm-liberty/sprites/osm-liberty
mapbox://sprites/mapbox/bright-v9

Many Thanks!

[salberty]

Wll, after more trials, I found the solution and as I suspected, it was related to the URL syntax and location of the files.

First of all, the actual files are actually located here:
https://raw.githubusercontent.com/openmaptiles/osm-liberty-gl-style/gh-pages/sprites

Not here:
https://github.com/openmaptiles/osm-liberty-gl-style/tree/gh-pages/sprites

Second of all, the URL entered in the style properties should be as follows:
https://raw.githubusercontent.com/openmaptiles/osm-liberty-gl-style/gh-pages/sprites/osm-liberty

...which is not really a "location/folder" as I was thinking it would be, but the (beginning of) the entire url of the "file". The only part of the URL that should not be added is the ".json", ".png", "@2x.png", or "@2x.json", which I assume gets added by maputnik somehow.

I still have one remaining question: what exactly is the difference between with the "@2x" files? At least in this sample of files, I can find no difference between the .png vs the @2x.png files or between the .json vs the @2x.json files. I'm wondering if the "@2x" files gives an opportunity to have a different (higher resolution?) image sprite that will show when the maputnik image size is set to be greater than 1. When I set up my own custom sprites, I'll test that theory...but in the meantime I'd appreciate any insights you can share.

[pathmapper]

Hi @salberty,

what exactly is the difference between with the "@2x" files? At least in this sample of files, I can find no difference between the .png vs the @2x.png files or between the .json vs the @2x.json files.

You are using a fork of the Liberty style, the original repo is here: https://github.com/maputnik/osm-liberty.

You're right, the fork you are using has no difference between the files. If you have a look at the original repo, you'll notice a difference :-)

https://github.com/maputnik/osm-liberty/blob/gh-pages/sprites/osm-liberty.png
https://github.com/maputnik/osm-liberty/blob/gh-pages/sprites/osm-liberty%402x.png

Style specification for more information about sprites:
https://docs.mapbox.com/mapbox-gl-js/style-spec/#sprite

If you would like to modify the sprite for the Liberty style, have a look at the readme of the repo:
https://github.com/maputnik/osm-liberty#icon-design