Search notes:

Using osmtogeojson to convert an Overpass-API result to GeoJSON

This example build upon making an Overpass API request from a webpage and demonstrates how the XML result of an Overpass API query can be turned into GeoJSON.
<!DOCTYPE html>
<html>
<head>
   <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
   <title>Overpass API request</title>

    <script src='lib/osmtogeojson.js'></script>

    <script>function go() {

       let query = document.getElementById('query').value;

       fetch('https://overpass-api.de/api/interpreter', {
           method : "POST",
           body   :  query
       }).then(r => {

           if (r.status !== 200) {
              alert(r.status);
              return;
           }

           r.text().then(txt => {

               let domParser = new DOMParser ();
               let xml = domParser.parseFromString (txt, 'text/xml');

               let geoson = osmtogeojson(xml, {
                  // Options go here, can be used to filter uninteresting tags etc.
                  // ---
                  // uninterestingTags: {
                  //    "tag_name": true
                  // }
               });
             
               document.getElementById('out').innerText = JSON.stringify(geoson);
           });

       }).catch(e => {
           alert('Request produced an error: ' + e);
       });

    }</script>

</head>
<body>

  <textarea id='query' rows='5' cols='80'>nwr[wikidata = Q65119];
out geom;
</textarea>


   <p><input type='button' value='Go!' onclick='go();'/>

   <p>Query result:<br>
   <div id='out' style='font-family: monospace'></div>

</body>
</html>
Github repository about-Overpass-API, path: /js/osmtogeojson.html

Options

The second parameter in osmtogeojson can be used to set some options, for example to define uninteresting tags.
As per a comment in Stackoverflow, the uninterestingTags option does not affect connected nodes.

See also

Making Overpass-API requests from a webpage
GeoJSON

Links

It looks like the most recent (and readable) version of the sourcecode can be found at https://unpkg.com/osmtogeojson.
A specific (and unreadable) version can be requested with

Index

Fatal error: Uncaught PDOException: SQLSTATE[HY000]: General error: 8 attempt to write a readonly database in /home/httpd/vhosts/renenyffenegger.ch/php/web-request-database.php:78 Stack trace: #0 /home/httpd/vhosts/renenyffenegger.ch/php/web-request-database.php(78): PDOStatement->execute(Array) #1 /home/httpd/vhosts/renenyffenegger.ch/php/web-request-database.php(30): insert_webrequest_('/notes/developm...', 1743436925, '52.15.165.239', 'Mozilla/5.0 App...', NULL) #2 /home/httpd/vhosts/renenyffenegger.ch/httpsdocs/notes/development/OpenStreetMap/API/Overpass/js/osmtogeojson(120): insert_webrequest() #3 {main} thrown in /home/httpd/vhosts/renenyffenegger.ch/php/web-request-database.php on line 78