Untitled

<!DOCTYPE html>
<html>

  <head>
    <link data-require="leaflet@*" data-semver="1.0.3" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
    <script data-require="leaflet@*" data-semver="1.0.3" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div id=map></div>
  </body>

</html>

let map;
const baseUrl = 'https://giluifm80f.execute-api.us-west-2.amazonaws.com/dev/overPassGeoJson'
const query = `[out:json][timeout:25];
(
  node['place'='state']["name"="Berlin"];
);
out;`
const queryParams = '?data=' + encodeURIComponent(query)

function loadData(){
  fetch(`${baseUrl}/${queryParams}`)
  .then(function(response) {
    return response.json();
  })
  .then(function(json) {
    // No conversion! 🎉
    const geoJsonLayer = L.geoJSON(json)
    geoJsonLayer.addTo(map);
    map.fitBounds(geoJsonLayer.getBounds());
    map.setZoom(12);
  });
}

function createMap(){
  map = L.map('map');
  L.tileLayer('http://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}', {
  	maxZoom: 18,
  	attribution: 'Imagery from <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
  }).addTo(map);
}

function init(){
  createMap();
  loadData();
}

window.setTimeout(init, 0);

html, body, #map {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: lightgray;
}