mapmakr/mapmakr/static/js/mapmakr.js

let map, drawnItems, drawControl, currentLayer, editModal, editForm;


function reloadMap() {
  fetch("/marker").then(response => response.json()).then(markers => {
    let markerBounds = new L.LatLngBounds();
    drawnItems.clearLayers();
    markers.forEach(marker => {
      let mapMarker = L.marker({"lat": marker.latitude, "lng": marker.longitude});
      mapMarker.options["id"] = marker.id;
      mapMarker.options["title"] = marker.name;
      for (const opt in marker.options) {
        mapMarker.options[opt] = marker.options[opt];
      }
      // mapMarker.bindTooltip(marker.name, {noHide: true});
      mapMarker.bindPopup(marker.name);
      drawnItems.addLayer(mapMarker);
      markerBounds.extend(mapMarker.getLatLng());
    });
    if (!drawControl) {
	    // add drawControl only after some drawnItems exist, so
	    // it is not shown disabled
	    drawControl = new L.Control.Draw({
        draw: {
          position: 'topleft',
          polygon: false,
          rectangle: false,
          polyline: false,
          circle: false
        },
        edit: {
          featureGroup: drawnItems
        }
      });
      map.addControl(drawControl);
    }
    map.fitBounds(markerBounds);
  });
}

function setupMap() {
  L.AwesomeMarkers.Icon.prototype.options.prefix = 'bs';

  editForm = document.getElementById('edit-form');
  let editModalDiv = document.getElementById('edit-modal');
  editModal = new bootstrap.Modal(editModalDiv);
  editModalDiv.addEventListener('hidden.bs.modal', () => editForm.reset());

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

  map = new L.Map('mapmakr', {layers: [osm], attributionControl: false, center: new L.LatLng(0, 0), zoom: 5});

  drawnItems = new L.MarkerClusterGroup({maxClusterRadius: 45});
  map.addLayer(drawnItems);
  reloadMap();

  const refreshButton = new L.easyButton('bi bi-arrow-clockwise', function() {reload_map();});
  refreshButton.button.style.fontSize = '18px';
  map.addControl(refreshButton);

  // const helpButton = new L.easyButton('icon ion-help-circled', function() {open("about.html");});
  // helpButton.button.style.fontSize = '18px';
  // map.addControl(helpButton);

  const controlSearch = new L.Control.Search({layer: drawnItems, propertyName: 'id', initial: false, zoom: 12});
  map.addControl(controlSearch);

  statsControl = new L.control.attribution({position:'bottomright', prefix:''});
  map.addControl(statsControl);

  scaleControl = new L.control.scale();
  map.addControl(scaleControl);

  terminator = new L.terminator();
  terminator.options.opacity = 0.2;
  terminator.options.fillOpacity = 0.2;
  terminator.addTo(map);
  setInterval(() => updateTerminator(terminator), 60000); // 1 minute

  function updateTerminator(t) {
    var t2 = L.terminator();
    t.setLatLngs(t2.getLatLngs());
    t.redraw();
  }

  // called after new marker is created
  map.on('draw:created', function (e) {
    let type = e.layerType, layer = e.layer;
    if (type !== 'marker') {
      return;
    }

    currentLayer = layer;
    editModal.show();
  });

  map.on('draw:edited', function (e) {
    e.layers.eachLayer(layer => {
      let type = layer.layerType, id = layer.options.id;
      currentLayer = layer;
      $("#edit-form").modal();
    });
  });

  map.on('draw:deleted', function (e) {
    e.layers.eachLayer(layer => {
      let type = layer.layerType, id = layer.options.id;
      fetch("/marker/" + id, {method: "DELETE"}).then(() => reloadMap());
    });
  });

  document.getElementById("marker-save").addEventListener("click", (event) => {
    event.preventDefault();
    let name = document.getElementById("marker-name").value;
    const markerAttributes = {
      "name": name,
      "latitude": currentLayer.getLatLng()["lat"],
      "longitude": currentLayer.getLatLng()["lng"],
      "options": {}
    };
    if (name) {
      currentLayer.options.title = name;
      currentLayer.bindPopup(name);
      drawnItems.addLayer(currentLayer);
      let requestOptions = {
        headers: {
          "Accept": "application/json",
          "Content-Type": "application/json"
        },
        body: JSON.stringify(markerAttributes)
      };
      if (currentLayer.options.id) {
        requestOptions["method"] = "PATCH";
        fetch("/marker/" + currentLayer.options.id, requestOptions).then(() => reloadMap());
      }
      else {
        requestOptions["method"] = "POST";
        fetch("/marker", requestOptions).then(() => reloadMap());
      }
    }
    editModal.hide();
    return false;
  });
}