markers at wiki image locations

pages/leaflet-maps/live.js

@@ -0,0 +1,29 @@
+// retrive live data from federated wiki site
+
+export let site = 'ward.dojo.fed.wiki'
+export const asSlug = (title) => title.replace(/\s/g, '-').replace(/[^A-Za-z0-9-]/g, '').toLowerCase()
+
+export const setsite = domain => {
+  site = domain
+}
+
+export const page = async title => {
+  return fetch(`http://${site}/${asSlug(title)}.json`).then(res => res.json())
+}
+
+export const fold = async (page, keyword) => {
+  const story = (await page).story
+  const start = story.findIndex(item => item.type=='pagefold' && item.text==keyword)
+  const stop = story.findIndex((item,i) => item.type=='pagefold' && i>start)
+  console.log({story,start,stop})
+  return story.slice(start+1,stop)
+}
+
+export const link = text => {
+  return text.split(/\[\[|\]\]/)[1]
+}
+
+export const locs = story => {
+  const places = story.filter(item => item.type=='image' && item.location)
+  return places.map(image => [image.location.latitude,image.location.longitude])
+}

pages/leaflet-maps/quick-start-module.html

@@ -14,11 +14,24 @@
     #mapid { height: 100%; }
   </style>
   <script type=module>
-    var mymap = L.map('mapid').setView([51.505, -0.09], 13);
+    var mymap = L.map('mapid').setView([51.505, -0.09], 4);
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
       attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
     }).addTo(mymap)
 
+    import * as live from './live.js'
+    const page = await live.page('System Maps from Images')
+    console.log({page})
+    const data = await live.fold(page,'data')
+    console.log({data})
+    const titles = data.map(item => live.link(item.text))
+    console.log({titles})
+    const pages = await Promise.all(titles.map(title => live.page(title)))
+    console.log({pages})
+    const locs = pages.map(page => live.locs(page.story))
+    console.log({locs})
+    locs.flat().forEach(loc => L.marker(loc).addTo(mymap))
+
     var marker = L.marker([51.5, -0.09]).addTo(mymap)
 
     var circle = L.circle([51.508, -0.11], {