test map

by blogob

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> 
   <head> 
      <title>Titre de la page web</title> 
      <meta name="Description" content="Description du document"> 
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
  integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
  crossorigin=""/>

</head>
<body>
  
  <div id="primary" class="content-area">
		<main id="main" class="site-main">	
		<div class="content">
		<div id="mapid">
		
			<div class="marker"   data-lat="40.74189" data-lng="-73.989308">
			the content
      </div>
		
    
    	<div class="marker"  data-lat="40.600239"  data-lng="-74.362157">
			
      the content
      </div>
		
    
    
		</div>
		<div id="sidebar">
		</div>
	</div>
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
  integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
  crossorigin=""></script>  
  </body>	
  </html>
  
  </html>

CSS

.site-info{
	text-align: center;
	background-color:#323232;
	padding: 7px;
    height: 30px;
    border-top: 1px solid #535353;
	}

.site-info a{
	color:#fff;
	text-decoration: none;
	font-family: 'gloss_and_bloomregular';
	}

.site-header{
    background-color: #323232;
   	width:10%;
    height:100%;
    
    position:fixed;
  }

.site-branding{    
	box-sizing: border-box;
    padding: 10px;
  }

#mapid{

  width:100%;
 height:100%;

	}
.site-content{
	margin-left:10%;
}
.content{
	position:relative;
  height:500px;
	}

.site-footer{
	position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 999;
	}

/*--------------------------------------------------------------
## Home Map
--------------------------------------------------------------*/
#sidebar{
	height:800px;
	width:500px;
	background-color:#fff;
	z-index:999;
	position: absolute;
	right:-500px;
	top:20px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	-webkit-transition: all 0.5s linear;
	moz-transition: all 0.5s linear; 
	-o-transition: all 0.5s linear; 
	transition: all 0.5s linear;
}

#sidebar.move{
	right:20px;
	z-index:999;
}

#sidebar p,
#sidebar h2{
	padding: 0 10px;
}

JavaScript

jQuery(function($) {


var map = L.map('mapid').setView([ 40.712775,-74.0059739], 13);

var CartoDB_Positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>',
	subdomains: 'abcd',
	maxZoom: 19
}).addTo(map);

   $('.marker').each(function() {
   	
		var lat = $(this).attr('data-lat');
		var lng = $(this).attr('data-lng');
		var text = $(this).html();
		var sidebar =$('#sidebar');
		var marker = new L.marker([ lat, lng ]).addTo( map );
		
		marker.on('click',function(){
	 		sidebar.addClass('move');
	 		sidebar.html(text);
	 	})
	 	map.on('click',function(){
	 		sidebar.removeClass('move');
	 	})

    });

});