Custom Map Markers

thaen
thaen
edited May 23 in Custom CSS Discussions

If you're interested in using your own custom images for your map markers, it turns out that the map markers are actually just HTML, so you can change them with Custom CSS!

There are 2 parts to each map marker.  There's the image that shows by default, and there's a transparent div that sits on top of the image and enables the clicking and dragging and showing of the popups.

The trick is to hide the default image, and then add your custom image as a background image to the transparent div based on the map marker's Title.

The custom map marker image needs to be width 40px and height 50px.  The default images have the "pointer triangle" on the bottom of them, so the actual image is 40x40 with a 10px pointer on the bottom, but you don't have to include the pointer if you want a different look.

Here's some sample CSS.  This will hide only the "black square" default map markers.  Then you'll replace the backround-image url with the url to your custom image.  You can upload the custom image to your Media Library and use the url from there.  You'll need to add a background-image for each map marker Title that uses the "black square" map marker, otherwise the missing ones will be invisible.


/* Hide the default map marker images */
div img[src^='/map_marker_icons/8/000000.png'] {
display: none;
}

/* Set the image of a map marker based on the map marker's Title */
div[title='Test'] {
background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/216494/assets/1174607/blue_arrow.png?1621730624');
}

Enjoy!

Post edited by thaen on

Obsidian Portal Developer

Comments

  • twiggyleaf
    twiggyleaf
    Posts: 1,781

    smiley

    "I met a traveller from an antique land....."

    CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.

    Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign

    Inner Council Member

Sign In or Register to comment.

July's Campaign of the Month is The Coldfall Sanction!

Read the feature post on the blog!
Or return to Obsidian Portal!

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions