rob/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add maps page, starting on a mechanism to save interesting locations.

Browse source
This commit is contained in:
Robert Marshall 2021-09-06 10:38:15 +01:00
parent deb3811f7a
commit b0c20e02a5
5 changed files with 64 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/Website/Controllers/MapsController.cs Normal file
View file

@ -0,0 +1,16 @@
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
namespace Website.Controllers {
[Authorize]
public class MapsController : Controller {
public IActionResult Index() {
return View();
}
[HttpPost]
public IActionResult CreateMap(string name) {
throw new System.NotImplementedException();
}
}
}

32
src/Website/Views/Maps/Index.cshtml Normal file
View file

@ -0,0 +1,32 @@
@{
ViewBag.Title = "Maps";
Layout = "_Layout";
}
@section head {
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
}
<label>Load map: <select><option>Map</option></select></label>
<div id="map"></div>
<form asp-action="CreateMap">
<label>Name: <input type="text" /></label>
<button type="submit">Add</button>
</form>
<script>
var map=L.map("map").setView([0,0], 2);
L.tileLayer('https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
L.control.scale({imperial: true, metric: true}).addTo(map);
</script>

1
src/Website/Views/Shared/_Layout.cshtml
View file

@ -14,6 +14,7 @@
</style> </style>
</noscript> </noscript>
<link rel="icon" type="image/png" href="/images/logo.png"/> <link rel="icon" type="image/png" href="/images/logo.png"/>
@await RenderSectionAsync("head", false)
</head> </head>
<body> <body>
<header class="header"> <header class="header">

14
src/Website/wwwroot/css/map.scss Normal file
View file

@ -0,0 +1,14 @@
#map{
height: 80vh;
margin: 0 10px;
.leaflet-control{
opacity: 0;
}
&:hover{
.leaflet-control{
opacity: 1;
}
}
}

1
src/Website/wwwroot/css/style.scss
View file

@ -3,6 +3,7 @@
$fa-font-path: "../webfonts"; $fa-font-path: "../webfonts";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss"; @import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss"; @import "../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
@import "map.css";
* { * {
box-sizing: border-box; box-sizing: border-box;