0

I'm new in js. So I installed node.js.

What I have: I have html file which opens a map in the browser. When user right click it should create txt file and write 'Learning how to write in a file' in it, but it doesn't.

<!DOCTYPE html>
<head>    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script>
        L_NO_TOUCH = false;
        L_DISABLE_3D = false;
    </script>
    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.5.1/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.5.1/dist/leaflet.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
    <link rel="stylesheet" href="https://rawcdn.githack.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css"/>
    <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
    <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
        <meta name="viewport" content="width=device-width,
                initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <style>
            #map_fc81479c2a8c4f18ad55baf3c9ba4285 {
                position: relative;
                width: 100.0%;
                height: 100.0%;
                left: 0.0%;
                top: 0.0%;
            }
        </style> 

    <script src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script>
</head>

<body>    
    <div class="folium-map" id="map_fc81479c2a8c4f18ad55baf3c9ba4285" ></div>    
</body>

<script>    
    var map_fc81479c2a8c4f18ad55baf3c9ba4285 = L.map(
        "map_fc81479c2a8c4f18ad55baf3c9ba4285",
        {
        center: [55.02111, 73.40751],
        crs: L.CRS.EPSG3857,
        zoom: 13,
        zoomControl: true,
        preferCanvas: false,
        }
        );
        var tile_layer_216c8662dc00405dba72c81174fd5845 = L.tileLayer(
            "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            {"attribution": "Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eODbL\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
            ).addTo(map_fc81479c2a8c4f18ad55baf3c9ba4285);


    var lat, lng;

    map_fc81479c2a8c4f18ad55baf3c9ba4285.addEventListener('mousemove', function(ev) {
        lat = ev.latlng.lat;
        lng = ev.latlng.lng;
    });

    document.getElementById("map_fc81479c2a8c4f18ad55baf3c9ba4285").addEventListener("contextmenu", function (event) {
    // Prevent the browser's context menu from appearing
    event.preventDefault();
    alert(lat + ' - ' + lng);
    return false; // To disable default popup.
});

// Trying to save to text file
// !!!
// !!!
// !!!
// does not work : 

const fs = require('fs') 

let data = "Learning how to write in a file."

fs.writeFile('Output.txt', data, (err) => {
    if (err) throw err; 
}) 

</script>

and if I open console in the browser it shows me: enter image description here

85 raw : const fs = require('fs')

But if I run code which should create a file in a separate js file - it creates good.

What should I do for it to create file when user right click on a map?

Edit 1:

Added script and still does not work

<script src="https://requirejs.org/docs/release/2.3.6/minified/require.js"> 
</script>

enter image description here

  • Possible duplicate of [Javascript require() function giving ReferenceError: require is not defined](https://stackoverflow.com/questions/23603514/javascript-require-function-giving-referenceerror-require-is-not-defined) – Sebastian Simon Nov 24 '19 at 15:32
  • @SebastianSimon see edit 1. I add require.js my code as they write but it returns an error –  Nov 24 '19 at 15:38
  • Where is it included? And where exactly is the script using `require` located? It can’t be after `

    ` since that’s invalid. You can’t write to a file from a browser anyway.

     – Sebastian Simon Nov 24 '19 at 15:39
  • Is any ways to create such a file or send text to it possible? Included before –  Nov 24 '19 at 15:41
  • Put all your custom script before `` closing and after all external script includes – Thanh Trung Nov 24 '19 at 15:48
  • 2
    JS alone can't write file txt itself and save to user PC, you need user action such as "Click to download file" – Thanh Trung Nov 24 '19 at 15:50
  • Does this answer your question? [JavaScript: Create and save file](https://stackoverflow.com/questions/13405129/javascript-create-and-save-file) – Alon Eitan Nov 24 '19 at 19:04
  • So all the comments so far seem to ignore this **very common confusion** that exists here. Javascript is a *Language*; Node.js and your browser are two different *Environments* that the language can run in. You can't do everything in the browser that Node.js can do (like using require and accessing the file system), nor can you do everything in Node that you can do in a browser (using a DOM to draw objects on the screen). You can, however, ***have two different Javascript programs that talk to each other*** to accomplish their goals together. – Claies Nov 24 '19 at 19:09

1 Answers1

0

JavaScript is a browser based language for web. You cannot do anything outside the browser environment. Browsers don't give acess to the file system and other modules.

This is the issue that Node js solved. If you want to acess file system using javascript, I'll suggest to create an express web app using Node as backend allowing you to write into files and much more.

Feel free to Google Node and Express you'll get many examples online.

Hope this helps...

Nick
  • 179
  • 1
  • 10