Custom Map Markers

thaen
thaen
edited August 2021 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!

 

EDIT

@NimrodYanai found a much cleaner way to do this.

You don't need to mess with the second block of CSS or the Title.  Just replace the content url on the first block.  Note also that the url is built from the color chosen.  So you can have a nearly limitless number of different custom map markers.


img[src^='/map_marker_icons/8/000000.png'] {
content: url('https://db4sgowjqfwig.cloudfront.net/campaigns/216494/assets/1174607/blue_arrow.png?1621730624');
}

The details of the discussion happened here:

https://forums.obsidianportal.com/discussion/5901/limiter-functionalities-for-the-maps

 

 

Post edited by thaen on

Obsidian Portal Developer

Comments

  • twiggyleaf
    twiggyleaf
    Posts: 2,006

    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.

March 2024
Wrath of the Highborn

Read the feature post on the blog
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