Docs

Map JS API

Change the item style #

Dynamically change the style of a item. Here are the following available style properties for each element type:

  • Label / Text of an item
    • “text” : This is the value to assigne to the label
    • “style.text-color”
    • “style.text-size”
    • “style.text-opacity”
  • Point
    • “text” : This is the value to assigne to the label
    • “style.text-color”
    • “style.text-size”
    • “style.text-opacity”
    • “style.icon”
    • “style.icon-color”
    • “style.icon-opacity”
    • “style.active-icon-size”
    • “style.inactive-icon-size”
    • “style.visible”
  • Line
    • “style.line-color”
    • “style.line-width”
    • “style.line-opacity”
    • “style.visible”
  • Polygon
    • “style.line-color”
    • “style.line-width”
    • “style.line-opacity”
    • “style.fill-opacity
    • “style.color”
    • “style.visible”

Example of how to set style

<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
            });
         
        map.OnReady = OnConnectHander;           
   }

  function OnConnectHander() {
            map.SetPosition(-71.2170425, 46.810457, 10);    
            addGeoJSON();
        }       
function addGeoJSON() { 
 var geoJson = { 
   "id" : "poly1",
   "type": "Feature",
   "properties": {
     "name": "Polygon1",
     "style.line-color": "#00FF00",
     "style.color": "rgba(255,255,0,0.5)",
     "style.line-width": 10,
     "style.line-opacity":0.7
   },
   "geometry": {
     "type": "Polygon",
     "coordinates": [[ [-71.23, 46.466],[-70.23, 46.466],[-70.23, 47.466],[-71.23, 47.466],[-71.23, 46.466]]]
   }
  };
 
  map.AddMapItems(geoJson, "", false, false);
 }

</script>

<div id="Map" style='width: 100%; height: 100%;'></div>
     
</body>
</html>
Help Guide Powered by Documentor
Suggest Edit