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

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

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>

View file

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