1. Home
  2. Docs
  3. Example
  4. Basic
  5. Simple map

Simple map

Initialize the map into HTML element using the JS API. To initialize the map, it’s mandatory to provide a valid Map Key AND valid credentials (User/Pass or api key) in the constructor (see the source code for details).

<html>
<head>
    
    <script src="https://rasters.io/maps/v0.8.0/rasters.map.min.js"></script>
    <link rel="stylesheet" href="https://rasters.io/maps/v0.8.0/rasters.css" />

    <style>
        html, body {
            height: 100%;
            -ms-touch-action: none;
        }       
    </style>
</head>
<body>
    <script>       
        var map;
        var mapKey = "Enter your mapkey here";
        var ApiKey = "Enter your Apikey here";
                              
        Rasters.Map.OnReady = function () {
              map = new Rasters.Map({
                container: 'Map', // container id
                url: 'https://api.rasters.io/', 
                mapKey: mapKey,
                authenticationMode: Rasters.AuthenticationMode.MapToken,               
                token: ApiKey
            });

           // Here an example to create a map with credential rather than API KEY
           // var Username = "Enter your Username here";
           // var Password = "Enter your Password here"; 
           // Rasters.Map.OnReady = function () {
           //   map = new Rasters.Map({
           //     container: 'Map', // container id
           //     url: 'https://api.rasters.io/', 
           //     mapKey: mapKey,
           //     authenticationMode: Rasters.AuthenticationMode.UserPassword,               
           //    username: 'Enter your Username here',
           //     password: 'Enter your Password here'
           // });
   map.OnReady = OnConnectHander;
           
        }

 function OnConnectHander() {
            map.SetPosition(-71.2170425, 46.810457, 10);    
        }       
    </script>

  <div id="Map"></div>       
     
</body>
</html>
Was this article helpful to you? Yes No 1

How can we help?