Docs

Map JS API

  1. Basic
    1. Simple map
    2. Satellite map
    3. Unauthorized access
  2. Layers
    1. Display layers list
    2. Add items to a layer
  3. Geometry
    1. Add a not editable Polygon
    2. Add a not editable marker
    3. Add an editable line
    4. Add a unique map item
    5. Add an editable Marker
    6. Add multiple items
    7. Delete an item
    8. Delete an item by click
    9. Update an existing item
  4. Camera
    1. Fly to position
    2. Tilt and Rotate
    3. Tilt and Display 3D building
  5. Style
    1. Set marker style
    2. Set icon
    3. Set polygon style
    4. Modify item properties - Opacity, size, ...
    5. Show/Hide items
  6. User interaction
    1. Display a popup
    2. Draw on the map
    3. Measure a distance
    4. Measure an area
  7. Events
    1. Basic Item events handling
    2. Change item position in real-time
    3. Handle mouse events
  8. GeoCoding
    1. Geocode an address
    2. Reverse Geocode

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>
Yes No Suggest edit
« Set marker styleSet polygon style »
Help Guide Powered by Documentor
Suggest Edit