I have several GeoJSON features on the map and wonder if leaflet could notify me when I am over a feature. I think that's geofencing?
Yes, and there is nothing very complicated to implement it.
What do you mean by "I am over a feature"?
If you mean your mouse pointer or a kind of marker / point that represents your current position, you would simply need a plugin like leaflet-pip to determine which features contain your position, if any (react on map"mousemove" event for the mouse).
If you mean the current map view intersects some of the features, that would be slightly more complex, but still easily solved through another library like turf. Look for turf.intersect method. You would need to iterate over all your features, checked against a rectangle built from the current map view (probably something like: L.rectangle(map.getBounds()).toGeoJSON()).
Related
I am developing a weather radar viewer using Mapbox. In a certain mode, there are 2 Mapbox maps on the screen at the same time showing different modes of the radar. The maps are locked to each other. When one map moves, rotates, or pans - the other one does as well. I did this by simply passing the properties of one map to the other. In the below screenshot, you will see how they are showing identical locations.
What I want to do is - when the user is hovering the mouse over "map1", I would like an identical (ghost or false) cursor on "map2". Here is what I am looking to do:
(edit: What you are looking at is an actual screenshot. Each map is enclosed in a DIV with 50% width of the screen, if this helps to explain)
I don't know if this is even possible in Mapbox. Hopefully someone can give some guidance as I can't find any other questions related to this and I really have no code to show without knowing where to start.
If you attempt to do this inside Mapbox-GL-JS (for instance, by constantly updating the location of a GeoJSON feature layer), I think the performance will be pretty poor.
But since the two views are exactly locked (and presumably the exact same dimensions), you can just do this at an HTML/CSS level. Detect mouse movement on the first map, and update the location of an absolutely-positioned element hovering over the second map to match.
Another approach would be using a canvas element overlaid over the second map, similarly updated.
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 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.
Here's what I need to do:
I will have a toolbar with multiple objects on it (for this we'll call them A,B,C,D) and I want to be able to have the user click and drag them around and be able to snap them to a grid and connect to each other.
Sounds easy, right? Well here's my problem: some objects are different sizes, so A could be a 1x1, B be 1x3, C be 3x4, etc.
So how should I do this? I was thinking about just having each element as a separate UIImageView (or UIView, haven't decided yet) that can be dragged around, then take it's location and see what images are next to it.
Another thing is I have to be able to export these locations to either xml or json (not sure yet, probably xml)
It sounds like you would need a subclass of UIView with tessellation or some sort of underlying grid coordinate system with the units being 1x1. The 'tiles' could be subclassed from UIView, having a UIImage and grid position information. If adjacent tiles are by definition connected, then you wouldn't need additional state information about connectedness. And writing this out would be as easy as writing out origins.
I am working on something similar, but with single-sized tiles. It has been fun - especially the insertion logic: positioning a tile between two other tiles and figuring out what gets moved to make room.
Really hope someone can help me as I'm a bit stuck :S
I have a custom map of an event using the CATiledLayer so users can zoom in and scroll around the map. What I would like to do now is add the functionality to let the user know where they currently are on the map. I know it can be done as I've seen an app do this before. I'm not sure how to go about doing it though, maybe I need to convert lat/lon into pixels but I'm not sure if thats possible (depending on how big the image is, etc).
On another site it was mentioned to find out the boundaries of the map and then I can add pins to the map, but I'm not sure how to go about doing this? Will I need to find every coordinate (lat/lon) within the boundary so I can add the pin of where the user is currently?
If anyone can give me with any advice or pointers, I'd much appreciate it
You can use the route-me library by adding your own map source class. A good article that explains how to do it is here http://mobilegeo.wordpress.com/2010/07/07/route-me-native-iphone-mapping-framework/
I'm facing a challenge right now in trying to map GPS coords to a map that's an artist's rendition. In particular this is for a ski mountain, so the artist's rendition is a "trail map". The trail map is not accurate in that the whole mountain has been squeezed onto the one view, yet the actual topology of the mountain doesn't conform to the drawing.
I've tried several approaches:
1) Triangulation using known GPS coordinates of the lift stations. This is fairly simple to implement, yet this is not accurate enough and the algorithm fails if the rendition differs enough from the GPS map.
2) Creating a uniform grid for both the GPS map and the Trailmap, then doing a mapping from cells in the GPS map to the Trailmap. The downside to this is it can be a lot of busy work with no easy UI for doing it.
3) Calculating the vectors of each lift (being a straight line), find the closet lift station to a given GPS point, and calculate the estimated Trailmap location using this vector.
I'm considering #2, which is essentially the simplest solution. But if you've found a better way, I'd love to hear it.