Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-25 07:49:37 +02:00
Code Issues Releases Activity

Add region markers to the map

Browse source
This commit is contained in:
Sean Morley 2024-09-11 14:56:52 -04:00
parent 2f01232144
commit 4dc11db21d
2 changed files with 37 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

13
backend/server/worldtravel/serializers.py
View file

@ -2,7 +2,6 @@ import os
from .models import Country, Region, VisitedRegion
from rest_framework import serializers
class CountrySerializer(serializers.ModelSerializer):
def get_public_url(self, obj):
return os.environ.get('PUBLIC_URL', 'http://127.0.0.1:8000').rstrip('/').replace("'", "")
@ -15,17 +14,21 @@ class CountrySerializer(serializers.ModelSerializer):
class Meta:
model = Country
fields = '__all__' # Serialize all fields of the Adventure model
fields = '__all__'
read_only_fields = ['id', 'name', 'country_code', 'subregion', 'flag_url']
class RegionSerializer(serializers.ModelSerializer):
class Meta:
model = Region
fields = '__all__' # Serialize all fields of the Adventure model
fields = '__all__'
read_only_fields = ['id', 'name', 'country', 'longitude', 'latitude']
class VisitedRegionSerializer(serializers.ModelSerializer):
longitude = serializers.DecimalField(source='region.longitude', max_digits=9, decimal_places=6, read_only=True)
latitude = serializers.DecimalField(source='region.latitude', max_digits=9, decimal_places=6, read_only=True)
name = serializers.CharField(source='region.name', read_only=True)
class Meta:
model = VisitedRegion
fields = '__all__' # Serialize all fields of the Adventure model
read_only_fields = ['user_id', 'id']
fields = ['id', 'user_id', 'region', 'longitude', 'latitude', 'name']
read_only_fields = ['user_id', 'id', 'longitude', 'latitude', 'name']

57
frontend/src/routes/map/+page.svelte
View file

@ -54,7 +54,7 @@
}
let visitedRegions = data.props.visitedRegions;
let geoJSON = [];
let allRegions = [];
let visitArray = [];
@ -72,12 +72,12 @@
// mapped to the checkbox
let showGEO = false;
$: {
if (showGEO && geoJSON.length === 0) {
if (showGEO && allRegions.length === 0) {
(async () => {
geoJSON = await fetch('/api/geojson/').then((res) => res.json());
allRegions = await fetch('/api/visitedregion/').then((res) => res.json());
})();
} else if (!showGEO) {
geoJSON = [];
allRegions = [];
}
}
@ -99,7 +99,7 @@
<input type="checkbox" bind:checked={showPlanned} class="checkbox checkbox-primary" />
</label>
<!-- <div class="divider divider-horizontal"></div> -->
<label for="show-geo">Show Borders</label>
<label for="show-geo">Show Visited Regions</label>
<input
type="checkbox"
id="show-geo"
@ -183,33 +183,34 @@
</Marker>
{/if}
{/each}
{#if showGEO}
<GeoJSON id="states" data={geoJSON} promoteId="ISOCODE">
<LineLayer
layout={{ 'line-cap': 'round', 'line-join': 'round' }}
paint={{ 'line-color': 'grey', 'line-width': 3 }}
beforeLayerType="symbol"
/>
<FillLayer
paint={{ 'fill-color': 'rgba(37, 244, 26, 0.15)' }}
filter={['in', 'ISOCODE', ...visitArray]}
/>
<SymbolLayer
layout={{
'text-field': ['get', 'name'],
'text-size': 12,
'text-anchor': 'center'
}}
paint={{
'text-color': 'black'
}}
/>
</GeoJSON>
{/if}
<MapEvents on:click={addMarker} />
{#each newMarker as marker}
<DefaultMarker lngLat={marker.lngLat} />
{/each}
{#each allRegions as { longitude, latitude, name, region }}
<Marker
lngLat={[longitude, latitude]}
on:click={() => (clickedName = name)}
class="grid h-8 w-8 place-items-center rounded-full border border-gray-200 bg-green-300 text-black shadow-md"
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<!-- green circle -->
<circle cx="12" cy="12" r="10" stroke="green" stroke-width="2" fill="green" />
</svg>
<Popup openOn="click" offset={[0, -10]}>
<div class="text-lg text-black font-bold">{name}</div>
<p class="font-semibold text-black text-md">{region}</p>
</Popup>
</Marker>
{/each}
</MapLibre>
<svelte:head>