Targomo Basemaps

With leaflet, you can get the basemaps a couple of ways:

One single basemap

// what is available ?
console.log(r360.getBasemapList());
// let's go with 'basic'
r360.basemap({ style: 'basic', apikey: '<your service key>' }).addTo(map);

All basemaps

var basemaps = r360.basemaps('<your service key>');
// add the map and set the initial center to berlin
var map = L.map('map', {
    layers: [basemaps.basic] // starting basemap
}).setView([52.51, 13.37], 14);
Targomo Basemaps

use basemaps in layer control

GET YOUR FREE API KEY to use this example
reload
open in new tab
copy HTML
hide code
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <!--  Include leaflet javascript and css -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" crossorigin="">
  <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js" crossorigin=""></script>
  <!--  Include r360.js -->
  <script src="https://releases.route360.net/r360-js/latest.js"></script>
  <style>
    html, body { width: 100%; height: 100%; margin: 0; }
    #map { width: 100%; height: 100%; }
  </style>
</head>

<body>
  <!--  where the map will live  -->
  <div id="map"></div>
  
  <script>
    // create config for layers control
    var basemaps = r360.basemaps('__APIPLACEHOLDER__')

    // add the map and set the initial center to berlin
    var map = L.map('map', {
        layers: [basemaps.basic] // starting basemap
    }).setView([52.51, 13.37], 14);

    // add layer control to map
    L.control.layers(basemaps).addTo(map);
  </script>
</body>
</html>