Skip to content

Commit

Permalink
add map in cafe
Browse files Browse the repository at this point in the history
  • Loading branch information
giannistolou committed Sep 25, 2024
1 parent 9008dc2 commit 752faf9
Show file tree
Hide file tree
Showing 2 changed files with 166 additions and 114 deletions.
268 changes: 154 additions & 114 deletions findBookCafe/templates/cafe.html
Original file line number Diff line number Diff line change
@@ -1,119 +1,159 @@
<html>
<head>
{% load static %} {% include "commonHead.html" %}
<title>{{cafe.name}} | Book Cafe</title>
<meta
name="keywords"
content="book, books, reading, βιβλίο, βιβλία, διάβασμα, social media, book cafe, cafe, ες, βιβλιοθήκη,
<head>
{% load static %} {% include "commonHead.html" %}
<title>{{cafe.name}} | Book Cafe</title>
<meta
name="keywords"
content="book, books, reading, βιβλίο, βιβλία, διάβασμα, social media, book cafe, cafe, ες, βιβλιοθήκη,
βιβλιοθήκες, library, libraries"
/>
<meta
name="description"
content="Βρες το book cafe ή την βιβλιοθήκη που σου ταιριάζει για διάβασμα ή δουλειά!"
/>
<meta property="og:title" content="{{cafe.name}} | Book Cafe" />
{% if cafe.type == 'CAF' %}
<link
rel="canonical"
href="https://cafe.book-community.com/cafes/{{cafe.region.city.slug}}/{{cafe.region.slug}}/{{cafe.slug}}/"
/>
<meta
property="og:url"
content="https://cafe.book-community.com/cafes/{{cafe.region.city.slug}}/{{cafe.region.slug}}/{{cafe.slug}}/"
/>
{% else %}
<meta
property="og:url"
content="https://cafe.book-community.com/libraries/{{cafe.region.city.slug}}/{{cafe.region.slug}}/{{cafe.slug}}/"
/>
<link
rel="canonical"
href="https://cafe.book-community.com/libraries/{{cafe.region.city.slug}}/{{cafe.region.slug}}/{{cafe.slug}}/"
/>
{% endif %}
<link rel="stylesheet" href="{% static 'style/cafe.css' %}" />
<script src="{% static 'bundle.js' %}" async></script>
</head>
/>
<meta
name="description"
content="Βρες το book cafe ή την βιβλιοθήκη που σου ταιριάζει για διάβασμα ή δουλειά!"
/>
<meta property="og:title" content="{{cafe.name}} | Book Cafe" />
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""
/>
<script
src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""
></script>

<body>
{% include "header.html" %}
<main class="mdc-top-app-bar--fixed-adjust">
<div class="container bottomSpace">
<section class="cafe">
<div class="imgCnt">
<h1 class="name">{{cafe.name}}</h1>
<img
src="https://cafe.book-community.com/media/{{cafe.thumbnail}}"
alt="thumbnail {{cafe.name}}"
/>
</div>
<div class="selection">
{% if cafe.facebook %}
<a href="{{cafe.facebook}}" target="_blank" class="icon plausible-event-name=cafeFacebookIcon"
>{% include "icons/facebook.html" %}</a
>
{% endif %} {% if cafe.googleMaps %}
<a
href="{{cafe.googleMaps}}"
class="icon plausible-event-name=cafeGoogleMapsIcon"
target="_blank"
>
{% include "icons/google.html" %}
</a>
{% endif %} {% if cafe.instagram %}
<a
href="{{cafe.instagram}}"
class="icon plausible-event-name=cafeInstagramIcon"
target="_blank"
>
{% include "icons/instagram.html" %}</a
>
{% endif %} {% if cafe.tripadvisor %}
<a
href="{{cafe.tripadvisor}}"
class="icon plausible-event-name=cafeTripadvisorIcon"
target="_blank"
>
{% include "icons/map.html" %}
</a>
{% endif %} {% if cafe.website %}
<a href="{{cafe.website}}" class="icon plausible-event-name=cafeWebsiteIcon" target="_blank">
{% include "icons/link.html" %}</a
>
{% endif %}
</div>
<div class="content">
<div class="address">
<span class="material-symbols-sharp icon">
location_on </span
>{{cafe.address}}
</div>
<div class="region">
<span class="material-symbols-sharp icon">
location_city </span
>{{cafe.region.name}}, {{cafe.region.city.name}}
</div>
{% include "cafeIcons.html" %}
</div>
</section>
<section class="description container">
{{cafe.description.html | safe}}
</section>
{%if cafes_suggestion %}
<section class="suggestion">
<h2 class="name">
Άλλα μέρη για διάβασμα στην ίδια περιοχή!
</h2>
<div class="suggestion-cafes">
{% for cafe_item in cafes_suggestion%}
<!-- -->
{% include "cafeItem.html" %} {%endfor%}
</div>
</section>
{%endif%}
</div>
</main>
{% if cafe.type == 'CAF' %}
<link
rel="canonical"
href="https://cafe.book-community.com/cafes/{{cafe.region.city.slug}}/{{cafe.region.slug}}/{{cafe.slug}}/"
/>
<meta
property="og:url"
content="https://cafe.book-community.com/cafes/{{cafe.region.city.slug}}/{{cafe.region.slug}}/{{cafe.slug}}/"
/>
{% else %}
<meta
property="og:url"
content="https://cafe.book-community.com/libraries/{{cafe.region.city.slug}}/{{cafe.region.slug}}/{{cafe.slug}}/"
/>
<link
rel="canonical"
href="https://cafe.book-community.com/libraries/{{cafe.region.city.slug}}/{{cafe.region.slug}}/{{cafe.slug}}/"
/>
{% endif %}
<link rel="stylesheet" href="{% static 'style/cafe.css' %}" />
<script src="{% static 'bundle.js' %}" async></script>
</head>

{% include "footer.html" %}
</body>
<body>
{% include "header.html" %}
<main class="mdc-top-app-bar--fixed-adjust">
<div class="container bottomSpace">
<section class="cafe">
<div class="imgCnt">
<h1 class="name">{{cafe.name}}</h1>
<img
src="https://cafe.book-community.com/media/{{cafe.thumbnail}}"
alt="thumbnail {{cafe.name}}"
/>
</div>
<div class="selection">
{% if cafe.facebook %}
<a
href="{{cafe.facebook}}"
target="_blank"
class="icon plausible-event-name=cafeFacebookIcon"
>{% include "icons/facebook.html" %}</a
>
{% endif %} {% if cafe.googleMaps %}
<a
href="{{cafe.googleMaps}}"
class="icon plausible-event-name=cafeGoogleMapsIcon"
target="_blank"
>
{% include "icons/google.html" %}
</a>
{% endif %} {% if cafe.instagram %}
<a
href="{{cafe.instagram}}"
class="icon plausible-event-name=cafeInstagramIcon"
target="_blank"
>
{% include "icons/instagram.html" %}</a
>
{% endif %} {% if cafe.tripadvisor %}
<a
href="{{cafe.tripadvisor}}"
class="icon plausible-event-name=cafeTripadvisorIcon"
target="_blank"
>
{% include "icons/map.html" %}
</a>
{% endif %} {% if cafe.website %}
<a
href="{{cafe.website}}"
class="icon plausible-event-name=cafeWebsiteIcon"
target="_blank"
>
{% include "icons/link.html" %}</a
>
{% endif %}
</div>
<div class="content">
<div class="address">
<span class="material-symbols-sharp icon">
location_on </span
>{{cafe.address}}
</div>
<div class="region">
<span class="material-symbols-sharp icon">
location_city </span
>{{cafe.region.name}}, {{cafe.region.city.name}}
</div>
{% include "cafeIcons.html" %}
</div>
</section>
<section class="description container">
{{cafe.description.html | safe}}
</section>

<div
id="map"
class="cafeMap container"
></div>

{%if cafes_suggestion %}
<section class="suggestion">
<h2 class="name">Άλλα μέρη για διάβασμα στην ίδια περιοχή!</h2>
<div class="suggestion-cafes">
{% for cafe_item in cafes_suggestion%}
<!-- -->
{% include "cafeItem.html" %} {%endfor%}
</div>
</section>
{%endif%}
</div>
<script>

var coordinates = [{{ cafe.latitude }}, {{ cafe.longitude }}];
console.log(coordinates);
// Initialize the Leaflet map
var map = L.map("map").setView(coordinates, 12);

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

// Add a marker at the cafe's coordinates
L.marker(coordinates).addTo(map)
.bindPopup("<b>{{ cafe.name }}</b><br>{{ cafe.address }}")
.openPopup().addTo(map);
</script>
</main>

{% include "footer.html" %}
</body>
</html>
12 changes: 12 additions & 0 deletions style/cafe.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
margin-top: 1rem;
padding: 0 1rem;


.imgCnt {
position: relative;
width: 100%;
Expand Down Expand Up @@ -50,6 +51,7 @@
max-width: 75%;
}
}


.selection {
color: $on-primary;
Expand Down Expand Up @@ -196,3 +198,13 @@
}
}
}

.cafeMap{
aspect-ratio: 1;
z-index: 1;
@media only screen and (min-width: $lg) {
margin: 1rem auto;
max-width: 50%;
aspect-ratio: 2;
}
}

0 comments on commit 752faf9

Please sign in to comment.