tandem
/
camper
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
camper/web/templates/public/campground.gohtml

22 lines
723 B
Plaintext
Raw Normal View History

Add the campground page For now, this page only shows the map, that i had to create a new “files” template function to include it as an extra template file.
2023-10-06 20:14:11 +00:00
<!--
SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
Added copyright statement to files modified by Oriol
2024-01-16 16:58:49 +00:00
SPDX-FileCopyrightText: 2023 Oriol Carbonell <info@oriolcarbonell.cat>
Add the campground page For now, this page only shows the map, that i had to create a new “files” template function to include it as an extra template file.
2023-10-06 20:14:11 +00:00
SPDX-License-Identifier: AGPL-3.0-only
-->
{{ define "title" -}}
{{( pgettext "Campground" "title" )}}
{{- end }}
Show campground map using leaflet It is better for mobile users, as they can zoom and pan the map in their small screens. Had to increase header’s z-index or the zoom controls would be on top of it.
2024-01-14 21:31:13 +00:00
{{ define "head" -}}
<link rel="stylesheet" href="/static/leaflet@1.9.4/leaflet.css">
{{- end }}
Add the campground page For now, this page only shows the map, that i had to create a new “files” template function to include it as an extra template file.
2023-10-06 20:14:11 +00:00
{{ define "content" -}}
{{- /*gotype: dev.tandem.ws/tandem/camper/pkg/app.campgroundPage*/ -}}
<h2>{{( pgettext "Campground" "title" )}}</h2>
Show campground map using leaflet It is better for mobile users, as they can zoom and pan the map in their small screens. Had to increase header’s z-index or the zoom controls would be on top of it.
2024-01-14 21:31:13 +00:00
<div id="campground_map">{{ template "campground_map.svg" }}</div>
<script src="/static/leaflet@1.9.4/leaflet.js"></script>
Add a polygon around each accommodation on the public map I can not use <a> in that map because Leaflet handles the mouse over before the anchors sees it, thus it is impossible to click on them; i have to use a Leaflet layer. Fortunately, i can just use the <path>’s coordinates as the polygon points, because with CRS.Simple the coordinates map to pixel, except for the reversed Y/latitude coordinate. Unfortunately, <path> coordinates are not straightforward to get: I have to follow the drawing coordinates, taking into account the current transformation (CTM), and keeping the last point around for relative coordinates. Bézier curves are simplified to a straight line from start to end. There is one single accommodation that started with a relative move command (m), which apparently have to be treated as an absolute move (M), but subsequent pairs are treated as relative coordinates[0]. It was easier for me to convert that relative move to absolute and add a relative lineto command (l) to the next pair. For now, all i do is highlight the accommodation and zoom it on click, because i do not know how i should the accommodation’s information. [0]: https://www.w3.org/TR/SVG11/paths.html#PathDataMovetoCommands
2024-01-25 03:28:51 +00:00
<script src="/static/map.js?v={{ camperVersion }}"></script>
Add the campground page For now, this page only shows the map, that i had to create a new “files” template function to include it as an extra template file.
2023-10-06 20:14:11 +00:00
{{- end }}