feat(apis_entites): introduce js and css for showing a popover map

This javascript and css file provide functions to show a map in a
popover html element. The element is placed near the element and uses
the elements data-latitude and data-longitude parameters for showing a
marker on the map.
This can be used in lists of entities with location information.

apis_core/apis_entities/static/css/E53_Place_popover.css

@@ -0,0 +1,4 @@
+#popovermap {
+  width: 500px;
+  height: 500px;
+}

apis_core/apis_entities/static/js/E53_Place_popover.js

@@ -0,0 +1,40 @@
+/*
+ * show a map in a popover
+ */
+function showMap(element) {
+    document.querySelectorAll(".popovermap").forEach(el => el.remove());
+
+    let map;
+
+    let rect = element.getBoundingClientRect();
+    let pTop = rect.top + window.scrollY - 250;
+    let pLeft = rect.left + window.scrollX - 550;
+
+    let mapDiv = document.createElement("div");
+    mapDiv.classList.add("popovermap");
+    mapDiv.setAttribute("id", "popovermap");
+
+    mapDiv.style.position = "absolute";
+    mapDiv.style.top = pTop + "px";
+    mapDiv.style.left = pLeft + "px";
+
+    document.body.appendChild(mapDiv);
+
+    if (typeof map !== "undefined") {
+        map.off();
+        map.remove();
+    }
+
+    map = L.map('popovermap', {
+        center: [parseInt(element.dataset.latitude), parseInt(element.dataset.longitude)],
+        zoom: 5
+    });
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(map);
+    L.marker([parseInt(element.dataset.latitude), parseInt(element.dataset.longitude)]).addTo(map);
+}
+
+function delMap(element) {
+    document.querySelectorAll(".popovermap").forEach(el => el.remove());
+}

apis_core/core/templates/base.html

@@ -47,13 +47,15 @@
     {% block styles %}
       <link href="{% static 'css/material-symbols.css' %}" rel="stylesheet" />
       <link href="{% static 'css/core.css' %}" rel="stylesheet" />
+      <link href="{% static 'css/E53_Place_popover.css' %}" rel="stylesheet" />
       <link rel="stylesheet"
             href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css" />
       {% include "partials/bootstrap4_css.html" %}
     {% endblock styles %}
 
     {% block scriptHeader %}
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+      <script src="{% static 'js/E53_Place_popover.js' %}"></script>
       {% include "apis_entities/apis_templatetag.html" %}
     {% endblock %}