<script type="text/javascript">

	//API_KEY
	/* با مراجعه به پنل کاربری خود می توانید کلید دسترسی لازم برای نمایش نقشه را ایجاد نمائید
	 * توجه فرمائید کلید دسترسی ای که در پنل خود برای نمایش نقشه ایجاد میکنید حتما از نوع نمایش نقشه وب باشد
	 *
	 * https://platform.neshan.org/panel/api-key
	 * 
	 *  */
	const API_KEY = "service.804dad4db8b04f47b51a6c74146f7e2f"
	
	// get map dom element
	const mapContainer = document.getElementById("neshanMapContainer");
	
	// map properties
	/* حداقل اندازه نقشه با تغییر دو عبارت زیر می توانید حداقل طول و عرض نمایش نقشه را عوض کنید */
	const neshanMapWidth = "400px";
	const neshanMapHeight = "400px";
	
	mapContainer.style.minHeight = neshanMapWidth;
	mapContainer.style.minWidth = neshanMapHeight;
	
	
	/* رنگ آیکون مرکز نقشه */
	const neshanMarkerColor = "#FF8330";
	
	/* موقعیت مرکز نقشه برای نمایش به کاربر و افزودن آیکون بر روی آن 
	 * 
	 * برای بدست آوردن مختصات مورد نظر خود می توانید به نقشه وب نشان مراجعه کنید با کلیک راست کردن بر روی محل مورد نظرتان گزینه "کپی مختصات این نقطه" انتخاب کنید
	 * تا برای شما مختصات در حافظه کپی شود و سپس مقادیر کپی شده را در قسمت زیر الصاق کنید
	 * 
	 * https://neshan.org/maps
	 * 
	 * */
	const mapCenterLocation = [35.699789639952414,51.33748508581425]  //latitude,longitude
	
	
	// show poi and traffic on map
	/* در صورتی که میخواید بر روی نقشه خود اطلاعات ترافیکی به همراه مکان های مختلف مثل مغازه ها، مجتمع ها، فروشگاه ها، بیمارستان ها و ... نیز نمایش داده شوند کافیست مقادیر را مانند زیر تغییر نمائید */
	 
	//نمایش مکان های منتخب:
	 const poi = true;	 
	 //عدم نمایش مکان های منتخب:
	 //const poi = false;
	 
	 //نمایش ترافیک
	 //const traffic= true;
	 //عدم نمایش ترافیک
	 const traffic= false;
	 
	
	/* میزان زوم نقشه بر روی محل مرکز نقشه هر چقدر این مقدار بزرگ تر باشد به معنی این است که به سطح زمین نزدیکتر هستیم و محدوده کوچکتری را مشاهده میکنیم در نقشه */
	const mapZoom = 15;
	
	/* نوع نقشه در صورتی که می خواهید نقشه شما ظاهر دیگری داشته باشد می توانید این مقدار را عوض نمائید ، برای تغییر نوع نقشه چهار حالت در نظر گرفته شده است */
	 const mapType = nmp_mapboxgl.Map.mapTypes.neshanVector; //نقشه با کاشی های برداری روز
	 //const mapType = nmp_mapboxgl.Map.mapTypes.neshanVectorNight;  // نقشه با کاشی های برداری شب
	 //const mapType = nmp_mapboxgl.Map.mapTypes.neshanRaster; // نقشه با کاشی های پیکسلی
	 //const mapType = nmp_mapboxgl.Map.mapTypes.neshanRasterNight; // نقشه با کاشی های پیکسلی در شب
	 
	
	// Create map object
	const map = new nmp_mapboxgl.Map({
		mapType: mapType,
		container: mapContainer,
		zoom: mapZoom,
		pitch: 0,
		center: mapCenterLocation.reverse(),
		minZoom: 2,
		maxZoom: 21,
		trackResize: true,
		mapKey: API_KEY,
		poi: poi,
		traffic: traffic,
		mapTypeControllerStatus: {
			show: true,
			position: 'bottom-right'
		}
	});

	// get user location on map 
	/* در صورتی که نیازی ندارید که موقعیت کاربر را دریافت کنید میتوانید کد های این قسمت را پاک نماید */
	map.addControl(new nmp_mapboxgl.GeolocateControl({
		positionOptions: {enableHighAccuracy: true},
		trackUserLocation: true,
		showUserHeading: true })
    );
	/* پایان قسمت کد های گرفتن موقعیت کاربر  */

	
	// add marker to the map
	/* در صورتی که نیازی به افزودن مارکر بر روی نقشه خود ندارید می توانید کد های این قسمت را پاک نمائید  */
	const marker = new nmp_mapboxgl.Marker({
		color: neshanMarkerColor,
		draggable: false
		}).setLngLat(mapCenterLocation)
	.addTo(map)
	/* پایان قسمت کد های افزودن مارکر به نقشه  */
	

</script>