Cercalia API GL

Class: Custom

cercaliagl.control/Custom

Javascript ES5

const control = new cercaliagl.control.Custom({ ... }); // see below

Provides a custom control to create an additional button in buttons bar. Use provides a SVG path to draw an icon. This icon should be respect the style and it will adopt the theme color of map.

The control can have one or two states providing `twoState` option.
A callback function `clickFunction` is called when button is clicked and the state can be accessed throught module:cercaliagl/control/Custom~Custom#isEnabled method.

const map = new cercaliagl.Map({
  target: 'map',
  controls: [],
});
map.whenReady(() => {
  const customControl = new cercaliagl.control.Custom({
    svgPath: 'M16.84,2.73C16.45,2.73 16.07,2.88 15.77,3.17L13.65,5.29L18.95,10.6L21.07,8.5C21.67,7.89 21.67,6.94 21.07,6.36L17.9,3.17C17.6,2.88 17.22,2.73 16.84,2.73M12.94,6L4.84,14.11L7.4,14.39L7.58,16.68L9.86,16.85L10.15,19.41L18.25,11.3M4.25,15.04L2.5,21.73L9.2,19.94L8.96,17.78L6.65,17.61L6.47,15.29',
    title: 'Custom control tittle',
    twoState: true,
    clickFunction: () => {
      const lon = 0 - Math.random();
      const lat = 41 - Math.random();
      const position = new cercaliagl.LonLat(lon, lat);
      const marker = new cercaliagl.Marker({ position });
      map.addMarker(marker);
      map.setCenter(position, 12);
    }
  map.addCustomControl(customControl, 0);
});

new Custom(options) control/Custom.js, line 61

Name Type Description

options

Options.

Name	Type	Description
`svgPath`	string \| undefined	String with SVG path. `https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path`. Programs as Adobe Illustrator can generate icons done with SVG. Default: `M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z`. If you need help, you can send us which icon you want to convert to SVG.
`clickFunction`	function \| undefined	Function to execute on click the control.
`name`	string \| undefined	Control name. You can get this control throught `getControlByName` method from `cercalia.Map` class.
`title`	string \| undefined	Tooltip. Default '' (empty).
`twoState`	boolean \| undefined	Two state button if `true`. Default `false`. In callback function you can get its state using `isEnabled()` function.