Skip to main content

DigitalSky Airspace Layers

LIVE DEMO

3 Step process to integrate​

Step 1​

Inside the <head> section of HTML of web page, or wherever else you find more suitable, include the following MapmyIndia javascript code.

<script
    src='https://apis.mappls.com/advancedmaps/api/<access_token>/map_sdk?layer=vector&v=3.0&libraries=geoanalytics&callback=initmap&airspacelayers' defer async></script>
></script>

Step 2​

 <div id='map'></div>

Step 3​

To load this widget from MapmyIndia, call the following javascript code AFTER the mapmyindia javascript file (as defined in step 2) has loaded. js <script> function initmap(){ map = new mappls.Map('map', { center: [28.61, 77.23], zoomControl: true, location: true, }); } </script>

Step4​

Below refered code will load the widget directly on the map. It will show 4 layers for Yellow (based on )and Red zones for Drones including a layers showing India International Boundary.See live Demo

Yellow zone is the airspace above 400 feet in a designated green zone; above 200 feet in the area located between 8-12 km from the perimeter of an operational airport and above ground in the area located between 5-8 km from the perimeter of an operational airport

Red zone is the ‘no-drone zone’ within which drones can be operated only after a permission from the Central Government.

The layers are:

  • id: coastal_area_india_region_25km named as International Boundary - 25km
  • id: airport_region_radius_8_to_12_km_yellow named as Airport Yellow [8-12]km
  • id: airport_region_radius_5_to_8_km named as Airport Yellow [5-8]km
  • id: airport_region_radius_0_to_5_km named as Airport Red
new mappls.airspaceLayer(
{
    'map': map_object,
    'key': '<access_token>',
    'position': 'bottomleft', //options - topright, topleft, bottomright
    //'multiple': true;
    //'defaultLayer':[coastal_area_india_region_25km, airport_region_radius_8_to_12_km_yellow];//this will show only these 2 selected layers.
    //'expand': false;
    //'showControl': 0;
    //'skiplayerIds': [airport_region_radius_0_to_5_km]...this will skip the international boundary layer from the control.
});

Optional Parameters​

  1. position: to set position of layer UI. Default is bottomleft.
  2. multiple: for multiple layers selection. Default is false.
  3. defaultLayer: layerId default load on map.If not used all 4 layers will be visible unselected in control.
  4. expand: expand layer control UI.Default is true.
  5. showControl: to show or not show controls UI on map default 1. It is for directly loading chosen defaultLayer.
  6. skiplayerIds to skip any laer form control ie. skiplayerIds:['coastal_area_india_region_25km']

Additional Methods​

To remove all Airspace layers from the map

mappls.airspaceRemove({ map: map_object });

To remove a particular layer

mappls.airspaceRemove({
  map: map_object,
  layerId: "coastal_area_india_region_25km",
});

Sample Implementation​

<html>

<head>
 <title>Mappls Plugin - airspaceLayers</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="desciption" content="Mappls airspaceLayers Plugin">
 <script src="https://apis.mappls.com/advancedmaps/api/<access_token>/map_sdk?layer=vector&v=3.0&libraries=geoanalytics&callback=initmap&airspacelayers" defer async></script>

 <style>
     #map {width: 100%;height: 100vh;margin: 0;padding: 0;}
 </style>
</head>

<body>
 <div id="map"></div>
 <script>
     var map;
     function initmap() {
      map = new mappls.Map('map', {
          center: [28.62, 77.09],
          zoom: 5,
          search: false,
      });
          new mappls.airspaceLayer(
          {
           'map': map_object,
           'key': 'access_token',
           // 'multiple' : true, // Default false
           // 'showControl':0, // Default 1
           // 'expand': false, // Default true
           // skiplayerIds: ['coastal_area_india_region_25km'],
           // defaultLayer:['coastal_area_india_region_25km','airport_region_radius_5_to_8_km'],
           position: 'bottomleft'
          });

     }
 </script>
</body>

</html>