Mapbox GL JS

This example adds raster hillshading to a map by adding the Mapbox Terrain-DEM raster tileset as a raster-dem source with a hillshade layer.

JavaScript

React

JavaScript

React


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add hillshading</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.11.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.11.0/mapbox-gl.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>
	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    const map = new mapboxgl.Map({
        container: 'map',
        // The Mapbox Light style doesn't contain hillshading.
        // You could also add it in Mapbox Studio.
        style: 'mapbox://styles/mapbox/light-v11',
        center: [-119.55, 37.71],
        zoom: 9
    });

    map.on('load', () => {
        map.addSource('dem', {
            'type': 'raster-dem',
            'url': 'mapbox://mapbox.mapbox-terrain-dem-v1'
        });
        map.addLayer(
            {
                'id': 'hillshading',
                'source': 'dem',
                'type': 'hillshade'
            },
            // Insert below land-structure-polygon layer,
            // where hillshading sits in the Mapbox Streets style.
            'land-structure-polygon'
        );
    });
</script>

</body>
</html>

このコードスニペットは、YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。

JavaScript

React


import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';

import 'mapbox-gl/dist/mapbox-gl.css';

const MapboxExample = () => {
  const mapContainerRef = useRef();
  const mapRef = useRef();

  useEffect(() => {
    // TO MAKE THE MAP APPEAR YOU MUST
    // ADD YOUR ACCESS TOKEN FROM
    // https://account.mapbox.com
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

    mapRef.current = new mapboxgl.Map({
      container: mapContainerRef.current,
      style: 'mapbox://styles/mapbox/light-v11',
      center: [-119.55, 37.71],
      zoom: 9
    });

    mapRef.current.on('load', () => {
      mapRef.current.addSource('dem', {
        type: 'raster-dem',
        url: 'mapbox://mapbox.mapbox-terrain-dem-v1'
      });
      mapRef.current.addLayer(
        {
          id: 'hillshading',
          source: 'dem',
          type: 'hillshade'
        },
        'land-structure-polygon'
      );
    });

    return () => {
      mapRef.current.remove();
    };
  }, []);

  return <div id="map" ref={mapContainerRef} style={{ height: '100%' }} />;
};

export default MapboxExample;

このコードスニペットは、YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。

More Examples

View some examples of our other style features here:

EXAMPLE

Rain Example Mapbox GL JS

This example adds a rain effect to the map by setting the style's rain property. You can adjust the intensity, direction, color, and more of the precipitation presented on screen.

EXAMPLE

Snow Example Mapbox GL JS

This example adds a snow effect to the map by setting the style's snow property. You can adjust the intensity, direction, color, and more of the precipitation presented on screen.

追加の開発者リソース

このexampleは役に立ちましたか？

More Examples​

More Examples