Index

CERCALIA API GL - 1.0

The CERCALIA GL API is developed on Maplibre GL taking advantage of all performance and features which offers us. This version has many new features, but the prominent are:

  • Vector Tiles for base layers
  • Custom map styling: It is possible to edit map styles, such as change colors, show or hide map elements because all of map elements are in vectorial now
  • 3D navigation. Map includes now pitch and in closest zooms is possible to display 3D buildings and detailed 3D models for some known buildings
  • Alternative routing calculation
  • Best performance to draw on map more features

The programming style with which you will work will be very similar to the previous API v5. 

  <!DOCTYPE html>
<html>
<head>
  <title>Cercalia API</title>
  <link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

  <style>
    html, body, #map{
      margin: 0;
      width: 100%;
      height: 100%;
    }
  </style>
  <link rel="stylesheet" type="text/css" href="//maps.cercalia.com/gl/v1.0/cercaliagl.css">
  <script src="//maps.cercalia.com/gl/v1.0/cercaliagl.js?key=APIKEY"></script>
  <script>
  const map = new cercaliagl.Map({
    target: 'map'
  });

  // Define a callback function. When map is ready this callback function will be called.
  map.whenReady(function() {
    const marker = new cercaliagl.Marker({
      position: new cercaliagl.LonLat(1.4314, 41.4310),
      label: new cercaliagl.Label({ text: 'Marker example' })
    })
    map.addMarker(marker);
  });
  </script>
</head>
<body>
  <div id="map"></div>
</body>
</html>