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