I am new to OpenstreetMap and Leafletjs. I am trying to implement a map displaying journey time information on motorways (also called highways in some part of the world) by using different colors to show road congestion and the problem I'm facing is, once the map tiles are rendered, it comes with all information, like town/city names, road names etc.
On the basis of road information that I receive, I create road colorings in an overlay that sits on top of the tile layer. The problem is, once that happens, the road colorings cover the road names that appear on the tile layer. The problem can be seen in the image displayed below.
Is there a way, I could extract the road names so that I could put it in a layer above the road coloring layer so that road names appear on top of road colorings.
Thanks for any sort of help, Looking forward to some replies.
Thanks
In theory, you could create two sets of tiles: one with the road lines, another with the shields (labels). Render the shields tiles with a transparent background. Then hack Leaflet around to have a second tile layer above the overlay layer.
However... that's a whole bunch of hassle for a fairly simple problem. So: why not render the road numbers alongside the roads, rather than on top of them? That way, your overlay line won't obscure the numbers. Here's an example of a style that does this (disclaimer: my site!).
Assuming you're using Mapnik to render your tiles, you'll want to use TextSymbolizer rather than ShieldSymbolizer. Customising the style is (of course) much easier if you're using TileMill rather than pure Mapnik XML.
As you say, the roadnames (here ref icon symbolizers) are part of the OSM raster map tiles and can't changed easily.
So the easiest solution would be to switch to a mapstyle without labels.
Another idea would be to add more alpha to your cusom GPS track, so it get's more 'hollow' and fits better in the mapstyle. But the default OSM style isn't good for adding informations on top, as this basemap is already to detailed. Maybe it makes sense to use another one:
http://wiki.openstreetmap.org/wiki/Featured_tiles
Related
I'm working on rendering some vector tiles using Mapbox Gl JS. These tiles are within the US and Canada, but I need only those within US boundaries to be rendered.
My tileset has the following metadata: gsd, name, miles. There is no metadata that indicates the country itself.
Is there a way to render only the tiles within a specific boundary? I tried with queryRenderedFeatures, but I need a solution with the tiles within precise US boundaries.
I cannot add the tileset URL here because it's part of proprietary software.
There's no straightforward way of doing that, for the reasons you describe.
You can try something like generating a shape which is the inverse of the US (ie, the whole world with the US cut out of it) and overlaying it, to block out everything else. But it will cut off labels and look...not great.
I want to label stations on my map, and I would like to clusterize the stops at different zoom levels to filter them down. So as you zoom out all you get is the start and end, and then finally a single label start->end.
How do I render a text label on a vector tile ?
I could fetch the stations as a geojson and reload on zoom change if there's no easy way to do this with tiles.
Is there a reason you need to encode your data differently per-zoom-level in the tiles or are you mainly concerned with displaying data differently per-zoom-level? If the latter, I would recommend looking for an approach that focuses more on styling the vector tiles you already have rather than trying to generate those tiles in a more complex fashion. You could try using a zoom function to style your data. If you're using Mapbox Studio, you can also set zoom-specific style rules in the Studio UI, which is the route you'll probably want to go if you're using Leaflet (I see the Leaflet tag in your post but it's not entirely clear what your implementation looks like).
If the former, you may need to use a tool like Tippecanoe. This route will likely be a bit more complex, but gives you fine-grained control over how your vector tiles are generated. Keep in mind that once you've created your tiles using Tippecanoe, you'll still need to style them somehow.
When should one use a marker instead of a feature layer of points in Mapbox?
Points layers can be updated and styled dynamically using all the styling tools of Mapbox GL JS. Features in points layers can also be clicked, presenting a popup just like with a marker.
Given this, when would one want to use a marker?
As Andrew mentioned there are two sides two this:
Accessibility
Markers are implemented as DOM elements and thus can be included in the tab order and can be given accessibility attributes
Animation
As markers are DOM elements animating them is quite easy with a bit of CSS & JS. You can animate points on a circle layer too, but its much more of a hassle.
Small point count
The number of markers/points you can display at once is somewhat limited by what the DOM can manage. My suggestion is that, if you have more than 500 points to display, you should opt for a circle layer instead of markers (this is a very rough estimates and depends on other parameters as well, animation, point size etc.). Using a circle layer you will hit - depending on the hardware - a limit in the 10s of thounds of points.
I'm using Mapbox GL JS. Is there any way I can style my base layer to look like the Mapbox Light example, but showing only the UK?
I assume I would use Mapbox Studio to build my own base layer, but I can't see any way in Studio to filter by country.
If that's not possible, is there any way I could show labels on the UK only, and show other countries as filled polygons? (As per this unanswered question.)
Unfortunately it is not possible to filter by a certain geography when selecting the data source for a layer. If you're working with Mapbox's tiles, they'll always cover the entire planet.
There is the possibility to restrict the map to a certain (rectangular) bounds, with the map.setMaxBounds method (https://www.mapbox.com/mapbox-gl-js/api/#Map#setMaxBounds). This might work reasonably well since you want to restrict the view to the UK, but might not be suitable depending on the geometry you want to restrict the view to.
As a workaround you could create a dataset and add a polygon that covers the entire planet except for the extent you want to show in your map. Then add this dataset in your style as the top most layer and style it with whatever you'd like the empty space in your map to look like.
The workaround has been also suggested in this SO answer, if you can get maptiles for the UK only (the SO answer gives a link, but for Germany) you can
upload them to Mapbox as a dataset, export it to tilesets, and then
to a map as a layer. Delete all other layers
You have also the possibility to Style a single country in Mapbox
studio ref this tutorial. The other countries are still shown, but you can style your map in a way to highlight UK
There is a option that allows you to show only one country highlighted. But drawback is, you lose all the layers and tile-level details. Here is the link https://www.mapbox.com/videos/how-to/map-a-single-country-in-mapbox-studio/.
But if you want to include the tile details as well as whole world map but in that map only one or two or custom amount of countries highlighted, then, from above link of Natural Earth download the zipped file of ne_10m_admin_0_countries and upload.
Go back to your map style, and instead of making a blank one. Add another layer of ne_10m_admin_0_countries in your current map. Select the country in the filter option (in same way as shown in video). And change its opacity. That's it.
Hope it helps. Have a great day.
I'm interested in custom map tiles, and using advice from here and here, I've experimented with exactly that. For a prototype I did a very geeky map of the Star Trek Federation, with episode links moving you around the planets/systems etc.
While that's all fine and dandy for fantastical locations, I'd also be interested in using heavily stylised renditions of real world locations, yet still using real lat,lng points. So, for example, a bespoke, yet mostly geo accurate, map of London, chopped into tiles, but if you passed in lat,lng coords for Camden Tube (51.53911 -0.14235), you would move to that location.
Any ideas how you configure LeafletJS to do this, without going the route of using Google Maps with custom tiles?
If I understand correctly, you have 2 different applications:
Your Star Trek map, for which you are satisfied.
Stylised map of real world, for which you would like real lat,lng coordinates to be accurate?
Then your question is how to create your custom tiles, so that Leaflet shows the stylised view of London when passed the real London coordinates?
In that case, it would be probably just a matter of correctly numbering your tiles. Or the reverse, modifying the tile numbers used by Leaflet to build the tiles URL. For the latter solution, see Specifying Lat & Long for Leaflet TileLayer
I'm not quite sure what you mean by "mostly geo accurate". It sounds like you probably just want to generate your own map tiles from some kind of source like OpenStreetMap. In that case, TileMill (although kind of obsolete) is probably the easiest way to go.
There are basically three parts:
Generate some map tiles (eg TileMill)
Host them (eg TileStream)
Point Leaflet at them