ROADMAP: standard map, which displays the default road map view. The supported map styles are standard (default), simple, and night.
TERRAIN: terrain map, which displays the terrain rasters. Only the standard map style is supported.
SATELLITE: satellite map. Only the satellite map is displayed.
HYBRID: hybrid map, which displays map elements such as roads and POIs on top of the satellite map.

If both sourceType and mapType are set, mapType takes precedence over sourceType. Supported map effects are as follows.

mapType (Map Type)\sourceType (Tile Type)	sourceType (vector)	sourceType (raster)
mapType (ROADMAP)	Vector standard map	Raster standard map
mapType (TERRAIN)	Raster terrain map	Raster terrain map
mapType (SATELLITE)	Raster satellite map	Raster satellite map
mapType (HYBRID)	Raster satellite map + vector map elements	Raster satellite map + vector map elements

You can use either of the following methods to switch the map type:

When calling HWMapJsSDK.HWMap(div, mapOptions) to create a map, set the mapType attribute in MapOptions to change the map type.
Call the setMapType method to change the map type.

The sample code is as follows:

JavaScript
<script>
    var map;
    var circle;
    function initMap() {
        var mapOptions = {};
        mapOptions.center = {lng: 4.372970736010767, lat: 44.88813186075487};
        mapOptions.zoom = 9;
        mapOptions.language = 'en';
        // Raster tiles.
        mapOptions.sourceType = 'RASTER';
        // Way 1: Set the mapType attribute to change the map type (between the standard map and terrain map).
        mapOptions.mapType = 'ROADMAP';
        // mapOptions.mapType = 'TERRAIN';
        map = new HWMapJsSDK.HWMap(document.getElementById('map'), mapOptions);
    }
    
    function setMapType(){
        // Way 2: Call the setMapType method to change the map type to the terrain map.
        map.setMapType('TERRAIN')
    }
</script>

HTML
<div id="map"></div>
<button onclick='setMapType()' class="mapType">setMapType</button>

CSS
<style>
    html,
    body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }

    #map {
        height: 100%;
        width: 100%;
        margin: 0 auto;
    }

    .mapType{
        position:absolute;
        left:0;
        top:0;
    }
</style>

Figures below show the existing types of maps.

Figure 1 Raster standard map	Figure 2 Raster terrain map
Figure 3 Raster satellite map	Figure 4 Raster hybrid map

目录

Map Type