tom/personal_site
1
0
Fork 0
mirror of https://github.com/TomHodson/tomhodson.github.com.git synced 2025-06-26 10:01:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

update maps

Browse Source
This commit is contained in:
Tom 2023-08-24 10:16:49 +01:00
parent eb7407717e
commit 39fe974148
3 changed files with 195 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
_drafts/test_map.html Normal file
View File

@ -0,0 +1,119 @@
---
title: Test Map
excerpt:
---
<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>
<script src="https://unpkg.com/leaflet-simple-map-screenshoter"></script>
<script src="https://unpkg.com/file-saver/dist/FileSaver.js"></script>
<script src="/assets/js/domtoimage.min.js"></script>
<style>
#map {
height: 1600px;
width: 1600px;
}
</style>
</head>
<body>
<div id="map"></div>
<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: 16,
ext: 'png'
});
let Stamen_Toner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}', {
subdomains: 'abcd',
minZoom: 0,
maxZoom: 16,
ext: 'png'
});
const key = 'paglUJQl74h39APJmOFJ';
let os_maps = L.tileLayer(`https://api.maptiler.com/tiles/uk-osgb10k1888/{z}/{x}/{y}.jpg?key=paglUJQl74h39APJmOFJ`,{ //style URL
tileSize: 512,
zoomOffset: -1,
minZoom: 1,
crossOrigin: true
});
let os_multi_scale = L.tileLayer(`https://api.maptiler.com/tiles/uk-osgb1888/{z}/{x}/{y}?key=paglUJQl74h39APJmOFJ`,{ //style URL
tileSize: 512,
zoomOffset: -1,
minZoom: 1,
crossOrigin: true
});
let os_maps_2 = L.tileLayer("https://api.maptiler.com/tiles/uk-osgb1888/{z}/{x}/{y}?key=paglUJQl74h39APJmOFJ",{ //style URL
tileSize: 512,
zoomOffset: -1,
minZoom: 1,
crossOrigin: true
});
let hills = L.tileLayer("https://api.maptiler.com/tiles/uk-osgb10k1888/{z}/{x}/{y}.jpg?key=paglUJQl74h39APJmOFJ",{ //style URL
tileSize: 512,
zoomOffset: -1,
minZoom: 1,
crossOrigin: true
});
let os_london = L.tileLayer("https://api.maptiler.com/tiles/uk-oslondon1k1893/{z}/{x}/{y}.jpg?key=paglUJQl74h39APJmOFJ",{ //style URL
tileSize: 512,
zoomOffset: -1,
minZoom: 1,
crossOrigin: true
});
var baseMaps = {
"Stamen Toner": Stamen_TonerBackground,
"Stamen Toner Labelled" : Stamen_Toner,
"OS Maps Multi Scale" : os_multi_scale,
"OS Maps": os_maps,
"OS Maps Hills": os_maps_2,
"Hills" : hills,
"OS Maps London" : os_london,
};
let pluginOptions = {
cropImageByInnerWH: true, // crop blank opacity from image borders
hidden: false, // hide screen icon
preventDownload: false, // prevent download on button click
domtoimageOptions: {}, // see options for dom-to-image
position: 'topleft', // position of take screen icon
screenName: 'screen', // string or function
// iconUrl: ICON_SVG_BASE64, // screen btn icon base64 or url
hideElementsWithSelectors: ['.leaflet-control-container'], // by default hide map controls All els must be child of _map._container
mimeType: 'image/svg', // used if format == image,
caption: null, // string or function, added caption to bottom of screen
captionFontSize: 15,
captionFont: 'Arial',
captionColor: 'black',
captionBgColor: 'white',
captionOffset: 5,
}
home = [51.55575624506862, -0.08058359767120651];
center = {lat: 51.54540094923517, lng: -0.08419990539550783};
let map = L.map('map').setView(home, 15);
map.addLayer(Stamen_Toner);
let simpleMapScreenshoter = L.simpleMapScreenshoter(pluginOptions).addTo(map);
let layerControl = L.control.layers(baseMaps).addTo(map);
</script>
</body>
</html>

78
_posts/2023-08-17-maps.md
View File

@ -16,23 +16,93 @@ There's something fascinating about maps. I particularly love how they have this
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script> crossorigin=""></script>
<style>
.os_maps {
filter: grayscale(1) contrast(1.1);
}
.os_maps_london {
filter: grayscale(1) brightness(0.8) contrast(2);
}
</style>
<figure class="blogroll"> <figure class="blogroll">
<div id="map" style="height:100cqw; width:100cqw"></div> <div id="map" style="height:90cqw; width:90cqw"></div>
<figcaption> <figcaption>
<br> <br>
These map tiles are from <a href="https://stamen.com/">Stamen design</a>, essentially a really nice style sheet on top of &copy; <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. These map tiles are from <a href="https://stamen.com/">Stamen design</a>, essentially a really nice style sheet on top of &copy; <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> </figcaption>
</figure> </figure>
<script> <script>
let Stamen_TonerBackground = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-background/{z}/{x}/{y}{r}.{ext}', { let Stamen_TonerBackground = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-background/{z}/{x}/{y}{r}.{ext}', {
subdomains: 'abcd', subdomains: 'abcd',
minZoom: 0, minZoom: 0,
maxZoom: 20, maxZoom: 16,
ext: 'png' ext: 'png'
}); });
let Stamen_Toner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}', {
subdomains: 'abcd',
minZoom: 0,
maxZoom: 16,
ext: 'png'
});
const key = 'paglUJQl74h39APJmOFJ';
let os_maps = L.tileLayer(`https://api.maptiler.com/tiles/uk-osgb10k1888/{z}/{x}/{y}.jpg?key=paglUJQl74h39APJmOFJ`,{ //style URL
tileSize: 512,
zoomOffset: -1,
minZoom: 1,
crossOrigin: true,
className: 'os_maps'
});
let os_multi_scale = L.tileLayer(`https://api.maptiler.com/tiles/uk-osgb1888/{z}/{x}/{y}?key=paglUJQl74h39APJmOFJ`,{ //style URL
tileSize: 512,
zoomOffset: -1,
minZoom: 1,
crossOrigin: true,
className: 'os_maps'
});
let os_maps_2 = L.tileLayer("https://api.maptiler.com/tiles/uk-osgb1888/{z}/{x}/{y}?key=paglUJQl74h39APJmOFJ",{ //style URL
tileSize: 512,
zoomOffset: -1,
minZoom: 1,
crossOrigin: true,
className: 'os_maps'
});
let hills = L.tileLayer("https://api.maptiler.com/tiles/uk-osgb10k1888/{z}/{x}/{y}.jpg?key=paglUJQl74h39APJmOFJ",{ //style URL
tileSize: 512,
zoomOffset: -1,
minZoom: 1,
crossOrigin: true,
className: 'os_maps'
});
let os_london = L.tileLayer("https://api.maptiler.com/tiles/uk-oslondon1k1893/{z}/{x}/{y}.jpg?key=paglUJQl74h39APJmOFJ",{ //style URL
tileSize: 512,
zoomOffset: -1,
minZoom: 1,
crossOrigin: true,
className: 'os_maps_london'
});
var baseMaps = {
"Stamen Toner": Stamen_TonerBackground,
"Stamen Toner Labelled" : Stamen_Toner,
"OS Maps Multi Scale" : os_multi_scale,
"OS Maps": os_maps,
"OS Maps Hills": os_maps_2,
"Hills" : hills,
"OS Maps London" : os_london,
};
let map = L.map('map', {attributionControl: false, zoomControl: false}).setView({'lat': 51.555514883267996, 'lng': -0.07930755615234376}, 15); let map = L.map('map', {attributionControl: false, zoomControl: false}).setView({'lat': 51.555514883267996, 'lng': -0.07930755615234376}, 15);
map.addLayer(Stamen_TonerBackground);
map.addLayer(Stamen_TonerBackground);
let layerControl = L.control.layers(baseMaps).addTo(map);
//map.addLayer(os_maps);
</script> </script>
@ -62,7 +132,7 @@ Here's a 3D version. I got the scan with the lidar scanner on an ipad.
</figcaption> </figcaption>
</figure> </figure>
Given how long those Given how long those took to cut, I'm thinking that I'll split the design into multiple panels so I don't have to babysit the laser cutter for 24 hours.
<!-- Ideas: <!-- Ideas:
https://github.com/grinat/leaflet-simple-map-screenshoter Can only get raster data this way https://github.com/grinat/leaflet-simple-map-screenshoter Can only get raster data this way

2
assets/js/domtoimage.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long