Friday, June 16, 2017

Generate Map from Lat/Lng

Use node.js to run the 'hello world' app of the Leaflet web mapping Javascript library.

Create a folder, install the leaflet GIS library code using npm, add the two source files from below and then start the server and open the URL in your browser. 


<html>
<!-- index.html -->
<head>
    <link rel='stylesheet' href='src/leaflet/leaflet.css' />
    <script src='src/leaflet/leaflet.js' type='text/javascript'></script>
    <style type="text/css">
        html,
        body {
            height: 100%;
            overflow: hidden;
        }
        
        #map {
            height: 100%;
        }
    </style>
</head>

<body>
    <div id='map'></div>
    <script>
        var map = new L.Map('map', {
            center: [37.770, -122.41],
            zoom: 10
        });

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

    </script>
</body>

</html>

//server.js
var connect = require('connect');
var serveStatic = require('serve-static');
connect().use(serveStatic(__dirname)).listen(8080, function() {
    console.log('Server running on 8080...');
});
at