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.
Related
I'd like to add custom markers with text labels on my map. I can use MapViewPins for this, but they "tremble" when map is being moved. Even one MapViewPin behaves like this in official Here example, so it is probably not an optimization issue.
When i load PNG image and use it as a MapMarker, it works perfectly. But i don't know how to add text to a marker.
I am using Here SDK for Flutter (Navigate Edition) 4.12.4.0 with Flutter 3.3.2
GIF below is an example. Cyan circles are MapMarkers, markers with icons and label are MapViewPins. Is there any solution to this problem?
Unfortunately, the MapViewPins, being widgets embedded in the MapView surface, need to be relocated to the fixed coordinates every time the map is interacted with by gestures, which is why you notice this "strange" behavior.
However, what you mention about using MapMarkers would be the best solution but in this case instead of using PNG files, you could use SVG files in which you enter the text you want to display.
There is currently no other way available to do what you mention using the HERE SDK (Navigate Edition).
Here is a link to our most up-to-date HERE SDK (Navigate Edition) documentation: https://developer.here.com/documentation/flutter-sdk-navigate/dev_guide/index.html
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.
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.
I want to draw L.circle in a custom pane but I am using mapbox.js and hence the leaflet version 0.7.7.How can I draw L.circle in a custom pane? Do we have to copy some js files from the 1.0 version of leaflet? Please help me and explain how to do this.
In leaflet source file search for function _initPanes(). Inside the function create a new custom pane and attach it to mapPane.
pane.myCustomPane = this._createPane('leaflet-mycustom-pane-css');
Update L.Circle code to attach the circle to your custom mapPane.
I used Tilemill to style my data, added teaser for points, then save then uploaded the project at data on mapbox.com then referred to those data on my website using "Layers" on mapbox.js examples why are my tooltips not showing up?
You still need to add your gridLayer and gridControl to your addLayer function. Example.