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.
Related
I would like to make the Mapbox popup resizable so if the user clicks and drags on the corner/side, they can make the popup bigger or smaller and the content automatically adjusts. Is this possible?
There is no functionality for that provided by Mapbox GL JS. However, you have full control over the HTML element used, so you can implement this feature yourself.
The navigation bar of v7 offers among others a cardinal direction button (see screenshot below). Does this option exist in v8?
V8 does not provide such buttons, however you can easily create this for your app if you want. Here is a code sample: http://bingmapsv8samples.azurewebsites.net/#CustomOverlay_BasicOverlay
This sample uses a custom overlay for the buttons, but you could easily use HTML in a div and just float it above the map. That would take less code since you would create the buttons using HTML rather than JavaScript.
In a map application based on Leaflet, I would like to have a large application menu, kind of a settings menu. I managed to put a nice button into the top right corner as a L.Control and it gets fired on a click.
The menu should position either to the left of the menu button or simply in the middle of the screen.
I am wondering whether it is best practice to use
a Popup,
a Layer,
another Control or
just position a at the right place on the page.
Trying the latter, I found that I have to set z-index to a very high value to see it, and it feels a bit odd not to use the Leafleat features.
What would be the "right" solution to use with Leaflet?
If you want a full screen map, you can use https://github.com/Turbo87/leaflet-sidebar
I use it here: http://franceimage.github.io/map
You can create a nice customized icons based toolbar using Leaflet easybutton plugin.
You will have all the leaflet based controls (Click, hover, position etc.) to set that up as per your requirements.
Here are the implementation examples:
http://danielmontague.com/projects/easyButton.js/v1/examples/
and github repo: https://github.com/CliffCloud/Leaflet.EasyButton
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.
For business use Microsoft charge extra for use of the Bing Maps birds eye angled view, so my client has ask that I disable this option. In verion 6.3 of the control this was easy, there is a map option that can be used to do this: enter link description here
However, I can't find how to do this using the API with version 7 of the control. The current menu has Birds eye as an option with check boxes show labels and show angled view. Ideally I'd like to disable the option from the menu so that users are only able to view road and aerial views. So it looks like I have two options available:-
1) Hide the show angled view check box somehow with css. The issue here is that I can't get to the HTML content using the IE developer toolbar of firebug as it only displays when selected.
2) Attach to the map maptypechanged event and if birds eye map selected set it back to the map type it used to be.
Both of the above are far from ideal. Does anyone have a suggestion for the best way of doing this?
Sample code:
map = new Microsoft.Maps.Map(document.getElementById('myMap'),
{
credentials: 'Your Bing Maps Key',
disableBirdseye:true
});
here are some working examples from the iSDK:
http://www.bingmapsportal.com/isdk/ajaxv7#CreateMapWithMapOptions14
API Reference:
And here is the MSDN:
http://msdn.microsoft.com/en-us/library/gg427603.aspx
disableBirdseye
boolean
A boolean indicating whether to disable the bird’s eye map type. The default value is false. If this property is set to true, bird’s eye will be removed from the map navigation control and the birdseyeMapTypeId is disabled. Additionally, the auto map type will only display road or aerial.
This property can only be set when using the Map constructor.
You're correct in stating that there is no way currently using the v7 API to disable individual map styles. A possible Option #3 which is less hackish, but requires a bit more work, is to set the showMapTypeSelector property of the MapOptions to false, which would have the effect of hiding the entire map style selection dropdown. Then create your own custom navigation menu that only includes links to those styles you want to allow the user to choose.