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