ramp4-pcar4 / story-ramp

Storytelling with interactive maps using RAMP
MIT License
4 stars 14 forks source link

Support for transitional maps #404

Closed dan-bowerman closed 6 months ago

dan-bowerman commented 8 months ago

The TCEI StoryMap project (https://storymaps.arcgis.com/stories/a4e825956b4a402ebe13dbceeba66321, reach out for credentials) demonstrates this functionality. This one might take some pondering and discussion.

Animation

Dusting off the "Areas of Interest" feature in RAMP4 might be a possibility here, but what would/could our approach be to updating a map extent dynamically based on left-hand content?

dan-bowerman commented 8 months ago
james-rae commented 8 months ago

Proof of Concept from the RAMP side.

Go to this RAMP sample. Resize your browser and hit F12 so that both your viewer and console are visible (or 2-monitor party if you have it).

Then paste this block of code in the console. The map will tour around five points in Newfoundland.

const oids = [83, 45, 456, 375, 551];
const map = debugInstance.geo.map;
const nat = debugInstance.geo.layer.getLayer('Nature');
const hl = debugInstance.fixture.get('hilight');

const sleep = async millsecs => {
  return new Promise(resolve => {
    setTimeout(() => { resolve(); }, millsecs);
  });
};

const funtimes = async () => { 
  for (let i=0; i < oids.length; i++) {
    const g = await nat.getGraphic(oids[i], { getGeom: true, getStyle: true });
    await map.zoomMapTo(g.geometry, 4622324.434309);
    await hl.addHilight(g);
    await sleep(2500);
    await hl.removeHilight(g);
  }
};

funtimes();

In storylines, rather than a loop with a sleep timer, the scrolling items tied to map points would just need to encode the layer ID and object id they care about, and run the code to zoom and hilight when they enter the "dominant visible position".