#46 Large Map

django_lostplaces/lostplaces/static/main.css

@@ -1701,6 +1701,11 @@ body {
 
 .LP-Map {
   margin-bottom: 25px; }
+  .LP-Map--wide {
+    height: 300px; }
+  .LP-Map--full {
+    height: 100%;
+    width: 100%; }
   .LP-Map .ol-attribution {
     font-family: "Montserrat", Helvetica, sans-serif;
     color: #565656; }

django_lostplaces/lostplaces/templates/global.html

@@ -50,7 +50,7 @@
                 <ul class="LP-Menu__List">
                     <li class="LP-Menu__Item"><a href="{% url 'lostplaces_home' %}" class="LP-Link"><span class="LP-Link__Text">{% trans 'Home' %}</span></a></li>
                     <li class="LP-Menu__Item"><a href="{% url 'flatpage' slug='codex' %}" class="LP-Link"><span class="LP-Link__Text">{% trans 'UrBex Codex' %}</span></a></li>
-
+                    <li class="LP-Menu__Item"><a href="{% url 'osm' %}" class="LP-Link"><span class="LP-Link__Text">{% trans 'Map' %}</span></a></li>
                     {% block additional_menu_items %}
                     {% endblock additional_menu_items %}
 

django_lostplaces/lostplaces/templates/home.html

@@ -15,7 +15,7 @@
 <article class="LP-TextSection">
 </article>
 
-{% include 'partials/osm_map.html' with config=mapping_config %}
+{% include 'partials/osm_map.html' with config=mapping_config modifier='wide' %}
 <div class="LP-PlaceGrid">
     <h1 class="LP-Headline LP-Headline">{% trans 'Explore the latest places' %}</h1>
     <ul class="LP-PlaceGrid__Grid">

django_lostplaces/lostplaces/templates/osm_map_full.html

@@ -0,0 +1,16 @@
+{% extends 'global.html'%}
+
+{% load static %}
+{% load i18n %}
+{% block additional_head %}
+<link rel="stylesheet" href="{% static 'maps/ol.css' %}" type="text/css">
+<script src="{% static 'maps/ol.js' %}"></script>
+{% endblock additional_head %}
+
+# {% block title %}{% trans 'Map' %}{% endblock %}
+
+{% block maincontent %}
+
+{% include 'partials/osm_map.html' with config=mapping_config modifier='full' %}
+
+{% endblock maincontent %}

django_lostplaces/lostplaces/templates/partials/osm_map.html

@@ -1,5 +1,5 @@
 {% load static %}
-<div tabindex="1" id="map" class="LP-Map map" style="height: 300px"></div>
+<div tabindex="1" id="map" class="LP-Map {% if modifier %}LP-Map--{{modifier}}{% endif %} map"></div>
     <div id="info" class="map-popup LP-Map__Popup"></div>
 
         <script type="text/javascript">

django_lostplaces/lostplaces/templates/place/place_detail.html

@@ -44,7 +44,7 @@
 
     <section class="LP-Section">
         <h1 class="LP-Headline">{% trans 'Map links' %}</h1>
-        {% include 'partials/osm_map.html' with config=mapping_config%}
+        {% include 'partials/osm_map.html' with config=mapping_config modifier='wide' %}
         <div class="LP-LinkList">
             <ul class="LP-LinkList__Container">
                 <li class="LP-LinkList__Item"><a target="_blank" href="https://www.google.com/maps?q={{place.latitude|safe}},{{place.longitude|safe}}" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>

django_lostplaces/lostplaces/templates/place/place_list.html

@@ -11,7 +11,7 @@
 
 {% block maincontent %}
 
-{% include 'partials/osm_map.html' with config=mapping_config %}
+{% include 'partials/osm_map.html' with config=mapping_config modifier='wide' %}
 <div class="LP-PlaceList">
     <h1 class="LP-Headline">{% trans 'Our lost places' %}</h1>
     <ul class="LP-PlaceList__List">

django_lostplaces/lostplaces/urls.py

@@ -18,7 +18,8 @@ from lostplaces.views import (
     PlaceImageCreateView,
     PlaceImageDeleteView,
     FlatView,
-    ExplorerProfileView
+    ExplorerProfileView,
+    OSMMapView
 )
 
 urlpatterns = [
@@ -41,7 +42,8 @@ urlpatterns = [
     path('explorer/<int:explorer_id>/', ExplorerProfileView.as_view(), name='explorer_profile'),
     
     path('explorer/favorite/<int:place_id>/', PlaceFavoriteView.as_view(), name='place_favorite'),
-    path('explorer/unfavorite/<int:place_id>/', PlaceUnfavoriteView.as_view(), name='place_unfavorite')
+    path('explorer/unfavorite/<int:place_id>/', PlaceUnfavoriteView.as_view(), name='place_unfavorite'),
+    path('osm/', OSMMapView.as_view(), name='osm')
     
     
 ]

django_lostplaces/lostplaces/views/views.py

@@ -88,3 +88,14 @@ def FlatView(request, slug):
         return render(request, 'flat/' + slug + '-de' + '.html')
     else:
         return render(request, 'flat/' + slug + '.html')
+        
+class OSMMapView(IsAuthenticatedMixin, View):
+    def get(self, request):
+        place_list = Place.objects.all()
+        context = {
+            'mapping_config': {
+                'all_points': place_list,
+                'map_center': Place.average_latlon(place_list)
+            }
+        }
+        return render(request, 'osm_map_full.html', context)