Docs

Map JS API

See how to handle mouse position and mouse hover item #

This sample introduces how to attach function to the event raised with a mouse move and how to get a feature/item under the mouse position.

<html>
<head>
    
    <script src="https://rasters.io/maps/v0.8.0/rasters.map.min.js"></script>
  
</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, 6);       

     // Attach events
     map.MouseMoved.on(OnMoved);

     addGeoJSON(); 
}       

 function OnClicked(e) {
     alert("Clicked - " + e.properties.device_name);
  }

function OnMoved(e) {
    var features = map.GetFeatures(e.point);

    document.getElementById('latlon').innerHTML = e.lngLat.lat.toFixed(4) + " : " + e.lngLat.lng.toFixed(4);

    if (features.length > 0) {
       document.getElementById('item').innerHTML = features[0];
    }
    else {
       document.getElementById('item').innerHTML = '--';
    }
 }

function addGeoJSON() { 
     var geoJson = {
       "type": "FeatureCollection",
       "features": [{
       "type": "Feature",
       "id": "Line1",
       "properties": {
       "device_name": "Line1",
       "style.line-color": "#00FF00",
       "style.line-width": 10
       },
         "geometry": {
         "type": "LineString",
         "coordinates": [[-71.23, 46.466],[-70.23, 46.466],[-70.23, 47.466],[-71.23, 47.466]]
       }
     },
     {
     "type": "Feature",
     "id": "Polygon1",
     "properties": {
     "device_name": "Polygon1",
     "style.color": "#00FFFF",
     "style.borderwidth": 5
    },
    "geometry": {
     "type": "Polygon",
     "coordinates": [[[-71.33, 46.566],[-70.33, 46.566],[-70.33, 47.566],[-71.33, 47.566],[-71.33, 46.566]]]
     }
     }, {
     "type": "Feature",
     "id": "Point1",
     "properties": {
     "device_name": "Point1",
     "style.color": "#0000ff",
     "style.icon": "star"
    },
     "geometry": {
     "type": "Point",
     "coordinates": [-71.43, 46.466]
    }
    }
   ]
  };

   map.AddMapItems(geoJson, "", false, false);
  }

</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 id="latlon" disabled>Coords</button>
    <button id="item" >--</button>
  </div>
</div>
     
</body>
</html>
Help Guide Powered by Documentor
Suggest Edit