Build Sample Page with Demo Timeline

[danrademacher]

some notes on this:

1. We agreed to purposely write this as a custom bit of code that can be wrapped as either a Leaflet plugin or MapboxGL control

2. Xd is here: https://xd.adobe.com/view/bd75f395-6428-4b36-4885-fb71533dcff3-cb44/?fullscreen

3. Caveat on Xd: For MVP, we're going to allow selection only based integer YEARS, and min and max can be selected here:

4. And to reiterate, for MVP the slider is operating only on the data contained in the vector tiles.

[jeffreyameyer]

all good

On Wed, Apr 24, 2019 at 2:25 PM Dan Rademacher notifications@github.com wrote:

some notes on this:

1.

We agreed to purposely write this as a custom bit of code that can be wrapped as either a Leaflet plugin or MapboxGL control 2.

Xd is here:

https://xd.adobe.com/view/bd75f395-6428-4b36-4885-fb71533dcff3-cb44/?fullscreen 3.

Caveat on Xd: For MVP, we're going to allow selection only based integer YEARS, and min and max can be selected here: [image: image] https://user-images.githubusercontent.com/1423200/56693245-d2404400-6698-11e9-8431-046f4c1188a1.png 4.

And to reiterate, for MVP the slider is operating only on the data contained in the vector tiles.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/OpenHistoricalMap/openhistoricaltiles/issues/33#issuecomment-486432779, or mute the thread https://github.com/notifications/unsubscribe-auth/AALM4ERXNTCM2TVR2GJYRZTPSDF3NANCNFSM4HIFLL6Q .

-- Jeff Meyer 206-676-2347 osm: Open Historical Map (OHM) http://wiki.openstreetmap.org/wiki/Open_Historical_Map / my OSM user page http://www.openstreetmap.org/user/jeffmeyer t: @OpenHistMap

[gregallensworth]

Initial demo, a first draft of the TimeSlider control for Mapbox GL JS API

https://openhistoricalmap.github.io/openhistoricaltiles/mbgl-control-timeslider/demo/ https://github.com/OpenHistoricalMap/openhistoricaltiles/tree/gh-pages/mbgl-control-timeslider

Immediate to-do items for myself:

• [x] top-center date readout, use input event listener so it triggers on mousewheel

• [x] rework color theme slightly, which colors are in the theme and which are in the caller page

  • [x] rework built-in color theme to a more neutral white BG and grey border, matching MBGL controls
  • [x] then in demo/index.css add overrides, for a website using the widget to override these to the grey theme intended

• [x] + and - buttons, ability to not auto-expand the range

  • [x] by default have + and - buttons check that the next/prev year would be within the range, and not try to move beyond the existing range
  • [x] but have a constructor option autoExpandRange which keeps current behavior, of auto-expanding the range
  • [x] same idea for the manual date input at top-center: have it self-limit to visible range, unless autoExpandRange is enabled

• [x] add to this demo, a second panel for a Where Am I demonstrating the use of setDate() and setRange()

• [x] revisit the internal filtering logic where osm_id are cached and used; a true date filter may work via the >= <= operators, and would not require re-querying

• [x] ability to not load Glyphicons, in case the calling site already provides it and prefers to use their own?

  • [x] bonus points: ability to specify alternative CSS class name for the button-icons which are currently serviced by FA, so the caller isn't required to accept these icons

• [ ] second styling pass?

• [x] start on Leaflet version of this concept, for use with https://github.com/mapbox/mapbox-gl-leaflet

[jeffreyameyer]

w00t!

On Thu, Apr 25, 2019 at 4:23 PM Greg Allensworth notifications@github.com wrote:

Initial demo, a first draft of the TimeSlider control for Mapbox GL JS API

https://openhistoricalmap.github.io/openhistoricaltiles/dateslider-mbgl/demo/

https://github.com/OpenHistoricalMap/openhistoricaltiles/tree/gh-pages/dateslider-mbgl

Immediate to-do items for myself:

-

rework color theme slightly

• rework built-in color theme to a more neutral white BG and grey border, matching MBGL controls
  • then in demo/index.css add overrides, for a website using the widget to override these to the grey theme intended

• add to this demo, a second panel for a Where Am I demonstrating the use of setDate()

• second styling pass?

• start on Leaflet version of this concept, for use with https://github.com/mapbox/mapbox-gl-leaflet

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/OpenHistoricalMap/openhistoricaltiles/issues/33#issuecomment-486872209, or mute the thread https://github.com/notifications/unsubscribe-auth/AALM4EQJZSBYGP7TZEHV2KDPSI4O3ANCNFSM4HIFLL6Q .

-- Jeff Meyer 206-676-2347 osm: Open Historical Map (OHM) http://wiki.openstreetmap.org/wiki/Open_Historical_Map / my OSM user page http://www.openstreetmap.org/user/jeffmeyer t: @OpenHistMap

[gregallensworth]

69df474 The logic in _applyDateFilterToLayers() has been reworked to truly filter by date instead of the overly complicated and insufficient filtering by OSM osm_id Much better!

[gregallensworth]

https://github.com/OpenHistoricalMap/openhistoricaltiles/tree/gh-pages/leaflet-control-mbgltimeslider https://openhistoricalmap.github.io/openhistoricaltiles/leaflet-control-mbgltimeslider/demo/

Leaflet adapter for the MBGL TimeSlider. The same way that L.mapboxGL is a thin wrapper that puts a MBGL map inside Leaflet (and thus requires the MBGL library to be loaded in SCRIPT/LINK tags), this L.Control.MBGLTimeSlider is a thin wrapper over the MBGL Time Slider (and thus requires the TimeSlider library in SCRIPT/LINK tags).

Still to do:

• [x] basic functionality of putting widget into place, having it filter

• [x] fix layer stacking issue, control is in fact inside the map, so is down in the display panes and not control DIVs. this causes it to fall beneath the map content, to not show its BG color, to have an unpleasant flickering effect, ...

• [x] provide wrappers for the methods, so external code may call getDate() and setRange() et al

[danrademacher]

calling this done now that we're fully delving into better ways to manage dates.