mirror of
https://github.com/TomHodson/tomhodson.github.com.git
synced 2025-06-26 10:01:18 +02:00
add maps draft
This commit is contained in:
Tom
parent
cca0339e67
commit
c61078b88d
103
_drafts/maps.md
Normal file
103
_drafts/maps.md
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
---
|
||||||
|
title: Maps
|
||||||
|
layout: post
|
||||||
|
excerpt: |
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||||||
|
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
||||||
|
crossorigin=""/>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||||||
|
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
||||||
|
crossorigin=""></script>
|
||||||
|
<figure class="blogroll">
|
||||||
|
<div id="map" style="height:300px; width:100%"></div>
|
||||||
|
</figure>
|
||||||
|
<script>
|
||||||
|
let Stamen_TonerBackground = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-background/{z}/{x}/{y}{r}.{ext}', {
|
||||||
|
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
||||||
|
subdomains: 'abcd',
|
||||||
|
minZoom: 0,
|
||||||
|
maxZoom: 20,
|
||||||
|
ext: 'png'
|
||||||
|
});
|
||||||
|
|
||||||
|
let map = L.map('map').setView([51.505, -0.09], 13);
|
||||||
|
map.addLayer(Stamen_TonerBackground);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
hide_image: true
|
||||||
|
---
|
||||||
|
|
||||||
|
## Made a map by screenshotting leaflet.js
|
||||||
|
|
||||||
|
```html
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||||||
|
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
||||||
|
crossorigin=""/>
|
||||||
|
<!-- Make sure you put this AFTER Leaflet's CSS -->
|
||||||
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||||||
|
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
||||||
|
crossorigin=""></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#map {
|
||||||
|
height: 4000px;
|
||||||
|
width: 1000px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
Hello
|
||||||
|
<div id="map"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let Stamen_Toner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}', {
|
||||||
|
subdomains: 'abcd',
|
||||||
|
minZoom: 0,
|
||||||
|
maxZoom: 20,
|
||||||
|
ext: 'png'
|
||||||
|
});
|
||||||
|
|
||||||
|
let Stamen_TonerBackground = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-background/{z}/{x}/{y}{r}.{ext}', {
|
||||||
|
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
||||||
|
subdomains: 'abcd',
|
||||||
|
minZoom: 0,
|
||||||
|
maxZoom: 20,
|
||||||
|
ext: 'png'
|
||||||
|
});
|
||||||
|
|
||||||
|
let map = L.map('map').setView([51.505, -0.09], 13);
|
||||||
|
map.addLayer(Stamen_TonerBackground);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Rendered that in blender to see what it might look like
|
||||||
|
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<img src="/assets/blog/maps/render.png">
|
||||||
|
<figcaption>
|
||||||
|
A blender render of what it might look like based on a 3D scan of my flat. This took all my very rudimentary new blender skills.
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<model-viewer src="/assets/blog/maps/bigmap.glb" ar ar-modes="scene-viewer webxr quick-look" camera-controls shadow-intensity="1" exposure="1.08" camera-orbit="30.45deg 63.68deg 27.8m" field-of-view="22.88deg" auto-rotate>
|
||||||
|
</model-viewer>
|
||||||
|
<figcaption>
|
||||||
|
Done with the lidar scanner on an Ipad.
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
Ideas:
|
||||||
|
https://github.com/mapbox/leaflet-image
|
||||||
|
https://github.com/Flexberry/Leaflet.Export
|
||||||
|
https://github.com/grinat/leaflet-simple-map-screenshoter
|
||||||
BIN
assets/blog/maps/bigmap.glb
Normal file
BIN
assets/blog/maps/bigmap.glb
Normal file
Binary file not shown.
BIN
assets/blog/maps/firstmap.png
Normal file
BIN
assets/blog/maps/firstmap.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 MiB |
BIN
assets/blog/maps/render.png
Normal file
BIN
assets/blog/maps/render.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
6
index.md
6
index.md
@ -10,6 +10,10 @@ redirect_from:
|
|||||||
<h2 class="p-name blogroll-title"><a class="u-uid u-url" href="{{ post.url }}">{{ post.title }}</a></h2>
|
<h2 class="p-name blogroll-title"><a class="u-uid u-url" href="{{ post.url }}">{{ post.title }}</a></h2>
|
||||||
<time class="dt-published" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</time>
|
<time class="dt-published" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</time>
|
||||||
<summary class="p-summary">{{ post.excerpt | markdownify | remove: '<p>' | remove: '</p>' }}</summary>
|
<summary class="p-summary">{{ post.excerpt | markdownify | remove: '<p>' | remove: '</p>' }}</summary>
|
||||||
<figure {% if post.hide_image %} style="display:none;" {% endif %} class="blogroll"><img class="u-photo" src = "{{post.image}}"></figure>
|
{% unless post.hide_image %}
|
||||||
|
<figure class="blogroll">
|
||||||
|
<img class="u-photo" src = "{{post.image}}" alt="{{post.alt}}">
|
||||||
|
</figure>
|
||||||
|
{% endunless %}
|
||||||
</article>
|
</article>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
Loading…
x
Reference in New Issue
Block a user