View source for Adding a Loc Map

This page explains how to "loc map" zones, so that the wiki can show where NPCs in that zone are on the map with a red "X".  See [[:Category:Loc_Mapped]] for more info.
== 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 (if you have an active forum account) or through [[User_talk:Loramin]] (if not).

== How to Help ==
First off, make sure the zone hasn't already been mapped.  If it has been mapped, it should be included in [[:Category: Loc Mapped]].

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

<pre>{
      height: *image file height*,
      image: '*zone file name*', 
      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"*
}</pre>

for example:

<pre>{
      height: 452,
      image: 'Map_eastern_wastes.jpg', 
      maxX: 7000,
      maxY: 1000,
      minX: -6000,
      minY: -9000,
      interval: 1000,
      width: 550,
      zeroX: 284,
      zeroY: 62,
      zoomX: 0.038,
      zoomY: 0.038
}</pre>

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):

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

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

<pre>{
      height: 452,
      image: 'Map_eastern_wastes.jpg',
      width: 550
}</pre>

== 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:

<pre>testZero(*your zone info*)</pre>

For instance:
<pre>testZero({
    height: 452,
    image: 'Map_eastern_wastes.jpg',
    width: 550
})</pre>

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:

<pre>testZero({
    height: 452,
    image: 'Map_eastern_wastes.jpg',
    width: 550,
    zeroX: 100,
    zeroY: 100
})</pre>

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:

<pre>testZero({
    height: 452,
    image: 'Map_eastern_wastes.jpg',
    width: 550,
    zeroX: 284,
    zeroY: 62
})</pre>

== 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 section to the code we have so far:

<pre>
    interval: 1000,
    maxX: 7000,
    maxY: 1000,
    minX: -6000,
    minY: -9000,
</pre>

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

[[File:Map_eastern_wastes.jpg |500px]]

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:

<pre>testGrid(*your zone info*)</pre>

eg.

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

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.

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

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

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

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:

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

== Victory ==

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

<img src="https://i2.wp.com/i.imgur.com/t8zvc.gif"/>

We can PM it to Loramin (or paste it onto his [[User_talk:Loramin|talk page]] if you don't have a forum account), and then he can add it to the wiki ([http://wiki.project1999.com/MediaWiki:Zones.js here]).  Once he does anyone looking for NPCs in that zone will be able to find them much more easily thanks to you!

== Sub-Maps ==

If a zone has multiple maps you can follow this exact same process to map them.  The min/max X/Y values will tell the wiki where the sub-map starts/stops (and where the zone's main map takes over).

The only tricky part about sub-maps is that they often don't have the zero, zero point included on them.  As a result you instead have to skip to testing the grid, and guess at both the zero, zero point and the zoom at the same time, until you can get the grid to line up.