Skip to content
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.

Sign up for GitHub

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

Jump to bottom

2.0.0 - text rendered in wrong place when using text-variable-anchor #341

Closed
drwestco opened this issue Sep 15, 2021 · 3 comments · Fixed by #342
Closed

2.0.0 - text rendered in wrong place when using text-variable-anchor #341

drwestco opened this issue Sep 15, 2021 · 3 comments · Fixed by #342

Comments

@drwestco
Copy link
Contributor

maplibre-gl-js version: 2.0.0+

browser: Chrome

Steps to Trigger Behavior

Using the debug page, start with the map zoomed to a point where no labels are showing. Add a symbol layer using text-variable-anchor.

This was working in 1.15.2

Link to Demonstration

<!DOCTYPE html>
<html lang="en">

<head>
    <title>MapLibre GL JS debug page</title>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='../dist/maplibre-gl.css' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        html,
        body,
        #map {
            height: 100%;
        }
    </style>
</head>

<body>
    <div id='map'></div>

    <script src='../dist/maplibre-gl-dev.js'></script>
    <script>
        var map = window.map = new maplibregl.Map({
            container: 'map',
            zoom: 7.5,
            center: [-77.01866, 38.888],
            style: 'https://demotiles.maplibre.org/style.json',
            hash: true
        });

        var c = document.createElement('canvas');
        c.width = 24;
        c.height = 24;

        var ctx = c.getContext('2d');
        ctx.fillStyle = '#a00';
        ctx.strokeStyle = '#fff';
        ctx.lineWidth = 2;
        ctx.ellipse(12, 12, 11, 11, 0, 0, 2 * Math.PI);
        ctx.fill();
        ctx.stroke();

        var redCirc = ctx.getImageData(0, 0, 24, 24);

        ctx.fillStyle = '#0a0';
        ctx.fill();
        ctx.stroke();

        var grnCirc = ctx.getImageData(0, 0, 24, 24);

        map.addControl(new maplibregl.NavigationControl());
        map.addControl(new maplibregl.GeolocateControl());

        var sourceData = {
            "type": "FeatureCollection",
            "features": [
            {
                    "type": "Feature",
                    "properties": {
                        "name": "Dennis",
                        "featureclass": "top"
                    },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-77.01866, 38.888]
                    },
                    "id": 163
                },
                {
                    "type": "Feature",
                    "properties": {
                        "name": "Point A",
                        "featureclass": "base"
                    },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-77.01866, 38.988]
                    },
                    "id": 163
                },
                {
                    "type": "Feature",
                    "properties": {
                        "name": "Point B",
                        "featureclass": "base"
                    },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-77.01866, 38.788]
                    },
                    "id": 164
                },
                {
                    "type": "Feature",
                    "properties": {
                        "name": "Point C",
                        "featureclass": "base"
                    },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-77.15866, 38.888]
                    },
                    "id": 165
                },
                {
                    "type": "Feature",
                    "properties": {
                        "name": "Point D",
                        "featureclass": "base"
                    },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-76.87866, 38.888]
                    },
                    "id": 166
                },
            ]
        };

        map.on('load', function () {
            map.addImage('redCirc', redCirc);
            map.addImage('grnCirc', grnCirc);
            map.addSource('places', {
                'type': 'geojson',
                'data': sourceData
            });

            map.addLayer({
                'id': 'top_labels',
                'type': 'symbol',
                'source': 'places',
                'filter': ['!=', ['get', 'featureclass'], 'base'],
                'layout': {
                    'text-allow-overlap': true,
                    'text-variable-anchor': ['top', 'bottom', 'left', 'right'],
                    'text-field': ['get', 'name'],
                    'text-font': ['Open Sans Semibold'],
                    'text-offset': [1.2, 1.4],
                    'text-size': 12,
                    'icon-allow-overlap': true,
                    'icon-image': 'grnCirc',
                },
                'paint': {
                    'text-halo-color': '#fff',
                    'text-halo-width': 2
                }
            });

            map.showCollisionBoxes = true;
        });

    </script>
</body>

</html>

Expected Behavior

Text should be shown below the icon, as the rendered collision box indicates.

Actual Behavior

No text below the icon.
image

It's actually drawn in the upper left corner of the map view.
image

Note that zooming out until another label is visible somehow kicks the control into working correctly. Can also call map.setLayoutProperty to remove and re-add the text-variable-anchor property to get it going. So it's just the initial load that's broken - failure to initialize some position information somewhere?
image
@drwestco
Copy link
Contributor Author

Looks like it may be this change in uniform_binding.ts:

- const emptyMat4 = new Float32Array(16);
- class UniformMatrix4f extends Uniform<Float32Array> {
+ const emptyMat4 = mat4.create();
+ class UniformMatrix4f extends Uniform<mat4> {

Previously, emptyMat4 was filled with 0s; now it's an identity matrix. I haven't tracked down the code that's reading this value, but reverting this line seems to fix the issue.

@drwestco drwestco mentioned this issue Sep 15, 2021
Merged
9 tasks
@wipfli
Copy link
Contributor

wipfli commented Sep 15, 2021

https://github.com/maplibre/maplibre-gl-js/pull/209/files#r693363232

@wipfli
Copy link
Contributor

wipfli commented Sep 15, 2021

This is something that caught my eye too while reviewing, but I don't remember why I did resolve the conversation.

HarelM pushed a commit that referenced this issue Sep 15, 2021
@drwestco
Fix for uninitialized UniformMatrix4f (#342)
3b81f4c 
* Fix for uninitialized UniformMatrix4f

UniformMatrix4f expects to be initialized with an all-zeros array, while mat4.create() creates an identity matrix. Subsequent calls to UniformMatrix4f.set with an identity matrix will become no-op as gl.uniformMatrix4fv won't be called.

* Unit test for UniformMatrix4f

Fixes #341
neodescis pushed a commit to neodescis/maplibre-gl-js that referenced this issue Jan 12, 2025
@HarelM
Vector tile transform changes (maplibre#341)
b90e195 
* Alternative option

* Improve agronomics, add test

* Remove unwanted change
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix for uninitialized UniformMatrix4f drwestco/maplibre-gl-js
2 participants
@drwestco @wipfli