Docs

Map JS API

Set the style displayed for a marker including the label #

Here is an example how to set style properties for a marker.

<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 MapToken = "Enter your MapToken here";
                              
        Rasters.Map.OnReady = function () {
              map = new Rasters.Map({
                container: 'Map', // container id
                url: 'https://api.rasters.io/', 
                mapKey: "",
                authenticationMode: Rasters.AuthenticationMode.MapToken,               
                token: MapToken 
            });
         
        map.OnReady = OnConnectHander;           
   }

  function OnConnectHander() {
            map.SetPosition(-71.2170425, 46.810457, 10);    
           addGeoJSON();
        }       

 function addGeoJSON() { 
      var geoJson = { 
          "type": "Feature",
          "id": "Point1",
          "properties": {
              "text": "My Point", 
              "style.icon": "star",  // The icon
              "style.text-color": "#00FF00",  // The color of the text
              "style.text-size": 14,  // The size of the text
              "style.text-opacity": 0.8,  // The opacity (0-1)
              "style.icon-color": "#2288FF",  // The size of the text
              "style.icon-opacity": 0.4,  // The opacity (0-1)
              "style.active-icon-size": 1.8,  // The size of the active icon (when selected)
              "style.inactive-icon-size": 1  // The size of the inactive icon (when not selected)
          },
          "geometry": {
             "type": "Point",
             "coordinates": [-71.217042, 46.810457]
          } 
      }; 

</script>

<div style='width: 100%; height: 400px; position: relative;'>
  <div id="Map" style='width: 100%; height: 100%;'></div>
  <div class="btn-group" style="position: absolute; right: 10px; top: 10px;" >
    <button onclick="map.SetTilt(45)">Tilt</button>
    <button onclick="map.SetRotationAngle(45)">Rotate</button>
    <button onclick="map.IncreaseZoom(-1)">Zoom out</button>
    <button onclick="map.IncreaseZoom(1)">Zoom in</button>
    <button onclick="map.FlyToPosition(-123.3676258, 48.4138784, 12);">Fly TO</button>
  </div>
</div>
     
</body>
</html>
Help Guide Powered by Documentor
Suggest Edit