We use Swagger UI to automate the visualization of our API documentation.

PLEASE NOTE:You will need to provide your private API key along with your username (email address) the first time you enter the full API documentation page.

Click here to start exploring the documentation.

Eniro-leaflet is a thin wrapper around Leaflet with some additions to simplify the use of Eniro map tiles.

Eniro.map() - A map constructor with the same signature as L.map

map.getEniroLayers() - Return a list of L.TileLayers containing all available Eniro baselayers (map, aerial, hybrid, nautical), which automatically adjust to retina displays, fetches the correct tile version etc.

map.getEniroLayer() - Return one eniro tile layer

A new map event (copyright) to simplify update of copyright texts.

Example code:

In the URL for the Eniro-leaflet script you will need a public key for the 'ref' parameter
Generate a public API key
After generating the key, the example code below will be updated with your personal key

<!DOCTYPE html>
<html lang="sv">
<head>
    <title>eniro-leaflet</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
    <script src="https://api.eniro.com/api/v2.0/map/leaflet/eniro-leaflet-0.5.4.js?ref=ENTER_YOUR_PUBLIC_KEY_HERE" crossorigin=""></script>

    <style>
        html, body {
            margin: 0;
            padding: 0;
        }
        #map {
            width: 500px;
            height: 500px;
        }
        #copyright {
            position: absolute;
            bottom: 0;
            right: 0;
            z-index: 1;
            padding: 5px;
            background: rgba(0, 0, 0, 0.2);
        }
    </style>
    <script>

        window.onload = function () {
            var map = Eniro.map('map', {
                attributionControl: false
            }).setView([59.31566, 18.05955], 5);

            // Set initial copyright text.
            var copyrightText = map.getCopyrightText();
            if (copyrightText) {
                document.getElementById('copyright').innerHTML = copyrightText;
            }

            // Listen for updates to copyright text
            map.on('copyright', function (evt) {
                document.getElementById('copyright').innerHTML = evt.text;
            });

            // Add layer select control
            L.control.layers(map.getEniroLayers(), null, {
                collapsed: false
            }).addTo(map);

            // Add baselayer to map
            map.addLayer(map.getEniroLayer('map'));
        }
    </script>
</head>
<body>
<div id="map">
    <div id="copyright"></div>
</div>
</body>
</html>

Documentation

About Eniro leaflet

Example code: