{"id":20,"date":"2008-12-15T19:43:16","date_gmt":"2008-12-16T00:43:16","guid":{"rendered":"http:\/\/www.cartogrammar.com\/blog\/?p=20"},"modified":"2009-08-19T08:52:54","modified_gmt":"2009-08-19T13:52:54","slug":"simple-map-panning-and-zooming-with-actionscript","status":"publish","type":"post","link":"https:\/\/andywoodruff.com\/blog\/simple-map-panning-and-zooming-with-actionscript\/","title":{"rendered":"Simple map panning and zooming with ActionScript"},"content":{"rendered":"<p>A while ago I wrote a summary of <a href=\"http:\/\/www.cartogrammar.com\/blog\/map-panning-and-zooming-methods\/\">basic map panning and zooming methods<\/a> along with demonstrations of most of them.  There were a few requests for code examples for those demos, so (finally) I thought I&#8217;d outline some of the simple methods for doing it in Flash\/ActionScript.<\/p>\n<p>I&#8217;ve put together two AS files:<\/p>\n<ul>\n<li>A <a href=\"http:\/\/www.cartogrammar.com\/source\/PanZoomMap.as\">PanZoomMap class<\/a>, with some simple panning and zooming methods.<\/li>\n<li>An <a href=\"http:\/\/www.cartogrammar.com\/source\/PanZoomTest.as\">example class<\/a> that creates an instance of the PanZoomMap and demonstrates zooming, basic click and drag panning, and a zoom box.<\/li>\n<\/ul>\n<p>The code has some simple comments that I hope give an idea of how it works.  I&#8217;ll let them do the talking, as anything I write here is likely to be long-winded and confusing.<\/p>\n<p>The example is really very basic.  A real interactive map is likely to require some more complicated capabilities than what I have provided here, but this is a starting point that may be helpful to anyone who needs an introduction.<\/p>\n<p>Here&#8217;s what the test file does.  A simple click-and-drag pan\/zoom example:<\/p>\n\n<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\"\n\t\t\tid=\"fm_panZoomTest_403630517\"\n\t\t\tclass=\"flashmovie\"\n\t\t\twidth=\"210\"\n\t\t\theight=\"250\">\n\t<param name=\"movie\" value=\"http:\/\/www.cartogrammar.com\/flash\/panZoomTest.swf\" \/>\n\t<!--[if !IE]>-->\n\t<object\ttype=\"application\/x-shockwave-flash\"\n\t\t\tdata=\"http:\/\/www.cartogrammar.com\/flash\/panZoomTest.swf\"\n\t\t\tname=\"fm_panZoomTest_403630517\"\n\t\t\twidth=\"210\"\n\t\t\theight=\"250\">\n\t<!--<![endif]-->\n\t\t\n\t<!--[if !IE]>-->\n\t<\/object>\n\t<!--<![endif]-->\n<\/object>\n<p>And a zoom box example:<\/p>\n\n<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\"\n\t\t\tid=\"fm_zoomBoxTest_454340577\"\n\t\t\tclass=\"flashmovie\"\n\t\t\twidth=\"210\"\n\t\t\theight=\"250\">\n\t<param name=\"movie\" value=\"http:\/\/www.cartogrammar.com\/flash\/zoomBoxTest.swf\" \/>\n\t<!--[if !IE]>-->\n\t<object\ttype=\"application\/x-shockwave-flash\"\n\t\t\tdata=\"http:\/\/www.cartogrammar.com\/flash\/zoomBoxTest.swf\"\n\t\t\tname=\"fm_zoomBoxTest_454340577\"\n\t\t\twidth=\"210\"\n\t\t\theight=\"250\">\n\t<!--<![endif]-->\n\t\t\n\t<!--[if !IE]>-->\n\t<\/object>\n\t<!--<![endif]-->\n<\/object>\n","protected":false},"excerpt":{"rendered":"<p>A while ago I wrote a summary of basic map panning and zooming methods along with demonstrations of most of them. There were a few requests for code examples for those demos, so (finally) I thought I&#8217;d outline some of the simple methods for doing it in Flash\/ActionScript. I&#8217;ve put together two AS files: A [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[14,17],"class_list":["post-20","post","type-post","status-publish","format-standard","hentry","category-code","tag-as3","tag-interactive-maps"],"_links":{"self":[{"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/posts\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":2,"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/posts\/20\/revisions"}],"predecessor-version":[{"id":373,"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/posts\/20\/revisions\/373"}],"wp:attachment":[{"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/media?parent=20"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/categories?post=20"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/tags?post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}