How to scale / stretch the map well?

[fungiboletus]

Hi,

I would like to change the aspect ratio of the map. Let's say I want it to be twice as wide than the standard projection.

I could apply a CSS transform: scaleX(2) or transform: scaleY(0.5) but it's not ideal: it renders using another resolution and the result is blurry.

I think it could be possible to change some maths somewhere to have a non square ratio. I try to find something into the internal transform and camera objects, but without look so far. I'm wondering where I could apply the aspect ratio without breaking everything.

Do you have any suggestion?

[stepankuzmin]

Hi @fungiboletus,

Could you please try using the matrix function for the transform property? I.e.

transform: matrix(...);

This issue tracker is for reporting bugs and feature requests, so you might also consider posting your question to https://stackoverflow.com/questions/tagged/mapbox-gl-js to ask the community for help.

[fungiboletus]

Thanks for your answer. I can try to use the transform CSS property, but should I expect different results?

Isn't scale, scaleX, scaleY some kind of alternative way to specify the matrix transformation?

I created an issue because it did look like questions are accepted and an issue template: https://github.com/mapbox/mapbox-gl-js/blob/da16653d5592094948691110789cb506ae7731e1/.github/ISSUE_TEMPLATE/Question.md

I can try StackOverflow, but I need a few more days of hard struggles before going there. It's very much my last resort. 🙂

[stepankuzmin]

@fungiboletus we have a special case for matrix function that was added in #11310, so the transform should work, but it's limited for the matrix function syntax. We can keep the issue open if you'd like to contribute and add scale, scaleX, scaleY support.

My bad, the scale functions must be already supported.

mapbox-gl-js/src/ui/map.js

Lines 3358 to 3362 in da16653

	if (transformMatrix && transformMatrix !== 'none') {
	transformValues = transformMatrix.match(/matrix.*\((.+)\)/)[1].split(', ');
	if (transformValues[0] && transformValues[0] !== '0' && transformValues[0] !== '1') transformScaleWidth = transformValues[0];
	if (transformValues[3] && transformValues[3] !== '0' && transformValues[3] !== '1') transformScaleHeight = transformValues[3];
	}

[fungiboletus]

Oooh, that's neat.

I didn't think MapBoxGlJS would read the values from the CSS transform. I checked the content of my matrix (set with a scale), and it's a matrix(1, 0, 0, 0.979981, 0, 0) is it's well taken into account.

Thanks a lot for the help, I feel better about my CSS hack now.