Add maps
Add maps
Add code to your posts like this:
---
title: "Yes map"
published: true
date: 2023-1-20
center: '45.52025° N, 122.67419° W'
---
<script>
import Map from '$svekyll/Map.svelte';
</script>
<Map zoom={11} {center}/>
Zoom is optional and will default to 12 if not specified.
Center can be a string like (lng/lat) -81.95273, 28.045555 or an object like { lng: -81.95273, lat: 28.04555 } or a string like 45.52025° N, 122.67419° W. The last option is copied directly from the OpenStreetMap app, so you can use that inside your posts if authoring on mobile.
You can change to use another tile source using the tiles prop (it defaults to 'https://tile.openstreetmap.org/{z}/{x}/{y}.png')
No cost if you never use maps!
By the way, if you do not use a map in your post, the JavaScript for the OpenLayers is not included, reducing your download significantly. And, if multiple posts have the map, the index.html file only needs to include it once but all posts can share it. This is one of the major benefits of Svelte as a compiler and it is easy to verify with Svekyll because it generates a single independent file for each post.
chrisdawson@nixos:~/Projects/ExtraStatic/blogs/blog-example-com$ ls -lh build/2024-03-01-nomap/
total 92K
-rw-r--r-- 1 chrisdawson users 90K Sep 25 14:00 index.html
chrisdawson@nixos:~/Projects/ExtraStatic/blogs/blog-example-com$ ls -lh build/2024-03-01-map/
total 244K
-rw-r--r-- 1 chrisdawson users 244K Sep 25 14:00 index.html
chrisdawson@nixos:~/Projects/ExtraStatic/blogs/blog-example-com$ ls -lh build/index.html
-rw-r--r-- 1 chrisdawson users 269K Sep 25 14:00 build/index.html
chrisdawson@nixos:~/Projects/ExtraStatic/blogs/blog-example-com$ cat posts/2024-03-01-nomap.md
---
title: "No map"
published: true
date: 2023-1-20
---
Hi
chrisdawson@nixos:~/Projects/ExtraStatic/blogs/blog-example-com$ cat posts/2024-03-01-map.md
---
title: "Yes map"
published: true
date: 2023-1-20
center: '-122.676483, 45.523064'
---
<script>
import Map from '$svekyll/Map.svelte';
</script>
<Map {center}/>
Hi