הצגת מפות ישראליות עם waze

במאמר שבו הדגמתי כיצד לעבוד עם Google Maps עם jQuery, הראיתי כיצד ישראל היא המדינה היחידה בעולם (חוץ מצפון קוריאה) שבה אי אפשר להשתמש ב-Google maps API על מנת להציג מפות. כלומר אם אתם חשבתם על תצוגה גיאוגרפית של מקומות בישראל באתר שלכם/אפליקציה שלכם – אז תחשבו שוב. בגלל כל מיני בעיות של זכויות יוצרים אין מפות של גוגל בישראל. אני מקווה שחברת ‘מפה’, שאחראית להגבלה הזו מרוצה.

למרבה המזל, גוגל הם לא היחידים בשטח. ישנה חברה ישראלית לא פחות טובה שמציעה API נוח לשירותי המפות שלה ובחינם. זו חברת Waze הישראלית שמוכרת לכל הודות לאפליקצית הניווט המצויינת שלה. ה-API שלהם קל ונוח מאד לשימוש.

על מנת להשתמש ב-API של waze צריך להרשם לשירות שלהם. נכנסים לקישור הבא, ממלאים את הפרטים ולחצים על Get it now. מיד נגיע לדף שבו ניתן לנו מפתח ארוך ומסובך. את המפתח הזה ניקח ונשתמש בו. באתר של waze יש דוגמאות קוד נהדרות – הנה דוגמא לקוד כזה. כפי שאתם רואים זו מפה של ישראל. איך הקוד הזה עובד? מאד פשוט: ראשית אנו יוצרים div כלשהו עם id מסוים כדי שיכיל את המפה שלנו ואחרי כן ניצור את הקריאה ל-API עם המפתח שלנו ולבסוף נכלול סקריפט מנדטורי.

<div id="map" style="width: 500px; height: 300px; position: relative; background-color: rgb(229, 227, 223); "></div>
<script type="text/javascript">
		g_waze_config = {
			div_id:"map", //id of the div that contains the map, must have width and height defined
			locale : "israel",//locale of the map, for now only 'israel' is supported
			center_lon:34.79000,//center of the map longitude
			center_lat:32.08600,//center of the map latitude
			zoom:2,//zoom level of the map (0-10 supported)
			token:'32adf3ab-4297-4f60-adb2-2cf4a39bb5ae'//your waze token
		};
</script>
<script type="text/javascript" src="http://www.waze.co.il/js/WazeEmbeddedMap.js"></script>

לא נדרשת הבנה גדולה במיוחד ב-JavaScript בשביל להבין מה קורה פה, גם ההערות שהוצבו על ידי אנשי waze מאד עוזרות להבין מה קורה פה. קל לראות שעל ידי קבלת longitude ו-latitude אפשר להתפקס על כל מקום בארץ.

מציאת כתובות

ניתן להשתמש ב-waze לסימון מספר מקומות. קודם כל טוענים את המפה ואחרי כן מבצעים קריאה אל ה-API. בקריאה הזו ניתן להכניס כתובת ואז מתקבל מערך. את מערך התוצאות ניתן להדפיס על המפה. כמובן שניתן לבצע כמה קריאות כדי לבצע מספר הדפסות.

הדבר הכי טוב הוא עם דוגמה. למשל הדף הזה.

איך זה עובד? הקוד הוא די אינטואטיבי, אבל אני אסביר למי שמעט מתקשה. קודם כל אני מבצע קריאה למפה כמו בדוגמה במעלה הדף:

<script type="text/javascript">
<!--
	g_waze_config = {
		div_id:"map",
		locale : "israel",
		zoom:8,
		token:"32adf3ab-4297-4f60-adb2-2cf4a39bb5ae",
		alt_base_layer:"israel_colors",
		alt_map_servers:"http://ymap1.waze.co.il/wms-c/",
		callback:onInit
	};
-->
</script>

אחרי כן אני מוסיף פונקציה שבה אני מגדיר מה יקרה מיד לאחר העלייה של המפה.

			function onInit(){
				var map = g_waze_map.map;


				//search API example, calls 'find_callback' when search returns
				g_waze_map.find('קרן היסוד בת ים','find_callback');
				g_waze_map.find('השבטים 12 בת ים','find_callback');
			};

מתודת find מקבלת שני ערכים – אחר מה לחפש (כתובת אקראית כלשהי שהקלדתי) ואיזה callback להריץ מיד אחרי שהתוצאות מתקבלות. שם ה-callback הוא find_callback.

פונקצית find_callback פשוט מדפיסה את הכל על המסך:

			function find_callback(response){
				var map = g_waze_map.map;
				var first_result = response[0];
				var lonlat = new OpenLayers.LonLat(first_result.location.lon,first_result.location.lat);
				g_waze_map.map.setCenter(lonlat);
				var size = new OpenLayers.Size(36,47);
				var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
				var icon = new OpenLayers.Icon('http://www.internet-israel.com/internet_files/javascript/simpleicon.jpg',size,offset);
				var markers = new OpenLayers.Layer.Markers( "Markers" );
				map.addLayer(markers);
				markers.addMarker(new OpenLayers.Marker(lonlat,icon));
				map.addPopup(new OpenLayers.Popup.FramedCloud("test",lonlat,null,
							"
"+first_result.name+"
",
							anchor=null,true,null));
			};

וזה הכל! אפשר לעשות עוד הרבה דברים עם waze, כולל לכתוב ממש על המפה ולהציב אייקונים שונים ומשונים בצבעים שונים. אבל זה הבסיס.