How To iterate over map in HTL 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;
    }
}