The blog of a developer

WoW Screenshots Map disabled

The new style maps on the wow screenshot pages are there now for a while. People seem to like them alot as they startmoving them around and check out place in the world. For the moment they are disabled to correct a few issue's. There are some problems I would like to fix before putting them back on. They can be very bandwidth demanding so I'll be looking into using a mix of image type to have optimal bandwidth useage but keeping the quality up. Another thing that is going to be included are Instance maps (thanks to Dan Gilbert from atlasmod.com). The third issue are the markers. Currently they are only on a handfull of zones like Nagrand. (The maps will only be removed on screenshot pages, but will be available on the map page and the page pages since they are still usefull on those pages.) This upcoming change will also include (when available) 4 diget coords to improve acuracy.

WyriHaximus

This post (WoW Screenshots Map disabled) has been posted on the WyriHaximus.net Blog by WyriHaximus. Tagged with these tags: screenshots (22), World of Warcraft (21), Maps (2), Happy (1), Atlas Mod (1), Coords (1)

Custom Google Map Tiles part 2/2: Slicing the tiles and creating the HTML

Time to create a Custom Tiled Google Map from out previous created World of Warcraft map. We'll do 3 maps in this tutorial. Starting with an easy of GTASA (Grand Theft Auto Sanandreas), then we'll make it a bit harder and make a Guild Wars map. After that we'll make a World of Warcraft map out of 4 parts. Below are the images needed for each map. With the GTASA I'll take you by hand over each step so you can get familier with the steps and give a short explanation of what each option/handling does. With the Guild Wars map we'll make a bigger map and with the World of Warcraft map we make a map out of 4 images and use some extra techniques to speed things up.

For this we need the following things:

A decent amount of RAM (atleast 2GB should do the trick)
Photoshop (One with JavaScript support)
A Google Maps API key
An HTML editor (one wich you can edit the source with) and maybe a JS editor if your HTML editor can't handle it.
The tile cutter script from mapki.com
Beer (No download available working on that sorry.)
Popcorn or something else to eat

And you'll need the following images:

Grand Theft Auto: San Andreas

Guild Wars

World of Warcraft

Before we start take a few things in mind. This tutorial was written on a Quad Core (Q6600) Intel Proc, 2GB RAM, Striped 7500rpm SATA HDD running Vista Home Premium. Performance can be different for you depending on the box your using. So if I say a few minutes on my box it can very well but a few days, weeks heck maybe even months on your x486 ;). Also path used are my own. Make sure to keep an eye on that the ones you use are correct and make sure not to mix up :). The file paths used

GTA Sanandreas

As said we'll start easy, just follow my instructions and get used to the steps.

Configurating the script

We'll start with downloading the map image. And open the .js file. In the .js file look for this line.

var FolderPath = "C:/Users/test/"; //<-- path to where we will save our tiles

Change it to the location where you want the tile slices to end up. In my case I aimed it at my localwebserver's wwwroot directory, and to a specific folder for the GTA Sanandreas slices.

var FolderPath = "C:/htdocs/gtasa/"; //<-- path to where we will save our tiles

Now find this lines. These lines controll the number of zoom level sliced.

var HighestZoomLevel = 17; // Enter the highest zoom level we are creating tiles for (should be less than OrgZoom; technically the script should be able to handle values larger as well, but your image quality will suffer)

var LowestZoomLevel = 12; // Enter the last zoom level we want to create tiles for (must be <= HighestZoomLevel for the script to do anything)

And change it into.

var HighestZoomLevel = 6; // Enter the highest zoom level we are creating tiles for (should be less than OrgZoom; technically the  script should be able to handle values larger as well, but your image quality will suffer)

var LowestZoomLevel = 1; // Enter the last zoom level we want to create tiles for (must be <= HighestZoomLevel for the script to do anything)

For GTASA We'll use fixed values to keep it easy. Later on I'll explain it in more detail and with the last one I'll give hints so you can figure it out ;).

Next up are the lines that controll the file naming indirectly.

var OrgX = 31551; // the Google Maps X value of the tile at the top left corner of your Photoshop document

var OrgY = 50899; // the Google Maps Y value of the tile at the top left corner of your Photoshop document

var OrgZoomLevel = 17; // the Google Maps zoom level of your Photoshop document (for best results, you will need to resize your Photoshop document to match a zoom level as closely as possible before running this script)

Change it into.

var OrgX = 1;   // the Google Maps X value of the tile at the top left corner of your Photoshop document

var OrgY = 1;   // the Google Maps Y value of the tile at the top left corner of your Photoshop document

var OrgZoomLevel = 6;   // the Google Maps zoom level of your Photoshop document (for best results, you will need to resize your  Photoshop document to match a zoom level as closely as possible before running this script)

The reason why both OrgX and OrgY are 1 is to keep it simple. The OrgZoomLevel is the same as HighestZoomLevel since it's causing very tiny results on low zoom levels and end up with an ugly effect.

Following are the lines that controll what image type to output.

var saveJPEG = true;

var savePNG = false;

var saveGIF = false;

Into.

var saveJPEG = false;

var savePNG = true;

var saveGIF = false;

Slicing the tiles

This is the easiest step of all since you just sit and wait. Fire up Photoshop, and open the GTASA map image. Set foreground and background color to black (or white, or yellow if you like but I found black the best suiteble color for this). Now go to File -> Scripts -> Browse. Go to where ever you saved the tile cutter script and open it. No open up yer first beer and grab a bite. This will take a few minutes. You should see alot of screenings opening, resizing and closing and doing it all over again. Once the script is finished you'll see the full map image again. And if you check in C:/htdocs/gtasa/, there should be a shit load of 256x256 images in there.

Putting together the HTML

We'll start with including the Google Maps API. (Make sure you replace [KEY] with your Google Maps API key.)

<script src="http://maps.google.com/maps?file=api&v=2&key=[KEY]" type="text/javascript"></script>

Next we'll create the div that will contain the map widget. We'll name it gtasa_map and size is 450 by 300.

<div id="gtasa_map" style="width: 450px; height: 300px"></div>

We'll create a function that will be called when the loading of the page is finished. Within that function is a check if the used browser can run Google Maps. And after the function with hook it up to the onload event.

<script type="text/javascript">



function on_load_maps()

{

   if (GBrowserIsCompatible())

   {

   }

}



window.onload = on_load_maps;



</script>

All of the following code lines should be place within the if that checks the browsers compatibility. First we create a new GMap2 object hooked to the early created div.

var gtasa_map = new GMap2(document.getElementById("gtasa_map"));

This adds the zoom and panning control.

gtasa_map.addControl(new GLargeMapControl());

Prepare the copyright info.

      var gtasa_copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(-90,-180),new GLatLng(90,180)), 1, "(c) 2008 WyriHaximus.net");

      var gtasa_copyrightCollection = new GCopyrightCollection('Map Data:');

      gtasa_copyrightCollection.addCopyright(gtasa_copyright);

This is the most importend bit. This will tell Google Maps what the URL of the tiles is.

      gtasa_CustomGetTileUrl=function(a,b){

         var f = "http://mt1.servcontent.wyrihaximus.net/gtasa/"+b+"_"+a.x+"_"+a.y+".png";

         return f;

      }

Combine the copyright info and the custom tile code.

      var gtasa_tilelayers = [new GTileLayer(gtasa_copyrightCollection,1,6)];

      gtasa_tilelayers[0].getTileUrl = gtasa_CustomGetTileUrl;

      var gtasa_custommap = new GMapType(gtasa_tilelayers, new GMercatorProjection(7), "Old OS");

Set the center of the map so we have the map nice in the middle of our widget.

gtasa_map.setCenter(new GLatLng(73.92246884621463,-105.8203125, true), 1, gtasa_custommap);

This applies the custom map to the widget.

gtasa_map.addMapType(gtasa_custommap);

You should end up with this big of code:


<div id="gtasa_map" style="width: 450px; height: 300px"></div>



<script
 src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[KEY]" type="text/javascript"></script>
<script type="text/javascript">



function on_load_maps()

{

   if (GBrowserIsCompatible())

   {

      var gtasa_map = new GMap2(document.getElementById("gtasa_map"));

      gtasa_map.addControl(new GLargeMapControl());

      var gtasa_copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(-90,-180),new GLatLng(90,180)), 1, "(c) 2008 WyriHaximus.net");

      var gtasa_copyrightCollection = new GCopyrightCollection('Map Data:');

      gtasa_copyrightCollection.addCopyright(gtasa_copyright);

      gtasa_CustomGetTileUrl=function(a,b){

         var f = "http://mt1.servcontent.wyrihaximus.net/gtasa/"+b+"_"+a.x+"_"+a.y+".png";

         return f;

      }

      var gtasa_tilelayers = [new GTileLayer(gtasa_copyrightCollection,1,6)];

      gtasa_tilelayers[0].getTileUrl = gtasa_CustomGetTileUrl;

      var gtasa_custommap = new GMapType(gtasa_tilelayers, new GMercatorProjection(7), "Old OS");

      gtasa_map.setCenter(new GLatLng(73.92246884621463,-105.8203125, true), 1, gtasa_custommap);

      gtasa_map.addMapType(gtasa_custommap);

   }

}



window.onload = on_load_maps;



</script>

The Result

Now we've got something cool, a fully working Google Map Mashup of the GTASA map. From here we can put markers on places, create permalinks to special places and more. But I'll cover that in another tutorial.

Guild Wars

Lets step it up a bit, the following instructions are in essention the same but with a Guild Wars twist.

Configurating the script

Open the .js file we used last time. We are going to change a few things to prepare it for to Guild Wars map.

var FolderPath = "C:/htdocs/gtasa/"; //<-- path to where we will save our tiles

Change it to a map for the Guild Wars tiles, preferable like we did last time to keep everythings together.

var FolderPath = "C:/htdocs/gw/"; //<-- path to where we will save our tiles

Now find this lines. These lines controll the number of zoom level sliced.

var HighestZoomLevel = 6; // Enter the highest zoom level we are creating tiles for (should be less than OrgZoom; technically the  script should be able to handle values larger as well, but your image quality will suffer)

And change it into the below. This changes the HighestZoomLevel to something higher since this image is something over twice as big. To keep is simple we add 2 to the value in the GTASA example.

var HighestZoomLevel = 8; // Enter the highest zoom level we are creating tiles for (should be less than OrgZoom; technically the  script should be able to handle values larger as well, but your image quality will suffer)

Next up are the lines that controll the file naming indirectly. They add numbers to the tile name representing the X and Y values for each zoom level based on what you give here.

var OrgZoomLevel = 6;   // the Google Maps zoom level of your Photoshop document (for best results, you will need to resize your  Photoshop document to match a zoom level as closely as possible before running this script)

Change it into. Once again we set OrgZoomLevel to HighestZoomLevel to avoid funny effects.

var OrgZoomLevel = 8;   // the Google Maps zoom level of your Photoshop document (for best results, you will need to resize your  Photoshop document to match a zoom level as closely as possible before running this script)

Slicing the tiles

This is the easiest step of all since you just sit and wait. Now open up yer seccond and third beer since this will take a while or go take a shower. When this is done you'll see alot of images in C:/htdocs/gw/.

Putting together the HTML

Since we allready build this piece of code I'll describe what each changed does (beside the nameing ofcourse).

We'll start with the changed code:


<div id="gw_map" style="width: 450px; height: 300px"></div>



<script
 src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[KEY]" type="text/javascript"></script>
<script type="text/javascript">



function on_load_maps()

{

   if (GBrowserIsCompatible())

   {

      var gw_map = new GMap2(document.getElementById("gw_map"));

      gw_map.addControl(new GLargeMapControl());

      var gw_copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(-90,-180),new GLatLng(90,180)), 1, "(c) 2008 WyriHaximus.net");

      var gw_copyrightCollection = new GCopyrightCollection('Map Data:');

      gw_copyrightCollection.addCopyright(gw_copyright);

      gw_CustomGetTileUrl=function(a,b){

         var f = "http://mt1.servcontent.wyrihaximus.net/gw/"+b+"_"+a.x+"_"+a.y+".png";

         return f;

      }

      var gw_tilelayers = [new GTileLayer(gw_copyrightCollection,1,8)];

      gw_tilelayers[0].getTileUrl = gw_CustomGetTileUrl;

      var gw_custommap = new GMapType(gw_tilelayers, new GMercatorProjection(9), "Old OS");

      gw_map.setCenter(new GLatLng(68.78414378041504,-99.140625, true), 1, gw_custommap);

      gw_map.addMapType(gw_custommap);

   }

}



window.onload = on_load_maps;



</script>

Since the number of zoom levels we only have to change 2 lines. We'll start with telling the Google Maps API that the zoom levels will range from 1 to 8 instead of fom 1 till 6.

var gw_tilelayers = [new GTileLayer(gw_copyrightCollection,1,6)];

Into:

var gw_tilelayers = [new GTileLayer(gw_copyrightCollection,1,8)];

And since the number of zoom levels (form 0 till the max you entered before, and in our case 8) to be exspected. Change it form 7 to 9 to match the Guild Wars map.

var gw_custommap = new GMapType(gw_tilelayers, new GMercatorProjection(7), "Old OS");

Into:

var gw_custommap = new GMapType(gw_tilelayers, new GMercatorProjection(9), "Old OS");

And last but most importend, the new image slices location:

var f = "http://mt1.servcontent.wyrihaximus.net/gtasa/"+b+"_"+a.x+"_"+a.y+".png";

Into:

var f = "http://mt1.servcontent.wyrihaximus.net/gw/"+b+"_"+a.x+"_"+a.y+".png";

The Result

Congratulations you've (with minor alterations) created a Google Maps Mashup Guild Wars Map. As you can see once you got the hang of it, it's simple :).

World of Warcraft

Ok this is going to be fun, instead of 1 image we got 4 this time. And we'll also get a more improved tile script to speed things up. We'll start with setting up the script for the first image.

Change:

var FolderPath = "C:/htdocs/gw/"; //<-- path to where we will save our tiles

Into:

var FolderPath = "C:/htdocs/wow/"; //<-- path to where we will save our tiles

Start Photoshop, open Full_Map_1x0_16384x16384.jpg and fire up the script. Go do something untill it's done. When it's done close the current document (don't save) and open Full_Map_1x0_16384x16384.jpg. Now we are going to change 1 setting of the script so we don't overwrite the tiles just created.

Change:

var OrgX = 1; // the Google Maps X value of the tile at the top left corner of your Photoshop document

Into:

var OrgX = 65; // the Google Maps X value of the tile at the top left corner of your Photoshop document

Now we are going to add the next 2 images below the previous 2. Change the folowing things in the script.

Change:

var OrgX = 65;   // the Google Maps X value of the tile at the top left corner of your Photoshop document

var OrgY = 1;   // the Google Maps Y value of the tile at the top left corner of your Photoshop document

Into:

var OrgX = 1;   // the Google Maps X value of the tile at the top left corner of your Photoshop document

var OrgY = 65;   // the Google Maps Y value of the tile at the top left corner of your Photoshop document

Close the current image and open Full_Map_3x0_16384x16384.jpg, start the script and wait till it's done. After that change the script again:

var OrgX = 1; // the Google Maps X value of the tile at the top left corner of your Photoshop document

Into:

var OrgX = 65; // the Google Maps X value of the tile at the top left corner of your Photoshop document

var OrgX = 1;   // the Google Maps X value of the tile at the top left corner of your Photoshop document

var OrgY = 1;   // the Google Maps Y value of the tile at the top left corner of your Photoshop document

Now close the current image and open Full_Map_3x1_16384x16384.jpg, start the script and wait till it's done. When it's done you created all the tiles needed. To be honest this isn't the best method but on machines with low memory (2GB) it's the best and most simple way. The best way would be just 1 big image but that is out of reach in this cause, those images take up 6GB of RAM ;). Anyway lets move on to the next step and create the JavaScript.

Putting together the HTML

We'll start with the same scripts as the others (except the naming prefix).


<div id="wow_map" style="width: 450px; height: 300px"></div>



<script
 src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[KEY]" type="text/javascript"></script>
<script type="text/javascript">



function on_load_maps()

{

   if (GBrowserIsCompatible())

   {

      var wow_map = new GMap2(document.getElementById("wow_map"));

      wow_map.addControl(new GLargeMapControl());

      var wow_copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(-90,-180),new GLatLng(90,180)), 1, "(c) 2008 WyriHaximus.net");

      var wow_copyrightCollection = new GCopyrightCollection('Map Data:');

      wow_copyrightCollection.addCopyright(wow_copyright);

      wow_CustomGetTileUrl=function(a,b){

         var f = "http://mt1.servcontent.wyrihaximus.net/wow/"+b+"_"+a.x+"_"+a.y+".png";

         return f;

      }

      var wow_tilelayers = [new GTileLayer(wow_copyrightCollection,1,8)];

      wow_tilelayers[0].getTileUrl = wow_CustomGetTileUrl;

      var wow_custommap = new GMapType(wow_tilelayers, new GMercatorProjection(9), "Old OS");

      wow_map.setCenter(new GLatLng(63.860035895395306,-80.15625, true), 1, wow_custommap);

      wow_map.addMapType(wow_custommap);

   }

}



window.onload = on_load_maps;



</script>

Now we are going to add a bit of code that spreads the image requests over multiple servers. This makes the map loading alot faster when it loads for the first time or your moving around. Most browsers have a limit of simultanious downloaded files (images/css/html etc etc) we'll by pass that by using multiple servers. First find the following 2 lines:


   if (GBrowserIsCompatible())

   {

After that add this code (note that these are my servers you should replace them with your own!):


      var current_server = 0;

      var number_of_servers = 0;

      var myservers=new Array();

      myservers[number_of_servers++]="mt1.servcontent.wyrihaximus.net";

      myservers[number_of_servers++]="mt2.servcontent.wyrihaximus.net";

      myservers[number_of_servers++]="mt3.servcontent.wyrihaximus.net";

      myservers[number_of_servers++]="mt4.servcontent.wyrihaximus.net";

      myservers[number_of_servers++]="mt5.servcontent.wyrihaximus.net";

Now we are going to alter the line that gives the Google Maps API the tile URL. The change will pick the next server in row every time the function is called. This will spread out the connections over different servers and speed up the loading of the map.

Change:

var f = "http://mt1.servcontent.wyrihaximus.net/wow/"+b+"_"+a.x+"_"+a.y+".png";

Into:

         current_server = (current_server+1) % number_of_servers;

         var f = "http://" + myservers[current_server] + "/wow/"+b+"_"+a.x+"_"+a.y+".png";

You should have this code now


<div id="wow_map" style="width: 450px; height: 300px"></div>



<script
 src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[KEY]" type="text/javascript"></script>
<script type="text/javascript">



function on_load_maps()

{

   if (GBrowserIsCompatible())

   {

      var current_server = 0;

      var number_of_servers = 0;

      var myservers=new Array();

      myservers[number_of_servers++]="mt1.servcontent.wyrihaximus.net";

      myservers[number_of_servers++]="mt2.servcontent.wyrihaximus.net";

      myservers[number_of_servers++]="mt3.servcontent.wyrihaximus.net";

      myservers[number_of_servers++]="mt4.servcontent.wyrihaximus.net";

      myservers[number_of_servers++]="mt5.servcontent.wyrihaximus.net";

      var wow_map = new GMap2(document.getElementById("wow_map"));

      wow_map.addControl(new GLargeMapControl());

      var wow_copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(-90,-180),new GLatLng(90,180)), 1, "(c) 2008 WyriHaximus.net");

      var wow_copyrightCollection = new GCopyrightCollection('Map Data:');

      wow_copyrightCollection.addCopyright(wow_copyright);

      wow_CustomGetTileUrl=function(a,b){

         current_server = (current_server+1) % number_of_servers;

         var f = "http://" + myservers[current_server] + "/wow/"+b+"_"+a.x+"_"+a.y+".png";

         return f;

      }

      var wow_tilelayers = [new GTileLayer(wow_copyrightCollection,1,8)];

      wow_tilelayers[0].getTileUrl = wow_CustomGetTileUrl;

      var wow_custommap = new GMapType(wow_tilelayers, new GMercatorProjection(9), "Old OS");

      wow_map.setCenter(new GLatLng(63.860035895395306,-80.15625, true), 1, wow_custommap);

      wow_map.addMapType(wow_custommap);

   }

}



window.onload = on_load_maps;



</script>

The Result

Resources

All the images, tiles and html for this tutorial are available with this torrent. (It's 580MB so I'm not going to put that up for download on my site ;).)

Information Sources

I couldn't have wrote this tutorial without some sites, persons and the combination of them.

Mapki (Great information source)
Google Code (Standard manuel)

WyriHaximus

This post (Custom Google Map Tiles part 2/2: Slicing the tiles and creating the HTML) has been posted on the WyriHaximus.net Blog by WyriHaximus. Tagged with these tags: Google (10), World of Warcraft (21), Google Maps (6), Tutorial (2), Photoshop (2), Maps (2), Guild Wars (1), Grand Theft Auto: San Andreas (1), Tiles (1), Torrent (1), Custom Tiles (1), onzin (1)

Water plus Home Server is a very bad combination

Sigh here we go again. Last night some water leaked from our aquarium on the floor. We pulled out everything on power when we noticed it. That plus probably the water killed my home server so for the next few days anything not cached on the site server (like screenshots images) are unavailable. A new server is allready arranged and should be up and running in a few days. I'll keep you posted.

WyriHaximus

This post (Water plus Home Server is a very bad combination) has been posted on the WyriHaximus.net Blog by WyriHaximus. Tagged with these tags: Water (1), News (3), Home Server (1)

Toplist MOD for phpBB3 Screens

Development is going great for Toplist MOD for phpBB3. Most of the work is converting the themes to the new system and into the new style. Some code fixes are included aswell and they will also be updated in the version for phpBB2. To keep is short here are 2 screenshots of the phpBB3 version:

Main Page

Edit/Add Page

WyriHaximus

This post (Toplist MOD for phpBB3 Screens) has been posted on the WyriHaximus.net Blog by WyriHaximus. Tagged with these tags: Toplist MOD (12), phpBB (24), PHP (16), phpBB3 (1), Developement (1)

Friday night Themed Links stops (for now)

Ok this is it (for now) for the Friday night Themed Links. I decided to do this only once a month on the 14th of the month. This is to create more usefull and bigger link lists. Also a reason why I choose to do this less frequently to create better quality posts.

WyriHaximus

This post (Friday night Themed Links stops (for now)) has been posted on the WyriHaximus.net Blog by WyriHaximus. Tagged with these tags: Friday night Themed Links (15), News (3)

Friday night Themed Links week 13: 39 World of Warcraft Sites

Easy pick for me this week, here is my World of Warcraft site list.

Official Sites
Official site
Blizzard their site

General
WoWWiki
JustWoW Screenshot upload
worldofwar.net
wowblues.com
wowbash.com
mapwow.com
warcraftrealms.com
wowjutsu.com
blogazeroth.com
warcraftmovies.com
nogold.org
wow @ warcry.com
wow @ tentonhammer.com
BlizzPlanet.com
Warcraft Radio

Databases
thottbot.com
wowdb.com
wowdigger.com
wow.allakhazam.com
wowhead.com
wowitemcreator.com
lootables.com

Addons
wowinterface.com
wowace.com
wowui.worldofwar.net
wow.curse.com
warcraft-mods.com
cosmosui.org

Comics (Some not directly wow realted)
Dragon Touched
The Chronicles of The Flaming Ruby
Looking For Group
The Noob
manic.comicgenesis.com
Dark Legacy

Sigcreators
dkpsigs.com
wowden.com
wowsigs.com

For a full list check here

WyriHaximus

This post (Friday night Themed Links week 13: 39 World of Warcraft Sites) has been posted on the WyriHaximus.net Blog by WyriHaximus. Tagged with these tags: World of Warcraft (21), Friday night Themed Links (15)

Monthly Website Tips: Social March

Ok this area of work is kinda new for me. Never dugg into the social aspect of the web that much as a tech guy. But after some weeks of trying I booked some interesting results with it.

Forums

When looking into the other things (comments, digg(-clones)), and in particular looking through my access_logs. I found out that alot of people where checking out the sites I placed in my forum signature. After setting up a bit more advanced logging on this (phenomena). I found 2 different groups that where clicking. First the returning visitors (more then 1 visit) made out about 10 - 20% of the incoming hits from forums. The other 80 - 90% goes to the new visitor. So putting links in your forum signature is certainly worth the little effort.

Comments

Posting comments has the same effect as a forum signature. When posting a constructive (or just a positive) comment on a post/article/entry people tend to check out your site. This will have a positive effect on the number of visitors your getting.But again make sure to post something useful/constructive.

Sites

Below are a few sites that, when used properly, can increase your reach.

Blogsvine was the first Digg clone that really gave me the idea could become something big (although you never know :P). Normally I would either ignore sites like this but for some reason (probably cause it's focused on bloggers) it interested me to join and submit some of my posts. After doing so and submitting the first one (bare in mind they where only open for 3 weeks then) and looking whathappened the vist vote came rather fast. Alot faster then expected. Happy with the fast progress I submitted 3 more posts and 2 of them ended up on their frontpage. This quickly resulted in a hand full of hits in over an hour. Something I had the BlogRush widget on my site for months but not getting one and now I had them within 60 minutes.

Entrecard is really new for me it's. After ready Michael Aulia's post on it I gave it a shot. No regrets this far but didn't found anythinguse full yet besides that other users will check out your site to drop their card. Will get back on this some time later. But wanted to mention it since it lookspromising.

This time the article is shorter then normal but with these tips you can gain easily as much as with the previous articles. Next month I'll get to something techie again since I'm alot better at it.

WyriHaximus

This post (Monthly Website Tips: Social March) has been posted on the WyriHaximus.net Blog by WyriHaximus. Tagged with these tags: Monthly Website Tips (3), Blogsvine (2), Entrecard (1), Blogrush (1), Comments (1), Forums (1)

Custom Google Map Tiles part 1/2: Creating the map

This part is optional and only covers creating a map image from the World of Warcraft game files. If you are looking for a how to create a google map custom tiles from a map image please keep an eye on my blogs. I'll post part 2/2 before the end of next week.

In this tutorial we need the following tools/programs and games:

World of Warcraft + The Burning Crusade game installed on your computer
wowmapper The tool to extract the minimap image from the game data
Photoshop or The G.I.M.P. to put together the map

We start with installing World of Wacraft and The Burning Crusade (if you want those maps aswell that is). This is something you have to do you self and goes beyond the scope of this tutorial.

Now we download and fire up wowmapper. Now we are going to follow the instructions on the site:

open the 'initialisation' tab
click "initialiser'
the list of available section appears
choose one section then click "generer carte"
preview panel will open automatically
select the zone you want to render with the mouse (highlight it)
choose the output size (256 is the 1:1 format)
click render

These steps will be repeated till you got all the images for on your map. I did all the PvPzones, Easteren Kingdoms, Outland and Kalimdor. Once you exported these maps fireup your image editor. IMPORTEND NOTE: While doing this step I plitted the map in 4 pieces of 16384x16384 pixels this costs about 1GB of RAM per image! Make sure that you have 2GB or more in your PC. (OR try out what happens if you have less.)

Now we got our images and our image editor open and create a plain black image and save it. We'll use this image to put the maps on. Once you placed everything on the map save it and close everything.

There you go, you have created your own map image now. Next week we'll continue to part 2/2. If something is unclear or if you have any other comment/question/feed back, please don't hesitate to leave a comment.

WyriHaximus

EDIT: Part 2 is online now.

This post (Custom Google Map Tiles part 1/2: Creating the map) has been posted on the WyriHaximus.net Blog by WyriHaximus. Tagged with these tags: World of Warcraft (21), The G.I.M.P. (1), Photoshop (2), wowmapper (1), Article (2), Turorial (1)

How to add your visitors to a Google Map

Ok message 1 of today will be a howto to add your visitors as dots on a world map using Google Maps.

First of all we need a API key from Google, you can get it here.

Then we start setting up the very basics on the maps. First with a DIV where the map will be placed in:


<div id="map_canvas" style="width: 700px; height: 300px"></div>

Above that we add the javascript include from google, make sure to replace [API_KEY] with your API key:


<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[API_KEY]" type="text/javascript"></script>

Next we create a function named on_load (or any other name you like but I'll use on_load in this howto):


<script type="text/javascript">    

function on_load()

{

}

window.onload = on_load;

</script>

As you can see I also added window.onload and pointed it to the on_load function. This is to make sure it works in all supported browsers. (IE and Safari go nuts if you start executing the map before the page is loaded. FF has no problem with this tho.) Ok now we are going to fill up the function with the initial code to display the map.

First we add an if to the function to check if the used browser is supported:


    if(GBrowserIsCompatible())

    {

    }

Within this if we create the map object and display it, the map_canvas bit is the name of the DIV where the map is rendered in:


        var map = new GMap2(document.getElementById("map_canvas"));

Now we have a working map. Nothing fancy yet tho, that is what we are going to add now.

First we add the daylightmap (by daylightmap.com be sure to check here before you add this bit). We begin by adding their js include directly after google's include:


<script src="http://www.daylightmap.com/daylight_packed.js" type="text/javascript"></script>

Then we add this in the on_load function directly after where we created the map object:


        var daylight = new daylightMap.daylightLayer();

        daylight.addToMap(map);

This will play an extra layer over the map showing the current daylight and night zones. To add more interactivity we add 2 controls and we also set the center of the map:


        map.setCenter(new GLatLng(30, 0), 1);

        map.addControl(new GSmallMapControl());

        map.addControl(new GMapTypeControl());

Now it becomes fun cause we are going to add dots for each online visitor to the map. To keep this guide universal I assume you how basic programming knowledge and that you readed the HostIP API page. The example will be written in PHP and the IP to display on the map are in an array. This to ensure you can port it to your language of choose. (Feel free to leave a comment with your own version in your language.)

We start with a for loop to walk through to that is placed after adding the interactive bits to the map, note that I fill the array in the example with some random IP's (I just made them up nothing more nothing less):


        <?php

        $ips = array();

        $ips[] = $_SERVER['REMOTE_ADDR'];

        $ips[] = '6.56.89.74';

        for($i=0;$i<count($ips);$i++)

        {

            

        }

        ?>

Now we fetch the Latitude and Longitude from hostip.info (you can host the database yourself aswell but that goes beyond the scope of this howto):


$data = @file_get_contents('http://api.hostip.info/get_html.php?ip=' . $ips[$i] . '&position=true');

Next we check if the fetch was successful and explode/split the data into an array:


            if($data)

            {

                $ex = explode("\n",str_replace(array("\r","\n\n",'Latitude: ','Longitude: '),array("\n","\n",'',''),$data));

            }

As you can see I removed the lat and long text from the data bit. This will make checking and using easier. If no lat/long known is the string will be empty. Now we check if the string is empty or not (we add this right after the explode():


                if(!empty($ex[2]) && !empty($ex[3]))

                {

                }

Within this if we add a echo command to add a marker on the map:


                    echo('var point = new GLatLng(' . $ex[2] . ',' . $ex[3] . ");\r\n");

                    echo("map.addOverlay(new GMarker(point));\r\n");

Congratulations you have now a Google Map with a point for every visitor online on your site. You should have this code now:


<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[API_KEY]" type="text/javascript"></script>

<script src="http://www.daylightmap.com/daylight_packed.js" type="text/javascript"></script>

<div id="map_canvas" style="width: 700px; height: 300px"></div>

<script type="text/javascript">    

function on_load()

{

    if(GBrowserIsCompatible())

    {

        var map = new GMap2(document.getElementById("map_canvas"));

        var daylight = new daylightMap.daylightLayer();

        daylight.addToMap(map);

        map.setCenter(new GLatLng(30, 0), 1);

        map.addControl(new GSmallMapControl());

        map.addControl(new GMapTypeControl());

        <?php

        $ips = array();

        $ips[] = $_SERVER['REMOTE_ADDR'];

        $ips[] = '6.56.89.74';

        for($i=0;$i<count($ips);$i++)

        {

            $data = @file_get_contents('http://api.hostip.info/get_html.php?ip=' . $ips[$i] . '&position=true');

            if($data)

            {

                $ex = explode("\n",str_replace(array("\r","\n\n",'Latitude: ','Longitude: '),array("\n","\n",'',''),$data));

                if(!empty($ex[2]) && !empty($ex[3]))

                {

                    echo('var point = new GLatLng(' . $ex[2] . ',' . $ex[3] . ");\r\n");

                    echo("map.addOverlay(new GMarker(point));\r\n");

                }

            }

        }

        ?>

    }

}

window.onload = on_load;

</script>

Updated code with SuperRembo's comment:


<?php

function host_ip($ip)

{

    $data = @file_get_contents('http://api.hostip.info/get_html.php?ip=' . $ip . '&position=true');


    if($data)

    {

        $ex = explode("\\n",str_replace(array("\\r","\\n\\n",'Latitude: ','Longitude: '),array("\\n","\\n",'',''),$data));


        if(!empty($ex[2]) && !empty($ex[3]))

        {

            return array($ex[2],$ex[3]);

        }


    }

    return false;

}

$markers = $ips = array();

$ips[] = $_SERVER['REMOTE_ADDR'];

$ips[] = '6.56.89.74';

for($i=0;$i<count($ips);$i++)

{


    $marker = host_ip($ips[$i]);

    if($marker)

    {

        $markers[] = $marker;

    }

    unset($marker);


}

?>

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[API_KEY]" type="text/javascript"></script>

<script src="http://www.daylightmap.com/daylight_packed.js" type="text/javascript"></script>


<div id="map_canvas" style="width: 700px; height: 300px"></div>

<script type="text/javascript">   

function on_load()

{

    var add_marker = function (x) {


           marker_manager.addMarker(new GMarker(new GLatLng(x[0], x[1])), 0);

    }

    if(GBrowserIsCompatible())

    {

        <?php


        echo('var markers = ' . json_encode($markers) . ";\\r\\n");

        ?>

        var map = new GMap2(document.getElementById("map_canvas"));

        var daylight = new daylightMap.daylightLayer();


        daylight.addToMap(map);

        map.setCenter(new GLatLng(30, 0), 1);

        map.addControl(new GSmallMapControl());

        map.addControl(new GMapTypeControl());

        marker_manager = new GMarkerManager(map);

        markers.forEach(add_marker);


    }

}

window.onload = on_load;

</script>

My implantation:

Enjoy it and feel free to post your a link to your implentations .

WyriHaximus

This post (How to add your visitors to a Google Map) has been posted on the WyriHaximus.net Blog by WyriHaximus. Tagged with these tags: Google (10), Google Maps (6), Daylightmap (2), GeoIP (1), IP2Location (1), Hostip (1), Howto (1), Tutorial (2), Article (2)

Friday night Themed Links week 12: 0 sites

This week no links instead I spending all my time to give you 3 posts this weekend. 1 in the saterday noon, 1 in the saterday evening and 1 for sunday.

WyriHaximus

This post (Friday night Themed Links week 12: 0 sites) has been posted on the WyriHaximus.net Blog by WyriHaximus. Tagged with these tags: Friday night Themed Links (15), Google Maps (6)