score:0
here's what i ended up with (don't be surprised about the strangeness of js – it's es6):
const convertzoomleveltomercator = (zoomlevel) =>
math.pow(2, 8 + zoomlevel) / 2 / math.pi;
const convertzoomlevelfrommercator = (zoomlevelinmercator) =>
math.log(zoomlevelinmercator * 2 * math.pi) / math.ln2 - 8;
testing:
console.log(convertzoomleveltomercator(1));
console.log(convertzoomleveltomercator(5));
console.log(convertzoomleveltomercator(10));
console.log(convertzoomleveltomercator(15));
console.log(convertzoomleveltomercator(20));
console.log('----');
console.log(convertzoomlevelfrommercator(convertzoomleveltomercator(1)));
console.log(convertzoomlevelfrommercator(convertzoomleveltomercator(5)));
console.log(convertzoomlevelfrommercator(convertzoomleveltomercator(10)));
console.log(convertzoomlevelfrommercator(convertzoomleveltomercator(15)));
console.log(convertzoomlevelfrommercator(convertzoomleveltomercator(20)));
output:
81.48733086305042
1303.797293808806
41721.51340188181
1335088.428860218
42722829.72352698
----
1
5
10
15
20
score:3
map.projection = d3.geo.mercator()
.center([map.center[1], map.center[0]])
.scale((1 << 8 + map.zoom) / 2 / math.pi)
.translate([map.width / 2, map.height / 2])
not sure how that works, but looked at some other examples and figured it out.
Source: stackoverflow.com
Related Query
- Matching leaflet zoom level with d3 geo scale
- Achieving animated zoom with d3 and Leaflet
- D3 Zoom with Scrollbars used as panning, Scrollbar width and height adjusts to zoom scale
- Calculating Mercator d3 scaling to match Leaflet zoom level
- D3.js zoom with Ordinal axis not working - Issue with setup of scale in zoom behavior?
- Dynamic PHP geo json example with leaflet js
- D3.js scale initial zoom level
- D3 Initial Zoom with default mercator projection scale
- How to keep current zoom scale and translate level when re-rendering graph
- d3 time scale setting initial zoom level and domain
- d3js v4: Scale circles with zoom
- d3 js with scale and zoom in zoom out
- D3.js Set initial zoom level
- D3.js: calculate width of bars in time scale with changing range?
- Inversion with ordinal scale
- d3 color scale - linear with multiple colors?
- D3: Create a continuous color scale with many strings/inputs for the range and dynamically changing values of the domain
- d3 time scale x axis with unix timestamp
- how to know the current Zoom level in D3.js
- How do I specify the initial zoom level in D3?
- D3js: How do I clear the zoom scale set by the d3.zoom event?
- Using d3-3d with pan & zoom while retaining rotation
- Creating a Text Labeled x-Axis with an Ordinal Scale in D3.js
- d3 v4 - zoom with buttons in conflicts with zoom behaviour
- D3 V4 setting initial zoom level
- nvd3 scatter plot with ordinal scale
- Create a scale for bands with different width in D3.js
- Scale / Redraw d3.js gridlines on zoom / drag
- d3 zoom with touch devices sometimes behaves weirdly (using IONIC)
- D3: zoom to bounding box with d3-tiles
More Query from same tag
- Zoom causes graph to go out of the plotting area bounds
- Apply function to each element of an array
- Why does the NVD3.js line plus bar chart example render two charts instead of one?
- Can SVG path rendering be anti-aliased beyond geometricPrecision option?
- I couldn't visualize data in d3
- What is the best strategy for testing D3/HighCharts/SVG?
- Adding arrow-ends to D3.js lines
- Converting from v3 to v5 in d3 doesn't update the visualization but adds another one
- Change bar chart into pie chart
- How to flip horizontally the text on the left part of the canvas with d3.js?
- How to select right chart for your data
- How to set a CSS hover to a SVG map
- D3.js code in Reveal.js slide
- How to create a grouping key in D3js that is a combination of two JSON attributes
- Creating clusters in a sortable bar chart in D3
- D3.JS Histogram: error aligning bars when updating data
- D3 forced layout zoom function isn't working
- Issue with accessing variables from within $(window).resize function in coffeescript class
- how to transform a hierarchical csv (semicolon separated) into a multi-dimensional array
- javascript - D3 force layout collapse some node by default
- D3 force directed graph with images on canvas
- d3.js line chart with time on both axis
- Why does it need two clicks in D3.js for my click event to fire?
- Selecting specific svg path based on JSON attribute in d3.js
- How do I get the browser's "back" button to to clear the previous state of a d3.js visualization?
- Fill rect with pattern
- NodeJS how-to require module which injects a function
- Getting NaN values in svg path 'd' attr when trying to map geojson data
- Transition functionality in d3js
- How can you draw a collection of lines and points based on categorical data in D3?