I'm displaying a map with many MarkerIcons, all based on the same png but scaled to various sizes.
The base size is 64 x 64 and if I am scaling down, things work as expected.
If I am scaling up, the icons are cropped. I made a trivial JSFiddle that illustrates the issue - this is the code to scale icon. My understanding is the first size is the actual size of the source image in pixels, next two positions are the origin and anchor which I don't care about for the moment and the final size is the scaled size in pixels.
var icon_scaled = new google.maps.MarkerImage(
img-filename,
new google.maps.Size(64, 64),
null,
null,
new google.maps.Size(scaled_size, scaled_size)
);
In the examples I found, you can omit the first size and let the browser calculate it. That works on Chrome but fails on Firefox with an error message like:
Error: IndexSizeError: Index or size is negative or
greater than the allowed amount
Fiddle here: http://jsfiddle.net/y8E54/
How can I do this on both browsers without any errors?
BTW: I know MarkerIcon is deprecated - my experiments replacing it using 'icon' as per the docs and specifying 'size' and 'scaledSize' lead to the same kinds of issues.
I had the same problem and after some research and a simple workaround, I was able to fix this headache.
Here is what I did.
It seems that you need to set both the "size" & "scaleSize" attributes for this to work in FF. But then, there was one other thing which bugged me. When I set the "size" attribute to the original size of the icon, the icon scaled but cropped abruptly without showing the full icon - probably because of the size limitation.
So, I set of the "size" attribute to the max limit of the scaled img (which was 64 in my case) and it worked like a charm.
cObject.setIcon({
url: cObjects[y].getIcon().url,
scaledSize: new google.maps.Size(icoSize, icoSize-1),
size:new google.maps.Size(64, 64)
});
Related
I am using NextJS and react-pdf/renderer and my tool creates a PDF and I'd like to display it with the PDFViewer component.
The Viewer loads but only takes up a small part of the screen. Whenever I change the 'width' and 'height' attribute with relative values (100%, 100vh), it won't take it. The only way to force it, is to put specific pixel values in it, but that defeats the purpose of being responsive to the screen size.
Sandbox that reproduces my issue: https://stackblitz.com/edit/nextjs-su5bi1?file=pages/index.js
Does anyone have an idea why this is happening?
Here is your screen with a red block of pixels of 150 pels high, note how it matches exactly your frame height.
Generally you ONLY set frame height in pixel units (The cross browser default minimum is 150?) you probably need somewhere to set a style defining the height as a different number of pixels.
see comment 2 in https://stackoverflow.com/a/73201090/10802527
Label in CN1 is limited to being a Single line.
Now that we have to use SpanLabel for anything that can take more than 1 line,
we face one issue.
When we have a strict design that uses consistent height for a list item, we have to give max/min lines allowed for the SpanLabel (At least that's how it works in Android And Flutter).
When I searched for anything that says line in SpanLabel file, I only found that word in one place, that too in a comment.
It did not feel right using fixed height/width property to a SpanLabel as they will vary with fonts and font sizes. The hight should be calculated with respect to the number of lines of the text & font config like font size, line spacing, padding, etc.
What is the right way to achieve consistent height across various SpanLabel despite the varied length of the text they display?
The "right way" would be the layout manager as it would allocate the right amount of space to the span label and everything else. E.g. if you use TableLayout you can allocate the height as percentage.
SpanLabel is technically a TextArea that's encapsulated. It has that distinction between rows/lines which isn't exposed within SpanLabel. But you can manipulate the underlying text area by using getTextComponent().
There is one simple task I want to achieve.
I have an image in a variable width container.
The container can have a width of 300, 400, 700, or 900 pixels. This is done by the means of media-queries
The image should take up all the width of that container. So it will be also 300, 400, 700, or 900 pixels wide.
The image should have different sources for all that width values. So I can serve smaller images on mobile phones.
I thought that this could be done with the srcset attribute of the img element, maybe under help of the sizes attribute. width something like this
<img src="http://dummyimage.com/300x200/abc/000"
alt="dummy"
srcset="
http://dummyimage.com/900x200/abc/000 900w,
http://dummyimage.com/700x200/abc/000 700w,
http://dummyimage.com/400x200/abc/000 400w,
http://dummyimage.com/300x200/abc/000 300w
"
/>
But it's not working in that way, because the browser chooses the image in proportion to the width of the display port and not to that of the image itself.
Example with use of picturefill polyfill from http://scottjehl.github.io/picturefill/: http://codepen.io/HerrSerker/pen/itBJy . This does not work, because it will take the one image that is the next size.
I could of course take that into account and change my srcset to this
srcset="
http://dummyimage.com/900x200/abc/000 999999w,
http://dummyimage.com/700x200/abc/000 900w,
http://dummyimage.com/400x200/abc/000 700w,
http://dummyimage.com/300x200/abc/000 400w
"
This will work on the desktop, but fails on retina displays, because the device pixel ratio is taken into account here, but in a different way than with the media queries. And it is not useful, because the image should know about the width of the viewport and of the same width and that at compile time? No way. Image I use the image in a grid system. The image has different widthes if I'm in a 3 column grid on desktop devices and a 1 column grid on smart phones. That should not be in the responsibility of the image to calulate the ratio of width and viewport-width.
I did not have any luck with the sizes attribute as well (no example here). The reason is tha same as above. In the sizes attibute I say which amount of the viewport width should my image be wide according to media queries. This is so off. How should the image know?
So I came around with this solution. I setup a data-srcset attribute with the same syntax as the srcset attribute itself, but with a custom JavaScript programming. Example here: http://codepen.io/HerrSerker/pen/tCqJI
jQuery(function($){
var reg = /[\s\r\n]*(.*?)[\s\r\n]+([^\s\r\n]+w)[\s\r\n]*(,|$)/g;
var regw = /(.*)w/;
var sets, $set, set, myMatch, i, w, that, last;
var checkData = function() {
$('img[data-srcset]').each(function() {
that = $(this);
$set = that.data('srcset');
sets = [];
while(myMatch = reg.exec($set)) {
set = {};
set.src = myMatch[1];
set.w = (myMatch[2].match(regw))[1];
sets[set.w] = set;
}
w = that.width();
last = 0;
for (i in sets) {
last = i;
if (w <= i) {
that.attr('src', sets[i].src);
return;
}
}
that.attr('src', sets[last].src);
});
};
checkData();
$(window).on('resize', checkData);
});
This works, but it feels wrong. But maybe not, as the specifications says for responsive images to behave just in the way that it does. But I feel that it's the wrong way. 90 % of use cases for responsive images won't work with the spec.
So am I wrong? Didn't I use the srcset in the defined way? Did I understand the spec incorrectly? And do the W3C and Responsive Images Community Group think in such a way apart from reality?
Are the smaller images scaled down versions of the bigger image? Or are they cropped (art direction)? If the latter, you should use picture and source media.
The reason the browser only uses the viewport for deciding which image to download is that it's the only thing that is available when the browser wants to download an image. The CSS (probably) isn't downloaded yet. So if you use srcset+sizes, you have to repeat the breakpoints and image widths in sizes.
This question seems like a duplicate of Responsive full width image banner with fixed height using srcset
Like zcorpan said, what you are trying to do falls under the "art-direction" use-case (since the different images have different proportions), so you should use the <picture> element, rather than srcset. See the other question's answers for a syntax example.
I have a map that is taller than wide. I noticed that in some instances, the fitBounds method was failing to adjust the zoom and center correctly in order to display all of the markers.
I've managed to isolate the issue in this example:
http://jsbin.com/welcome/2568
In the example I first try to load 23 positions and you will notice its zoomed quite far in. What I'm doing is:
//extending 23 positions doesn't really work
bounds = new google.maps.LatLngBounds ();
for (var i = 0; i < markerList.length; i++) {
pos = new google.maps.LatLng (markerList[i]["Za"],markerList[i]["$a"])
bounds.extend(pos);
}
window.map.fitBounds(bounds);
After 5 seconds I run that basic script again, but this time instead of extending 23, I only extend the bounds 5 times. This time the map actually zooms out!
What I noticed is that to get this issue to reproduce, I have to set the width and height of the canvas div:
<div id="map_canvas" style="width:450px;height:600px;"></div>
So I guess my question is: How can I both set the map canvas size and successfully fitBounds() for 25+ positions?
I just figured what was happening is that I was setting the minZoom in the map configuration.
It seems that if the minZoom is lower than the one needed by fitBounds() to display all the positions, it silently fails.
The reason the width of the map influenced is that the thinner the map, the more it had to zoom out to display the whole set of positions, and when it met the constraint of minZoom, it would die.
The reason the subset of 5 positions would work I think is just because it wasn't reaching the minZoom.
To solve the issue I removed the minZoom setting.
In Flex 3.2, I'm creating a UITextField, then measuring text that I'm about to assign to that field's text property. I then use those metrics to set the size of the field. However, the calculated width is not wide enough to accommodate the text. Is there a different order to achieve proper measurement or am I seeing a problem with the measureText() function? How can I get accurate results?
// UITextField's default size appears to be 100x100
// Measure the text then set width and height
var tf:UITextFormat = uiTextField.getUITextFormat();
var tlm:TextLineMetrics = tf.measureText(this.labelText);
// Text within the field is clipped unless 'padding' is added to the size
// Flex Documentation specifies there is a 2 px gutter on each side, so
// the expected padding would be 4 px. However, clipping occurs, for
// "Hello, World" up to 9 px.
uiTextField.width = tlm.width + 9;
uiTextField.height = tlm.height + 4;
uiTextField.border = true;
uiTextField.name = "uiTextField";
uiTextField.text = this.labelText;
I've had all sorts of trouble with measuring the width and heights of textFields before. It looks like you just want to autosize the textField. Have you tried:
uiTextField.autoSize = TextFieldAutoSize.LEFT;
???
Unfortunately, Flex often gets very confused when it tries to dynamically get a textWidth. Even worse, it is difficult to reliably catch the error and have Flex update itself correctly. The best options I've found:
Hack it manually -- mostly reliable and has the benefit of happening before everything has finished rendering:
mx.controls.Text hack AS3 describes a way to do this.
Use callLater or an FlexEvent.CREATION_COMPLETE event listener -- this is less reliable, but it is definitely not a hack
Use setTimeout with a delay of less than 1/10 a second ( I like 25-50 milliseconds ) -- I have found this the most reliable, but it may cause a small "blip" on the screen (generally not terribly noticeable for short code).