JSFiddle - React, Tailwind, and code Playground

by pkeller3

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.css">
<div id='map'></div>
<button id='button'>Click me</button>

CSS

#map {
    height: 250px;
}
button {
    margin-top:5px;
}

JavaScript

var map;

function initMap() {
    // set up the map
    map = new L.Map('map');

    // create the tile layer with correct attribution
    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
    var osm = new L.TileLayer(osmUrl, {
        minZoom: 8,
        maxZoom: 15,
        attribution: osmAttrib
    });

    // start the map 
    map.setView(new L.LatLng(51.509, -0.08), 13);
    map.addLayer(osm);
}

initMap();

var marker = L.marker([51.509, -0.08]).addTo(map);
var tooltipOpts = {offset:[50,50]}
marker.bindTooltip("my tooltip text",tooltipOpts).openTooltip();
var added = true;

function myFunction() {
  /*   if (added) {
        marker.openTooltip([51.5, -0.1])
        added = false;
    } else {
       marker.openTooltip([51.51, -0.05])
        added = true;
    } */
}

document.getElementById("button").addEventListener("click", myFunction);