index.html

﻿<html>
	<head>
		<meta charset="utf8" />
		<link rel="stylesheet" href="css/leaflet.css" />
		<title>Parsijoo Maps + Leaflet.js</title>
		<script src="js/leaflet.js"></script>
		<style type="text/css" >
			* {font-family: tahoma;}
		</style>
	</head>
	<body>
		<div id="mymap" style="width:100%;height:700px;"></div>
		 
		
		<script type="text/javascript" >
				
				
			var baseballIcon = L.icon({
				iconUrl : 'images/gardeshgari.png',

				iconSize : [64, 64], // size of the icon
				shadowSize : [64, 64], // size of the shadow
				iconAnchor : [33, 61], // point of the icon which will correspond to marker's location
				shadowAnchor : [4, 4], // the same for the shadow
				popupAnchor : [-1,-61]// point from which the popup should open relative to the iconAnchor
			});
					
					var map = L.map('mymap').setView([28.5050465, 53.5670286], 14);
					L.tileLayer('http://map.parsijoo.ir/GetMap?imageID=p_{x}_{y}_{z}', {
						maxZoom: 21,
						attribution: 'Map data &copy; <a href="http://map.parsijoo.ir">Parsijoo Map</a>'
					}).addTo(map);


					function onEachFeature(feature, layer) {
						var popupContent = /*"<div style=\"direction: rtl; text-align: justify;\"><h3>" +
								feature.geometry.type + "</h3></div>"; */ "";

						if (feature.properties && feature.properties.popupContent) {
							popupContent += "<div style=\"direction: rtl; text-align: justify;\">" +feature.properties.popupContent + "</div>";
						}

						layer.bindPopup(popupContent);
					}

					
					var bicycleRental = {
						"type": "FeatureCollection",
						"features": [
							{
								"geometry": {
									"type": "Point",
									"coordinates": [
										53.557197, 
										28.501580
									]
								},
								"type": "Feature",
								"properties": {
									"popupContent": "اين يک مثال استفاده از ليفلت با نقشه پارسيجو است. ليفلت سبکتر و سريع تر از اوپن لير ميباشد. براي کارهاي سبک مناسب تر است."
								},
								"id": 51
							}
						]
					};		
					
					L.geoJson([bicycleRental], {

						onEachFeature: onEachFeature,

						pointToLayer: function (feature, latlng) {
							return L.marker(latlng, {icon: baseballIcon});
						}
					}).addTo(map);

						
		</script>
		<div style="direction: rtl;">
			<p>برای استفاده از کاربرد های دیگر نقشه با کتابخانه Leaflet لطفا به سایت Leaflet سر بزنید. <a href="http://leafletjs.com/" >leafletjs.com</a>
			</p>
		</div>
		
	</body>
</html>