Map JS API
Set the icon from a set of predefined images
Add an item on the map with a specified icon and change this icon by the JS API. It’s also possible to use the “Update” sample to change the style of an item. The following icons are available here (https://nsimtech.com/en/change-item-icon/). Just hover the icon to see the name.
<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 SetIcon() { map.SetItemIcon("Point1", "marker"); } function SetIcon2() { map.SetItemIcon("Point1", "rocket"); } 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": 10, // 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.5 // 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="SetIcon1()">Icon1</button> <button onclick="SetIcon2()">Icon2</button> </div> </div> </body> </html>
Help Guide Powered by Documentor