mirror of
https://github.com/TomHodson/tomhodson.github.com.git
synced 2025-06-26 10:01:18 +02:00
add maps post
This commit is contained in:
Tom
parent
c61078b88d
commit
2fa775fb7c
103
_drafts/maps.md
103
_drafts/maps.md
@ -1,103 +0,0 @@
|
||||
---
|
||||
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
|
||||
@ -9,7 +9,7 @@ alt: A render of a 3D printed shelf sitting above a shaver outlet, it spins slow
|
||||
---
|
||||
|
||||
<figure>
|
||||
<model-viewer src="/assets/blog/scans/container/container.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 style="width: 500px; height: 500px;" src="/assets/blog/scans/container/container.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.
|
||||
|
||||
76
_posts/2023-08-17-maps.md
Normal file
76
_posts/2023-08-17-maps.md
Normal file
@ -0,0 +1,76 @@
|
||||
---
|
||||
title: "WIP: Maps Maps Maps"
|
||||
layout: post
|
||||
excerpt: |
|
||||
|
||||
# hide_image: true
|
||||
image: /assets/blog/maps/tests.jpeg
|
||||
---
|
||||
|
||||
There's something fascinating about maps. I particularly love how they have this kind of fractal level of detail as you zoom in and out. Look at this one, I really like the minimalist black and white design.
|
||||
|
||||
<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:100cqw; width:100cqw"></div>
|
||||
<figcaption>
|
||||
<br>
|
||||
These map tiles are from <a href="https://stamen.com/">Stamen design</a>, essentially a really nice style sheet on top of © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributor data. The viewer is <a href="https://leafletjs.com/">leaflet.js</a>. I used CSS container queries to make this a nice square shape.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<script>
|
||||
let Stamen_TonerBackground = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-background/{z}/{x}/{y}{r}.{ext}', {
|
||||
subdomains: 'abcd',
|
||||
minZoom: 0,
|
||||
maxZoom: 20,
|
||||
ext: 'png'
|
||||
});
|
||||
|
||||
let map = L.map('map', {attributionControl: false, zoomControl: false}).setView({'lat': 51.555514883267996, 'lng': -0.07930755615234376}, 15);
|
||||
map.addLayer(Stamen_TonerBackground);
|
||||
</script>
|
||||
|
||||
|
||||
In related news, my excellent [co-working space / carpentry workshop / pottery studio](https://www.r-a-r-a.com/) currently has a massive laser cutter which we may or may not keep for the long term.
|
||||
|
||||
<figure>
|
||||
<img src="/assets/blog/maps/tests.jpeg">
|
||||
<figcaption>
|
||||
The laser cutter can do either a raster or vector. Here is a raster into some birch plywood. They're 10cm square with slightly different settings.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
Given the laser cutter is so massive I thought it might be fun to try to produce a huge map. There's a spot at the top of the stairs in our flat that I think could be nice for it. My partner and I have always always lived somewhere in this vertical strip of london so the tall thin shape has some significance.
|
||||
|
||||
<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 to put together.
|
||||
</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>
|
||||
Here's a 3D version. I got the scan with the lidar scanner on an ipad.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
Given how long those
|
||||
|
||||
<!-- Ideas:
|
||||
https://github.com/grinat/leaflet-simple-map-screenshoter Can only get raster data this way
|
||||
|
||||
Insp: https://blog.usedbytes.com/2022/06/3d-printed-terrain-models-using-os-open-data/
|
||||
|
||||
|
||||
https://gis.stackexchange.com/questions/186808/how-to-create-high-quality-map-with-qgis-and-stamen-tiles
|
||||
https://anitagraser.com/2014/05/31/a-guide-to-googlemaps-like-maps-with-osm-in-qgis/
|
||||
https://github.com/anitagraser/QGIS-resources/tree/master/qgis2/osm_spatialite
|
||||
-->
|
||||
@ -40,6 +40,8 @@ body {
|
||||
|
||||
// Padding to keep the keep the content to the right of the header
|
||||
main {
|
||||
container: main / inline-size;
|
||||
|
||||
margin-left: 240px;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
|
||||
BIN
assets/blog/maps/tests.jpeg
Normal file
BIN
assets/blog/maps/tests.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
Loading…
x
Reference in New Issue
Block a user