Refactoring of Emanuele Feronato's scrollable map tutorial. Fixed stopMap function and updated for Phaser 2.4.4 Original code: http://www.emanueleferonato.com/2015/01/21/create-an-html5-level-selection-screen-using-a-scrollable-map-like-in-hero-emblems-game-using-phaser/

phaserDraggableClickableMap.js

var mapScreen = function(game){
	spriteNumber = null;
	number = 0;
	workingButtons = true;
	higher = true;
	score = 0;
}

// the map itself
var map;
// a couple of variables used to save start touch position
var startX;
var startY;
// dummy variable to handle multitouch, if any 
var moveIndex;
// map scrolling speed. The higher the number, the fastest 
// the scrolling. Leaving it at 1, it's like you are dragging the map
var mapSpeed = 1;
// group where map and town are placed
var mapGroup;
// the town you are about to select
var candidateTown;

mapScreen.prototype = {
	
	//var game = new Phaser.Game(320, 480, Phaser.CANVAS, "", {preload: onPreload, create: onCreate});                
	// preloading graphic assets

	// going full screen
	 goFullScreen: function(){
		this.game.scale.pageAlignHorizontally = true;
		this.game.scale.pageAlignVertically = true;
		this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
		this.game.scale.setScreenSize(true);
	},

	// creating the game itself
	 create: function() {
		goFullScreen();
		mapGroup = this.game.add.group();
		// placing the map
		map = this.game.add.image(0, 0, "map");
		mapGroup.add(map);
		// ramdomly placing ten towns
		for(var i = 0;i < 10; i++){
			var town = this.game.add.image(this.game.rnd.between(50, map.width - 50), this.game.rnd.between(50, map.height - 50), "town");
			town.anchor.setTo(0.5);
			// each town is enabled for input and has its own up and down listeners
			town.inputEnabled = true;
			town.events.onInputDown.add(this.selectTown, this);
			town.events.onInputUp.add(this.confirmTown, this);
			mapGroup.add(town);
		}
		
		var hometown = this.game.add.image(100, 140, "hometown");
		hometown.anchor.setTo(0.5);
		// each town is enabled for input and has its own up and down listeners
		hometown.inputEnabled = true;
		hometown.events.onInputDown.add(this.selectTown, this);
		hometown.events.onInputUp.add(this.confirmTown, this);
		mapGroup.add(hometown);
		
		// centering the map
		mapGroup.x = (this.game.width - map.width) / 2;
		mapGroup.y = (this.game.height - map.height) / 2;
		// listener for the touch
		this.game.input.onDown.add(this.fingerOnMap, this);

	},
	
	// the player puts the finger/mouse down on the map
	 fingerOnMap: function(){
		// saving touch start position
		startX = this.game.input.worldX;
		startY = this.game.input.worldY;
		mapGroup.saveX = mapGroup.x;
		mapGroup.saveY = mapGroup.y;
		// updating listeners
		this.game.input.onDown.remove(this.fingerOnMap,this);
		this.game.input.onUp.add(this.stopMap,this);
    moveIndex = this.game.input.addMoveCallback(this.dragMap, this)   
	},
	
	// the player stops touching the map
	stopMap: function(){
		this.game.input.onDown.add(this.fingerOnMap,this);
		this.game.input.onUp.remove(this.stopMap,this);
		this.game.input.deleteMoveCallback(this.dragMap,this);
	},
	
	// the player drags the map, we move the map according to finger
	// movement and map speed.
	 dragMap: function(){
		var currentX = this.game.input.worldX;
		var currentY = this.game.input.worldY;
		var deltaX = startX - currentX;
		var deltaY = startY - currentY; 
          if(deltaX * deltaX + deltaY * deltaY > 25){
               candidateTown = null;
          }
          if (this.game.input.activePointer.isDown) {	
			mapGroup.x = mapGroup.saveX - deltaX * mapSpeed;
			mapGroup.y = mapGroup.saveY - deltaY * mapSpeed;
			// this is to limit map movement and always have the
			// stage fully covered by the map
			if(mapGroup.x < - map.width + this.game.width){
			   mapGroup.x = - map.width + this.game.width;
			}
			if(mapGroup.x > 0){
			   mapGroup.x = 0;
			}
			if(mapGroup.y < - map.height + this.game.height){
			   mapGroup.y = - map.height + this.game.height;
			}
			if(mapGroup.y > 0){
			   mapGroup.y = 0;
			} 
	          }
		
	},
     
     // the player puts the finger/mouse down on a town
     selectTown: function(sprite, pointer) {
          candidateTown = sprite;
     },
     
     // the player stops touching the town
     confirmTown: function(sprite, pointer) {
          if(candidateTown == sprite){
               alert("Town selected");
          }
     }
         
}