Flag Markers

Step 1

Click to place flag marker over London.

// create marker
marker = new giscloud.FlagMarker(
    new giscloud.LonLat(1000000, 6200000),
    "London",
    "London, UK... ,
    new giscloud.Color(255, 150, 0)
);

// add marker to viewer
viewer.addMarker(marker);

Step 2

Marker is in place. Click on it to reveal its content.
Click here to change the color of the marker.

// change color
marker.color(
    new giscloud.Color(0, 40, 200)
);
                

You can retrieve the color of the flag marker by invoking the marker.color() method without passing any arguments.

Step 3

Try toggling the marker using the marker.visible() method.

This method accepts true or false and sets marker's visibility accordingly. If invoked without arguments, it will return the current visibility of the marker.

Toggle

You can proceed to the next step.

// toggle marker visibility
marker.visible(
    !marker.visible()
);  

Step 4

Let's move the marker to New York now.

Click!

// change marker position
marker.position(
    new giscloud.LonLat(-8226405, 4966405)
);  

The marker.position() method is also a getter/setter. You can use it to find out marker's current position by invoking it without arguments.

Step 5

The marker still says London. That's not right.

Click here to change marker title and content.

// change marker title
marker.title("New York");

// change marker content
marker.content(
    "New York, USA<br/>New York " +
    "<a target='_blank' href='http://" +
    "en.wikipedia.org/wiki/New_York_City'>" +
    "Wikipedia article</a>."
);  

Notice how the content can be HTML.

The marker.title() and marker.content() methods return marker's title and content respectively when invoked without arguments.

Step 6

The title and the contents have been set.
You can review all relevant code used in these steps in the box below.

Click here to remove the marker and return to step one of the example.

// remove the marker
viewer.removeMarker(marker);