Tutorial para la Visualización de Coordenadas en la Web con Node.js y Leaflet

Node.js es una herramiente potente para el diseño web, a ello se le suman las herramientas que lo complementan como HTML y CSS, siendo estas indispensables para la visualización web, a esto se le han añadido variedad de librerías que expanden las posibilidades de desarrollo tales como Leaflet.

Leaflet es una librería interactiva para el desarrollo de mapas, contiene variedad de herramientas para el diseño de mapas, en este tutorial se le presentará como ubicar coordenadas en Leaflet y la adición de un mapa base.

Tutorial

Script

• app.js

var express = require("express");
var app = express();

app.set("view engine", "jade");

app.get("/", function(req,res){
  res.render("index");
});

app.listen(8080);

• index.jade

doctype doctype
html(lang='en')
  head
    meta(charset='utf-8')
    title Gidahatari
    script(src='https://unpkg.com/leaflet@1.3.1/dist/leaflet.js', integrity='sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==', crossorigin='')
    link(rel='stylesheet', href='https://unpkg.com/leaflet@1.3.1/dist/leaflet.css', integrity='sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==', crossorigin='')
    style.
      #map{width: 900px; height: 600px}
  body
    #map
      script.
        var map = L.map("map").setView([42.35, -71.08], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        {
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> ',
        maxZoom: 18,
        minZoom: 9,
        }).addTo(map);