Documentation

Default Popup

Almost every geometry on a Micello map has a predefined popup. These popups display a simple menu allowing the user to get more information or create a navigation request.


Note: The 'close x' has been hidden in the default popup and infowindow. Instead, clicking elsewhere on the map closes the window. It can still be displayed however, using the following CSS styles:

 

 

 

 

.menuClose, .infoClose {
    display: block !important; // force hidden close boxes to display
}

This window can be popped through API methods to attract a user's attention to a particular geometry when the map loads or another event is triggered. This example will demonstrate how to display a default popup by using either the geometry's id or name.

Like many methods in the Micello API, defaultSelectAction() accepts a geometry object as an argument. Simply providing the ID of the geometry is not sufficient, so a geometry will often need to be located by ID before being passed to defaultSelectAction().

The structure of a geometry object looks like this:


The following function shows how to loop level geometries to locate a specific geometry object by ID:

function popByGid (gid) {
    var level = mapDataObject.getCurrentLevel(); // get current level object
    for (var i = 0; i < level.g.length; i++) { // loop level geometries
        if (level.g[i].id == gid) { // compare gid to each geometries id property
            var geomObj = level.g[i]; // if a match, assign to variable
            break; // exit the loop after a match
        }
    }
    if (geomObj) { // if a match took place this will be defined
        mapControl.defaultSelectAction(geomObj); // pop the default window
    } else {
        alert("No geometry with id "+gid+" was found.")
    }
}

If instead the geometry object needs to be located by name, the geometries can be looped in same fashion but comparing name (.nm) values instead:

function popByName (name) {
    var level = mapDataObject.getCurrentLevel();
    for (var i = 0; i < level.g.length; i++) {
        if (level.g[i].nm == name) { // compare name here instead of gid
            var geomObj = level.g[i];
            break;
        }
    }
    if (geomObj) {
        mapControl.defaultSelectAction(geomObj); // pop the default window
    } else {
        alert("No geometry with the name '"+name+"' was found.")
    }
}

Either of the two methods shown above will produce a default popup window if called after the map has loaded and the provided value can be matched to a geometry. Use the following code to get started:

micello.maps.init (apikey, mapInit);
var mapControl;
var mapDataObject;
function  mapInit() {
    mapControl =  new micello.maps.MapControl('mapElement');
    mapDataObject = mapControl.getMapData();
    mapDataObject.mapChanged = onMapChanged;
    mapDataObject.loadCommunity(15);
}
function onMapChanged (e) {
    if (e.comLoad) {
        popByGid(3217229); // show popup by geometry id
        // popByName("Sears"); // or do the same by name
    }
}