Flag Markers

This example demonstrates use of viewer flag markers.
Features data is loaded and a flag marker is created for each feature.

Markers are positioned at the center of the feature's bounds. The title and the content of the markers are filled with some feature data. All the markers are initially hidden, and you can display them by clicking through the index above the map viewer.

Methods of jQuery promise objects are used for synchronisation.

The code:

// create a hidden marker with a random color
m = new giscloud.FlagMarker(
    f.bounds.center(),
	title,
	content,
	giscloud.Color.randomHue(70, 50)
).visible(false);


// show the marker
m.visible(true);


//
// synchronization
//

// start loading features and save data to a variable when done
var featuresLoading = giscloud.features.byLayer(4)
    .done(function() {
        // save loaded features
        features = arguments[0];
    });

// create a viewer
viewer = new giscloud.Viewer("mapViewer", 1);

// after both the viewer and the features have been loaded,
// create the markers and the index
$.when(viewer.loading, featuresLoading)
    .done(createMarkers)
    .done(createIndex);