Add controls to your maps


The map control is used to realize the interaction function between users and maps. Common ones are: Pan/Zoom, scale bar, overview, Geolocate, etc. Take iClient for JavaScript as an example, controls can be added to the map by the SuperMap.Control class. The usage is like this:

var map = new SuperMap.Map('map', {controls: [new SuperMap.Control.PanZoomBar()]});

Or:

var map = new SuperMap.Map('map');
map.addControl(new SuperMap.Control.ScaleLine());

Online demo

The Pan/Zoom control

Pan and zoom are basic map operations. Take iClient for JavaScript as example, the pan/zoom control includes several types such as simple type, complete type and zoom box with the keyboard operation.

Simple

The easiest zoom control, which can only be composed by two buttons-zoom in and zoom out. The usage is:

  //Initialize simple type of control
  zoom=new SuperMap.Control.Zoom();
  //Load control
  map.addControl(zoom);
  //Gets the layer service URL
  • Complete pan/zoom control

It includes pan, zoom out, zoom in and zoom levels. You can set the size and style and whether some parts are visible or not.

The usage is:

  //Initialize complex type of control
  panzoombar=new SuperMap.Control.PanZoomBar();
  //Whether the fixed zoom level is an integer between [0,16]. The default is false.
  panzoombar.forceFixedZoomLevel=true;
  //Whether to display the slider. The default is false.
  panzoombar.showSlider=true;
  //The fraction of map width/height by which we’ll pan the map on clicking the arrow buttons.  Default is null.  If set, will override slideFactor.  E.g. if slideRatio is .5, then Pan Up will pan up half the map height.
  panzoombar.slideRatio=0.5; 
  //Set the height of the scale bar. The default is 120.
  panzoombar.sliderBarHeight=180;
  //Set the width of the scale bar. The default is 13.
  panzoombar.sliderBarWidth=17;

  map.addControl(panzoombar);
  • Basic map operations

In the common online map, when creating a map, the mouse operations like pan, roller, click are the basic map operations so as to reduce the number of the visible map controls, which can reduce the hidden area of the map.

These basic mouse interaction operations can be realized by the SuperMap.Control.Navigation control. If there is no any other controls to be set, this control will be added to the map by default.

  map = new SuperMap.Map("map",{controls:[
              new SuperMap.Control.Navigation()
  ]});

ScaleBar control

The scale is a very important element on the map, which represents the reference relationship between the map distance and the real distance.

The usage is like this, first create a ScaleLine, second add it to the map.

  //Initialize the scalebar control
  scaleline = new SuperMap.Control.ScaleLine();

  map.addControl(ScaleLine);

Overview control

It is used to view the relevant location of the current area on the map.

The usage is like this, first create a OverviewMap, second add it to the map.

  //Initialize the Overview control
  overviewmap = new SuperMap.Control.OverviewMap();
  //minRectSize: The minimum width or height (in pixels) of the extent rectangle on the overview map. The default is 8pixels
  overviewmap.minRectSize = 20;

  map.addControl(overviewmap);

Geolocate control

It is a unique element for the online map. After clicking it, the current position of the user can be located on the map according to the GPS or IP.

In iClient for JavaScript, the Geolocate control includes the Geolocation interface of w3c. The Geolocation API standard defines the interface to get geographical position from relevant devices which include GPS, IP, RFID, WiFi and MAC address of the bluetooth, network signal of GSM/CDMA phones ID.

The usage is like this:

    //Add Geolocate control
    geolocate = new SuperMap.Control.Geolocate({
        bind: false,
        geolocationOptions: {
            enableHighAccuracy: false,
            maximumAge: 0
        },
        eventListeners: {
            "locationupdated": getGeolocationCompleted,
            "locationfailed": getGeolocationFailed
        }
    });
    //Add control 
    map.addControl(geolocate);

//Initializes a layer.
    positionLayer = new SuperMap.Layer.Markers("Markers");
    layer = new SuperMap.Layer.TiledDynamicRESTLayer("China",url, {transparent: true, cacheEnabled: true, redirect: false}, {maxResolution:"auto"});
    layer.events.on({"layerInitialized": addLayer});
}

//Add Layers
function addLayer() {
    var center = new SuperMap.LonLat(11733502.481499,4614406.969325);
    map.addLayers([layer,positionLayer]);
    map.setCenter(center, 4);
}

Geolocate control needs to be activated, and support updating.

//Active it, get the location
function geoLocation(){
    if(!geolocate.active){
        geolocate.activate();
    }
    geolocate.getCurrentLocation();
}

//Update the location
function getGeolocationCompleted(event) {
    var lonLat = new SuperMap.LonLat(event.point.x,event.point.y);
    positionLayer.clearMarkers()
        size = new SuperMap.Size(44, 33),
            offset = new SuperMap.Pixel(-(size.w/2), -size.h),
                icon = new SuperMap.Icon("http://www.supermapol.com/static/portal/images/markers/mark_purple.png", size, offset);
    positionLayer.addMarker(new SuperMap.Marker(lonLat, icon));
    map.setCenter(lonLat);
}
function getGeolocationFailed(event){
    alert("Your currently used browser doesn't support Geoloate service");
}

Online demo and source codes editing

You can access the complete source codes online, experience the effects, or directly edit the codes to see its effect.