I am experimenting with custom map styles and I would like to mask with black color a rectangular area around the current GPS position. Basically only a rectangular area around the current GPS position is shown and the rest is blacked out. I was thinking if there is a universal variable for the current GPS position, then create black polygons around it. Is this possible to do with a map style?
Is that on a web page, on a device such as Android or iOS, or something else?
Also, what sort of “map styles”? There are are several different technical solutions just to a “simple” OSM-based web map.
Typically no - in Javascript the relevant library will probably have a function that is called when the user requests a location via an on-screen widget. This is a simple MapLibre example that you can test here - click the “Find My Location” example at the top right of the screen.
In native code you’d typically call something to ask for a location and provide a callback to be notified when a location is available, and that is complicated (at least on iOS) by “what sort of location you asked for” and “what the OS decides you are allowed to have”**.
However, if you can provide a bit more information about what you’re doing, more people may be able to help.
** this is a huge oversimplification, and may be somewhat out of date
1 Like
This is for the OsmAnd app on iPhone, which uses OSM for the maps. The map style that I work with is .render.xml
The idea is to be able go from this:
where the whole map is shown, to this:
where only a rectangular area of the map above the current position is shown and the rest of the map is clipped.
I have some experience of editing OsmAnd styles on Android, and some experience of writing location aware apps on iOS (a very long time ago) and I suspect that the chance of being able to do that via an XML style edit are somewhere close to zero…
You might be able to do that in MapLibre / Leaflet in an app you create yourself, but that’s far from straightforward on iOS.
Thanks for the reply. I suspected it would impossible to do on iOS. I tried importing a plain PNG image (no geo information) and overlaying it on top of the map, but no matter what size the image is it always overlays as a tile of size 512x512 pixels.
From looking at the pictures you posted, the most simple solution to me seems to rotate your device 90°.
1 Like