Add Popups


The popup on the map is usually popped up by clicking to display the detailed information. Take iClient for JavaScript as an example, the pop-up window class is defined as SuperMap.Popup, where Anchored is the floating pop-up window with fixed anchor point, which can be adaptively displayed around the specified location, is the most commonly used popups.

Step1 Initialize map

var map, layerWorld,marker,markers,
    url = "http://www.supermapol.com/iserver/services/vm3sbiax/rest/maps/World";
var value = "VZ88xbrMEMpGv4yiisTojgVq";
var name = "ak";
SuperMap.Credential.CREDENTIAL = new SuperMap.Credential(value, "ak");

function init(){
    //Add control on the map
    map = new SuperMap.Map("map",{controls: [
        new SuperMap.Control.ScaleLine(),
        new SuperMap.Control.Zoom(),
        new SuperMap.Control.LayerSwitcher(),
        new SuperMap.Control.Navigation({  //Add navigation control to map
            dragPanOptions: {
                enableKinetic: true    //Drag animation
            }
        })]
                                                             });

    //Define layerWorld layer, get the layer service address
    layerWorld = new SuperMap.Layer.TiledDynamicRESTLayer("World", url);
}

Step2 Define mouseClickHandler function

Call the function when the click event is occurred, to realize that the pop-up window will be shown on the map when clicking.

var infowin = null;
//Define mouseClickHandler function, Call the function when the click event is occurred.
function mouseClickHandler(event){
    closeInfoWin();
    //Initialize Anchored class
    popup = new SuperMap.Popup.Anchored(
        "chicken",
        marker.getLonLat(),
        new SuperMap.Size(220,140),
        '<img src="http://sandbox.runjs.cn/uploads/rs/3/dofmucai/xila.jpg">',
        icon,
        true,
        null
    );

    infowin = popup;
    //Add pop-up window to map layer
    map.addPopup(popup);
}

Step3 Define addLayer function

Call this function when occurring the layerInitialized event, add the map and Marker to the map window.

//Define the addLayer function, call this function when occurring the layerInitialized event
function addLayer(){
    //Add TiledDynamicRESTLayer and marker layer on the map
    map.addLayers([layerWorld,markers]);
    map.setCenter(new SuperMap.LonLat(23, 38), 4);
}

Step4 Define addMarker function

Call this function when occurring the layerInitialized event, initialize Marker, register the click event, occur mouseClickHandler().

//Define the addMarker function, call this function when occurring the layerInitialized event
function addMarker(){
    size = new SuperMap.Size(21,25);
    offset = new SuperMap.Pixel(-(size.w/2), -size.h);
    icon = new SuperMap.Icon('http://sandbox.runjs.cn/uploads/rs/3/dofmucai/markerbig_select.png', size, offset);
    //Initialize the marker layer
    marker = new SuperMap.Marker(new SuperMap.LonLat(23.6530190,37.9439259),icon);
    // Add markers to the marker layer
    markers.addMarker(marker);
    //Register click event, occur mouseClickHandler()
    marker.events.on({"click":mouseClickHandler,
                                        "touchstart":mouseClickHandler });
}

Step5 Add layerInitialized event, to add the layer and Marker on the map

    //Add layerInitialized event after the layer initialization
    layerWorld.events.on({"layerInitialized": addLayer});
    //Initialize the marker layer class
    markers = new SuperMap.Layer.Markers("Markers");

    layerWorld.events.on({"layerInitialized": addMarker});

Online demo and code editing

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