marker tooltip svg

Example of using marker with tooltip in mobile webgl sdk

by Michel Beloshitsky

HTML

<script src="https://mapgl.2gis.com/api/js/v1"></script>
<div id="wrap">
<div id="container"></div>
<div id="overlay"></div>
</div>

CSS

html,
body,
#wrap, #container, #overlay {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#wrap {
  position: relative;
}

#container, #overlay {
  position: absolute;
  top: 0; left: 0;
}

#overlay {
  pointer-events: none;
}

.popup {
  margin: 4px;
  padding: 4px;
  background: #eee;
  border: solid 1px #ccc;
  font-size: 12px;
  font-family: sans-serif;
  max-width: 160px;
  box-shadow: 2px 2px 5px 0px rgba(153,153,153,0.56);
}

JavaScript

// API key can be used on jsfiddle.net only!
// You can get more info on https://docs.2gis.com/

const map = new mapgl.Map('container', {
  center: [55.31878, 25.23584],
  zoom: 13,
  key: 'bfd8bbca-8abf-11ea-b033-5fa57aae2de7',
});

class Popup {
	constructor (text) {
    this.text = text;
  }
  
  show (coordinates) {
  	this.marker = new mapgl.HtmlMarker(map, {
      coordinates,
      html: '<div class="popup">' + this.text + '</div>'
    });
  }
  
  hide () {
    if (this.marker) {
      this.marker.destroy();
      this.marker = null;    
    }
  }
  
  isVisible () {
    return !!this.marker;
  }
}


const marker = new mapgl.Marker(map, {
  coordinates: [55.31878, 25.23584],
});

const popup = new Popup('Вальсы Шуберта и хруст французской булки');

marker.on('click', (ev) => {
  if (popup.isVisible()) {
  	popup.hide();
  } else {
    popup.show(marker.getCoordinates());
  }
});