Leaflet demo

For update marker position

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"></script>
<div>
  <div class="header">
    <div id="map1" class="map"></div>
    <div class="label">Bankhead Dam (2)</div>
  </div>
  <div class="header">
    <div id="map2" class="map"></div>
    <div class="label">Barry (3)</div>
  </div>
  <div class="header">
    <div id="map3" class="map"></div>
    <div class="label">Morgantown Generating Plant (1573)</div>
  </div>
  <div class="header">
    <div id="map4" class="map"></div>
    <div class="label">Calvert Cliffs Nuclear Power Plant (6011)</div>
  </div>

</div>

CSS

.header {
  float: left;
  margin-right: 15px;
  width: 150px;
  height: 100%;
}

.map {
  height: 150px;
  width: 150px;
}

.header>div.label {
  font-weight: bold;
  text-align: center;
  width: 100%;
}

JavaScript

// We’ll add a tile layer to add to our map, in this case it’s a OSM tile layer.

	 	// initialize the map on the "map" div with a given center and zoom
	 	var options1 = {
	 	  center: [33.458665, -87.356823],
	 	  zoom: 14,
	 	  zoomControl: false,
      dragging : false,
      boxZoom : false,
      doubleClickZoom : false,
      scrollWheelZoom : false,
      keyboard : false
	 	};
	 	var options2 = {
	 	  center: [31.0069, -88.0103],
	 	  zoom: 14,
	 	  zoomControl: false,
      dragging : false,
      boxZoom : false,
      doubleClickZoom : false,
      scrollWheelZoom : false,
      keyboard : false
	 	};
	 	var options3 = {
	 	  center: [38.3592, -76.9767],
	 	  zoom: 14,
	 	  zoomControl: false,
      dragging : false,
      boxZoom : false,
      doubleClickZoom : false,
      scrollWheelZoom : false,
      keyboard : false
	 	};
	 	var options4 = {
	 	  center: [38.4344, -76.4417],
	 	  zoom: 14,
	 	  zoomControl: false,
      dragging : false,
      boxZoom : false,
      doubleClickZoom : false,
      scrollWheelZoom : false,
      keyboard : false
	 	};
	 	var map1 = L.map('map1', options1);
	 	var map2 = L.map('map2', options2);
	 	var map3 = L.map('map3', options3);
	 	var map4 = L.map('map4', options4);

	 	L.esri.basemapLayer("Imagery").addTo(map1);
	 	L.esri.basemapLayer("Imagery").addTo(map2);
	 	L.esri.basemapLayer("Imagery").addTo(map3);
	 	L.esri.basemapLayer("Imagery").addTo(map4);