Map Style

The Javascript API provides interfaces for setting the look and feel of the map elements such as the zoom bar and legend.

setStyle()

Sets the style of control elements in the map such as the zoom and legend. Options include the position, size, layout, color, transparency, and more.

Method:
setStyle(style object);

Scope:
F1.Maker.Map

Required Arguments:

Argument	Description	Example
style object	an object with optional settings for zoom or legend controls	{ zoom: {bgColor: 0x92948C, autoHeight: false, height:100, cornerRadius: 5}}

Optional Arguments:

Within the style object there are several optional elements: legend, zoom. Each of these has numerous optional attributes to set specific style parameters.

Legend

• buttonBgColor (_optional_) uint – legend button background color
• buttonBgAlpha (_optional_) Number – legend button opacity (Alpha)
• buttonPlacement (_optional_) String – defines legend button placement – vertical, horizontal
• buttonFontColor (_optional_) uint – legend button font and triangle color
• offset (_optional_) object – defines the distance from the bottom right corner on x and y axis. For example, {x:20,y:0} will move the legend 20 pixels left from the right corner of the stage.
  • x (_required_) Number – offset of x axis
  • y (_required_) Number – offset of y axis

Zoom

• autoHeight (_optional_) : Boolean – When set to true zoom control height changes based on the number of available zoom levels. Use zoomStepHeight parameter to further adjust zoom control height.
• bgAlpha (_optional_) : Number – Background color of zoom control elements. Range: 0-1.
• bgColor (_optional_) : uint – Background opacity of zoom control elements. Use hex 0xFFFFFF format.
• borderColor (_optional_) : uint – Control border. Use hex 0xFFFFFF format.
• dropShadow (_optional_) : Boolean – Drop shadow.
• enabled (_optional_) : Boolean – Disable / Enable zoom control.
• expanded (_optional_) : Boolean – When set to true the control is expanded.
• iconColor (_optional_) : uint – Zoom icon (+)(-) color. Use hex 0xFFFFFF format.
• offset (_optional_) : Point – Offset of x and y axis from the top left corner. In JS use {x:3,y:5}.
• padding (_optional_) : Number – Padding between zoom bar elements.
• snapToZoomLevel (_optional_) : Boolean – When set to true slider snaps to a zoom level.
• width (_optional_) : Number – Width of the scroll track. Width is used to determine size of +- icons.
• height (_optional_) : Number – Scroll track height. Use this only when autoHeight is set to false.
• alpha (_optional_) : Number – Overall opacity of the control. Range: 0-1.
• offset (_optional_) object – defines the distance from the bottom right corner on x and y axis. For example, offset: {x:20,y:0} will move the legend 20 pixels left from the right corner of the stage.
  • x (_optional_) : Number – Position of the control on x axis.
  • y (_optional_) :Number – Position of the control on y axis.
• zoom (_optional_) : int – Current zoom level.
• zoomStepHeight (_optional_) : Number – Works only if autoHeight set to true.
• horizontal (_optional_) : Boolean – Moves (-) button to the right of (+) button. Overrides expanded parameter and sets it to false.
• cornerRadius (_optional_) : Number – Sets corner radius for zoom control.

Returns: (none)

Example:

      mymap.setStyle( { zoom: {bgColor: 0x92948C, autoHeight: false, height:100, cornerRadius: 5}})
      mymap.setStyle( { legend: { buttonBgColor:0x92948C, buttonPlacement:"horizontal", buttonFontColor:0xFFFFFF, buttonBgAlpha:0.7,offset:{x:0,y:95}}});      

// Zoom
  sample_map.setStyle({zoom: {visible: true }});
  sample_map.setStyle({zoom: {visible: false }});

  // Legend
  setStyle({legend:{visible:false})
  setStyle({legend:{expanded:false, visible:true})
  setStyle({legend:{expanded:true, visible:true});

showEmbedWindow()

Creates a light box over the map and displays the embed or link window

Method:
showEmbedWindow(window)

Scope:
F1.Maker.Map

Required Arguments:

Argument	Description	Example
window	if the window should contain a link or an embed code	“link”

Optional Arguments: (none)

Returns: (none)

Example:

mymap.showEmbedWindow("embed");

showControl() DEPRECATED

This method is deprecated – use setStyle instead.

Allows toggling on/off of map control visibility.

Method
showControl(controlName, visibility)

Scope
F1.Maker.Map

Arguments

Required Arguments:

Argument	Description	Example
controlName	which control to show or hide options are Zoom, Layers, Styles, Basemap, Legend, Header	sample_map.showControl(“Zoom”, true);

Optional Arguments:

Argument	Description	Example
visibility	true of visible, false to hide (default: true)	sample_map.showControl(“Zoom”, false);
open	status of legend control if it is open or closed (default: close)	mymap.showControl(“Legend”, true, “close”);

Example

// Zoom
	sample_map.showControl("Zoom", true);
	sample_map.showControl("Zoom", false);
// Layers
	sample_map.showControl("Layers", true);
	sample_map.showControl("Layers", false);
// Styles
	sample_map.showControl("Styles", true);
	sample_map.showControl("Styles", false);
// Basemap
	sample_map.showControl("Basemap", true);
	sample_map.showControl("Basemap", false);
// Legend
	sample_map.showControl("Legend", true, "open");
	sample_map.showControl("Legend", true, "close");
	sample_map.showControl("Legend", false);
// Header
	sample_map.showControl("Header", true);
	sample_map.showControl("Header", false);