That tutorial works well for tiling an image across the viewport but is incomparable with an image map. What the author is doing is scrolling the sampling location on the texture and when the source rectangle extends past the borders of the Texture2D its wrapping around to select from the other side.
To render a tile map you are going to have to make as many draw calls as there are visible tiles.
Assuming that your tiles are in an 2 dimensional array this is easy
The left most visible tile is
var minX = Math.Max((int)Math.Floor((float)worldArea.Left / TileWidth), 0);
The right most visible tile is
var maxX = Math.Min((int)Math.Ceiling((float)worldArea.Right / TileWidth), Width);
The top most visible tile is
var minY = Math.Max((int)Math.Floor((float)worldArea.Top / TileHeight), 0);
The bottom most visible tile is
var maxY = Math.Min((int)Math.Ceiling((float)worldArea.Bottom / TileHeight), Height);
One you know this all you need to do is loop though the visible tiles and render them. Below is an example of how I have done this.
public void Draw(SpriteBatch spriteBatch, Rectangle worldArea) {
//Init the holder
_holder = new Rectangle(0, 0, TileWidth, TileHeight);
//Figure out the min and max tile indices to draw
var minX = Math.Max((int)Math.Floor((float)worldArea.Left / TileWidth), 0);
var maxX = Math.Min((int)Math.Ceiling((float)worldArea.Right / TileWidth), Width);
var minY = Math.Max((int)Math.Floor((float)worldArea.Top / TileHeight), 0);
var maxY = Math.Min((int)Math.Ceiling((float)worldArea.Bottom / TileHeight), Height);
for (var y = minY; y < maxY; y++) {
for (var x = minX; x < maxX; x++) {
_holder.X = x * TileWidth;
_holder.Y = y * TileHeight;
var t = tileLayer[y * Width + x];
spriteBatch.Draw(
t.Texture,
_holder,
t.SourceRectangle,
Color.White,
0,
Vector2.Zero,
t.SpriteEffects,
0);
}
}
}