Skip to main content

Map initialization

You can use the map parameters style, center, and zoom to define the initial appearance of the map. This example uses the Mapmost SDK for WebGL to initialize the map in the HTML element of the web page.

show
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Display a map</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.16.0/mapmost-webgl-min.js"></script>
</head>
<body>
<div id="map"></div>
<script>
    let map = new mapmost.Map({
        container: 'map', // map container id
        style: "<your style url>", // style file URL
        center: [120.72541613154851, 31.31171803927643], // Initial center point of the map
        zoom: 14, // Initial level of map
        userId: '***', // Authorization code
    });

</script>
</body>
</html>