0

First off I'm not looking for completed code. I'm am interested in ideas on how one might break this project down. I do have a concept in mind but it's getting quite complicated as I go, with re-rendering parts as the main map it pan/zoom about. So I'm hoping some one may have a clever idea that is not overly complicated.

Imagine an actual printed city map. It has a zone grid overlaid on the city features that typically has alpha characters across the top - A, B, C, D, ect. And numbers vertically along the side 1, 2, 3... You get the idea?

So here's my project. The map itself should zoom and pan while the zone legends remain on the top and side of the map view. The legends would scale with the zoom level of the map, yet their text would remain a fixed size regardless of the zoom level. Also the legends would pan along with the map but only in their respective axis, staying at the top and side.

I have developed the basic map with the grid, but obviously the legends move and scale with the map, so they can end up unseen off the boundary at times.

Mike
  • 265
  • 2
  • 10
  • Have you thought about breaking the zone legend and map up, such that the zone legend is implemented either as a pair of thin panels at the side and top of the map, or as a panel "behind" (z-index) the main map panel, with only edges exposed? – barry-johnson Mar 23 '17 at 17:27
  • If you plan to do mapping/plots with svg, consider using d3...the learning curve may be worth it. To see an example of axis scaling on zoom/pan with d3 see: http://bl.ocks.org/stepheneb/1182434 – Francis Hemsher Mar 23 '17 at 19:08
  • Thanks Francis. Yes that illustrates my desired action quit well! A quick peak behind the curtain on that graph gives me something to work with. – Mike Mar 23 '17 at 21:31
  • Barry, Thanks also. Yes I knew I'd need to break it into blocks to handle the scale and pan separately. – Mike Mar 23 '17 at 21:34
  • If you're going to use https://github.com/ariutta/svg-pan-zoom library then you can have few groups in your SVG but enable pan/zoom only for one (look into `viewportSelector` option). But D3 may prove to be a better option overall. – bumbu Mar 24 '17 at 01:05

0 Answers0