Let's say for example that I'm making a tile map editor.
We have the editor, which handles the drawing of the tiles, and we have the tileset which is used to determine what tiles are drawn.
The editor needs to depend on the tileset to know which tiles should be draw, and the tileset needs to depend on the editor to know the dimensions of the tiles to be drawn, as well as other minor details.
This creates tightly coupled code. Is this a code smell? If so, how do I resolve it?
Do I stuff everything into a large class? Do I use a mediator to communicate between the two classes?
Write your tile-set first complete with tests, then move on to the editor. In so doing you will have solved your problem without even considering it.
Related
In Mapbox GL JS, I'm looking to use clustering + use a different icon for one feature which is currently defined as "active". I want the necessary transitions (unclustering + change of the active feature) to be animated, but can't find a way of making this all happen.
Mapbox provides an example showing how to implement clusters, which uses different layers for the clusters and for non-clustered features. This technique can also be used for rendering the "active" feature in its own layer with a different image. When a cluster breaks ("unclusters") into features, it basically gets removed from the clusters layer, and the features get added to the "unclustered" features layer. But this doesn't allow adding a transition animation, since there isn't really a transition here. I would like to show the cluster splitting into features, with each feature moving to its respective location.
Any ideas how to solve this?
Some ideas that don't quite provide a full answer:
Use Leaflet with the markercluster plugin and its "spider" behavior for clustering. This works and provides a nice "spider" transition animation for unclustering. However there is no "official" binding between leaflet and Mapbox GL, so I'm reluctant to use that (there is just this which I would need to modify and it's based on undocumented Mapbox internals). Also I'm now sure whether this is good or bad performance-wise with thousands of features. And I know from experience that adding an animation to modify the shape of Leaflet markers (for active/inactive transitions) doesn't really work.
Use markers in Mapbox, instead of layers, but then how to do any sort of clustering?
I can't think of any reasonable way to implement this just using Mapbox GL JS, short of learning WebGL and implementing a custom source.
But I wouldn't write off the Leaflet+Mapbox approach - in my experience, the performance is ok (though I haven't tested with clusters or what you're trying to do).
There is a similar approach with OpenLayers: https://openlayers.org/en/latest/examples/mapbox-layer.html I have also used this and it worked fine.
Finally, it seems there are quite a few Leaflet and OpenLayers libraries that specifically solve the animated clustering issue: https://gis.stackexchange.com/questions/17250/how-to-create-animated-cluster-markers-in-openlayers-leaflet (And most of these answers are very old, so perhaps there are more libraries now).
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.
I'm starting research to add a user feature to an existing map built in Mapbox GL JS (wrapped in an Angular 2+ application). What I need to do, is allow a user to be able to draw and rotate ellipses and text labels over the top of a map, and be able to save screen captures of the result.
I'm coming into this with no experience in Mapbox or Leaflet, so I have a lot to figure out. My first goal is to determine if I can do this in Mapbox directly (with a plugin?), of if I will need to render a canvas over the top of my map with some third-part drawing library (I have a lot of experience with those).
The obvious advantage to doing this in Mapbox directly would be that we might still be able zoom and pan.
The Mapbox-gl-draw library lets the user author features in a map, but probably not to the extent you need.
If the features the user creates don't need to live "in map space" (ie, the map is static, and the labels are statically positioned over the top, for printing), working directly on a canvas will give you much more flexibility. You'll also have access to a much wider variety of libraries.
I am following the source quickstart tutorial. I have followed the tutorial all the way through, and am having trouble displaying the earthquake data (red circles) above the land vectors.
According to the symbol drawing order documentation:
“Higher” layers obscure “lower” ones.
However I'm not finding this to be the case. Please see attached screenshot:
The 'earthquakes' layer is the 'higher' layer, I think. I am using the 'Comic!' base map styles. Since the road lines also appear to 'mask off' the land vectors and show the earthquake data below, I'm wondering if this is causing the issue, but looking through the styles there's nothing obvious I can see.
Thanks for any help.
The documentation is correct, however the comp-op family of CartoCSS properties affect how the colors of different layers interact with each other. In this case, the marker-comp-op: screen from the quickstart example was designed to work well over a darker satellite background, but becomes nearly invisible over solid white.
If you remove the marker-comp-op property or change it to a different compositing operation such as multiply the earthquake markers should show up fine.
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