-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Allow external icon-image #822
Comments
@Jenius check out our style spec-- under Let me know if you have any questions on making either the images or accompanying JSONs. |
Hey @peterqliu -- thanks for the response! So this solution would require pre-compiling out images into a sprite sheet. There are a few problems here:
|
@Jenius Great points. Sorry about the lack of docs. We're planning on some major changes to how icon sprites work, so the lack of documentation is somewhat a reflection of that. When things solidify we plan on having better docs and much better tooling support (e.g. an editor that will create the sprite for you automatically). We'll also keep the dynamic icon use case in mind. |
Would be awesome. I'm working on an application right now that is banking on dynamic icon support, and will have to switch back to the non-gl version very sadly if that's not somewhat close on the roadmap, which I'm afraid it probably isn't. Either way, would be happy to help out with this stuff if I can, and would appreciate any updates or rough timeframes on any of it! |
@Jenius shucks that we can't help with dynamic support yet, but if you decide to use static sprites in the future, here's a crash course (writing this partly for you, and partly as a jumpstart for future docs). _Folder setup_ My folder when making maps looks like this:
To link up my stylesheet and sprite assets, I store the assets' filenames in the stylesheet's _Defining the sprites_ Let's take a typical sprite PNG image-- looks something like this: If we check out the corresponding sprite.json, the first object is:
This tells the renderer that a sprite called _Putting it together_ Let's say we're trying to use
|
Awesome, thank you! Exactly what I was after. Looking forward to how the changes to sprites work out, this should get me through it for now 😀 |
Remaining issues here are covered by #358. |
Thanks for the explanation @peterqliu. Did anyone manage to use custom markers and would share a working example? For some reason I can't get them to show up linking to either Mapbox or custom style and sprites. See this question on SO. Thanks. |
Hello from 2016 all of the above 2014/15 comments :) So, we're switching from Google Maps to Mapbox GL, and I've just come across this. The necessity of a sprite sheet is an absolute deal breaker for us. Has this been addressed at all? If not, we'll need to switch to Mapbox.js (leaflet) |
@lukerollans what's your use case? Mapbox Studio now makes the sprite sheet for you, though it still means you prepare it in the map style ahead of time. |
@peterqliu we are a travel companion application, in which our subscribers add their businesses so travelers can find them easily. Within the app is a map page and a "featured image" is used as the map marker. So, they're completely user defined and quite variable. |
What does |
I can't seem to apply colours to the maki icon sprite sheet .. do I need to make my own for each set of colours I want? |
@aidanlister Maki does not support the |
For anyone who wants to generate their own sprite sheets for Mapbox from SVG icons using gulp, I've created a gulp plugin that wraps Mapbox's spritezero package. You can find the The only thing it doesn't do right now is generate SDF images—I haven't figured that bit out yet. So if anyone knows how to do this, please point me in the right direction or create a PR. |
There hasn't been much communication about this yet but we are seriously considering dropping SDF support because it is undocumented and unused. See mapbox/mapbox-gl-style-spec#444 for more. |
why not use svg? Whats your ideas for the future? |
https://github.com/rev22/svgl ? what is the purpose of generating sdf/png files when dealing with vector gfx? |
Why can i just add my Image url to layout
|
@koolkarni Icons are supplied via a sprite sheet, not via a single file per (potential) feature. |
No official stance on SDF icons or per-feature icons at the moment. I'm personally in favor of using an established standard + |
To those of you arriving here from a very frustrating Google search, external/generated icons can be passed to Examples: |
@mgd722 there's a limitation of 500 icons per sprite right? And only one sprite per map can be loaded, map.loadImage() add the new image to the sprite, as far as I know, our situation is that we are using the symbol layer to implement custom markers and we are reaching the limit of 500 images with the images of the markers and the svgs used by our custom mapbox maps (our layers). Any ideas on how can we sort this issue, other alternatives? |
@santinogue There is a complimentary We are using this successfully to switch out icon which are not being displayed right now. If you want to display a lot more icon simultaneously you are going to run into problems. |
@Scarysize thanks for your answer, but |
Okay, but be aware that the limit of icons is not fixed to 500. The limit is the maximum size of the internal sprite sheet, which is limited to 1024x1024px (2048x2048 on retina). So you might squeeze some more icons into your style by using smaller images. |
Ok, the 500 icons restriction is specified in the API documentation https://www.mapbox.com/api-documentation/#sprites, anyway, if the limit is 500 or 1000, if we keep adding styles or new icons, we will reach the limit eventually, is this something that want's to be supported? |
@santinogue @Scarysize Are you sure these are hard limits now? After the internal changes to the SpriteAtlas, I believe there might be only hardware or internal memory that would limit the amount of icons you could add using addImage(). |
@dagjomar I'm not sure, but the documentation led me to think that. Maybe someone can clarify if this limits are still there, and the docs should be updated if not the case. |
The limits documented at https://www.mapbox.com/api-documentation/#sprites apply to the sprites web API ( |
I used map.loadImage( ) and map.addImage( ). It works fine when the image is "http://.........". I have created my custom icons which lay on my server where my index.html is also there (in the same folder). But it seems to pick the icons mentioned as "http://......" but not the icons in my folder. It works fine on my local machine. Is there a way around to this? |
@shrutikar It sounds like you're asking about loading icons over protocols other than StackOverflow is a better place for questions like this in the future. We try to reserve GitHub issues for feature requests and bug reports. |
Out of interest, what is the technical reason for this not being possible? Is there some fundamental issue here, or is this just not a development priority? It's possible to create images by creating a DOM element and attaching that to the map, though this is presumably rather inefficient. |
Right now the only option for
symbol.icon-image
is a string in reference to a precompiled sprite sheet that's undocumented and very difficult for any normal user to be able to update. If theicon-image
property would also take a URL to an image and render that, it would be fantastic. This would also mean great support for custom markers, which is a huge missing piece from mapbox gl right now. Bonus points if icon-image would accept svgs!The text was updated successfully, but these errors were encountered: