Is it possible to style the map itself in Leaflet?
For example, by default it's a colorful map but I'd like to make it a light/grey style map for some of our sites.
I've seen some documentation about GeoJSON but that seems to be meant more for the layer above the map, like markers and polygons.
I'd like to be able to include or reference some sort of external stylesheet to change the appearance of the map instead.
Has anyone got some hints or documentation for me on how to accomplish this? Existing style sheet examples for maps would be very much appreciated as well. Maybe something like a gallery of styles or a Github repo.
Thanks in advance!
Related
I need to move functionality for search something on map from normal page to leaflet controls on map. I'm searching for plugin to start with. Is it good idea to use a normal search plugin or it will be difficult to make it look like on the image? Does exist something like the base plugin to make custom controls?
Visualisation
You can use Leaflet.Control.Search, here's an example
If you want to go outside the map, here's another example
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'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.
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.
here is what I would like to achieve:
I need to use an custom overlay like this https://developers.google.com/maps/documentation/javascript/examples/overlay-simple
as background for a set of points loaded from a Google Fusion Table like this
https://developers.google.com/maps/documentation/javascript/examples/layer-fusiontables-simple
Also if you could confirm this: I read that you can configure a custom icon for each point you display by adding a link to an icon in your Fusion table. Has anybody tired this?
I have searched examples for the above but I could not find an all in one example
thanks a lot
You can not display custom icons on FusionTablesLayer (it only displays a defined set of markers), you can use the data in the FusionTable to create native Google Maps API v3 custom icons, but you lose the performance benefit of FusionTablesLayer tiled rendering (which will be an issue if you have lots of markers).
example from the documentation
combination of the 2 Google examples