<div class="row">
	<!-- <div id="wp_osm_<?= $map->id ?>" class="col-lg-10 wp_osm" style="width: <?= $map->width ?>; height: <?= $map->height ?>" data-lon="<?= $map->longitude ?>" data-lat="<?= $map->latitude ?>" data-zoom="<?= $map->zoom ?> -->
	<div id="wp_osm_<?= $map->id ?>" class="col-lg-12 wp_osm" style="height: <?= $map->height ?>" data-lon="<?= $map->longitude ?>" data-lat="<?= $map->latitude ?>" data-zoom="<?= $map->zoom ?>">
		<div class="ol-popup d-none">
			<a href="#" class="ol-popup-closer"></a>
			<div class="popup-content-1">
				<div class="card card-map">
					<div class="div-img-top">
						<img src="" class="card-img-top img-map-header">
					</div>
					<div class="card-body">
						<p class="card-title pais-map"></p>
						<p class="card-title title-map"></p>
						<p class="card-title periodo-map"></p>
						<p class="card-title org-map"></p>
						<p class="card-text"></p>
						<a href="#" target="_blank" class="card-link btn btn-primary btn-map-more">Ver Más</a>
					</div>
				</div>
			</div>
		</div>

		<!-- Modal -->
		<!--<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel"></h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<div class="card">
					<img src="" class="card-img-top" alt="">
					<div class="card-body">
						<p class="card-text"></p>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<a href="#" target="_blank" class="card-link btn btn-outline-primary">Ver Más</a>
				<button class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
			</div>
			</div>
		</div>
		</div>-->


		<?php

// 			echo "<pre>";
// 			print_r($arrCategories);
// 			echo "</pre>";
// 			exit();

			$arrClass = [];
			foreach($map->markers as $marker)
			{
				$categories = '';
				if(isset($arrCategories[$marker->id])){
					foreach($arrCategories[$marker->id] as $cat) {
						$arrClass[$cat] = $cat;
					}
					$categories = implode(";;", $arrCategories[$marker->id]);
				}

				// echo "<pre>";
				// print_r($marker->id." ".$categories);
				// echo "</pre>";
				// exit();

				echo '<div class="marker" data-icon="'.$marker->icon.'" data-lon="'.$marker->longitude.'" data-lat="'.$marker->latitude.'" data-name="'.$marker->name.'" data-class="'.$categories.'" data-description="'.nl2br($marker->description).'" data-img="'.$marker->img.'" data-link="'.$marker->link.'" data-pais="'.$marker->pais.'" data-org="'.$marker->organizacion.'" data-periodo="'.$marker->periodo.'"></div>';
			}
			
// 			exit();
		?>
	</div>

<!-- 	<div class="col-lg-12"> -->

		<div class="card list-filter-map" style="width: 18rem;">
			<div class="card-header" style="color: #578D7B">
				<b>Subregiones</b>
			</div>
			<ul class="list-group list-group-flush">

				<?php
					foreach($arrClass as $class) {
						echo '
							<li class="list-group-item">
								<div class="form-check form-switch">
									<input class="form-check-input chk-filter-map" type="checkbox" id="'.$class.'" checked>
									<label class="form-check-label" for="'.$class.'">'.$class.'</label>
								</div>
							</li>
						';
					}
				?>
			</ul>
		</div>

<!-- 	</div> -->

</div>

