OpenGeoscience / geojs

High-performance visualization and interactive data exploration of scientific and geospatial location aware datasets
https://opengeoscience.github.io/geojs
Apache License 2.0
441 stars 75 forks source link

is it possible to show magnification in slider widget, how to do that #1282

Open zhusihan-python opened 1 year ago

zhusihan-python commented 1 year ago

hello.

is it possible to show magnification in slider widget, how to do that if yes

like 20x when slide to level 5, 40x when slide to level 10, and show the 20x/40x when scroll the slider bar

manthey commented 1 year ago

Not directly, but it wouldn't be hard: for instance, you could use map.geoOn(geo.event.zoom, () => {<some code to update a DOM element with the scale>}).

zhusihan-python commented 1 year ago

thanks for the reply sir. i can't figure out what DOM element i can update to achieve that after reading the sliderWidget so i modified the geo.js, add a d3 text like this

m_level = svg.append('text')
  .text('20')
  .attr('x', m_xscale(0))
  .attr('y', m_yscale(0.5) - m_nubSize)
  .attr('width', m_width/2)
  .attr('height', m_nubSize)
  .attr('font-size', 12)
  .style('dominant-baseline', 'central')
  .style('text-anchor', 'middle');

then update the y and text

this._update = function (obj) {
  var map = m_this.layer().map(),
    zoomRange = map.zoomRange(),
    zoom = map.zoom(),
    zoomScale = d3.scale.linear();
  obj = obj || {};
  zoom = obj.value || zoom;
  zoomScale.domain([zoomRange.min, zoomRange.max]).range([1, 0]).clamp(true);
  m_nub.attr('y', m_yscale(zoomScale(zoom)) - m_nubSize / 2);
  m_level.attr('y', m_yscale(zoomScale(zoom)) - m_nubSize);
  m_level.text(((parseInt(zoom)+1)*5).toString());
}; 

now it looks like this image i got an magnification text which can change with the zoom event, but it can only locate upon the nub, as the text will be covered when i change the m_level x bigger than m_xscale(4)

i guess its a bad idea to modify the source code right, do you have any suggestions to do it in an elegant way