-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Port asymmetric viewport rendering to gl-js #8638
Conversation
@arindam1993 It prevents out of memory (too many tiles loaded) with large top padding and prevents displaying horizon - aswe need to define design and interaction with horizon. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
partial review. continuing tomorrow. Looks nice so far.
src/geo/transform.js
Outdated
@@ -185,6 +190,52 @@ class Transform { | |||
this._calcMatrices(); | |||
} | |||
|
|||
get padding(): EdgeInsetJSON { return this._edgeInsets.toJSON(); } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Serving the existing API in native, i didn't like that in Android we use "padding" and in iOS "edgeInsets". is padding here added to keep it close to native implementation?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I just did it so the public facing term for is it simpler, but happy to change it to whatever.
Maybe @chloekraw , do you have any thoughts?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For this feature, I think padding
is the term that's going to be closest to what web developers who use CSS would expect. inset
is most commonly used as a type of border style:
- https://developer.mozilla.org/en-US/docs/Web/CSS/padding
- https://developer.mozilla.org/en-US/docs/Web/CSS/border-style
I did find this https://developer.mozilla.org/en-US/docs/Web/CSS/inset "experimental technology" but it sounds like this inset
is more about defining margins around blocks of text and is less analogous to a viewport. (related: https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block, https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline)
@arindam1993 are there other parts of the GL-JS code base that also use this idea of padding?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@arindam1993 , related to this - what's your opinion about propagating CSS style padding specified to Map's parent HTML container to transform?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@chloekraw I don't think so.
@astojilj I don't think we should, I think devs waning to create floating UI elements, which this feature is designed for would want to set a padding
on the container, since it'd offset all their UI elements which I assume would be appended as children fo the map
container.
However I think it might be useful to push the current state of padding
to our own CSS classes and DOM elements which we use for nesting NavigationControl
and AttributionControl
top
,left
, right
and bottom
attributes are always 0, i think we can update them from within Map
.
Having Map
be the only API entrypoint seems more intuitive to me, with plugins automatically respecting it as well.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
src/geo/transform.js
Outdated
@@ -185,6 +190,52 @@ class Transform { | |||
this._calcMatrices(); | |||
} | |||
|
|||
get padding(): EdgeInsetJSON { return this._edgeInsets.toJSON(); } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@arindam1993 , related to this - what's your opinion about propagating CSS style padding specified to Map's parent HTML container to transform?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In addition to questions about PaddingOptions and usefulness of padding color shader...
I think it might be useful to add a test that is combining usage of PaddingOptions (Map fitBounds) and camera.setPadding. If we need to have both mechanisms in API , good to document the difference.
src/geo/edge_insets.js
Outdated
} | ||
|
||
export type EdgeInsetLike = EdgeInsets | {top?: number, bottom?: number, right?: number, left?: number} | EdgeInsetJSON; | ||
export type EdgeInsetJSON = {top: number, bottom: number, right: number, left: number} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why not using PaddingOptions?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I agree that padding might be a better name here since that is what is exposed.
src/render/draw_debug.js
Outdated
|
||
import type Painter from './painter'; | ||
import type SourceCache from '../source/source_cache'; | ||
import type {OverscaledTileID} from '../source/tile_id'; | ||
|
||
export default drawDebug; | ||
|
||
const topColor = new Color(1, 0, 0, 0.4); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does draw_debug.js go to production code?
I'm not sure how useful is to including additional shader and this code for rendering different colors or padding values.
For manual debugging, propose to add additional debug/***.html page (doesn't go to production code AFAIK) with overlays (in the way the customers are supposed to use it)...
- manually test the debug page
and in that that page would be used for this step.
Please doublecheck my opinion with other reviewers - I might be missing something...
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
draw_debug does go into the final bundle, and we do publish docs for showTileBoundaries
and showCollisionBoxes
. My idea was to make a similar thing for padding as well.
https://docs.mapbox.com/mapbox-gl-js/api/#map#showtileboundaries
I'm also using the in-gl rendering of the padding as a render-test, similar to tile boundaries and collision box debugging.
And regarding the debug page, I agree, I can add one.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does draw_debug.js go to production code?
Having this as part of the built-in debug shaders allows easily debugging issues when building/updating work in this area. I can see it being very useful for debugging flyTo animations for example.
That said, this PR adds a total of +4.13 kB to the gl-js bundle. Is there a simpler debug option that can be built?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for adding a debug view. They can be pretty useful for understanding things. If the size and complexity of the shader another approach could be to use a gl scissor and clear to draw a line at each edge.
gl.enable(gl.SCISSOR_TEST);
gl.scissor(x, y, width, height);
context.clear({ color });
gl.disable(gl.SCISSOR_TEST);
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
^^ I did this, it is much simpler though it only saved half a kb of bundle size.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do custom layers have access to the modified transform
that allows correctly rendering when padding values are set?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for porting this!
I left a couple comments in places I think could be a bit clearer. The only user facing issue I found was the interpolation one
if (target.left != null) this.left = number(this.left, target.left, t); | ||
if (target.right != null) this.right = number(this.right, target.right, t); | ||
|
||
return this; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This interpolates the padding between the previous frame's value and the target instead of from the starting value to the target. Switching to the more functional approach used for other interpolation could be a good idea.
const x = Math.min(this.left, width) + 0.5 * (width - totalXInset); | ||
const y = Math.min(this.top, height) + 0.5 * (height - totalYInset); | ||
|
||
return new Point(x, y); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would this be simpler as this?
const x = (width + this.left - this.right) / 2;
const y = (height + this.top - this.bottom) / 2;
The main difference would be that in the case where left + right > width
it would take equal amounts off of both sides rather than only compromising on the right side. Not sure which is preferable.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think the simpler one you suggested is better!
Do you think we should throw an error/warning when the overflow happens?
src/geo/edge_insets.js
Outdated
} | ||
|
||
export type EdgeInsetLike = EdgeInsets | {top?: number, bottom?: number, right?: number, left?: number} | EdgeInsetJSON; | ||
export type EdgeInsetJSON = {top: number, bottom: number, right: number, left: number} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I agree that padding might be a better name here since that is what is exposed.
//Apply center of perspective offset | ||
m[8] = -offset.x * 2 / this.width; | ||
m[9] = offset.y * 2 / this.height; | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can this be done using the methods provided by mat4
(translate, multiply, etc) rather than directly editing the matrix directly? It took me a while to understand the math here
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the only api method that allows that I think can work is the asymmetric view frustum method but that takes 4 different fov's as input, and back calculating that seemed more janky to me.
src/ui/camera.js
Outdated
@@ -646,11 +684,17 @@ class Camera extends Evented { | |||
.fire(new Event('pitchend', eventData)); | |||
} | |||
|
|||
if (paddingChanged) { | |||
this.fire(new Event('paddingstart', eventData)) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What do you think these events might be used for? seems reasonable but I can't think of any clear examples right now
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Some kind of UI state synchronization?
for example, if you want a floating sidebar to be extended out exactly as much as the map's current value of padding, you can use the events to synchronize that state.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Given the use case, I think it's an unlikely case — you set the map padding because of a floating sidebar, so the state goes in the UI -> map direction, I can't think of use cases with the other way around.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
tru, removed them for simplicity!
src/render/draw_debug.js
Outdated
|
||
import type Painter from './painter'; | ||
import type SourceCache from '../source/source_cache'; | ||
import type {OverscaledTileID} from '../source/tile_id'; | ||
|
||
export default drawDebug; | ||
|
||
const topColor = new Color(1, 0, 0, 0.4); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for adding a debug view. They can be pretty useful for understanding things. If the size and complexity of the shader another approach could be to use a gl scissor and clear to draw a line at each edge.
gl.enable(gl.SCISSOR_TEST);
gl.scissor(x, y, width, height);
context.clear({ color });
gl.disable(gl.SCISSOR_TEST);
…mmetric-viewport # Conflicts: # src/geo/transform.js # src/render/draw_debug.js # src/render/program/debug_program.js # src/render/program/program_uniforms.js
@asheemmamoowala @astojilj @ansis , I think I've addressed your previous comments, could you all please take another pass at this, I think this is ready to go now |
Also, @chloekraw its all called padding now |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just noting that +1kb to the min-zipped bundle seems like a big bump for the seemingly small change — anything we could do to simplify the code? Pointed out a few options.
src/ui/camera.js
Outdated
@@ -646,11 +684,17 @@ class Camera extends Evented { | |||
.fire(new Event('pitchend', eventData)); | |||
} | |||
|
|||
if (paddingChanged) { | |||
this.fire(new Event('paddingstart', eventData)) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Given the use case, I think it's an unlikely case — you set the map padding because of a floating sidebar, so the state goes in the UI -> map direction, I can't think of use cases with the other way around.
context.clear({color}); | ||
gl.disable(gl.SCISSOR_TEST); | ||
} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do you anticipate this debug code being used often, or did it already serve its purpose since the asymmetric viewport implementation is complete? Just noting an opportunity to potentially cut this for smaller bundle size impact.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not super often, no actually, but it seems like an useful tool to have for render tests, examples and debug pages. I could make it so it is only available in the dev
build, but it will break our usual convention.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've also added some new render tests in the newest commit that represents the distortion caused by asymmetric viewport much better.
https://github.com/mapbox/mapbox-gl-js/pull/8638/files#diff-633f8e084d5e1ba0bb38d2c145e1b771
if (target.top != null && start.top != null) this.top = number(start.top, target.top, t); | ||
if (target.bottom != null && start.bottom != null) this.bottom = number(start.bottom, target.bottom, t); | ||
if (target.left != null && start.left != null) this.left = number(start.left, target.left, t); | ||
if (target.right != null && start.right != null) this.right = number(start.right, target.right, t); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks a little involved — can we get rid of the if
s by defaulting them to 0
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this logic ensures that the if the key is not present the value does not change change from the existing value
logic for adding padding. Defaulting to 0 would remove the padding. and having it here ensures that that logic does not have to be implemented in every public interface function that accepts padding as input.
export type PaddingOptions = {top: ?number, bottom: ?number, right: ?number, left: ?number}; | ||
export type SerializedPadding = {top: number, bottom: number, right: number, left: number}; | ||
|
||
export default EdgeInsets; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If we simplify this class somewhat, could it be small enough to the point it's simpler to have this state as a part of transform
rather than a separate class?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It could be, but this seems easier to write unit tests for, and handles a lot of the validation and updating logic without adding additional private methods to the transform class.
Co-Authored-By: Vladimir Agafonkin <[email protected]>
…port with a crosshatch road pattern
YAY merging!!!! thanks everyone for the detailed review! 🙇 |
…ngOptions which lets developers shift the center of perspective for a map when building floating sidebars. Asymmetric viewport (mapbox#8638) Co-authored-by: Vladimir Agafonkin <[email protected]>
…ngOptions which lets developers shift the center of perspective for a map when building floating sidebars. Asymmetric viewport (mapbox#8638) Co-authored-by: Vladimir Agafonkin <[email protected]>
* Add `text-variable-anchor/all-anchors-tile-map-mode` render test * convert image type to resolvedImage type (mapbox#8901) * Catch errors when createMap is called (mapbox#8905) * hide internal mercatorScale function from api docs (mapbox#8856) * Add changelogs from gl-js 1.5.0 and style-spec 13.9.1 (mapbox#8911) * [docs] Address user feedback for /api: setStyle, getStyle, isStyleLoaded (mapbox#8807) * bump documented mapbox styles to latest versions (mapbox#8914) * [style-spec] Add an es-module build (mapbox#8247) * Add rotation options to markers (mapbox#8836) * Add Popup methods to manipulate container class names (mapbox#8759) * Minify SVG images and add rules for High Contrast mode on Windows (mapbox#8874) * update makers debug to test pitch and rotation alignment (mapbox#8930) * Update npm dependencies (mapbox#8928) * Implement "in" expression (mapbox#8876) Co-authored-by: Ádám Barancsuk <[email protected]> Co-authored-by: Ryan Hamley <[email protected]> * Draw debug tiles for source with greatest max zoom and Add overscaledZ to debug tile text (mapbox#7314) * Remove hardcoded image list in expression test harness (mapbox#8935) * replace mapid with Tileset ID in TileJSON URL examples for consistency with Mapbox Studio * options.dragPan can be assigned an object to customize panning inertia ( h/t @aMoniker) (mapbox#8887) * Add essential option to AnimationOptions to ignore prefers-reduced-motion for essential animations (mapbox#8883) * Change addImage example to use absolute URL * Revert start-debug to old behaviour (mapbox#8940) * Support generateId option in clustered sources (mapbox#8945) * support generateId option in clustered sources * add a unit test for generateId clustered * Fix shrink icon loading in CSS (mapbox#8948) * open popup on a marker from keyboard (mapbox#6835) * open popup on a marker from keyboard * arrow functions don't need to bind this * set tabindex on marker elements with popups and remove keypress listener * aria-label on default marker * tabindex value should be string, thanks flow * flow * flow * KeyboardEvent.charCode and keyCode are deprecated, support standard KeyboardEvent.code * add unit test for opening popup on Enter * add unit test for opening popup on Space * retain existing tabindex * fix lint * fix flow * _onKeyPress method * fix scrolling issue when focusing markers * prevent marker focus on click * Clean up implementation of coalesce for image operator (mapbox#8950) * Update fill-pattern feature state test (mapbox#8927) * Add contains method to LngLatBounds (mapbox#8200) * [wip] addcontains method, but trouble with wrapped coordinates * tests for contains point * lint fixes * remove comment * Update src/geo/lng_lat_bounds.js * minor lint / style fixes * fix docstring * add gpu timing map events (mapbox#8829) * Introduce 'gpuTiming' map options. Originally implemented by Chris. I've rebased it and exposed it with just the event listeners instead of a map option. Listen to `gpu-timing-frame` to get the gpu time for the frame and listen to `gpu-timing-layer` to get the gpu time for all individual layers. It is not recommended to listen to both. * fixup * min and max pitch options (mapbox#8834) * Change maximum of function_stop from 22 to 24 (mapbox#8908) * Upgrade @mapbox/gazetteer to v4.0.4 (mapbox#8955) * Get named export (mapbox#8957) * fix codegen unknown type issue (mapbox#8959) fix mapbox#8958 * dedup featureMap by moving it to the config set (mapbox#8965) move featureMap from ProgramConfiguration to ProgramConfigurationSet. All configurations within a set have the same vertex layout (because they go together with the same vertex buffers). This doesn't matter too much because the only time a set has more than one programconfiguration is when multiple layers have identical layout properties. The main goal here is to make the relationship a tiny bit clearer. * Fix api-supported error messages (mapbox#8971) Consistify capitalization, make source url error more accurate * Add locale option to enable localization of UI strings (mapbox#8095) * Fix animation performance (mapbox#8913) * reproduce animate jankiness * Fix animation performance * use isWorker * Fix benchmarks build failures due to unresolvable deps (mapbox#8972) Import styleBenchmarkLocations directly from gazetteer, reverting some changes made in mapbox#8955 that introduced rollup errors due to unresolved node builtins * Add eslint config for JSDoc (mapbox#8961) * Work around CacheStorage memory leak in Safari (mapbox#8956) We are periodically removing items from the cache using the CacheStorage API. Unfortunately, Safari seems to leak significant amounts of memory when requesting a new Cache object, then calling `cache.keys()`. Instead of requesting a new Cache object for every operation, we are now reusing the same Cache object for all operations on the cache. Ticketed upstream at https://bugs.webkit.org/show_bug.cgi?id=203991 * Fix IE 11 support (mapbox#8990) * Fix IE 11 support IE 11 doesn't support Array.prototype.find * Fix linting issues * Disable using transferrables for ArrayBuffers in Safari(mapbox#9003) * Add render tests for dashed lines with round caps (mapbox#8993) * Implement 'images in labels' feature (mapbox#8904) * Set 'isSDF' flag per icon quad * Simplify formatted expression parsing Allow omission of empty section options objects. This enables following syntax ["format", "first section\n", "second section\n", ["image", "smiley"], "third section"] * Add Image to Format expression Image could be part of Format expression and evaluated ResolvedImage is a optional member of evaluated Formatted type. * Add formatted text's image section image to deps * Add images to TaggedString's section * Pass images to text shaping * Use {text|icon}-size vertex attribute field to encode 'isSDF' flag This change uses higher bit to indicate whether quad's vertices belong to a quad whose texture should be rasterized using SDF function. Size scaling factor is changed from 256 to 128, which reduces resolution a bit, however, as the scaling result is now being rounded, final result should be the same. * Shape images in labels * Draw color icons and sdf text with one program / draw call * Align images and scaled glyphs in vertical layout * Allow image breaking * Update render test expectations for tests using font-scale Fixes misaligned text boxes * Update format expression tests to account for image sections * Update quads unit test * Update shaping unit test * Update unit test for format expression API * Fix linter errors * Don't scale images in labels with text size * Basic render test * Multiline test * Vertical layout with images * Line placement test * Expression test for image section * Format expression unit and API test * Shaping unit test * Add benchmarks for symbol layer with icons * Use explicit 'symbol_text_and_icon' shader name instead of 'symbol' Add is_text back, in follow-up pr shader can be renamed to sdf and raster, and can be used to draw sdf and raster icons in one pass. * Don't use mod for unpacking flag * Use linear interpolation for images in label for zoom dependent text size * Add back glyphMap to shaping Glyph map is used as a fallback whenever glyph is missing in glyph positions, e.g., space character that may not be backed by a texture, yet, has a glyph metrics. * Render test for constant text-size * Render test for image justification * Take into account image padding and image pixel ratio * Add render test to verify that linear filtering is used Test that linear filtering is used for icons in text when text-size is zoom-dependent. * Fix size of images in text at integer zoom levels * Update shaping unit test and remove unused parameter from shapeLines * Check whether context is lost before `gl.shaderSource(...)`. (mapbox#9017) When context is lost most gl calls are no-ops but this one can throw. When a program cannot be created `draw(...)` needs to fail silently just like all gl calls. fix mapbox#8986 * Number validation should fail on NaN (mapbox#8615) * Number validation should fail on NaN * Avoid Number.isNaN * Add runtime checks * Add render and unit test * Remove not useful unit test * Revert debug page change * Dont throw an error for aborted requests * Type annotations (mapbox#9025) * Type annotations * fix more errors * fix really overscaled lines (mapbox#9024) We resample lines after sharp corners in some situations. Doing this for really overscaled tiles mean that sometimes the offset to the new vertex was closer than the precision supported. This disables that after a certain point. fix mapbox#9009 * update rendering after addImage and removeImage (mapbox#9016) fix mapbox#9004 A tile needs to be reparsed in order for it to use the new image. Reloading all tiles whenever an image is added would be expensive. For example: - load a map - add an image and use it in a geojson overlay You don't want adding that image to make the basemap tiles be reloaded. To get around that we track all the image ids used by each tile and only reload tiles that depend on images that changed. * re-add queuing for getResource calls (mapbox#9031) fix mapbox#8998 * Add changelog instructions to PULL_REQUEST_TEMPLATE.md (mapbox#9023) * Add changelog instructions to PULL_REQUEST_TEMPLATE.md * Simplify new changelog related template wording * Place optional changelog entry tags on own line * allow rendering full world smaller than 512px (mapbox#9028) * Clarify toBounds docstring (mapbox#9032) Clarify that toBounds returns LngLatBounds completely containing given radius * implement stretchable icons for icon-text-fit (mapbox#8997) * bump version to 1.7.0-dev (mapbox#9038) * fix collisions for stretchable images with a `content` area (mapbox#9041) * Use stencil test instead of tile mask approach Remove tile masks for raster. Rendering happens in Z-descending order. All the tiles with the same Z use the same stencil value. Parent uses lower stencil value so that the area covered by children gets masked. Stencil ref values continue range used in _tileClippingMaskIDs. * raster-masking test combined with vector. Refactor raster overlap. Return map z -> StencilMode instead of using callbacks. overlapping-vector uses vector layer between two raster to guard against side effects when refactoring stencil usage. * Reset internal attribution control cache when removing from map (mapbox#9052) Fixes mapbox#9051. When creating an attribution control, we're caching the HTML string in the AttributionControl object. That cache wasn't reset when the control was removed from the map. Upon re-adding, we incorrectly assumed that the HTML was already up-to-date because our internal cache said so. This patch fixes it by clearing the internal cache so that attribution shows up properly when re-adding the control. h/t @cs09g * An option to use a feature property as ID for feature state (mapbox#8987) * add ability to id by property for feature state * flow fixes * rework promoteId according to PR discussions * properly expose promoted ids in query methods * fix lint * use state ids that can be cast as Float64 as is; update tests * promoteId: geojson support, better flow typing, v8 docs * fix spec test * make sure id is provided in getFeatureState * minor fixes after review * hash ids > MAX_SAFE_INTEGER * overhaul promoteId validation, add render test * Optimize findLoadedParent Performance optimization when rendering view with a lot of satellite tiles. Measurements on Chrome (Version 78.0.3904.108 with CPU 4x slowdown in performance tab) on MacMini i7 3.2 Ghz. `map.repaint = true` in http://localhost:9966/debug/satellite.html#12.5/38.888/-77.01866/0/60 Observed FPS count: master: 19-20FPS with this patch: 24.5-26 FPS * make stretchable images work with icon-text-fit: none (mapbox#9045) * use browser.devicePixelRatio instead of directly calling window.devicePixelRatio (mapbox#9063) h/t @pakastin * add changelogs from v1.6.0 (mapbox#9070) * add placement benchmark (mapbox#9077) * check that latest version appears in changelog (mapbox#9071) This prevents an update to package.json from being merged without including a corresponding change to the changelog. This will prevent me from forgetting to remove `-beta` from the changelog when doing a final release. * Fix versions benchmark by querying github API instead of local package.json (mapbox#9084) * Fix map size in benchmarks (mapbox#9049) display: none on Chrome (Chrome 78.0.3904.108 (Official Build) (64-bit) on macos), results with container clientWidth and clientHeight equal to 0. This led to and container dimension [400 x 300](https://github.com/mapbox/mapbox-gl-js/blob/3c36a67716d7c8ad8d69b15f7e5fd19b72e7a7ff/src/ui/map.js#L1922) instead of using specified size in e.g. bench/benchmark/layers.js (1024x768) * Remove `stringContainsRTLText` dependency from within style-spec. (mapbox#9088) * Progressive enhancement for decoding DEM data on workers with ImageBitmap and OffscreenCanvas (mapbox#8845) * Fix validation error messages in the browser (mapbox#9073) We converted the ParsingError and ValidationError classes to inherit from the built-in Error class in mapbox#9025. This works fine in ES6, so our unit tests were happy. However, transpiling it down to ES5 leads to an absence of the message property, essentially removing the text of parsing and validation errors. * Update PULL_REQUEST_TEMPLATE.md (mapbox#9106) the @mapbox/map-design-team tag was incorrect * Remove reference to 'deprecated in expression' (mapbox#9102) * Fix ImageBitmap instances not being passed to appropriate gl.texImage2D call (mapbox#9103) * Un-hardcode test fixtures root path, and add operation handler for 'idle' event (mapbox#9105) * Fix typo in style spec (mapbox#9110) * inline test suite dependencies (mapbox#9096) * Edit convert functions to output linear interpolation (mapbox#9107) * Edit convert functions to output linear interpolation * Edit unit tests to reflect linear interpolation * Refactor code to make it succint * minor whitespace updates * Deferred loading of RTL text plugin detects labels rendered from GeoJSON sources (mapbox#9091) * Add sdk-support section for `is-supported-script` (mapbox#9099) * Add sdk-support section for `is-supported-script` and unit tests to ensure that expressions, paint and layout properties always have an SDK support section. * Fix *-sort-key sdk support table * Remove empty 'data-driven styling' sections and ad dunit tests * Switch back to using host url instead of a blob-url to load rtl-text-plugin on the worker (mapbox#9122) * Change the type of tile id key to string (mapbox#8979) * Change tile id key type from number to string * Add derefLayers to the bundle (mapbox#9121) * Update quads.js (mapbox#9128) whatever it's intended, it's typo. * CP v1.6.1 CHANGELOG (mapbox#9127) * Add instrumentation for performance metrics tracking (mapbox#9035) * Allow programmatic construction of style even when one is not passed in initially ( h/t @stepankuzmin ) (mapbox#8924) * Fix bug in DragRotateHandler._onMouseUp() (mapbox#9137) * Support `ImageBitmap` in Map#addImage and Map#updateImage (mapbox#9139) * Prevent changing bearing via URL hash when rotation is disabled (mapbox#9156) * Immediately update map when more than one geolocation watch event is triggered (mapbox#9092) * fix extrusion querying for: (mapbox#9138) - polygons with coincident points - polygons with less than four points fix mapbox#8999 * Add text-size/zero render test (mapbox#9133) * Add text-size/zero render test Tests that zero `text-size` values are properly handled. * add ignore Co-authored-by: Ansis Brammanis <[email protected]> * update symbol-avoid-edges doc copy to acknowledge the existence of global collision detection (mapbox#9157) * Fix Click on Compass on some mobile (add clickTolerance to DragRotateHandler) (mapbox#9015) * Add layerId parameter to once event handler (mapbox#8875) * Add option to close popup on map move (mapbox#9163) * make placement respect symbol-sort-key (mapbox#9054) * Fix hash (mapbox#9170) * Guard against no bearing in hash on initial page load * Remove log * Add text-color and image to format expression's sdk-support section * Add instructions for changelog authoring to the PR template (mapbox#9165) * Add instructions for changelog authoring to the PR template * Update PULL_REQUEST_TEMPLATE.md * Update PULL_REQUEST_TEMPLATE.md * Update Code of Conduct (v2.0, https links) (mapbox#9176) * update Code of Conduct (v2.0, https links) * Add reporting guidelines & contact email to CoC * Remove outdated link to open source page from CoC * Add spacing for readibility Co-authored-by: Anjana Sofia Vakil <[email protected]> * Update package version to 1.8.0-dev (mapbox#9190) * Prefer line-pattern over line-dasharray in accordance with documentation (mapbox#9189) * Remove Object.values usage that was causing IE11 to fail (mapbox#9193) * LOD support for tile coverage (mapbox#8975) * LOD support for tile coverage * fix promoteId spec definitions (mapbox#9212) * upgrade earcut to v2.2.2 (mapbox#9214) * Fix promoteId for line layers (mapbox#9210) * fix promoteId for line layers * fix promoteId spec definitions (mapbox#9212) * Add render tests for feature state feature-state/promote-id-line will fail until mapbox#9210 is merged Co-authored-by: Karim Naaji <[email protected]> * Fix line distances breaking gradient across tile boundaries (mapbox#9220) * Fix line line distances breaking gradients Ensure scaled line distance is computed at least once when calculating the entire line distance, otherwise we hit a corner case where the distance isn't updated. Specifically when the beginning of the line doesn't have a sharp corner. Fixes mapbox#8969 * Add render test for line gradient across tile boundaries * Address review comments * Update image expression SDK support table (mapbox#9228) * Refactor style._load function, move sprite loading to a private method (mapbox#9231) * [tests][tile mode] Add left-top-right-buttom-offset-tile-map-mode test * Reduce size of line atlas by removing unused channels (mapbox#9232) Saves roughly ~100kb of uncompressed gpu memory, potentially saving texture fetches in the shader * Fix a bug where lines with duplicate endpoint disappear on z18+ (mapbox#9218) * fix a bug with vanishing line with duplicate end points * fix flow :( * Canonicalize Mapbox tile URLs from inline TileJSON as well (mapbox#9217) * Hide glyphs behind the camera (mapbox#9229) * Prevent empty buffers from being created for debug data (mapbox#9237) * refactor LngLat distance calculations (mapbox#9202) * DragRotateHandler should not react to ctrl-alt-click (mapbox#9203) * Update gl-js and style-spec changelogs, update style-spec version to 13.12.0-dev (mapbox#9252) * v1.7.0-beta.1 (mapbox#9195) * Update versions to final in gl-js and style-spec package.json and CHANGELOG (mapbox#9233) * Pass errors to cluster function callbacks (mapbox#9251) * fix severe performance regression after introduction of image expression (mapbox#9261) * Simplify formatted sections code (mapbox#9258) * simplify symbol formatting code * fix linting * Fix visual artifact for line-dasharray (mapbox#9246) * Fix artifact for zero-lenghted dash array Fixes issue mapbox#9213 and add render test for coverage around 0-length dash arrays Update distance field generation for regular dashes as follows: 1. Compute the dash array ranges and stretch location along the distance field 2. Collapse any 0-length distance field range 3. Collapse neighbouring same-type parts into single part * combine consecutive dashes and parts Co-authored-by: Ansis Brammanis <[email protected]> * Update "Version Control Conventions" in CONTRIBUTING.md (mapbox#9255) * add circle to GeolocateControl showing accuracy of position (mapbox#9253) * add circle to GeolocateControl showing accuracy of position * don't call onZoom when not zooming * show accuracyCircle even if tracking is off * docs * deduplicate binders code * remove unused names binder property * clean up program config construction * clean up program config construction further * minor program config cleanup * clean up program config more * refactor program config maxValue * cut out uniform logic out of binders that don't need it * split Binder interface into two disjoint interfaces * clean up paint buffers update * minor stylistic changes * Add expression and render tests for `within` expression (mapbox#9270) * Add expression and render tests for within expression * Add error case for within expression test. Narrow render tests camera size * Change polygon fill color * Fix expression function capital letter (mapbox#9272) * add space before units in scale bar (mapbox#9276) * [docs] remove `Marker#rotationAlignment` link (mapbox#9281) Fixes DOCS-SUBDOMAIN-404-23T * Use non-breaking space (mapbox#9284) * Only normalize canonicalized mapbox tile URLs (mapbox#9268) fix mapbox#9259 * Set geolocate onZoom callback only after UI is setup (mapbox#9288) * Don't call onSuccess and onError callbacks after control was removed (mapbox#9291) * Bump -dev package version numbers * Try out browser testing (mapbox#9245) * Add README for browser testing (mapbox#9296) * Map API functions such as easeTo and flyTo now support padding: PaddingOptions which lets developers shift the center of perspective for a map when building floating sidebars. Asymmetric viewport (mapbox#8638) Co-authored-by: Vladimir Agafonkin <[email protected]> * Allow needle argument to 'in' expression to be false (mapbox#9295) * Speed up release deploys (mapbox#9298) * Letting `LngLatBounds.extend` accepts LngLatLike and LngLatBoundsLike as well. (mapbox#9293) * Changing the input type of the extend function to LngLatLike and LngLatBoundsLike and fixing a bug identified in the function * Updating the function's comment to show the correct parameter type. * -Adding more test cases: - Extend with an array of 3 elements - Extend with an empty array -Removing unnecessary comments. * Adding a better documentation to be more clear on what can be inputted in extend function. * -Resolving the flow failures which was causing CI pipeline failure. -Correcting the comments for the extend function. * Add render tests for line within polygon. Update expression tests for within expression (mapbox#9310) * Merge changelog for v1.8.0 (mapbox#9320) * Clearing the underlying source's tiles while removing a layer. (mapbox#9305) * clearing the underlying source's tiles while removing a layer. * Removing the clear command since this is computationally expensive and also causing a glitch on the map once the tiles are cleared. * Changing the name of the function to hasLayer to be more specific regarding the function * fix links to addImage * link to hover effect example from addFeatureState * clarify GeolocateControl interaction states * replace incorrect LatLngBounds with LngLatBounds * Add benchmark coverage for text-variable-anchor and symbol-sort-key (mapbox#9322) * Add benchmarks for properties not used by default base map styles Add benchmark for properties such as and not currently being used by default mapbox base styles. mapbox#8589 * Fix lint * Fix for issue mapbox#9327 (mapbox#9333) Revert "Hide glyphs behind the camera (mapbox#9229)" This reverts commit 1eed2ae. * Update filter link targets (mapbox#9338) * fix map not displaying inside RTL elements (mapbox#9332) * Add names before types for lambda types and object indexer types (mapbox#9331) * Update style.js (mapbox#9347) * Use glUniform1i for boolean uniforms (mapbox#9349) We used glUniform1f for some of them, which caused rendering errors in at least Chrome 48. Changing these calls to the correct call glUniform1i fixes this issue. * terser options for better compression (mapbox#9357) * disable depth mode for heatmaps (mapbox#9364) * Return evaluated properties in query results (mapbox#9198) * Cache serialized layer rather than serializing on every feature * Fix some lint & flow errors * Evaluate properties * Fix unit test and Flow * Revert comment changes * Revert comment changes * Cache serialized layers * Delete serializedLayers on removeLayer * Cache available images * Update availableImages * Remove comment * Simplify evaluation code * Remove unused variable * Clean up change to resolved images * Update serializedLayers when adding/removing layers * Only serialized non-custom layers * Simplify code * Add query test * Eslint JSDoc fixes (mapbox#8960) * add eslint jsdoc rules only * begin updating JSDoc to satisfy eslint requirements * address new linting warnings * Update src/source/image_source.js * Update src/ui/map.js * lowercase boolean * address jsdoc feedback * revert changes to yarn.lock * simplify expression outputs validation (mapbox#9355) * remove period from `pitch` description (mapbox#9371) * Correctly detect expressions and legacy filters for the new in expression (mapbox#9374) * Remove unused struct code (mapbox#9358) * remove unused struct setters * remove unused struct classes with direct getters * clarify struct generation code * Add changelog policy to contribution guidelines (mapbox#9378) * Add changelog policy to contribution guidelines * Address feedback * Prevent creation of unused depth renderbuffer attachments (mapbox#9377) * Remove unused depth renderbuffer Should save width * height * 2 bytes of uncompressed buffer memory * Prevent creation of unused depth renderbuffers Add option to allow not creating extra renderbuffers Refer https://www.khronos.org/registry/webgl/specs/latest/1.0/\#6.8 for supported attachment variants Should save the hillshade offscreen buffer width * height * 2 bytes of uncompressed gpu memory * Fix lint * Update src/gl/framebuffer.js Co-Authored-By: Vladimir Agafonkin <[email protected]> Co-authored-by: Vladimir Agafonkin <[email protected]> * [render tests] Add streets-v11 test for the tile map mode (mapbox#9382) * [render tests] Add streets-v11 test for the tile map mode * Fix ignore file * Update test/ignores.json Co-authored-by: Asheem Mamoowala <[email protected]> * Do not warn about icon-image expressions evaluating to '' (mapbox#9380) * do not warn on empty icon image, treat it as unset * clean up hasIcon condition in symbol bucket * [render tests] Adjust tile mode render tests - increased tolerance for `text-variable-anchor/left-top-right-buttom-offset-tile-map-mode` - hide collision data for `tile-mode/streets-v11` * [render tests] Further tile mode tests adjustment - `left-top-right-buttom-offset-tile-map-mode` -> `left-top-right-bottom-offset-tile-map-mode` - increase tolerance at `tile-mode/streets-v11` * Fix corner case with dash-array 0-length collapsing (mapbox#9385) A dash array with values [0,0] results in a full collapse of values since it does not represent any dashes, fix the behavior with early return and add some more unit test coverage for other corner cases * Remove the simplex font and switch to using canvas for debug text (mapbox#9267) * Specify node version 10 (mapbox#9389) Co-Authored-By: Arindam Bose <[email protected]> * [render tests][tile mode] Add symbol-placement/line-center render tests Added the following render tests for the tile map mode: - `symbol-placement/line-center-tile-map-mode` - `symbol-placement/line-center-buffer-tile-map-mode` * Add render test for filter with expression in. (mapbox#9393) * [docs] clarify `symbol-sort-key` behaviour with and without overlap (mapbox#9379) * Fix line-pattern artifacts under overscaling and underscaling (mapbox#9266) * Fix line pattern when the pattern size is lower than the line width Visual differences: 1. When the line pattern fits on a line smaller than its own resolution, we downscale while keeping the aspect ratio at integer zoom level 2. When the line pattern fits on a line larger than its own resolution, we upscale while keeping the aspect ratio at integer zoom level 3. When the line pattern has different resolution (1x, 2x, 3x...), the pattern screenspace resolution should remain stable (e.g. the physical resolution shouldn't impact the size at which the pattern is rendered but instead increase the quality of the visual while keeping its logical resolution) The current behavior does not account for 1. and 3. Shader differences: Try to move for more 'mad' instruction instead of 'div': per-instruction shader count differences: before 6 mad, 12 div, 12 add, 9 mul after 13 mad, 8 div, 6 add, 9 mul This increases the number of mad instructions (multiply-add) for fewer cycles and decreases the number of divisions and additions Issue #15472 * Update test images to account for new behavior * Fix marching-ants issue * Adjust patterns added with `addImage` by the asset pixel ratio (mapbox#9372) * Adjust *-pattern images based on their asset pixel ratio Instead of using the device pixel ratio, use the image asset pixel ratio Fix for issue mapbox#8020 * EOF * Add render tests * Rebase from master Update baseline for line-pattern to take into account mapbox#9266 * Introduce `within` expression (mapbox#9352) * Update version number for GL JS and style spec on master (mapbox#9408) * Fix for IE11 not supporting startsWith (mapbox#9409) * Fix webgl error for IE11 with uploading painter::emptyTexture (mapbox#9410) * Remove Hershey Simplex font attribution from the license (mapbox#9423) * update changelog for v1.8.1 * Upgrade minimist to ^1.2.5 (mapbox#9425) * update pr template team tags (mapbox#9426) * Avoid throwing errors when popup container is undefined (mapbox#9433) * Use TileCoordinates instead of LngLats for `within` calculation (mapbox#9428) * Using TileCoordinates instead of LngLat for within calculation * Update tests * Adapt test data * Add render tests * v1.9.0 (mapbox#9444) (mapbox#9453) * Don't reload the entire font range when a glyph is missing in a font (mapbox#9375) * Ignore missing glyph when font range is already loaded * Add test * lint * Fix tests * Remove line * Remove line * Lint * Add ranges flow definition * Use helpers function * populate paint arrays once per line feature (mapbox#9452) instead of once per linestring in a multiline * fix fill extrusion querying for colinear points (mapbox#9454) When checking for intersections with a fill-extrusion it has to calculate the distance to the plane the polygon exist on. If the first points of the geometry were colinear this calculation would fail. It now: - finds two distinct starting points a, b - loops over all the remaining vertices looking for a value that is not colinear with a, b Usually this will be the first vertex it encounters. * Fix `within` expression issue with geometry crossing the 180th Meridian (mapbox#9440) * Fix geometry accross meridian * Update tests * Add pre-condintion * Avoid overflow * Add more tests * Adapt test * Remove unnecessary condition * Address review findings * Upgrade direct dependencies & do yarn upgrade (mapbox#9466) * upgrade direct dependencies & do yarn upgrade * fix lint warning * 😬 * upgrade more stuff Co-authored-by: Arindam Bose <[email protected]> * add an extra check for paint member of style layer (mapbox#9437) * add an extra check for paint member of style layer * review comments Co-Authored-By: Vladimir Agafonkin <[email protected]> Co-authored-by: Vladimir Agafonkin <[email protected]> * remove leftover page shell (unused since the docs split) (mapbox#9470) * more resilient paint check in setFeatureState (mapbox#9472) * Collision circle generation at runtime (mapbox#9219) * Ensure padding is not propagated from fitBounds to transform padding (mapbox#9481) (cherry picked from commit 7431c95) * Fix pattern attributes vertex layout (mapbox#9482) * Fix vertex layout attribute offset when used with DDS The vertex layout offset for patternAttributes is overriden to be 0, this is incorrect as each component of this layout require a specific offset to be set to appropriately bind the buffers when calling vertexAttribPointer * Fix flow * Cleanup unused param * Add render tests for data driven styling coverage * EOL * optimize tail calls in feature state sorting (mapbox#9463) * Update per mdn webgl recommendations (mapbox#9474) * Update per mdn webgl recommendations - Delete shader handles after succesfull compilation - Query render to half float texture instead of calling checkFramebufferStatus, potentially involving flush + round-trip on first frame * Add heatmap layer to release testing * fix documented type of the locale option to Map (mapbox#9486) * Ensure each tile symbol tile uses its own unique Program based on its state (mapbox#9493) (cherry picked from commit 9f1aba5) * Add `slice` and `index-of` expressions (mapbox#9450) * Allow client to retry RTLTextPlugin load after NetworkError (mapbox#9489) * Fix several listener leaks in popups (mapbox#9498) * Add methods to mapboxgl namespace to allow preloading of workers. (mapbox#9391) * Basic preload workers * Switch to hardcoded preloaded workerpool id so its easier to identify when workers have been preloaded * Add removePreloadedWorkerPool to mapboxgl namespace * Fix flow and lint errors * Add documentation and address CR comments. * Reword docs language to be clearer. Co-Authored-By: Konstantin Käfer <[email protected]> * More cleaning of language in documentation. Co-Authored-By: Konstantin Käfer <[email protected]> Co-authored-by: Konstantin Käfer <[email protected]> * Remove docs pages from .gitignore file (mapbox#9504) * refactor and expand gesture handling (mapbox#9365) Co-authored-by: Anjana Vakil <[email protected]> - refactor gesture handling to allow multiple handlers to run simultaneously - add a pitch gesture - add a tap-drag-zoom gesture - fix various bugs (see PR) * Prepare for next release cycle (mapbox#9506) * Fix minor typo (mapbox#9507) * [render tests][tile mode] Add `icon-text-fit/text-variable-anchor-tile-map-mode` test * fix DragRotateHandler#isActive (mapbox#9511) * fix DragRotateHandler#isActive (mapbox#9514) Co-authored-by: Ansis Brammanis <[email protected]> * remove handler event listeners when map is removed (mapbox#9508) * Update style specification compatibility tables (release-vanillashake) (mapbox#9509) Updated the style specification compatibility tables for Android map SDK v9.1.0, iOS map SDK v5.8.0, and macOS map SDK v0.15.0. * Fix for issue 9518 (mapbox#9520) * Add regression test for mapbox#9518 * More thorough input checks for isPatternMissing function Fixes regression introduced by mapbox#9380 ResolvedImage.fromString may now return null, which potentially leaves CrossFaded<ResolvedImage> with missing image patterns I have traced other code paths using ResolvedImage.fromString and have not seen any other potential offenders * fix mapbox#9519 click map event on touch devices (mapbox#9526) * Add render-tests for line-dasharray case (mapbox#9525) Trick to mimic an outline with a different color. * Follow-up of adding test cases for line-dasharray case This test should be ignored because the rendering result is wrong. * [master] Fix style-spec isolation for within expression (mapbox#9522) * - Add a build-time check for style-spec referencing external files - Refactor within to NOT import external files * Address review comments * export isExpressionFilter from spec (mapbox#9530) * fix mapTouchEvent.point for touchend events (mapbox#9536) * update changlogs to add 1.9.1 and [email protected] (mapbox#9540) * Refactor format_section_override out of style-spec (mapbox#9543) * fix DragRotate when mouseup occurs outside window or iframe (mapbox#9512) fix mapbox#4622 * Add diff-tarball script and more explicit files property in package.json (mapbox#9550) * More explicit files property in package.json To prevent potential upload error when publishing to npm Refer https://docs.npmjs.com/files/package.json\#files * Add a way to diff the new tarball content with previously published version This is intended to be used as part of our release process before publishing to NPM --dry-run is a useful step, but can be fairly noisy, yarn run v1.21.1 to go along the fake deploy and more clearly shows what would be added and deleted * Run the diff as part of prepublishOnly * Prompt to ensure user check before going further with publishing when running 'npm publish' * fix example typo (mapbox#9568) * Clean check in `prepublishOnly` (mapbox#9590) * Clean check in prepublishOnly Runs clean check as a first step in prepublishOnly. This ensures a clean directory before building the build content and before the manual diffing with previously published tarball. * Address comments * Add scale to Marker options (mapbox#9414) * Change return type to boolean for StyleImageInterface type alias (mapbox#9604) * Fix using `within` expression with complex `filter` (mapbox#9611) * Fix within usage with othere expressions in the same filter * Add render tests * Fix filter operator checking for nested condition * Trigger memory metrics build on CircleCI (mapbox#9622) * Documentation improvements sprint (mapbox#9607) Various documentation enhancements from the docs sprints: * [docsprint] Clarify meaning of Map#isSourceLoaded (mapbox#9589) * [docsprint] Add geolocate trigger example (mapbox#9552) * [docsprint] Add inline snippet to marker#addTo (mapbox#9592) * [docsprint] Add inline snippet and related examples to popup.setHTML (mapbox#9538) * add inline snippet and related examples to popup.setHTML * update see URLs to docs subdomain * Add inline and related example for panTo (mapbox#9547) * Add inline snippet to LngLatBounds.contains (mapbox#9548) * [docsprint] Add inline snippet and examples to map.jumpTo (mapbox#9549) * add inline snippet and examples to map.jumpTo * minor reorder to match options and text * added inline and tutorial examples for map.getCenter (mapbox#9551) * add example for Marker class setLngLat (mapbox#9553) * added examples to get- and setLayoutProperty (mapbox#9554) * add inline snippet and examples to map.triggerRepaint (mapbox#9555) * CameraOptions - update pitch and bearing definitions, add inline code example, add example links (mapbox#9556) * add inline code snippet to map.showTileBoundaries (mapbox#9557) * Mark Debug namespace as private to hide it from the docs (mapbox#9558) * [docsprint] Add detail to docs on setFeatureState, removeFeatureState, getFeatureState (mapbox#9559) * add detail to docs on setFeatureState, removeFeatureState, getFeatureState * remove trailing spaces * [docsprint] map.on: remove extra on section, link to event types, add code snippet, add related (mapbox#9560) * add examples to open and close popup events (mapbox#9565) * [docsprint] Clarify how map.moveLayer works (mapbox#9566) * clarify how map.moveLayer works * fix id capitalization * [doscprint] add links to EPSG and minor example changes for LngLat (mapbox#9570) * add links to EPSG and minor example changes for LngLat * document the layer object's properties in addLayer (mapbox#9571) * [docsprint] Add inline snippet and examples to popup.addTo (mapbox#9572) * added inline example to popup-addto * added relevant examples to popup.addto * Add inline example for trackPointer (mapbox#9575) * Add inline example for Popup#getElement (mapbox#9576) * [docsprint] Add inline examples for Point & PointLike types (mapbox#9577) * Add inline examples for Point & PointLike types * Correct syntax * [docsprint] Cleanup doc for MapBoxZoomEvent (mapbox#9564) * Describe map style object returned by Map#getStyle (mapbox#9579) * [docsprint] Add inline example for getClusterLeaves (mapbox#9580) * [docsprint] PaddingOptions - update definition, example, and related (mapbox#9581) * PaddingOptions - update definition, example, and related * Fixes formatting issues * [docsprint] Add inline snippet to marker#setPopup, marker#getPopup, and marker#togglePopup (mapbox#9582) * update setPopup * update togglePopup * update formatting * update setFilter jsdoc (mapbox#9586) * add more details to getSource (mapbox#9587) * add clearStorage example (mapbox#9588) * [docsprint] Add documentation for RequestParameters (mapbox#9573) * [docsprint] Add inline example for setZoomRate and setWheelZoomRate of scrollZoomHandler (mapbox#9593) * Add inline example for setZoomRate of scrollZoomHandler * add setWheelZoomRate inline example * Add inline examples for map zoom-related methods (mapbox#9594) * [docsprint] Add example to MapMouseEvent (mapbox#9595) * add example to MapMouseEvent * Add examples for GeolocateControl events (mapbox#9596) * [docsprint] Add example to MapDataEvent (mapbox#9597) * add example to MapDataEvent * add example for getLngLat (mapbox#9591) * suggested edits for clarifying mouse events * Small grammar fix: "optional the `layerId`" -> "the optional `layerId" * Update pitch param definition; add Display buildings in 3D example * remove example object, light formatting and copyediting Co-Authored-By: Dan Swick <[email protected]> Co-authored-by: Adriana Babakanian <[email protected]> Co-authored-by: Sam Fader <[email protected]> Co-authored-by: Heather Stenson <[email protected]> Co-authored-by: Katy DeCorah <[email protected]> Co-authored-by: jbranigan <[email protected]> Co-authored-by: Jeremy Stratman <[email protected]> Co-authored-by: Mal Wood-Santoro <[email protected]> Co-authored-by: Asheem Mamoowala <[email protected]> Co-authored-by: Colleen McGinnis <[email protected]> Co-authored-by: geografa <[email protected]> Co-authored-by: Patrick Leonard <[email protected]> Co-authored-by: David Wicks <[email protected]> Co-authored-by: Deven Diliberto <[email protected]> Co-authored-by: Colleen <[email protected]> Co-authored-by: Karim Naaji <[email protected]> * Reverse tap-drag-zoom direction (mapbox#9618) fixes mapbox#9612 * [render tests] Add `all-anchors-labels-priority-tile-map-mode` test * Pull changelog from v1.10.0 in master (mapbox#9635) * Pull changelog from v1.10.0 in master * Add stylespec CHANGELOG.md Co-authored-by: Mikhail Pozdnyakov <[email protected]> Co-authored-by: Ryan Hamley <[email protected]> Co-authored-by: Tristen Brown <[email protected]> Co-authored-by: Andrew Harvey <[email protected]> Co-authored-by: Arindam Bose <[email protected]> Co-authored-by: Colleen McGinnis <[email protected]> Co-authored-by: Andreas Hocevar <[email protected]> Co-authored-by: dburnsii <[email protected]> Co-authored-by: Poluektov Dmitriy <[email protected]> Co-authored-by: Konstantin Käfer <[email protected]> Co-authored-by: Ádám Barancsuk <[email protected]> Co-authored-by: Adriana Babakanian <[email protected]> Co-authored-by: Vladimir Agafonkin <[email protected]> Co-authored-by: Juha Alanen <[email protected]> Co-authored-by: Madison Draper <[email protected]> Co-authored-by: Ansis Brammanis <[email protected]> Co-authored-by: Nicholas Latham <[email protected]> Co-authored-by: Saman Bemel-Benrud <[email protected]> Co-authored-by: Dmytro Gokun <[email protected]> Co-authored-by: Michael Barry <[email protected]> Co-authored-by: Anjana Sofia Vakil <[email protected]> Co-authored-by: Dan Swick <[email protected]> Co-authored-by: Juha Lindstedt <[email protected]> Co-authored-by: Alexander Shalamov <[email protected]> Co-authored-by: Asheem Mamoowala <[email protected]> Co-authored-by: Andrew Hay Kurtz <[email protected]> Co-authored-by: Adriana Babakanian <[email protected]> Co-authored-by: Aleksandar Stojiljkovic <[email protected]> Co-authored-by: Chloe Krawczyk <[email protected]> Co-authored-by: Jo <[email protected]> Co-authored-by: Mikko Pulkki <[email protected]> Co-authored-by: SeulGi Choi(Chase) <[email protected]> Co-authored-by: Ansis Brammanis <[email protected]> Co-authored-by: Yanonix <[email protected]> Co-authored-by: Mal Wood-Santoro <[email protected]> Co-authored-by: Karim Naaji <[email protected]> Co-authored-by: Karim Naaji <[email protected]> Co-authored-by: Boris <[email protected]> Co-authored-by: Michael Holroyd <[email protected]> Co-authored-by: zmiao <[email protected]> Co-authored-by: Geoffrey Ely <[email protected]> Co-authored-by: Katy DeCorah <[email protected]> Co-authored-by: Sanaz Golbabaei <[email protected]> Co-authored-by: pathmapper <[email protected]> Co-authored-by: Kevin Li <[email protected]> Co-authored-by: Thomas Watson <[email protected]> Co-authored-by: oterral <[email protected]> Co-authored-by: Nick Mann <[email protected]> Co-authored-by: Luke Butler <[email protected]> Co-authored-by: Mark Bell <[email protected]> Co-authored-by: Minh Nguyễn <[email protected]> Co-authored-by: Thiago Marcos P. Santos <[email protected]> Co-authored-by: Brave Cow <[email protected]> Co-authored-by: Sam Fader <[email protected]> Co-authored-by: Heather Stenson <[email protected]> Co-authored-by: jbranigan <[email protected]> Co-authored-by: Jeremy Stratman <[email protected]> Co-authored-by: geografa <[email protected]> Co-authored-by: Patrick Leonard <[email protected]> Co-authored-by: David Wicks <[email protected]> Co-authored-by: Deven Diliberto <[email protected]> Co-authored-by: Colleen <[email protected]> Co-authored-by: Joakim Berglund <[email protected]>
Addresses the following issues:
#8328
#4268
and ports @astojilj 's amazing work to the js side.
API:
Users can now specify global
left
,right
,top
andbottom
padding values (in pixels) in in apadding
field in camera functions i.ejumpTo
,easeTo
andflyTo
.Example:
Similar to other camera options the existing padding value is retained if a parameter is unspecified in the call.
Also, similar to @astojilj 's design, the rendering changes are implemented accounting for the offset center elements 8 and 9 of
Transform#projMatrix
, inTransform#_calcMatrices()
, while ensuring that everything that reads fromTransform#getCenter
doesn't break with the center being offset.Testing:
EdgeInsets
class that tests its behavior in isolationcamera
for testing if its interface oh settingpadding
behave as expected.Left padding rendered in blue,
Bottom padding rendered in green
Right padding rendered in magenta
Top padding rendered in red
This can be turned on with the map option
showPadding
.showPadding
set totrue
Demo:
Launch Checklist
padding
infitBounds
and padding for camera options for asymmetric viewportMap API functions such as
easeTo
andflyTo
now supportpadding: PaddingOptions
which lets developers shift the center of perspective for a map when building floating sidebars.