Maps
Restructuring the Codex
We are currently moving articles around and changing the general structure of the Codex. Please come back later if you get lost!
This guide describes and explains all the features available with the maps. There are many ways this feature can be used.
[map:d359e84b-f549-4fd4-8999-a8566e491c41] Copy & paste it anywhere in your article to insert the fully interactive map! You can also specify the zoom level and coordinates of the embed —do so with the syntax [map:ID|X coordinate|Y coordinate|zoom]. For example: [noparse][map:d359e84b-f549-4fd4-8999-a8566e491c41|726|255]. To quickly center the embed on a specific marker, click on the button next to its coordinates on the marker list, as shown in this screenshot:
for example
[map:d359e84b-f549-4fd4-8999-a8566e491c41|300|200|2] Note: You will not be able to embed a map within another map's description legend or the description of its markers. You can always link to the map though.
These are a work in progress, want to contribute? Contact TJ or Ademal !
Add a CSS class to the pin e.g.
In your world CSS (configuration page) add your custom css to affect that pin, e.g.
If you check the helper box, you can drag the initial pin into place on your map and draw out your shape by clicking, dragging and releasing for each point of the polygon.
Its contents will be wrapped in a 51x51 px area which can be styled with CSS. For example, the following HTML code will generate a tree icon from FontAwesome:
Interactive Map Example
How to upload a map
Select the world you want to work on and then click the map icon on the left panel, or from "Go to world..." > Maps. This will take you to the maps list of your world! You will be able to edit your maps here, not in the images section. https://www.worldanvil.com/world/map/list To add a map, click the Create Map button. You will need to upload an image of your map and fill in some basic information like a title. Can't upload? Your image might be too big. Check what size image you can upload based on your guild membership here.How to add and edit pins on a map
Once you have uploaded a map, drag the example pin into the location you would like the pin to be, or input the longitude and latitude in the boxes below. You can adjust these later if it's not quite in the right place. Select what type of pin, label or other you would like to add to the map and fill in any extra details. If you link it to an article, the contents of the article will appear on the map when you click the pin. You can also write a description instead.Visual example of all of the map pins
How to add map layers
To add a layer to a map, edit the map and click the Layers tab. Upload the layer image and that's it! It might be a good idea to make sure that the image is the same size if you are showing a comparison between the same image. Check the sidebar of this guide for ideas on alternative uses! The layers will appear in the very top right of your map view, where you can switch between the layers.How to embed a map
Edit a map, and find the BBCode beneath the View Map button, it should look something like this:[map:d359e84b-f549-4fd4-8999-a8566e491c41] Copy & paste it anywhere in your article to insert the fully interactive map! You can also specify the zoom level and coordinates of the embed —do so with the syntax [map:ID|X coordinate|Y coordinate|zoom]. For example: [noparse][map:d359e84b-f549-4fd4-8999-a8566e491c41|726|255]. To quickly center the embed on a specific marker, click on the button next to its coordinates on the marker list, as shown in this screenshot:
Embedding maps with specific centerpoint and zoom level
In addition to the above you can also define for each embed the centerpoint of your map in order to do this you need to use the | character to separate the ID of your map with the X, Y and Zoom parametersfor example
[map:d359e84b-f549-4fd4-8999-a8566e491c41|300|200|2] Note: You will not be able to embed a map within another map's description legend or the description of its markers. You can always link to the map though.
How to use direct linking pins
When creating or editing a pin, marker or label you can make it so that it directly links to something - rather than having a pop up message. Under the Functionality tab, check the Direct Link box and then choose a related map, location or organization.Guild-only features
How to use CSS on map features
The map can be further changed with CSS. Check out the Map CSS Guide Click the examples on the map for the code to copy!These are a work in progress, want to contribute? Contact TJ or Ademal !
Pin CSS
Edit a pin.Add a CSS class to the pin e.g.
mypin-redbgmake sure to leave out the .
In your world CSS (configuration page) add your custom css to affect that pin, e.g.
.mypin-redbg {
background-color: #b51c1c;
}
How to add a map line
Click the line tab and make use of the same features as the polygon tool to draw lines on your map. Again, if you check the helper box, you can drag the initial pin into place on your map and draw out your line by clicking, dragging and releasing for each point of the path. You can also set the line thickness, and if it is dashed. To set a line as dashed, find the "line dash array" field and type in a number between 0 and 100, which will ditacte the number of pixels between each dash of the line. The line tool can be used to show trade routes, roads, rivers, constellations in the night sky, borders, military tactics and pretty much anything you can think of!How to use marker groups
Marker groups allow you to toggle pins, labels and shapes on and off. It displays in the same place as the layers, in the top right of the map. To add a marker group, select the tab when editing a map. Create a group, and then add your pins to it (edit the pin and select the group to put it in). This means that you can assign specific pins, markers or labels to only display on a certain layer (if the layer is added to the same group). When you toggle the layer, the correct pins will show for that layer! You can also set a marker group to be visible on load. This means that all items in this group will be visible when you load the map.How to add a polygon or circle
To add a polygon to the map, use the default example pin to move to the first point of your polygon shape. Note down the longitude and latitude in the box, separated by a comma. Before saving, move the pin again to get the coordinates for the next point of your shape and add this to the details. Coordinates should be separated with commas, and points should be separated by spaces. Here is an example used on the showcase map:How to add a custom pin
To add your own custom pin to the map, you will first need to upload your pin image (and a separate image for it's shadow, if you wish) to your image gallery. This must be on a world that you own, not a co-author's world. Next, go to STUDIO on the top menu of World Anvil, and select your pin image. Create a memorable name for it, fill in the details and then you will be able to add your pin to a map! Important note: currently, using a custom pin in a world that you don't own (but you can edit as an Editor) might cause issues with your whole map. We suggest you leave custom pins for the world owner.Adding HTML pins
You can completely customize your pins with HTML. Click on the Add special HTML Marker option under the choose your ping type drop-down and type your HTML code in the box that will appear.<i class="fas fa-tree"></i>While this code a sword icon from RPG-Awesome:
<i class="ra ra-sword"></i>You can also style the icons with inline CSS with 'style'. For example, if we want to make the tree icon from FontAwesome green:
<i class="fas fa-tree" style="color:green"></i>Check out the list of FontAwesome icons and the list of RPG-Awesome icons. Here's an example of the HTML pins in use.
Map of Nonogawa by Amy Winters-Voss
Feature Access
If you're thinking of becoming a guild member and want more information on what other cool features are available, check here!| Available to all | Journeyman | Master | Grandmaster+ |
|---|---|---|---|
| Max 3.5MB upload for Maps 2 Map Layers Standard Pins Set Generic Pins Set Inject yours maps into any Article BBCode Set Initial Zoom Level & Location Set Max/Min Zoom Direct Link Pins | Max 25MB upload for Maps Unlimited Map Layers All free features, PLUS: Fantasy Pins Set Science Fiction Pins Set Geography Pins Set Map CSS Styling Access | Max 25MB upload for Maps Unlimited Map Layers All Journeyman features PLUS: Marker Groups Map Labels Map Compass Image Invisible Marker | Max 25MB upload for Maps Unlimited Map Layers All Master features PLUS: Circular Markers Polygon Markers Creator's Studio: Pin Designer |
Navigation
FAQ
Tips & Tricks
You can embed maps pretty much anywhere! Try it in your world introduction (under world configuration), in an article or even in the sidebar (such as the example here).
Alternative Uses
Here are some great ideas from our Discord community for interesting ways you can use the maps feature!- Treasure maps (using layers)
- Labelling the anatomy of a species
- Showing the x-ray or heatmap of something (with layers)
- Creating a custom, interactive timeline or tree
- Floors of a building (using layers)
- Creating an interactive adventure (using direct links)
- Showing the change of a landscape after an event (using layers)
- Showing how a person has aged (using layers)
- Describing an item or vehicle with labels
- Sharing secret locations with your subscriber groups
- Showing the scene of a battle
Is there any way to change the center point of a map when embedded in a page? For example, is it possible to have the map automatically center on a settlement when that map is embedded in that settlement's page?
+! can we do this?
I was just looking for a way to do this and that would be a nice feature to have added.
You can do it now :) You can get the bbcode from the list of pins but the format is This article will be updated to show this and I will be putting a blog post up about it as well :)
World Anvil Founder & Chief Grease Monkey
Twitter | World Anvil Changelog
“No act of kindness, no matter how small, is ever wasted.” - Aesop
yeiii!