mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
11.08k stars 2.21k forks source link

Problem with Mapbox custom styles not showing on my published maps embedded with WP Mapbox GL JS Maps plugin #9142

Closed PabloCulebras closed 4 years ago

PabloCulebras commented 4 years ago

Hi, I have created some custom styles

a) https://api.mapbox.com/styles/v1/paulsnakes/ck4ezdhmj0yit1cphc6a3m3ld.html?fresh=true&title=view&access_token=pk.eyJ1IjoicGF1bHNuYWtlcyIsImEiOiJjaWVpcmY2NHMwMDN3dDBraGI2ejk3YXd1In0.uV-DA3Opfn9vdXja5p2iyw#15.2/38.891725/-77.037855/0

Style URL: mapbox://styles/paulsnakes/ck4ezdhmj0yit1cphc6a3m3ld

This map appears in the Mapbox GL JS Wordpress plugin editor when creating a map and entering its Style URL in the "Custom" field, but it disappears when publishing / updating post and a plain colour appears in its place. This plain color is the only thing shown in the post where the map is embedded.

b) https://api.mapbox.com/styles/v1/paulsnakes/ck4fz320s66n11co4z3vkvkc0.html?fresh=true&title=view&access_token=pk.eyJ1IjoicGF1bHNuYWtlcyIsImEiOiJjaWVpcmY2NHMwMDN3dDBraGI2ejk3YXd1In0.uV-DA3Opfn9vdXja5p2iyw#6.8/42.822000/-7.262000/0

This map is showing ok both in the Studio interface and in the preview. But when I try to embed it on Wordpress, it shows differently: layers that I have deleted are still shown (roads, etc), other layers I added are not shown (terrain) and custom Tilesets included as layers (fill) are not showing either. Terrain does appear on the Map Editor, but not in the published map on my web (http://codex21.gal/proba-de-mapa-3/) and the layers based on custom tilesets do not appear neither in the published version nor in the Wordpress editor.

I found this article: https://docs.mapbox.com/help/troubleshooting/blank-tiles/ , and I am not sure the tileset (geojson file) is ok, as I only see black squares on the testing visualization.

I post you my data in case you want to test yourself:

Style URL: mapbox://styles/paulsnakes/ck4fz320s66n11co4z3vkvkc0

tileset 1 ID: paulsnakes.6i4qfy4b

tileset 2 ID: paulsnakes.b016lay0

How could I properly publish my maps with all their layers? using custom tilesets is a critical feature to me, as I need them to draw areas and show text / symbols on the map that will be part of the map style I want to show in my pages, so I can't simply use one of the basic non-edited Mapbox Styles.

Thank you a lot, Pablo

P.S: I don't have coding skills nor js / php knowledge

mourner commented 4 years ago

Can you try clearing your browser's cache? Might have got stuck with older tiles for some reason. It seems to be working fine on my end — e.g. I see the expected map as you described on http://codex21.gal/proba-de-mapa-3/:

image

PabloCulebras commented 4 years ago

Hi Vladimir! You're right, it is showing fine now! I don't know what happened... I has thought it could be cache related and had cleared cache data, but it still appeared a blank map frame. Now it appears correctly, that's great!

Just one thing... if you see this map: http://codex21.gal/mapbox-test-2/ you'll find that the zoom in / out / pan / full screen buttons appear triplicated, Do you now how to get rid of this? And yet more important: how could I get a "taller" (more square like) map frame? I haven't find any option on the Mapbox GL JS plugin interface to set the width / height of the map...

Thanks a lot! Pablo

On Wed, Dec 25, 2019 at 1:29 PM Vladimir Agafonkin notifications@github.com wrote:

Can you try clearing your browser's cache? Might have got stuck with older tiles for some reason. It seems to be working fine on my end — e.g. I see the expected map as you described on http://codex21.gal/proba-de-mapa-3/:

[image: image] https://user-images.githubusercontent.com/25395/71445469-c5da2280-2722-11ea-9c78-58da6dde5e3d.png

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mapbox/mapbox-gl-js/issues/9142?email_source=notifications&email_token=AODIZV3R4PYELQQUKSYHFZDQ2NGZXA5CNFSM4J6NSH72YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHUKGAI#issuecomment-568894209, or unsubscribe https://github.com/notifications/unsubscribe-auth/AODIZV4MMV22TM2S7QRYEULQ2NGZXANCNFSM4J6NSH7Q .

--


Pablo Culebras GALIKE www.galike.net 681 161 624

mourner commented 4 years ago

@PabloCulebras the button issues stem from a CSS conflict — you have some button rules that are too generic (you should modify them so that they don't apply to Mapbox buttons). The height is set by simply setting a height on the container in which you initialize the map (e.g. through CSS).

PabloCulebras commented 4 years ago

Hi Vladimir. I understand... where can I finde those CSS piece of code? thanks a lot

Pablo

On Thu, Dec 26, 2019 at 10:22 AM Vladimir Agafonkin < notifications@github.com> wrote:

@PabloCulebras https://github.com/PabloCulebras the button issues stem from a CSS conflict — you have some button rules that are too generic (you should modify them so that they don't apply to Mapbox buttons). The height is set by simply setting a height on the container in which you initialize the map (e.g. through CSS).

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mapbox/mapbox-gl-js/issues/9142?email_source=notifications&email_token=AODIZVZUEVVSJIY7C3M76ZDQ2RZV7A5CNFSM4J6NSH72YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHVJJEQ#issuecomment-569021586, or unsubscribe https://github.com/notifications/unsubscribe-auth/AODIZV7LPDTWW2AXGRGEFG3Q2RZV7ANCNFSM4J6NSH7Q .

--


Pablo Culebras GALIKE www.galike.net 681 161 624