Loc Maps

What Are Loc Maps?

NPCs (from enabled zones) now have "(Show On Map)" links next to their location. When you hover your mouse over this link, you will be shown a map of the zone, and the NPC will have a red "X" marking their location on that map.

Which Zones Have Loc Maps

The following zones currently have "loc maps":

• Eastern Wastes
• Rivervale
• North Qeynos -- coming soon

Adding Loc Maps

Only Admins Can Add New Zones ...

In order for loc maps to work they need to know information about a zone's image file (it's dimensions, how much it "stretches", etc.). For performance reasons, that info is kept in a Javascript file, which means only wiki admins can edit it.

(That info could be kept in a wiki page that everyone could edit ... but those files aren't "cached" by browsers the same way as Javascript files, so whenever anyone visited any NPC page, the wiki would have to load that page also to check for the zone info.)

... But The Wiki Needs Non-Admin Help

However, anyone (not just admins) can help to determine a zone's information. Once they have they can send it to Loramin, either through a forum private message (preferred) or through User_talk:Loramin (if you don't have a forum account).

How to Help

To determine a zone's info, you don't need to be a programmer, you just need to fill in a template:

{
      height: *image file height*,
      image: '*zone file name*', 
      test: {
        interval: *how far between the grid lines on the map*,
        maxX: *the highest X loc on the map*,
        maxY: *the highest Y loc on the map*,
        minX: *the lowest X loc on the map*,
        minY: *the lowest Y loc on the map*
      },
      width: *image file width*,
      zeroX: *the browser "x" position for the 0,0 point on the map*,
      zeroY: *the browser "y" position for the 0,0 point on the map*,
      zoomX: *the x-axis "zoom"*,
      zoomY: *the y-axis "zoom"*
}

for example:

{
      height: 452,
      image: 'Map_eastern_wastes.jpg', 
      test: {
        maxX: 7000,
        maxY: 1000,
        minX: -6000,
        minY: -9000,
        xInterval: 1000,
        yInterval: 1000
      },
      width: 550,
      zeroX: 284,
      zeroY: 62,
      zoomX: 0.038,
      zoomY: 0.038
}

To find those values you need to follow the instructions below and use your browser's "developer tools". These instructions assume you're using Chrome, but other browsers have similar tools.

Finding a Zone's Basic Map Info

Go to the zone page you want to add; I'll use Eastern Wastes as an example. Right-click on the map image and choose "Inspect". You'll see a bunch of HTML code. Don't worry, you don't need to understand it, you just need to find the highlighted section, which will look like this (except without the bolding):

<img alt="Map eastern wastes.jpg" src="/images/Map_eastern_wastes.jpg" width="550" height="452" class="thumbborder" title="Map eastern wastes.jpg">

This will give you the filename of the map image, and tell you its width and height.

{
      height: 452,
      image: 'Map_eastern_wastes.jpg',
      width: 550
}

Finding 0,0 On the Map

Next, we need to figure out where "0,0" is on the map. Go to a page for any NPC in the zone. For example in Eastern Wastes we could choose Boridain Glacierbane.

Your browser developer tools should still be up (if they aren't, right-click and inspect anything on the page, it doesn't matter what). There should be tabs along the top for "Elements", "Console", "Network", etc.; click on "Console".

You will see a white area with a blue angle bracket on the left. Click on the row to the right of that blue bracket and paste in the following code:

testZeroZero(*your zone info*)

For instance:

testZeroZero({
    height: 452,
    image: 'Map_eastern_wastes.jpg',
    width: 550
})

A map should appear with a big red X ... in the upper left corner :( To fix that, we need to try guessing at where the 0,0 point is. For instance, let's try 100, 100:

testZeroZero({
    height: 452,
    image: 'Map_eastern_wastes.jpg',
    width: 550,
    zeroX: 100,
    zeroY: 100
})

Now our X is closer to the 0,0 point, but still wrong. If we keep playing with it, we can eventually get the X perfectly aligned:

testZeroZero({
    height: 452,
    image: 'Map_eastern_wastes.jpg',
    width: 550,
    zeroX: 284,
    zeroY: 62
})

Finding the "Zoom Factor": Making the Test Grid

We're almost done. We just need to determine how the image scales vs. how the locs on the map scale, or in other words the "zoom factor".

To do this we need to draw some test Xs along the map's grid. To do that we need to know how far apart the lines on the map are. That means adding a new "test" section to the code we have so far:

test: {
    interval: 1000,
    maxX: 7000,
    maxY: 1000,
    minX: -6000,
    minY: -9000
},

To get these numbers, we just have to look at the map itself:

The numbers along the top of the Eastern Wastes map go from 6000 to -5000 ... but really there are grid lines that go all the way to 7000 and -6000. Those numbers become our "maxX" (7000) and "minX" (-6000).

In the same way our "maxY" becomes the highest number on the right-side (1000) and our "minY" becomes the lowest (-9000).

Finally, in both directions the numbers go in intervals of 1000, so we set the "interval" to 1000.

Finding the "Zoom Factor": Showing the Test Grid

Now that we've figured out our testing coordinates we can again go to that blue bracket line, only this time we're going to use slightly different code:

testGrid(*your zone info*)

eg.

testGrid({
    height: 452,
    image: 'Map_eastern_wastes.jpg',
    test: {
        interval: 1000,
        maxX: 7000,
        maxY: 1000,
        minX: -6000,
        minY: -9000
   },
    width: 550,
    zeroX: 284,
    zeroY: 62
})

Once you do that you should see a "grid" of red X's aligned along the map's grid ... but instead you'll probably see them all over the place. We need to fix that, and once we do we'll be done.

Finding the "Zoom Factor": Aligning the Test Grid

To tell the wiki how much to "zoom" the grid in, you need to add two last bits, the zoomX and zoomY. The default value if you don't provide these is 0.1, so if we set that we'll see the same grid.

testGrid({
    height: 452,
    image: 'Map_eastern_wastes.jpg',
    test: {
        interval: 1000,
        maxX: 7000,
        maxY: 1000,
        minX: -6000,
        minY: -9000,
   },
    width: 550,
    zeroX: 284,
    zeroY: 62,
    zoomX: 0.1,
    zoomY: 0.1
})

They're too far apart, so let's try cutting that value down to 0.05 in each direction:

testGrid({
    height: 452,
    image: 'Map_eastern_wastes.jpg',
    test: {
        interval: 1000,
        maxX: 7000,
        maxY: 1000,
        minX: -6000,
        minY: -9000
   },
    width: 550,
    zeroX: 284,
    zeroY: 62,
    zoomX: 0.05,
    zoomY: 0.05
})

They're still too far apart, but if we experiment a bit more we can get all the X's to align by using the values of 0.38 and 0.379:

testGrid({
    height: 452,
    image: 'Map_eastern_wastes.jpg',
    test: {
        interval: 1000,
        maxX: 7000,
        maxY: 1000,
        minX: -6000,
        minY: -9000
   },
    width: 550,
    zeroX: 284,
    zeroY: 62,
    zoomX: 0.038,
    zoomY: 0.0379
})

Victory

That was a hassle, but now we've figured out the info for a zone map!

We can PM it to Loramin, he can add it to the wiki, and now anyone looking for NPCs in that zone will be able to find them much more easily thanks to you!