CODEWITHSUNDEEP
cssleaflet
fadedbee
fadedbee

Reputation: 44745

How to make markers have their origin at the bottom left?

I'm using LeafletJS, but I can't work out how to change the position of the markers' origins.

Currently, the origin of markers (the imaginary point where they are "glued" to the map) is at the top left.

I need it to be the bottom left, as my marker HTML looks a little like a flag.

|--------+
|this is |
|a marker|
|--------+
|

Is there a way of doing this with LeafletJS?

Or do I need to do some horribly complex CSS? (The markers expand vertically and horizontally, according to their content.)

Update: I'm creating the markers with:

var html = '<div class="tag_main_pedestrian">' + content + '</div><div class="triangle_pedestrian"></div>';
var icon = L.divIcon({html: html, className: 'tag_icon_pedestrian'});
        this.markers[beacon] = L.marker(this.pedestrians[index].geotag,
        {icon: icon});
this.markers[beacon].addTo(this.map);

Upvotes: 1

Views: 1911

Answers (4)

IvanSanchez
IvanSanchez

Reputation: 19069

My approach to this problem is to make the L.DivIcon contain a zero-size, relatively-positioned <div>, and inside that, another <div>. The inside <div> is positioned absolutely (in relation to the nearest ancestor with an explicit position CSS style, which is the outer one).

The code looks like the following. Note I'm adding some borders just to see where each <div> is:

var html = `
<div style="position: relative; width: 0; height: 0; border: 3px black solid">
  <div style="position: absolute; bottom: 0; border:2px red solid; background:white">
    Null Island
  </div>
</div>
`;

var icon = L.divIcon({html: html});

L.marker([0, 0], {icon: icon}).addTo(map);

And it looks like this (or try it yourself):

screenshot

The other answers are valid, but IMHO dealing with position: absolute is somewhat cleaner than position: fixed and !important CSS rules.

Upvotes: 1

fadedbee
fadedbee

Reputation: 44745

The solution was to shrink the leaflet-marker-icon to a point using:

div.tag_icon_pedestrian {
    margin-left: 0px !important;
    margin-top: 0px !important;
    width: 0px !important;
    height: 0px !important;
}

and interpose another div:

var html = '<div style="position: fixed; bottom: 0; left: 0;"><div class="tag_main_pedestrian">' + content + '</div><div class="triangle_pedestrian"></div></div>';

Upvotes: 0

ghybs
ghybs

Reputation: 53215

Indeed you would need to use your own CSS to move your icon upwards, but it should not be "horribly complex".

Typically using CSS transform should do the trick:

var paris = [48.86, 2.35];
var map = L.map('map').setView(paris, 11);

var myHtml = '<div class="iconContent" id="content"></div>';

var myIcon = L.divIcon({
  html: myHtml,
  className: 'tag_icon_pedestrian',
  iconSize: null,
});

L.marker(paris, {
  icon: myIcon,
}).addTo(map);

var inputEl = document.getElementById('input');
var contentEl = document.getElementById('content');
inputEl.addEventListener('input', updateContent);
updateContent();

function updateContent() {
  contentEl.innerHTML = inputEl.value;
}

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
.tag_icon_pedestrian {
  height: 0; /* Avoid a "ghost" clickable area */
}

.iconContent {
  background-color: yellow;
  border: 1px solid black;
  transform: translateY(-100%); /* Move your icon its full content height */
}
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<input value="Lorem ipsum" id="input" />
<div id="map" style="height: 160px"></div>

Upvotes: 2

Daniel Castro
Daniel Castro

Reputation: 36

Try this CSS code:

position: fixed;
bottom: 0;
left: 0;

Someone have already asked something related to this here:

CSS - Placement of a div in the lower left-hand corner

Hope it help you.

Upvotes: 1

Related Questions