Storing user generated leaflet data to map

Question

We are trying to save user generated markers to our leaflet map. We have the marker information (coordinates, name etc) all stored in our database. We know how to call database info and apply it to our page if it is plain text, but not as a marker to a map. Has anybody had experience with this? sidenote: we are using pug and mongodb.

Answer 1

It does not sound any complicated to write inline JavaScript with pug:

How can I render inline JavaScript with Jade?

Docs: https://pugjs.org/language/plain-text.html#block-in-a-tag

Then follow the Leaflet tutorial to write the appropriate JavaScript to create Markers on a Map.

var map = L.map('map').setView([48.86, 2.35], 11);

L.marker([48.86, 2.35]).addTo(map);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<div id="map" style="height: 180px"></div>

You could translate in pug:

doctype html
html(lang="en")
  head
    link(rel='stylesheet', href='https://unpkg.com/leaflet@1.3.1/dist/leaflet.css')
    script(src='https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js')
    style.
      #map {height: 180px;}
  body
    #map
    script.
      var map = L.map('map').setView([48.86, 2.35], 11);

      L.marker([48.86, 2.35]).addTo(map);

      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);

Interpolation should also work within the script. block (e.g. L.map([#{lat}, #{lng}])), but you might prefer handling arrays / objects, in which case you need unescaped interpolation, with other tools to stringify.

See for example: https://github.com/pugjs/pug/issues/396

!{stringify(variable)}

pug.renderFile('template.pug', {stringify: require('js-stringify')});

(using js-stringify)