Ability to create truly flexible pure CSS\HTML map markers | World Anvil

Remove these ads. Join the Worldbuilders Guild

Ability to create truly flexible pure CSS\HTML map markers

Feature Upgrade · Maps · Created by kaiohon
accepted
map maps map-marker map-pin CSS pin marker zoom

What functionality is missing? What is unsatisfying with the current situation?

Currently there are only 2 options for custom pins and both lack flexibility.   1) You can create a new pin type with an image in Creater Studio -> Map Pins, where you can specify the Leaflet JS (the map library which handles the map and marker positioning on the map) properties such as anchor points (the part of the marker by which it attaches to the map) and popup points (where relative to the marker does the popup appear). But this means in order to upload a pin image that would look good on a 4k monitor you have to upload a bigger image, and then scale it down via global CSS and then do some math magic to enter correct anchor\popup points. This means that you have to prepare multiple images in multiple colors in advance and then do a lot of calculations on how to scale them with CSS and where the anchor\popup points should be. What is missing is that instead of an image you cannot enter code here for generating a pure HTML\CSS pin with all the correct anchor\popup points. (Allowing vector images through SVG image\code here would at least allow creating scalable icons.)   2) The other available option is "Add a special HTML Marker" which has all the pluses of being able to generate pure CSS/HTML pin but the minus of not being able to set an appropriate Leaflet JS anchor and popup points. This results in a pretty pin where you can't directly control how it anchors to the map as you are stuck with one default option - it anchors by vertical and horizontal center of the marker. This means that when zooming in and out the marker moves a lot, and if your custom marker is actually in the form of a pin then it looks like it's in different places depending on zoom level. With a bit of global CSS magic you can re-position it so it anchors by the bottom center point so that it works correctly and doesn't move, but there is no special class applied to the popup of that custom pin (htmlIcon). This means that even if I re-position the custom pin correctly I have no way of targeting the popup of that custom pin specifically and it overlaps the icon. I can either move all popups or none, which is not ideal as it breaks either the default or the custom pins' popups. What is missing the ability to either enter Leaflet JS anchor and popup points together with special HTML Marker info for correct functioning or having a special class applied to the popup of special HTML Marker so it can be targeted and styled separately from all other popups.   Here is an example of a pure CSS\HTML pin (I can share the code if you need) and the popup positioning problem:        

How does this feature request address the current situation?

It is possible to go through enhancing either route 1 or route 2, but it should be possible to have a way of creating pure CSS\HTML pins that operate correctly, look and scale good, and can be changed on the fly directly in WA both in their visual properties (colors, borders, form, icon, effects, etc.) and in how they anchor to the map and where the popup appears in relation to them. Both routes will solve the problem in slightly different ways.  

What are other uses for this feature request?

  • The ability to change icons directly in WA without generating extra images in Photoshop saving lots of time
  • Saving space as no need to upload extra images
  • Pins are scalable and look amazing on any screen, including 4k, and at any zoom level
  • Creativity of the users enhanced as you can have pins that point to a place from various sides, etc.
  • The Team's Response

    Right, so first of all I am really surprised this had so very little support.   Having said that, in the coming months we are about to embark into the journey for Atlas the new mapping application for World Anvil and I think this as an idea in general is a very good one and important. I am accepting as a way to have a reminder when I am writing the specification for Atlas.
    Current score

    16/300 Votes · +1410 points

    Votes Cast