JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<div id="map"></div>

<a data-layer="restaurants" href="#">restaurants</a>
<a data-layer="sport" href="#">sport</a>
<a data-layer="sights" href="#">sights</a>

CSS

#map { height: 500px; }

a {
    color: #909090;
}

a.selected {
    color: #101010;
}

JavaScript

// setup map
var lat = 52.2560365;
var lng =  5.5873067;
var zoom =  6;


var map = new L.Map('map');

var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data &copy; OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 5, maxZoom: 18, attribution: osmAttrib});

map.addLayer(osm);
map.setView(new L.LatLng(lat, lng), zoom);

// add markers
var aa = L.marker([52.2694847,4.7413594]).bindPopup('AA'),
bb = L.marker([52.4372429,6.3233907]).bindPopup('BB'),
cc = L.marker([51.5988950,5.7301289]).bindPopup('CC'),
dd = L.marker([53.2533665,6.7298848]).bindPopup('DD'),
ee = L.marker([52.0132715,4.7743184]).bindPopup('EE'),
ff = L.marker([51.5442677,4.2469746]).bindPopup('FF');

var layers = {
    restaurants: L.layerGroup([aa, bb]),
    sport : L.layerGroup([cc, dd]),
    sights : L.layerGroup([ee, ff])
};

$("a").click(function(event) {
    event.preventDefault();
    id = $(this).data("layer");
    console.log(id);
    console.log(layers[id]);
    
    if(map.hasLayer(layers[id])) {
        $(this).removeClass('selected');
        map.removeLayer(layers[id]);
    } else {
        map.addLayer(layers[id]);                 
        $(this).addClass('selected');
   }
});