request: basic image overlay / crosshair

[farotherside]

heya,

I'm working on a website that could really use a crosshair drawn in the middle of the map. I've gone over all of the documentation, but the best I can figure out is to use a leaflet-marker, and that seems to move when the map moves; I'd like the crosshair to be static in the middle of the map regardless of whether or not the map is scrolled or zoomed.

I'd like a user-defineable crosshair in the middle of the map. any suggestions? can this be a feature in an upcoming version? :)

thanks in advance!

[bozdoz]

You can accomplish this with pure CSS in your styles.css file:

.leaflet-map {
  position: relative;
}

.leaflet-map:after {
  content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="50" height="50"><g stroke="%235e9"> <line x1="5" y1="0" x2="5" y2="4" /><line x1="5" y1="6" x2="5" y2="10" /><line x1="0" y1="5" x2="4" y2="5" /><line x1="6" y1="5" x2="10" y2="5" /></g></svg>');
  position:absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate3d(-50%, -50%, 0);
  z-index: 600;
}

Change the stroke color (%235e9) to whatever you want. %23 is a substitute for #. It's just a hex color. You could also just use 'black'. You can also mess around with the x/y/width/height sizes as you please. Check out the codepen I made to tinker with the idea: https://codepen.io/bozdoz/pen/wvwmWjJ

Hope this helps.

[farotherside]

amazing! thanks so much for this!

(also thanks for introducing me to codepen, I wasn't aware of the tool and it will definitely come in handy!!)

[farotherside]

(closing this issue because closed issues feel great)