We create json for a page then write a click handler that will open that page in the lineup.
function latlon () { return [ 41.6 + Math.random()/2, -88.14 + Math.random()/2] .join(",") } function chicago () { return { title: "Hello, Chicago", story: [{type:"map", text:latlon(), zoom:5}, {type:"paragraph", text:"See Street Map"}] } }
function handler (event) { let message = { action: "showResult", page: chicago(), keepLineup: event.shiftKey } window.parent.postMessage(message, "*"); }
output.innerHTML = `<button>Open Page</button>` output.addEventListener("click", handler)
Try both click and shift-click of this button.
//wiki.ralfbarkow.ch/assets/pages/snippet-template/basicjs.html?snippet-template HEIGHT 200
Shift-click Street Map to see all map markers together.
Why Chicago? I wanted to make pages that had some interest but were still easy to make algorithmically. I chose midwestern sprawl for the uniform but still historically interesting texture. I dropped two markers and then estimated the deltas in lat and lon.
41.6070798, -88.1432086 41.9082178, -87.6393127 BOUNDARY 41.4822594, -88.3953953 BOUNDARY 42.0864553, -87.3614788
Create Items and Pages with more complete json.
function open(page, keepLineup=false, forks=[]) { const dup = obj => JSON.parse(JSON.stringify(obj)) let date = Date.now() for (let item of page.story) item.id = (Math.random()*10**20).toFixed(0) page.journal = [{type:'create', date, item:dup(page)}, ...forks.map(site => ({type:'fork',date,site}))] let message = {action: "showResult", page, keepLineup} window.parent.postMessage(message, "*"); }