mirror of
https://github.com/TomHodson/tomhodson.github.com.git
synced 2025-06-26 10:01:18 +02:00
update maps
This commit is contained in:
Tom
parent
eb7407717e
commit
39fe974148
119
_drafts/test_map.html
Normal file
119
_drafts/test_map.html
Normal 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>
|
||||
|
||||
@ -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"
|
||||
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
||||
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">
|
||||
<div id="map" style="height:100cqw; width:100cqw"></div>
|
||||
<div id="map" style="height:90cqw; width:90cqw"></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,
|
||||
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,
|
||||
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);
|
||||
map.addLayer(Stamen_TonerBackground);
|
||||
|
||||
map.addLayer(Stamen_TonerBackground);
|
||||
let layerControl = L.control.layers(baseMaps).addTo(map);
|
||||
|
||||
//map.addLayer(os_maps);
|
||||
</script>
|
||||
|
||||
|
||||
@ -62,7 +132,7 @@ Here's a 3D version. I got the scan with the lidar scanner on an ipad.
|
||||
</figcaption>
|
||||
</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:
|
||||
https://github.com/grinat/leaflet-simple-map-screenshoter Can only get raster data this way
|
||||
|
||||
2
assets/js/domtoimage.min.js
vendored
Normal file
2
assets/js/domtoimage.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user