I am creating in Mapbox Studio a style from scratch. I have a poi-label layer that filters by data. I can see the filter works. I can place a text label at the location of the poi, all in Mapbox Studio.
For the life of it I cannot show an icon with the text. I have tried to paste a some_maki.svg from the Maki iconset in to the "Icon image" field. THe cursor indicates that pasting is a valid operation, the image is uploaded, but it does not show on the map. What gives?
The Maki icon set provides each icon in two SVG sizes: 11px by 11px and 15px by 15px. So, when you use the name of a particular Maki icon in the 'icon-image' layout property, you also need to append the icon's name with either -11 or -15.
For example, consider the 'icon-image' for the poi-label layer in the default Mapbox Street style when inspected in Mapbox Studio:
So, if you include & "-11" or & "-15" in your icon image formula, and the referenced icon is included in your style's sprite sheet, the icons should show up as expected. You can add and remove image's in your style's sprite with the image toolbar, as described in the documentation here.
Related
I want to change background icon to #fe6017.
I use flutter_launcher_icons, set adaptive_icon_background: "#fe6017". But it doesn't work.
I also try to resize image. But it always shrinks and put white color around my image. Thank you.
Open android folder in Android Studio.
Right-click the res folder and select New > Image Asset.
In the Icon Type field, select Launcher Icons (Adaptive & Legacy).
In the Foreground Layer tab, select an Asset Type, and then specify the asset in the field underneath:
Select Image to specify the path for an image file.
* Select Clip Art to specify an image from the material design icon set.
* Select Text to specify a text string and select a font.
In the Background Layer tab, select an Asset Type, and then specify the asset in the field underneath. You can either select a color or specify an image to use as the background layer.
In the Legacy tab, review the default settings and confirm you want to generate legacy, round, and Google Play Store icons.
Optionally change the name and display settings for each of the Foreground Layer and Background Layer tabs:
Name - If you don't want to use the default name, type a new name. If that resource name already exists in the project, as indicated by an error at the bottom of the wizard, it's overwritten. The name can contain lowercase characters, underscores, and digits only.
Trim - To adjust the margin between the icon graphic and border in the source asset, select Yes. This operation removes transparent space, while preserving the aspect ratio. To leave the source asset unchanged, select No.
Color - To change the color for a Clip Art or Text icon, click the field. In the Select Color dialog, specify a color and then click Choose. The new value appears in the field.
Resize - Use the slider to specify a scaling factor in percent to resize an Image, Clip Art, or Text icon. This control is disabled for the background layer when you specify a Color asset type.
Click Next.
Optionally, change the resource directory: Select the resource source set where you want to add the image asset: src/main/res, src/debug/res, src/release/res, or a custom source set. The main source set applies to all build variants, including debug and release. The debug and release source sets override the main source set and apply to one version of a build. The debug source set is for debugging only. To define a new source set, select File > Project Structure > app > Build Types. For example, you can define a beta source set and create a version of an icon that includes the text "BETA" in the bottom right corner. For more information, see Configure Build Variants.
Click Finish. Image Asset Studio adds the images to the mipmap folders for the different densities.
You can create an image filled with color #fe6017 and use it for adaptive_icon_background as in example
flutter_icons:
android: "launcher_icon"
ios: false
image_path: "assets/icon/icon.png"
adaptive_icon_background: "assets/icon/icon-background.png"
adaptive_icon_foreground: "assets/icon/icon.png"
I have a web-app going and I want the Mapbox attribution to be in the bottom-right corner. This is obviously easy to do, but the problem is the logo is behind my menu, as seen below :
Is it possible to access the logo in CSS so that I can properly make the logo on top of all the other content? I want to follow Mapbox guidelines as much as possible. In the image I attached it looks grey because it is behind a semi-transparent menu.
Doing "inspect element" on the logo reveals that its styling is controlled through the a.mapboxgl-ctrl-logo selector. You can add your own override styles to that.
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.
Im using jstree with a dark background, so I wonder how can I change the color of dash-lines(not sure if I call it correctly) between each node. Is it possible with CSS?
As I checked, it seems the dash-lines coming from 32px.png file.
BR
Nima
You will have to edit the 32px.png file to change the dotted line color. I did this for my dark-background web page and it looks much better. I edited the png file with Photoshop Elements and used the "Enhance| Adjust Color| Replace Color" menu to change the black color to a lighter grey by moving the Lightness slider. I also changed the interior color of the selected arrows. Once done editing, save a copy of the original and then replace the file in your CSS themes folder where style.css is.
I can't attach my copy of 32px.png, but here's how to make the change in Photoshop Elements. Other photo editors likely have the same functionality.
Replace Color in Photoshop Elements – Instructions
You can use Bootstrap themed JSTree.
Check out link: enter link description here
with CSS is not posible.
I have some GeoJSON data containing some locations I'd like to show on my map.
Since it contains also the style (marker-icon, marker-size, etc.), right now I am using this data as
map.setGeoJSON(my_data);
These locations will never change, I want to add them as a Vector Tile. Is there a way to do that with MapBox studio?
I tried to put my_data in a file and load it in MBS, but I don't know how to style them as they were the default markers of MapBox.
Thank you
Since it contains also the style (marker-icon, marker-size, etc.)
Do you mean it follows MapBox's simplestyle spec? If so, this simplestyle is only intended to style geojsons in the browser, not vector tile sources in MapBox Studio.
If you want to style them in MapBox Studio, you have to use CartoCSS: create a Studio Source project with your geojson, and create a Studio Style project to style them w/ Carto. Checkout the maki icon set and reference the icons you want for each point using the marker-file: url("path/to/icon.png"); property.
Otherwise, you can load the geojson into your map in the browser using mapbox.js and apply their simplestyles.