moderna mapo por la ejo-detala paĝo

interDist · Jul 12, 2018 · 414ffea · 414ffea
1 parent fe8e6f7
commit 414ffea
Show file tree

Hide file tree

Showing 5 changed files with 3,572 additions and 23 deletions.
diff --git a/hosting/templates/hosting/place_detail.html b/hosting/templates/hosting/place_detail.html
@@ -24,10 +24,16 @@
         <link rel="stylesheet" href="{% static 'datepicker/css/datepicker3.min.css' %}">
 {% endblock extra_css %}
 {% block extra_js %}
+        <script src="{% url 'gis_endpoints' %}?format=js"></script>
+        <script src="{% static 'maps/place-map.js' %}"></script>
         <script src="{% static 'datepicker/js/bootstrap-datepicker.min.js' %}"></script>
         <script src="{% static 'datepicker/js/locales/bootstrap-datepicker.eo.js' %}"></script>
         <script src="{% static 'js/ajax.js' %}"></script>
 {% endblock extra_js %}
+{% block extra_head %}
+        <link rel="stylesheet" href="{{ MAPBOX_GL_CSS }}">
+        <script src="{{ MAPBOX_GL_JS }}"></script>
+{% endblock %}
 
 {% block page %}
     {% if view.role == roles.OWNER or user|is_supervisor_of:place %}
@@ -250,7 +256,16 @@ <h3>{% trans "Family members" %}</h3>
 
         <div class="col-xs-12 col-md-6 map">
         {# LOCATION ON WORLD MAP #}
-            <div class="embed-responsive embed-responsive-16by9"> {% comment %} responsive map height with constant ratio to map width {% endcomment %}
+            <div class="embed-responsive embed-responsive-16by9" id="map"
+                 data-marker="{% spaceless %}{% filter force_escape %}
+                        {% if user.is_authenticated and place.location and place.location_confidence > 1 %}
+                            {# "lng": {{ place.lng|unlocalize }}, "lat": {{ place.lat|unlocalize }} #}
+                            { "lng": {{ place.location.x|unlocalize }}, "lat": {{ place.location.y|unlocalize }} }
+                        {% endif %}
+                    {% endfilter %}{% endspaceless %}"
+                 >
+                {% comment %} responsive map height with constant ratio to map width {% endcomment %}
+                <!--
                 <iframe width="100%"
                     frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
                     src="https://www.openstreetmap.org/export/embed.html?bbox={{ place.bbox }}{% spaceless %}
@@ -259,6 +274,7 @@ <h3>{% trans "Family members" %}</h3>
                             {% endif %}
                         {% endspaceless %}">
                 </iframe>
+                -->
             </div>
         </div>
 

diff --git a/maps/static/maps/place-map.js b/maps/static/maps/place-map.js
@@ -0,0 +1,55 @@
+// @source: https://github.com/tejo-esperanto/pasportaservo/blob/master/maps/static/maps/place-map.js
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3
+
+
+window.addEventListener("load", function() {
+
+    var container = document.getElementById('map');
+    var location = container.hasAttribute('data-marker') ? container.getAttribute('data-marker').trim() : '';
+    try {
+        location = location != '' ? JSON.parse(location): undefined;
+    }
+    catch (e) {
+        location = undefined;
+    }
+
+    mapboxgl.setRTLTextPlugin(GIS_ENDPOINTS['rtl_plugin']);
+
+    var map = new mapboxgl.Map({
+        container: 'map',
+        style: GIS_ENDPOINTS['place_map_style'],
+        minZoom: 0.5,
+        maxZoom: 15,
+        zoom: location ? 14 : 0.5,
+        center: location || [-175, 75]
+    });
+
+    map.on('load', function() {
+        var nav = new mapboxgl.NavigationControl();
+        map.addControl(nav, 'top-left');
+
+        if (location) {
+            map.addSource("thisplace", {
+                type: "geojson",
+                data: {"type": "Feature", "geometry": {"type": "Point", "coordinates": [location.lng, location.lat]}}
+            });
+
+            map.addLayer({
+                id: "host-marker",
+                type: "circle",
+                source: "thisplace",
+                paint: {
+                    "circle-color": "#ff7711",
+                    "circle-opacity": 1.0,
+                    "circle-radius": 6,
+                    "circle-stroke-width": 1,
+                    "circle-stroke-color": "#fff"
+                }
+            });
+        }
+    });
+
+});
+
+
+// @license-end