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

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>
Yes No Suggest edit
« Change item position in real-timeGeoCoding »
Help Guide Powered by Documentor
Suggest Edit