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

Vector tiles not requested by maplibre-gl 4.0.0 running in file:// URL (works in 3.6.2) #3680

Closed
lrowe opened this issue Feb 8, 2024 · 3 comments · Fixed by #3681
Closed

Vector tiles not requested by maplibre-gl 4.0.0 running in file:// URL (works in 3.6.2) #3680

lrowe opened this issue Feb 8, 2024 · 3 comments · Fixed by #3681
Labels
bug Something isn't working

Comments

@lrowe
Copy link

lrowe commented Feb 8, 2024

maplibre-gl-js version: 4.0.0 (works in 3.6.2)

browser: Chrome and Safari (works in Firefox)

Steps to Trigger Behavior

  1. Place the html below in a file on your filesystem.
  2. Open the html file with either Chrome or Safari from your filesystem as a file:// URL

Repro demonstration

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Display a map on a webpage</title>
    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" />
    <script src="https://unpkg.com/[email protected]/dist/maplibre-g-devl.js"></script>
    <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", // container id
        style: "https://demotiles.maplibre.org/style.json", // style URL
        center: [0, 0], // starting position [lng, lat]
        zoom: 1, // starting zoom
      });
      map.on("error", e => console.error("error", e));
      map.on("load", e => console.log("load", e));
    </script>
  </body>
</html>

Expected Behavior

  1. Map displays as it does when opened over http:// e.g. https://jsbin.com/waxofufeza/edit, opened as a file:// in Firefox or in any browser when changing maplibre-gl dependency to 3.6.2.
  2. Load event logged in console.

Actual Behavior

  1. Map does not display and tiles are requested in network panel of browser developer tools.
  2. Load event not logged in console.
  3. No error events logged in console.
@HarelM
Copy link
Collaborator

HarelM commented Feb 8, 2024

Strange... Seems like this was introduced as part of pre-release 1 of 4.0, I'm not sure I can think of something that could've caused this...
I did some major changes there, so I'm not sure I'd know where to start looking...

@HarelM HarelM added the bug Something isn't working label Feb 8, 2024
@sbachinin
Copy link
Collaborator

I believe the problem is in Actor.receive:
https://github.com/maplibre/maplibre-gl-js/blob/main/src/util/actor.ts#L132

With a "file" scheme, data.origin is "file://" and location.origin is "null" or vice versa

origin

So for example the tiles will get loaded if you change this condition to:
if (data.origin !== 'file://' && location.origin !== 'file://' && data.origin !== location.origin) {

I'm not sure about the purpose of this line so can't tell if this particular solution is safe.
But at least when served from localhost, everything works ok too.

@HarelM
Copy link
Collaborator

HarelM commented Feb 9, 2024

Ah, yes, this might explain it. The reason for this line is the following issue:

Since opening an html from a file is not a production use case, it might be OK to do this change as you suggested.

@sbachinin sbachinin mentioned this issue Feb 9, 2024
Merged
@HarelM HarelM mentioned this issue Feb 12, 2024
Open
@HarelM HarelM mentioned this issue Mar 7, 2024
Merged
@jwoodwardtfx jwoodwardtfx mentioned this issue Jul 30, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix vector tiles not loading when html is opened via file:// sbachinin/maplibre-gl-js
3 participants
@lrowe @HarelM @sbachinin