admin管理员组

文章数量:1335386

I'm trying to use Mapbox GL in bination with the plain public OSM tile servers. Following the example of how to add a raster tile source, my take on a minimal example looks like this:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Minimal OSM Test</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script src=".8.1/mapbox-gl.js"></script>
  <link href=".8.1/mapbox-gl.css" rel="stylesheet" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      border: solid 1px #000000;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    var map = new mapboxgl.Map({
      container: 'map',
      style: {
        version: 8,
        sources: {
          osm: {
            type: 'raster',
            tiles: ["https://{s}.tile.openstreetmap/{z}/{x}/{y}.png"],
          }
        },
        layers: [{
          id: 'osm',
          type: 'raster',
          source: 'osm',
        }],
      }
    });
  </script>

</body>

</html>

Unfortunately, this doesn't seem to work: The map does not show anything and the browser console is full of blocked cross-origin requests errors.

With other map libraries like Leaflet or OpenLayers, I have no problems connecting to the public OSM servers.

How can I make this work in Mapbox GL JS?

I'm trying to use Mapbox GL in bination with the plain public OSM tile servers. Following the example of how to add a raster tile source, my take on a minimal example looks like this:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Minimal OSM Test</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="https://api.mapbox./mapbox-gl-js/v1.8.1/mapbox-gl.js"></script>
  <link href="https://api.mapbox./mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      border: solid 1px #000000;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    var map = new mapboxgl.Map({
      container: 'map',
      style: {
        version: 8,
        sources: {
          osm: {
            type: 'raster',
            tiles: ["https://{s}.tile.openstreetmap/{z}/{x}/{y}.png"],
          }
        },
        layers: [{
          id: 'osm',
          type: 'raster',
          source: 'osm',
        }],
      }
    });
  </script>

</body>

</html>

Unfortunately, this doesn't seem to work: The map does not show anything and the browser console is full of blocked cross-origin requests errors.

With other map libraries like Leaflet or OpenLayers, I have no problems connecting to the public OSM servers.

How can I make this work in Mapbox GL JS?

  • javascript
  • mapbox
  • mapbox-gl-js
  • mapbox-gl
Share Improve this question asked Mar 11, 2020 at 13:20 bluenote10bluenote10 26.7k15 gold badges140 silver badges208 bronze badges 4
  • 1 It works if I remove {s}. from the tile url: jsfiddle/khrismuc/gk4pxm9b (according to the console it's not replaced with anything, so the request fails because it's not a valid URL) – user5734311 Commented Mar 11, 2020 at 13:25
  • @ChrisG Indeed that works, thanks! I thought the {s} interpolation is part of the standard to chose from multiple servers. Wanna turn that into an answer? – bluenote10 Commented Mar 11, 2020 at 13:39
  • You probably want to set the tileSize too – AndrewHarvey Commented Mar 11, 2020 at 21:47
  • 1 I'm also interested in knowing how to load-balancing between diferent OSM sub-domains. – LuisTavares Commented Mar 11, 2020 at 23:50
Add a ment  | 

1 Answer 1

Reset to default 7

Synthesizing the insights in the ments above, as well as adding an important note about attribution, this JSFiddle achieves what you are looking for: https://jsfiddle/g1rwx8kp/.

The following changes were made:

  • As noted by chris-g, you should remove the {s} from the tile url.
  • As noted by AndrewHarvey, specifying tileSize is good practice. Here I included tileSize: 256.

  • You should pass a string to the attribution option in order to display relevant attribution of your tile and data sources on the map. I included an example in the JSFiddle above, though as I disclaimer, I cannot vouch for its accuracy and it likely should be further refined. Per the documentation on tile usage policy:

    OpenStreetMap data is free for everyone to use. Our tile servers are not.

    Further, "clearly display license attribution" is listed as a requirement for usage of the tile servers. As such, I'd remend carefully reviewing these policies before frequently connecting to public OSM servers. Or, maybe someone else with experience using these tile serves can provide more insight!

本文标签： javascriptHow to use standard OpenStreetMap tile servers with Mapbox GL JSStack Overflow

版权声明：本文标题：javascript - How to use standard OpenStreetMap tile servers with Mapbox GL JS? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742388906a2465594.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。