Map object

Move to section
- Create map object
- Custom integration

Create map object

Leaflet is an open-source JavaScript Library made for fast and lightweight maps. Aside of standard map displaying and data visualization on top of the map, Leaflet offers wide palette of plugins for customized experience.
Well documented library makes it extremely easy to implement Sygic Maps into any web based solution.

Leaflet is continuously updated and developed solution lead by enthusiast in the most recent technology with focus on actual requirements from the market. We do not want to set restrictions on your creativity in terms of working with map. Leaflet and its plugins let you do almost anything with our maps.

Thanks to the Sygic extension library for Leaflet, integration is very easy.

Leaflet CSS style: Include Leaflet CSS file in the head section of your document:

<link rel="stylesheet" href="https://maps.api.sygic.com/js/leaflet/1.0.3/leaflet.css" />
<link rel="stylesheet" href="https://maps.api.sygic.com/js/sygic/1.3.0/leaflet.sygic.css" />

Leaflet library: Include Leaflet JavaScript file. Although Leaflet library is free to download or include from various CDNs, for production use we recommend using only the specific version mentioned by this documentation, and include it directly from Sygic servers:
```
<script src="https://maps.api.sygic.com/js/leaflet/1.0.3/leaflet.js"></script>
```
Sygic extensions library for Leaflet: Include Sygic Maps extensions for Leaflet (important: do not store this file locally; always use reference to Sygic servers):
```
<script src="https://maps.api.sygic.com/js/sygic/1.3.0/leaflet.sygic.js"></script>
```
HTML element to host map: Put a div element with a certain id where you want your map to be:
```
<div id="mapContainer"></div>
```
Example of styling map container element: Make sure the map container has a defined height, for example by setting it in the CSS:
```
#mapContainer { height: 500px; }
```
Creating Leaflet map object: Initialize the Leaflet map object:
```
var map = L.map('mapContainer');
```
Add tile layer to Leaflet map object: To add Sygic Maps raster tile layer to Leaflet map variable named "map", you can call:
```
L.TileLayer.sygic('yourAPIkey').addTo(map);
```

Example of this integration in following code sample - substitute yourAPIkey with a valid API key.

<html>
<head>
<title>Sygic Map integration example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    #mapContainer {
        height: 100%;
        width: 100%;
        padding: 0px;
        margin: 0px;
    }
</style>
<link rel="stylesheet" href="https://maps.api.sygic.com/js/leaflet/1.0.3/leaflet.css" />
<link rel="stylesheet" href="https://maps.api.sygic.com/js/sygic/1.3.0/leaflet.sygic.css" />
</head>
<body>
<div id="mapContainer"></div>

<script src="https://maps.api.sygic.com/js/leaflet/1.0.3/leaflet.js"></script>
<script src="https://maps.api.sygic.com/js/sygic/1.3.0/leaflet.sygic.js"></script>

<script>
    var map = L.map('mapContainer');
    L.TileLayer.sygic('yourAPIkey').addTo(map);

    map.setView([40.7667,-73.9780], 14); // Hello Central Park!
</script>
</body>
</html>

Custom integration

You can also implement Sygic Raster Maps without Leaflet using other JavaScript mapping frameworks, or your custom code in desktop or mobile applications.
In that case your application will have to compose correct URLs for all the tiles needed, download them from Sygic servers and properly cache them to achieve good performance and user experience.

Refer to slippy maps standard for information about the projection (web mercator), tile numbering scheme, etc.

Compose the URLs needed by using this URL template

https://maps.api.sygic.com/tile/{yourAPIkey}/{z}/{x}/{y}

Retrieve the tile files (PNGs) using the composed URLs. Please note that you MUST respect HTTP redirect (302) status codes - all the responses from the API are redirecting to CDN. Also, always use the URL template provided - never link directly to CDN servers from your code - these URLs are short-lived and are subject to change without notice.
Implement appropriate client-side caching for retrieved files. You should respect caching-related HTTP headers from server response, to ensure optimal performance and freshness of map content.

Previous article: Overview
Next article: Map tile layers