<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Mapp styles -->
  <link rel="stylesheet" href="https://cdn.map.ir/web-sdk/1.4.2/css/mapp.min.css">
  <link rel="stylesheet" href="https://cdn.map.ir/web-sdk/1.4.2/css/fa/style.css">
  <style>
	 @charset "utf-8";
	 html, body {
		 width: 100%;
		 height: 100%;
		 padding: 0;
		 margin: 0;
	 }
	 html {
		 font-size: 10px;
	 }
	 body {
		 overflow: hidden;
	 }
	 #app {
		 width: 100%;
		 height: 100%;
	 }
  </style>
</head>
<body>
	<div id="app"></div>
	<script type="text/javascript" src="https://cdn.map.ir/web-sdk/1.4.2/js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="https://cdn.map.ir/web-sdk/1.4.2/js/mapp.env.js"></script>
	<script type="text/javascript" src="https://cdn.map.ir/web-sdk/1.4.2/js/mapp.min.js"></script>
	
	<script>
	   $(document).ready(function() {
		 var app = new Mapp({
			 element: '#app',
			 presets: {
				 latlng: {
					 lat: 32,
					 lng: 52,
				 },
				 zoom: 6,
			 },
			 apiKey: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjU5MTZkYmRhYmJkMzgwZjQwYWQ5ZWM2YWQ4MjA5YmQyMDRhYWE1YzRjMjI2YWIwYzljNDIyYWEzMGNkMTc0ZTI5YzdkMWViNDA5NGNjMjQyIn0.eyJhdWQiOiIyMTQ4MSIsImp0aSI6IjU5MTZkYmRhYmJkMzgwZjQwYWQ5ZWM2YWQ4MjA5YmQyMDRhYWE1YzRjMjI2YWIwYzljNDIyYWEzMGNkMTc0ZTI5YzdkMWViNDA5NGNjMjQyIiwiaWF0IjoxNjc4Njk0MTgzLCJuYmYiOjE2Nzg2OTQxODMsImV4cCI6MTY4MTExMzM4Mywic3ViIjoiIiwic2NvcGVzIjpbImJhc2ljIl19.OeW5g0oc06eFgvYrXXAzAsJYBwCVLblomZbEKmuhrPhhh3EbC80axHLgwZ3tkllDvuHRcp0kQ8gIGXjYp9JCJbF2XBcZ24zNwYuzGZqAliBYCUp-TOB81wNmexW-LcxS970w9MZT8cCmwRsAt_MB7fGv9e48zjHfa5XTUf72OcxMEEO9HRDmhdTvaB2-s6CB4cdrGqpBcKi0YEaLgU4078V5202N6XqUDRmeNYxL-2dPoQHI2dalBTA5GHcy5ApNoe8IerSN1hH2OXFJQoP-tB4uJ4HVZgzzCSra7qcBHzXN0aBVLln7Xf0F0W6CNI1YFRicN_jhToHd67nDiywiog'
		 });
	   app.addLayers();
	   });
	   
	   
	</script>
	
</body>
</html>