I'm using MapBox's static API in a project. I have managed to load maps with the same width and height in terms of latitude and longitude regardless of the resolution. This is so that users see the same area regardless of their screen resolution, for example. The problem is that on larger resolutions features and —especially, text appear much smaller, relatively. For example, these two maps look very similar, except for the size of text (and some other details, like the thickness of lines):
https://api.mapbox.com/styles/v1/mapbox/outdoors-v11/static/0.63189425,46.195750258333334,14.3/540x285#2x?access_token=ACCESS_TOKEN
https://api.mapbox.com/styles/v1/mapbox/outdoors-v11/static/0.63189425,46.195750258333334,13.15/240x126#2x?access_token=ACCESS_TOKEN
Is there a way to compensate for this and have the text on the larger image print larger, and have thicker lines? (in pixel terms). The result being that, say, two 6 inch screens print text in the same real-world size (centimeters) regardless of their pixel count.
I have looked into layers and filters, but it does not seem like there is a straightforward way of achieving this. It looks like maybe designing new maps would be the way to go, but I'm using the default ones and I would not know where to start.
THank you
I'm a bit confused by the premise of your question here. The API's #2x parameter is meant to toggle resolution and should serve exactly the purpose you describe. The reason for different amounts of label information being included in the images you've shared is because you've used different zoom values (13.15 vs. 14.3) and the labels in Mapbox core styles are zoom-dependent, meaning they change based on the zoom value used to generate the map.
With a fixed image width, and no #2x parameter:
/styles/v1/mapbox/outdoors-v11/static/0.63189425,46.195750258333334,14.3/540x285?access_token=ACCESS_TOKEN
yields
With a fixed image width, and a #2x parameter:
yields
/styles/v1/mapbox/outdoors-v11/static/0.63189425,46.195750258333334,14.3/540x285#2x?access_token=ACCESS_TOKEN
⚠️ Disclaimer: I currently work for Mapbox ⚠️
Related
I'd like for my road-path-smooth elements to show at a lower zoom level than they currently are because my application is for the outdoors and these are more important elements. Is that possible? I can't seem to find out how to adjust this in studio.
If you're talking about displaying layers from the Mapbox Streets tileset, then no, it's probably not possible. The vector tiles are optimised for Mapbox's style (also, confusingly, called Mapbox Streets), and don't contain data that isn't already displayed.
Your need is a common one, but unfortunately the only way to solve it is to find a different set of vector tiles that meets your needs, or create one yourself.
I'm creating a simple program in Racket that imports two bitmaps and exports them in a single image. I'm having an issue with the pixel density on my MacBook because the images are non-retina. For my image processing, I'm using the 2htdp/image library.
Is there a way to set the pixel density of my racket program?
The line that exports the image is:
(save-image final-image "final.png" WIDTH HEIGHT)
I'm trying not to include too much information, but if there's anything I can add (more code, for example) to make my question more clear, please let me know.
P.S: Processing approaches this problem in the following way:
https://processing.org/reference/displayDensity_.html
This is not a complete answer, but perhaps it will help you to get started.
First, you say "the images are non-retina". This might be a misconception.
The word "retina" is used to describe the resolution of the screen, you happen
to be using (roughly the screen is "retina" if the screen pixels are so small your
eye can't see individual dots).
However, my guess is that when you draw the loaded image on screen, it
is shown at half the size, you are expecting?
The reason for that is found in section "1.8 Screen Resolution and Text Scaling"
in the docs for gui has the following to say:
On Mac OS, screen sizes are described to users in terms of drawing
units. A Retina display provides two pixels per drawing unit, while
drawing units are used consistently for window sizes, child window
positions, and canvas drawing. A “point” for font sizing is equivalent
to a drawing unit.
One solution is to scale the loaded image to double the size:
(scale 2 the-loaded-image)
before drawing it.
Finally, how can a program know whether the current display is a retina display?
The function get-display-backing-scale is what you need:
(require racket/gui/base)
(get-display-backing-scale)
It will return 2.0 if the screen is retina, otherwise 1.0.
If you have more than one monitor, lookup the function
in the docs to see details on handling that.
2x Retina, or not 2x HD, that is the question.
First of all, I don't have a Retina display to test on, and the documentation seemed a little ambiguous to me. It is possible that the API handles things well. It is possible that it doesn't. It is possible that we must handle some of these things. Either way, it is not clearly documented.
Leaflet Icon object's iconAnchor property
For the Icon object, the iconAnchor property can be set so that the the "tip" is centered. How is this handled on a Retina display, when the image is (presumably) 2x larger in each direction? What if we can't make assumptions that every HD resolution will be 2x? What if the HD display has a 1.75x or 2.25x larger pixel ratio? Does Leaflet recalculate a new proportional iconAnchor, or do we do that manually in our load/detect/init setup, or is it a non-issue, or does it act in an undefined manner? Should we always be required to handle something manually which perhaps belongs hidden in the API, and a more generalized resolution handling of "stretchy" Icons?
The coordinates of the "tip" of the icon (relative to its top left corner). The icon will be aligned so that this point is at the marker's geographical location. Centered by default if size is specified, also can be set in CSS with negative margins. -- Leaflet Reference: Icon.iconAnchor
Leaflet Icon object
For the image-file based Icon object, there are the pair of properties: iconUrl and iconRetinaUrl (usually a 2x image), which are pretty self-explanatory. Just going by the documentation and nothing else, this seems like the only reliable way to handle icon sizes on higher resolution displays.
Leaflet divIcon object
Using the DivIcon object, we inherit the above mentioned URL properties, but we have no URLs to use, so they are not required, thus those are meaningless in this context. We do however inherit the iconSize property, and this is useful for setting the size on common displays. But there's no IconRetinaSize, etc. Resolution must be detected and set manually at initialization time. But it seems Leaflet has already done some resolution detection to some extent, with some internal code to choose between 1x and 2x image URLs based on 1x and 2x pixel ratio. If it already has that info, why not properly handle it's own properties as well?
Leaflet (and every JS library out there) uses CSS pixels - and the browser decides the relationship between CSS pixels and screen pixels (or "device pixels"). Read https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio .
The future might hold better resolution management, or maybe usage of the <picture> element instead of <img> for this. If you have any specific ideas on how to improve Leaflet, or how to improve its documentation, please do so by contributing to the project (pull requests are always welcome!)
I'm trying to create assets for a native iOS app. I know that I need to make my header images and buttons resizeable, so I'll need to create slices of the capped ends and a middle slice that stretches to full size.
My question is: how do I do this in Photoshop? Should I use the slice tool to make three separate slices and then export them as three .pngs? Or should I slice the ends and the middle, put it all together and export it as a single .png?
What is the best way to do this?
Thanks!
Native iOS apps have an image API that supports resizing single images based on insets and a tiled inner area. See the documentation, specifically -resizableImageWithCapInsets:. With that method, areas around the edges defined by the insets are not altered, while the remaining center region is tiled to fill any size.
You should aim to produce single images that can be used with that API in mind, while keeping tiled inner region as small as possible
From the Google Image API documentation
Static Maps service allows up to five unique custom icons per request. Note that each of these unique icons may be used multiple times within the static map
I have more than 5 custom icons per request, maybe up to 40.
Is there a way to overcome this? Is it possible to use sprites in static maps to overcome this?
Here's how I got around this:
You probably already know how, and depending on your source it's going to be different anyway, but collect up all your map data. Required bits are going to be: center point, zoom, map type, and output image size. I am going to assume sensor (if the application has access to GPS) is false. Also you are going to need all of your marker information which will include the icon you are going to use, and the geo coordinates of them.
I POSTed this all to the CF page that is going to make all the magic happen.
Map your first 5 points as normal. Get the results as a .png
Map your next 5 points but add "style=feature:all|visibility:off" to the query string, get result as a .png. This will give you a png with a transparent background but will have all of your marker icons on it. It will be the same size as your initial map, and the markers will be placed correctly withing that rectangle.
Watermark that image on top of your initial map. NOTE: this step is probably going to vary the most depending on your language of choice and what image manipulation features it offers.
Repeat 4 and 5 until you have all of your markers.
Write out you image with all of the markers now on it.
Serve up a link to that file instead of using the normal google link.
I have a more detailed explanation here with some code example in ColdFusion.