Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
zhusihan-python opened this issue Jun 9, 2023 · 2 comments

Comments

@zhusihan-python
Copy link

zhusihan-python commented Jun 9, 2023

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
Copy link
Contributor

manthey commented Jun 9, 2023

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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants