Create custom control

Copy
<!DOCTYPE html>
<html>
  <head>
    <title>Create custom control</title>
    <script src="https://maps.cercalia.com/maps/loader.js?key=YOUR_API_KEY&v=5&lang=en&theme=1976d2"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      document.addEventListener('cercalia-ready', initMap);

      var map;

      function initMap() {
        map = new cercalia.Map({
          target:'map',
          controls: []
        });

        var customControl = new cercalia.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: function() {
            var lon = 0 - Math.random();
            var lat = 41 - Math.random();
            var position = new cercalia.LonLat(lon, lat);
            var marker = new cercalia.Marker({
              position: position
            });
            map.addMarker(marker);
            map.setCenter(position, 12);
          }
        });

        map.addCustomControl(customControl, 0);
      }
    </script>
  </body>
</html>