Rebrand website and remove disclaimer
This commit is contained in:
parent
360694842c
commit
a0181b8e0f
1 changed files with 20 additions and 158 deletions
|
|
@ -3,15 +3,15 @@
|
||||||
|
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
<title>STHLM-MESH MAP</title>
|
<title>DL4AX Meshtastic Map</title>
|
||||||
<meta name="title" content="Meshtastic Map">
|
<meta name="title" content="DL4AX Meshtastic Map">
|
||||||
<meta name="description" content="An interactive map of all Meshtastic nodes.">
|
<meta name="description" content="An interactive map of all Meshtastic nodes.">
|
||||||
<link rel="icon" type="image/png" href="/icon.png"/>
|
<link rel="icon" type="image/png" href="/icon.png"/>
|
||||||
|
|
||||||
<!-- Open Graph / Facebook -->
|
<!-- Open Graph / Facebook -->
|
||||||
<meta property="og:type" content="website">
|
<meta property="og:type" content="website">
|
||||||
<meta property="og:url" content="https://map.sthlm-mesh.se">
|
<meta property="og:url" content="https://meshmap.dl4ax.radio">
|
||||||
<meta property="og:title" content="STHLM-MESH MAP">
|
<meta property="og:title" content="DL4AX Meshtastic Map">
|
||||||
<meta property="og:description" content="An interactive map of all Meshtastic nodes.">
|
<meta property="og:description" content="An interactive map of all Meshtastic nodes.">
|
||||||
|
|
||||||
<!-- tailwind css -->
|
<!-- tailwind css -->
|
||||||
|
|
@ -168,30 +168,6 @@
|
||||||
<div class="flex flex-col h-full w-full overflow-hidden">
|
<div class="flex flex-col h-full w-full overflow-hidden">
|
||||||
<div class="flex flex-col h-full">
|
<div class="flex flex-col h-full">
|
||||||
|
|
||||||
<!-- announcement -->
|
|
||||||
<div v-if="isShowingAnnouncement" class="flex bg-yellow-300 p-2 border-gray-300 border-b">
|
|
||||||
|
|
||||||
<!-- info -->
|
|
||||||
<div class="my-auto leading-tight">
|
|
||||||
<div class="font-bold">Viktigt!</div>
|
|
||||||
<div class="text-sm">
|
|
||||||
<span>I Stockholm används LoRa preset <b>Medium Range - Fast</b>. För mer info <a href="https://sthlm-mesh.se/blog/2025/övergång-till-mediumfast-den-27-september/" type="button" class="link">klicka här</a>.</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- action buttons -->
|
|
||||||
<div class="flex my-auto ml-auto mr-0 sm:mr-2">
|
|
||||||
<a @click="dismissAnnouncement" href="javascript:void(0)" class="rounded-full">
|
|
||||||
<div class="bg-white hover:bg-gray-100 p-2 rounded-full">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- header -->
|
<!-- header -->
|
||||||
<div class="flex p-3 h-16" style="background-color: 30a552;">
|
<div class="flex p-3 h-16" style="background-color: 30a552;">
|
||||||
|
|
||||||
|
|
@ -211,11 +187,6 @@
|
||||||
<img class="w-8 h-8 rounded" src="icon.png"/>
|
<img class="w-8 h-8 rounded" src="icon.png"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- app info -->
|
|
||||||
<div v-if="!isShowingMobileSearch" class="my-auto leading-tight">
|
|
||||||
<a href="https://sthlm-mesh.se"><div class="font-bold" style="color: #ffffff; font-size: 1.25rem;">STHLM-MESH</div></a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- search bar -->
|
<!-- search bar -->
|
||||||
<div class="mx-3 flex-1 relative" :class="{ 'hidden lg:block': !isShowingMobileSearch }">
|
<div class="mx-3 flex-1 relative" :class="{ 'hidden lg:block': !isShowingMobileSearch }">
|
||||||
<input v-model="searchText" type="text" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" :placeholder="`Search ${nodes.length} nodes...`">
|
<input v-model="searchText" type="text" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" :placeholder="`Search ${nodes.length} nodes...`">
|
||||||
|
|
@ -306,124 +277,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- info modal -->
|
|
||||||
<div class="relative z-sidebar">
|
|
||||||
|
|
||||||
<!-- overlay -->
|
|
||||||
<transition
|
|
||||||
enter-active-class="transition-opacity duration-300 ease-linear"
|
|
||||||
enter-from-class="opacity-0"
|
|
||||||
enter-to-class="opacity-100"
|
|
||||||
leave-active-class="transition-opacity duration-300 ease-linear"
|
|
||||||
leave-from-class="opacity-100"
|
|
||||||
leave-to-class="opacity-0">
|
|
||||||
<div v-show="isShowingInfoModal" @click="dismissInfoModal" class="fixed inset-0 bg-gray-900 bg-opacity-75"></div>
|
|
||||||
</transition>
|
|
||||||
|
|
||||||
<!-- modal -->
|
|
||||||
<transition
|
|
||||||
enter-active-class="transition duration-300 ease-in-out transform"
|
|
||||||
enter-from-class="translate-y-full"
|
|
||||||
enter-to-class="translate-y-0"
|
|
||||||
leave-active-class="transition duration-300 ease-in-out transform"
|
|
||||||
leave-from-class="translate-y-0"
|
|
||||||
leave-to-class="translate-y-full">
|
|
||||||
<div @click="dismissInfoModal" v-show="isShowingInfoModal" class="fixed left-0 right-0 top-0 bottom-0 lg:pointer-events-none">
|
|
||||||
<div class="flex w-full h-full overflow-y-auto p-4">
|
|
||||||
<div @click.stop class="mx-auto my-auto w-full max-w-2xl flex-col bg-white shadow-xl rounded-xl p-2 lg:pointer-events-auto">
|
|
||||||
<div class="relative flex">
|
|
||||||
|
|
||||||
<!-- close button -->
|
|
||||||
<div class="absolute top-0 right-0">
|
|
||||||
<div class="h-7">
|
|
||||||
<a href="javascript:void(0)" class="rounded-full" @click="dismissInfoModal">
|
|
||||||
<div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
|
|
||||||
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
||||||
<path d="M18 6l-12 12"></path>
|
|
||||||
<path d="M6 6l12 12"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- content -->
|
|
||||||
<div class="flex flex-col w-full py-2 space-y-2">
|
|
||||||
|
|
||||||
<!-- app info -->
|
|
||||||
<div class="w-full mx-auto text-center">
|
|
||||||
<img src="./icon.png" class="mx-auto w-16 h-16 rounded mb-1"/>
|
|
||||||
<h1 class="font-bold">Meshtastic Map</h1>
|
|
||||||
<h2>Created by <a class="link" target="_blank" href="https://liamcottle.com">Liam Cottle</a></h2>
|
|
||||||
<h2>Forked by <a class="link" target="_blank" href="http://github.com/Roslund/">Roslund</a></h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Beskrivning -->
|
|
||||||
<div>
|
|
||||||
<div class="font-bold mb-2">Beskrivning</div>
|
|
||||||
<div class="space-y-2">
|
|
||||||
<div class="bg-gray-100 rounded p-2 border border-gray-200">
|
|
||||||
<div>Detta är en karta som enbart fokuserar på Stockholm.</div>
|
|
||||||
<div>Den är baserad på Liam Cottle's open source projekt Meshtastic Map, men har flertalet ändringar och nya funktioner som gör att vi bättre kan analysera Meshen i Stockholm.</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
<div class="font-bold mb-2">Frågor och svar</div>
|
|
||||||
<div class="space-y-2">
|
|
||||||
<div class="bg-gray-100 rounded p-2 border border-gray-200">
|
|
||||||
<div class="font-semibold">Hur får jag min nod att synas på kartan?</div>
|
|
||||||
<div>Din nod behöver anting ha en GPS, ha en fast position inställd, eller att din telefon delar sin position.</div>
|
|
||||||
<div>Utöver detta måste platsdelning vara påslåget under kanalinställningarna för MediumFast kanalen (vanligtvis kanal 0).</div>
|
|
||||||
</div>
|
|
||||||
<div class="bg-gray-100 rounded p-2 border border-gray-200">
|
|
||||||
<div class="font-semibold">Min nod är på fel plats på kartan</div>
|
|
||||||
<div>Detta är troligtvis för att din nod inte delar <b>exakt position</b>. Som standard är positionsprecisionen inställd på ± 3 km, vilket betyder att noden kan befinna sig inom en cirkel med radien 3 kilometer.</div>
|
|
||||||
<div>Du kan ändra positions precisionen i kanalinställningarna. För mer info om positions precisionen, <a href="https://sthlm-mesh.se/docs/position/#position-precision">klicka här</a>.</div>
|
|
||||||
</div>
|
|
||||||
<div class="bg-gray-100 rounded p-2 border border-gray-200">
|
|
||||||
<div class="font-semibold">Hur kan jag ansluta min nod till MQTT servern?</div>
|
|
||||||
<div>Då vi enbart vill analysera Meshen i stockholm är MQTT servern inte öppen för alla. Endast ett fåtal noder är uppkopplade till MQTT för att kunna analysera trafiken som faktiskt går över LoRa.</div>
|
|
||||||
<div>De noder som är kopplade mot MQTT servern bör:</div>
|
|
||||||
<ul class="list-disc list-inside">
|
|
||||||
<li>Vara på en unik geografisk plats, då vi vill se hur trafiken fördelas</li>
|
|
||||||
<li>Ha en stabil fast koppling till internet (via Ethernet eller WiFi)</li>
|
|
||||||
<li>Ha hög tillgänglighet</li>
|
|
||||||
<li>Ha direktkontakt med flertalet andra noder</li>
|
|
||||||
</ul>
|
|
||||||
<div>Tror du att din nod kan bidra, kontakta @Roslund på Discord.</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- legal -->
|
|
||||||
<div>
|
|
||||||
<div class="font-bold mb-2">Legal</div>
|
|
||||||
<div class="bg-gray-100 rounded p-2 border border-gray-200">
|
|
||||||
<div>This project is not affiliated with or endorsed by the <a class="link" target="_blank" href="https://meshtastic.org">Meshtastic</a> project.</div>
|
|
||||||
<div>The Meshtastic logo is the trademark of Meshtastic LLC.</div>
|
|
||||||
<div>Map tiles provided by <a class="link" target="_blank" href="https://www.openstreetmap.org/copyright">OpenStreetMap</a></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- dismiss button -->
|
|
||||||
<div class="mx-auto">
|
|
||||||
<a href="javascript:void(0)" @click="dismissInfoModal">
|
|
||||||
<div class="bg-gray-200 hover:bg-gray-300 px-6 py-2 rounded-md shadow">
|
|
||||||
Dismiss
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- hardware models sidebar -->
|
<!-- hardware models sidebar -->
|
||||||
<div class="relative z-sidebar" role="dialog" aria-modal="true">
|
<div class="relative z-sidebar" role="dialog" aria-modal="true">
|
||||||
|
|
||||||
|
|
@ -2752,13 +2605,22 @@
|
||||||
[100, 500], // bottom right
|
[100, 500], // bottom right
|
||||||
];
|
];
|
||||||
|
|
||||||
// create map positioned over Stockholm
|
// create map positioned over NRW
|
||||||
var map = L.map('map', {
|
if(!isMobile()){
|
||||||
maxBounds: bounds,
|
var map = L.map('map', {
|
||||||
}).setView([
|
maxBounds: bounds,
|
||||||
59.3,
|
}).setView([
|
||||||
378.1,
|
51.1,
|
||||||
], 10);
|
366.82,
|
||||||
|
], 9);
|
||||||
|
} else {
|
||||||
|
var map = L.map('map', {
|
||||||
|
maxBounds: bounds,
|
||||||
|
}).setView([
|
||||||
|
51.1,
|
||||||
|
366.82,
|
||||||
|
], 8);
|
||||||
|
}
|
||||||
|
|
||||||
// remove leaflet link
|
// remove leaflet link
|
||||||
map.attributionControl.setPrefix('');
|
map.attributionControl.setPrefix('');
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue