How To iterate over map in HTL(sightly) Component

Sample Code Snippet

HTL(Sightly) Component Snippet

<div data-sly-use.mapIterator="MapIterator">
 <!--/*  Get value of  key */-->
<div> Value of Key - 'key1' - ${mapIterator.mapItems['key1']}</div
<!--/*  Iterate over map */-->
<ul data-sly-list=${mapIterator.mapItems}>
<li>${item} - ${mapIterator.mapItems[item]}</li>
  </ul>
  <!--/*Iterate over key set*/ -->
    <ul data-sly-list.key=${mapIterator.mapItems.keySet}>
  <li>${key}</li>
    </ul>
</div>

Java Snippet

import com.adobe.cq.sightly.WCMUsePojo;

import java.util.Map;

import java.util.HashMap;

public class MapIterator extends WCMUsePojo{

Map<String, String> mapItems = new HashMap<String, String>();

@Override

    public void activate()throws Exception{

        mapItems.put("key1","value1");

        mapItems.put("key2","value2");

        mapItems.put("key3","value3");

        mapItems.put("key4","value4");

    }

    public Map<String,String> getMapItems(){

return mapItems;

    }

}