官术网_书友最值得收藏!

  • Leaflet.js Essentials
  • Paul Crickard III
  • 384字
  • 2021-09-03 10:03:02

Tile layer providers

Now that you have created your first map, you are probably wondering how to change the tile layer to something else. There are several tile layer providers, some of which require registration. This section will present you with two more options: Thunderforest and Stamen. Thunderforest provides tiles that extend OpenStreetMap, while Stamen provides more artistic map tiles. Both of these services can be used to add a different style of basemap to your Leaflet map.

Thunderforest provides five tile services:

  • OpenCycleMap
  • Transport
  • Landscape
  • Outdoors
  • Atlas (still in development)

To use Thunderforest, you need to point your tile layer to the URL of the tile server. The following code shows how you can add a Thunderforest tile layer:

var layer = new L.TileLayer('http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png');
map.addLayer(layer);

The preceding code loads the landscape tile layer. To use another layer, just replace landscape in the URL with cycle, transport, or outdoors. The following screenshot shows the Thunderforest landscape layer loaded in Leaflet:

Stamen provides six tile layers; however, we will only discuss the following three layers:

  • Terrain (available in the United States only)
  • Watercolor
  • Toner

The other three are Burning Map, Mars and Trees, and Cabs & Crime. The Burning Map and Mars layers require WebGL, and Trees and Cabs & Crime are only available in San Francisco. While these maps have a definite wow factor, they are not practical for our purposes here.

Note

Learn about the Stamen tile layers, including Burning Map, Mars and Trees, and Cabs & Crime, at http://maps.stamen.com.

Stamen requires you to follow the same steps as Thunderforest, but it includes an additional step of adding a reference to the JavaScript file. After the reference to your Leaflet file, add the following reference:

<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.2.4"></script>

Instead of L.TileLayer(), Stamen uses L.StamenTileLayer(tile set name). Replace the tile set name with terrain, watercolor, or toner. Lastly, add addLayer() to the map as shown in the following code:

var layer = new L.StamenTileLayer("watercolor");
map.addLayer(layer);

Stamen's tile layers are not your typical basemap layers; they are works of cartographic art.

Tip

Stamen has an online tool to edit map layers and save the output as an image. To create your own artistic map images, go to http://mapstack.stamen.com.

The following screenshot shows the Stamen watercolor layer loaded in Leaflet. As you zoom in, you will see more detail:

主站蜘蛛池模板: 黄石市| 水城县| 甘南县| 仙桃市| 台前县| 临沂市| 英吉沙县| 奉贤区| 惠来县| 长垣县| 和龙市| 沙坪坝区| 噶尔县| 庄河市| 巴塘县| 沾益县| 山东| 北票市| 延安市| 和林格尔县| 攀枝花市| 卓资县| 武宣县| 棋牌| 岐山县| 剑川县| 潞城市| 富宁县| 南溪县| 余姚市| 安龙县| 英山县| 宁蒗| 罗定市| 雷州市| 乃东县| 阿坝县| 梧州市| 高碑店市| 琼中| 安多县|