Extensions and Controls

Sintium objects can be extended with additional functionality, and Sintium ships with several useful extensions. In this example a layer switcher and location extension is added to the map. The layer switcher appears as a slide out sidebar menu in the map, and allows users to toggle visibility of layers or groups of layers, as well as toggle layer options. The location switcher allows user to move to a selected location on the map. 
// Instantiating world map base layers
var lightBaseLayer = Sintium.baseLayer({
    layerId: "World Map Light",
    layer: Sintium.getDefaultLightTileLayer()
});

var darkBaseLayer = Sintium.baseLayer({
    layerId: "World Map Dark",
    layer: Sintium.getDefaultDarkTileLayer()
});

var waterColorBaseLayer = Sintium.baseLayer({
    layerId: "World Map Water Color",
    layer: Sintium.createXYZLayerFromSource("http://{a-c}.tile.stamen.com/watercolor/{z}/{x}/{y}.png"),
});

// Instantiating data source with tools data
var toolsSource = Sintium.dataSource({
    url: "https://www.barentswatch.no/api/v1/geodata/download/fishingfacility/?format=JSON"
});

// Instantiating layer with fishing tools data
var toolsLayer = Sintium.vectorLayer({
    layerId: 'Tools layer',
    dataSource: toolsSource,
    clustered: true,
    styleFunction: Sintium.generateTriangleClusterStyle(17, "#192a56", "#294d88")
});

// Instantiating data source with boundaries data
var boundariesSource = Sintium.dataSource({
    url: "https://www.barentswatch.no/api/v1/geodata/download/maritimeboundary/?format=JSON",
});

// Instantiating layer with boundaries data
var bordersLayer = Sintium.vectorLayer({
    layerId: "Maritime boundaries",
    dataSource: boundariesSource
});

// Instantiate layer switcher extension
var layerSwitcher = Sintium.sidebarLayerSwitcher({
    position: "left"
});

// Instantiate location switcher extension
var locationSwitcher = Sintium.selectLocationSwitcher({
    domId: "goto",
    transition: "fly-to",
    locations: [
        Sintium.mapLocation("London", [-0.12755, 51.507222], 8),
        Sintium.mapLocation("Moscow ", [37.6178, 55.7517], 8),
        Sintium.mapLocation("Istanbul", [28.9744, 41.0128], 8),
        Sintium.mapLocation("Rome", [12.5, 41.9], 8),
        Sintium.mapLocation("Bern", [7.4458, 46.95], 8)
    ]
});
    
// Instantiating map
var map = Sintium.map({
    domId: "map",
    layers: [lightBaseLayer, darkBaseLayer, waterColorBaseLayer, bordersLayer, toolsLayer],
    extensions: [layerSwitcher, locationSwitcher],
    zoomOnClusterClick: true
});

<div id="map" style="width: 100%; height: 500px;"></div>
<div id="goto" style=""></div>