Adding a Layers Panel Widget


Level of Experience Basic
Requirements An embedded map
Time Required 15 min
Source Code https://github.com/mapworksio/layers-panel-widget

Overview

Mapworks has a library of built-in widgets that can be added, removed, or modified depending on your application. This tutorial details the steps in adding a Layers Panel widget. The Layers Panel widget shows the list of layers that a map has. You can also add and remove layers from the Layer Library, configure and style layers as you wish. Before reading any further, make sure to check out API Getting Started as the tutorial below assumes that you have a basic map already set up.

Step 1: Initial setup

Firstly, we need to set up a listener to listen when the map is ready. This is where all the widgets will be initialised.

map.once('ready', function() {
	
});

This is optional, but if you'd like to set the center of the map to a specific location, use Studio.core.Map.setViewCenter(x, y, scale).

map.once('ready', function() {
	map.setViewCenter(115.8829345703125, -31.93165504377296, 5000);
});

Step 2: Create Layers Panel, Tabs and Toolbar

Next, we need to create the Layers Panel component and pass in the map object.

map.once('ready', function() {
	map.setViewCenter(115.8829345703125, -31.93165504377296, 5000);
	
	var layerPanel = new Studio.app.component.layers.LayersPanel({
		map: map // Pass in the map object
	}).render();
});

Mapworks has a built-in Toolbar component. Toolbar contains a collection of Tabs, where we can attach the Layers Panel widget to. Initialise the Studio.app.component.tab.Collection object and pass in an array of Studio.app.component.panel.tab.Model object to it. For now we will only create one tab where we can plug the Layers Panel widget to.

map.once('ready', function() {
	map.setViewCenter(115.8829345703125, -31.93165504377296, 5000);
	
	var layerPanel = new Studio.app.component.layers.LayersPanel({
		map: map
	}).render();
 
	var tabs = new Studio.app.component.panel.tab.Collection([
		new Studio.app.component.panel.tab.Model({
   				id: 'layers', // Must be unique
				title: 'Layers', // Shown on the tab
				iconClass: 'studio-icon studio-layers', // CSS Class for the icon
   				view: layerPanel // Layers Panel component
		}),
	]);
});

Next, we need to create the Toolbar object for our tabs to be attached to.

map.once('ready', function() {
	map.setViewCenter(115.8829345703125, -31.93165504377296, 5000);
	
	var layerPanel = new Studio.app.component.layers.LayersPanel({
		map: map
	}).render();
 
	var tabs = new Studio.app.component.panel.tab.Collection([
		new Studio.app.component.panel.tab.Model({
   				id: 'layers', 
				title: 'Layers',
				iconClass: 'studio-icon studio-layers',
   				view: layerPanel // LayersPanel component
		}),
	]);
 
	var toolbar = new Studio.app.control.toolbar.Toolbar({
		collection: tabs,
		margin: false, 
		region: "leftBar",
		numFloatBotTab: 1
	});
});

Step 3: Register Toolbar to Map

Lastly, register the toolbar to the map. This essentially makes the toolbar visible.

See Studio.core.Map.addControl(control, [options]) and Studio.core.Map.removeControl(name).

map.once('ready', function() {
	map.setViewCenter(115.8829345703125, -31.93165504377296, 5000);
	
	var layerPanel = new Studio.app.component.layers.LayersPanel({
		map: map
	}).render();
 
	var tabs = new Studio.app.component.panel.tab.Collection([
		new Studio.app.component.panel.tab.Model({
   				id: 'layers', 
				title: 'Layers', 
				iconClass: 'studio-icon studio-layers',
   				view: layerPanel 
		}),
	]);
 
	var toolbar = new Studio.app.control.toolbar.Toolbar({
		collection: tabs ,
		margin: false, 
		region: "leftBar",
		numFloatBotTab: 1
	});
 
	map.addControl(toolbar); // Render the toolbar. Use map.removeControl(toolbar) to remove it.
});

Here's the final outcome:

See the Pen Adding a Layers Panel widget by Mapworks (@mapworks) on CodePen.

Next: Feature Creation and Dynamic Layer Styling