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
personal_site/_drafts/maps.md
Tom c61078b88d add maps draft
2023-08-16 12:52:36 +01:00

3.4 KiB
Raw Blame History

title, layout, excerpt, hide_image
title layout excerpt hide_image
Maps post <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> true

Made a map by screenshotting leaflet.js

<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> &mdash; Map data &copy; <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

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.
Done with the lidar scanner on an Ipad.

Ideas: https://github.com/mapbox/leaflet-image https://github.com/Flexberry/Leaflet.Export https://github.com/grinat/leaflet-simple-map-screenshoter