I'm trying to build a map which allows users to choose icons for their geojson points. I just want to use the default map styles (streets|outdoors|light|dark|satellite) and Maki icons, however, not all icons are showing on all styles.
For example 'bicycle' and 'cafe' show on all the map styles, 'circle' only shows on satellite, and 'marker' doesn't show on any of them.
On a style I developed for another purpose, all markers show fine even though I know I didn't do anything special to 'add' them to the style.
So, my code is not the problem, my question is about the availability of maki icons on the default styles. I would have thought they'd all be available on all styles, but it seems not.
How can I tell which icons will work across all the default styles (short of trial and error)?
Is there some way I can 'enable' all the icons on a style?
Failing that, if I do have to make my own versions of the basic styles, I guess I can, but how do I ensure all the icons are loaded into the style?
The standard Mapbox styles are fairly optimised, and don't include anything that's not needed to display them. So, icons that aren't used in the style itself aren't included.
When you create a new style, I think Mapbox by default includes the whole Maki set.
If you can modify the style file (JSON) directly, you could try changing this line (for the Mapbox Streets style):
"sprite": "mapbox://sprites/mapbox/streets-v9",
to the equivalent in one of your custom styles, something like:
sprite": "mapbox://sprites/woowoowoo/htd32t6hd236t",
But it might cause problems if there are icons in Mapbox Streets that aren't in your style.
In short, I don't think there's a simple way to add "all the icons". Each style has its own set of icons.
A better way might be to use addImage/loadImage to load the custom icons you want, at run time. See this example.
Related
I was wondering if there was a way to render custom icons in Dart comment, just as Material and Cupertino icons are.
To give a little bit of context, the project I'm currently working on uses TablerIcons and I wasn't able to find a package up to date and I was about to make one. So I was wondering if there is a way to display icons in Dart comment, the same way Material and Cupertino Icons are.
For example, with the icon 10k this piece of code is used: <i class="material-icons md-36">10k</i> — material icon named "10k" which would give you something like this in vscode:
I tried different ways but couldn't make it work so I'm asking you guys if you have any ideas on how to do that, or if it's even possible.
Thanks.
I am trying to create a navigation application using Mapbox GL JS. But the text labels are too small along with the searchbox. Where in the Mapbox GL JS API can we set the tilesize and ppi to fix it?
The best way to adjust the size of the text labels is to create a custom map style using Mapbox Studio, rather than programmatically manipulating the size of the map labels using the GL JS API (unless for some reason you need the text label size to be responsive on the client side).
You can navigate to studio.mapbox.com, select the New style button, choose a template to customize, and then click the Customize button. This will open the map editor interface, where you can navigate to the Layers panel on the lefthand side of the interface and select a layer whose properties you would like to edit.
For example, in the screenshots below I selected the state-label layer and changed the Text size property from 18px to 30px. More details about styling layer properties can be found in the documentation here.
To persist these changes to the map, you can publish your style, as described in the detailed documentation here. The way in which you can then add the custom map style to your application is dependent on the application you are developing for. The linked documentation specifies the appropriate steps for web, Android, iOS, Unity, and several other third party options.
Here is what I'm trying to achieve: I want to combine more than one Style (a map built by the user in the Mapbox Studio) in a single map.
Let's say we have a Style with some base layers and tilesets, and another Style with just one tileset but with colors and other styling configuration and I want to dynamically combine them in my map.
What I have tried
I add the first Style with setStyle
Make a request to the Styles API and get the second Style json
Iterate over the sources of the second Style and add them to the map using addSource (renaming to avoid conflict)
Iterate over the layers of the second Style and add them to the map usgin addLayer
It pretty much worked, I only got errors with layers that use a "text-field" and require the style to have a "glyphs" attribute.
I then tried do dynamically change the "glyphs" attribute of the map Style but it didn't work. The error persists.
Error: "layers.state-label.layout.text-field: use of "text-field" requires a style "glyphs" property"
Why don't I add tilesets instead?
Because I want to get the all the layout options present in the Style.
Why didn't I open an issue about how to change the glyphs dynamically?
Alhtough this is the concrete problem I'm facing right now I was willing to get feedback on the general approach.
Is it something doable? Should I consider combining more than one style in the map a good idea? Is there a better way to do it?
Thanks in advance.
Leo,,
Your approach sounds generally fine, with a couple of major caveats, which you have discovered:
A style can only have a single font glyph
A style can only have a single icon sprite
If both are hosted under the same user account on Studio, I think it might work, at least for fonts. But judging from your error, that's not the case.
So what can you do? You will have to pick the font glyph from one style, then update every layer in the other style to use a font present in that style. I think that would be hard to do in the general case (I don't know how to find out what fonts are present in a glyph), so the safest option might be to create a new font glyph and remap every font to it.
FWIW, this general issue is already tracked here: https://github.com/mapbox/mapbox-gl-js/issues/4225
I know I can link a style sheet to TinyMCE and this will be used when I am editing. It also seems to apply the styling to the Heading options available in the format dropdown list which is great. I also know I can add custom formats menu using custom_formats (here) but is there a way for the Formats to be populated using my CSS automatically? I have various classes in my CSS for the P tag and would like to allow my users to utilise them.
No, this is not possible (at least not out of the box).
How could a piece of code guess what style or class to use from the pure CSS?
I'm working on a PresentationML parser, and I'm trying to implement support for themes with regard to font color. I'm working with the SDK, and I've puzzled out this monster:
Slide.SlidePart.SlideLayoutPart.SlideMasterPart.SlideMaster.SlideMasterPart.ThemePart.Theme.ThemeElements.ColorScheme
But it's still not clear where I go to get the color for a run which hasn't had it's color otherwise specified. Any help on this would be greatly appreciated.
TIA.
UPDATE: After just wading through the xml, it looks like the monster call I posted above is probably the right one...it yields an element with a "val" attribute that matches the hex code I'm looking for. But it's not clear how I would resolve the particular scheme in the color map ("Light1" in this case). I'm about 75% of the way there, I think - if someone can help me with the logic to know which scheme applies to a run, I think that's what I need.
The free ebook Open XML Explained might give some insight to aid your understanding. Under the PresentationML section, Document Content Structure it talks about how Themes and Master Layouts are used to give default values:
page 86 - 2nd Paragraph:
DrawingML theming can be used to create default values for fonts, layouts, and other branding related data and allow it to be separated from the main body of the presentation. A theme is reusable across all the Open XML markup languages. Inside a PresentationML package various themes are in use. By default each individual master, slide-, note- and hand-out masters, references a separate theme part. The presentation itself also references a default theme to be used in the presentation. This default theme shared with the slide masters by referencing the same part inside the package.
So, in the theme1.xml of your presentations SlideMaster, you will find a theme definition which is used for the slide master and your presentation. The color name Light1, Dark1, etc map to 12 required colors in the Color Scheme of the Theme Element for each theme. See schema for details.
So in the Run, you see Light1, which maps to the number defined in the theme. If the author changes a Master Layout and/or Theme, the Light1 doesn't change in the run, but the value in the theme might and that is where you get the new value from.
On Page 121, the 12 colors are mentioned in Open XML Explained:
Inside the theme element you are required to create a themeElements node which holds all the theme's data. At this level you can also apply extra information or overrides on the existing information inside the theme elements. Theme elements are built up using a set of child nodes, each node identifying a specific data item such as the fonts or colors. The clrScheme element defines a list of colors. The list of themed colors is limited to items such as 'accent1', or 'visited link'. Each of these theme colors uses a separate XML element, where the node name identifies the theme color. Inside this element you make use of the coloring mechanism discussed earlier on coloring shapes using DrawingML. In the markup sample 157 there are two theme colors defined, the 'dark-1' and 'accent-1' colors. The markup sample is not complete. You are required to define value for all the twelve theme colors.
Hope this helps...