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

Unable to render maplibregl Map #3041

Open
keif888 opened this issue Feb 3, 2025 · 0 comments
Open

Unable to render maplibregl Map #3041

keif888 opened this issue Feb 3, 2025 · 0 comments
Labels
STATE: Need response TYPE: bug

Comments

@keif888
Copy link

keif888 commented Feb 3, 2025

What is your Scenario?

Use testcafe to verify that maps are rendered showing the correct location within https://demo.photoprism.app/library/places?q=s2:5486148ceb64.

What is the Current behavior?

The map tiles are not rendered, zoom is to 5000m instead of 30m.

What is the Expected behavior?

The map tiles are rendered, and the photo preview is shown.

What is your public website URL? (or attach your complete example)

To simplify the scenario I used the Hammerhead Playground and ran the following code sample within https://codepen.io. You will have to get your own key (free) from https://www.maptiler.com/cloud/ to enable maps to render.

The following is the HTML which is all that is required to demonstrate the issue:

<head>
    <meta charset='utf-8' />
    <title>OpenMapTiles OSM Bright style</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
    <div id='map'></div>
    <script>
        var map = new maplibregl.Map({
            container: 'map',
            style: 'https://api.maptiler.com/maps/bright/style.json?key=yourkeyhere',
            center: [8.5456, 47.3739],
            zoom: 11
        });
    </script>
</body>

Please note that this example code was source from https://openmaptiles.org/docs/website/maplibre-gl-js/

What is your TestCafe test code?

Tested using Hammerhead Playground and Chrome browser

As per instructions: https://github.com/DevExpress/testcafe-hammerhead?tab=readme-ov-file#first-look

Your complete configuration file

Not Applicable

Your complete test report

Not Applicable

Screenshots

See attached Expected and Actual screen shots

Steps to Reproduce

  1. Get API key from https://www.maptiler.com/cloud/
  2. Start hammerhead playground
  3. Navigate to proxy page
  4. Enter https://codepen.io/ as site to proxy
  5. Proxy the site
  6. Enter the html source included in Public Website section above
  7. Update the API key
  8. Note that the map is not rendered

TestCafe version

Not Applicable (hammerhead is Commit ede686e)

Node.js version

v18.19.0

Command-line arguments

Not Applicable

Browser name(s) and version(s)

Chrome 132.0.6834.159

Platform(s) and version(s)

Linux Debian 12

Other

Image
Image
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
STATE: Need response TYPE: bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@keif888