Netsyms/fixphrase.com
2
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add map styles (close #1)

Browse Source
This commit is contained in:
Skylar Ittner 2021-11-11 19:36:57 -07:00
parent 248bccc01f
commit 3c3b111fed
3 changed files with 74 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
index.html
View File

@ -65,6 +65,17 @@
background-clip: border-box;
color: black;
}
.mapboxgl-ctrl-attrib, .mapboxgl-ctrl-attrib-inner a {
color: black !important;
}
.nav-pills .nav-link {
background-color: rgba(50,50,50,0.7);
}
.nav-pills .nav-link.active {
background-color: rgba(0,0,0,0.9);
}
#page-container {
height: 100%;
@ -87,7 +98,6 @@
display: initial;
}
}
</style>
<!-- Matomo -->
@ -149,13 +159,29 @@
<div class="card mb-2 border-secondary" id="mapcard">
<a name="map"></a>
<div class="card-body p-2">
<div id="mapbox" class="w-100 h-100"></div>
<div id="mapbox" class="w-100"></div>
<ul class="nav nav-pills pt-2" id="map-style-switcher">
<li class="nav-item p-1">
<a class="nav-link active" href="#map" data-style="street">Light</a>
</li>
<li class="nav-item p-1">
<a class="nav-link" href="#map" data-style="dark">Dark</a>
</li>
<li class="nav-item p-1">
<a class="nav-link" href="#map" data-style="terrain">Topo</a>
</li>
<li class="nav-item p-1">
<a class="nav-link" href="#map" data-style="satellite">Satellite</a>
</li>
</ul>
</div>
</div>
</div>
<script>
window.onload = function () {
$("#mapbox").css("height", "calc(100% - " + $("#map-style-switcher").css("height") + ")");
createMap();
var bgs = [
@ -169,6 +195,19 @@
var bgimg = bgs[Math.floor(Math.random() * bgs.length)];
$("body").css("background-image", "url(./img/bg/" + bgimg + ")");
map.resize();
// Load style preference from cookie
var cookies = decodeURIComponent(document.cookie).split("; ");
cookies.forEach(val => {
if (val.indexOf("mapstyle") === 0) {
var style = val.substring(9);
setMapStyle(style);
$("#map-style-switcher a.nav-link").removeClass("active");
$("#map-style-switcher a.nav-link[data-style=" + style + "]").addClass("active");
}
});
$("body").on("click", ".copyonclick", function () {
var copyitem = $(this);
var copytext = copyitem.text();
@ -189,6 +228,17 @@
dolookup($(this).val());
}
});
$("#map-style-switcher").on("click", "a.nav-link", function () {
$("#map-style-switcher a.nav-link").removeClass("active");
setMapStyle($(this).data("style"));
$(this).addClass("active");
// Save style preference in cookie
var date = new Date();
date.setTime(date.getTime() + (90 * 24 * 60 * 60 * 1000));
document.cookie = "mapstyle=" + $(this).data("style") + "; expires=" + date.toUTCString();
});
};
function dolookup(words) {

21
js/map.js
View File

@ -16,6 +16,27 @@ function createMap() {
}
}
function setMapStyle(style) {
var styleurl = "https://maps.netsyms.net/styles/osm-liberty/style.json";
switch (style) {
case "street":
styleurl = "https://maps.netsyms.net/styles/osm-liberty/style.json";
break;
case "dark":
styleurl = "https://maps.netsyms.net/styles/osm-liberty-dark/style.json";
break;
case "terrain":
styleurl = "https://maps.netsyms.net/styles/klokantech-terrain/style.json";
break;
case "satellite":
styleurl = "https://api.maptiler.com/maps/hybrid/style.json?key=sgkE6Lno8BY1AK83pu5z";
break;
default:
styleurl = "https://maps.netsyms.net/styles/osm-liberty/style.json";
}
map.setStyle(styleurl);
}
function centerMapOnLocation(latitude, longitude) {
map.removeMarkers();
map.addMarker(latitude, longitude);

2
js/map_maplibre.js
View File

@ -12,7 +12,7 @@ function maplibreMap() {
var map = new mapboxgl.Map({
container: 'mapbox',
style: "https://maps.netsyms.net/styles/osm-liberty-hillshading/style.json",
style: "https://maps.netsyms.net/styles/osm-liberty/style.json",
//attributionControl: false,
interactive: true,
pitch: 0,