13. כדי ליצור מפות אינטראקטיביות & מותאמות אישית

בעבר הצגנו את Google Map Maker ו -10 כלים נוספים שיעזרו לך לבנות מפות. עם זאת, אם אתה מעדיף להשתמש ספריות Javascript במקום, יש לנו את ההודעה בשבילך. להלן הספריות של JS שבהן ניתן להשתמש כדי להציג סמני מפה מיוחדים, לצייר קווי נתיב מותאמים אישית או אפילו להציג תיבת דו-שיח כאשר אתה מעביר את העכבר או לחץ על נקודות מסוימות במפה.

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

עוד על הונגקיאט:

• כיצד לסווג את מפות Google
• קבלת מיקום משתמש עם HTML5 Geolocation API
• ויזואליזציה נתונים: 20 + כלים שימושיים ומשאבים

GMaps

GMaps עושה הוספת והתאמה אישית של מפות Google משב רוח. מלבד הוספת מפה, אתה יכול גם כמה דברים לתוך המפה, כגון polylines אשר עשוי להיות שימושי עבור ציור המסלול, בקרת תפריט מיוחד, ואפילו רכיבי HTML.

GMaps תואם לנתונים מעוצבים של JSON שבהם ניתן להשתמש כדי לשלב את המפה עם אפליקציה מסוימת, כגון Foursquare.

• מקור הנתונים: גוגל מפות
• תלותYou אף אחד
• רישיוןרישיון MIT

ג'ר

ב 5KB, jHERE מראה לך גודל זה לא משנה; אתה עדיין יכול לבנות מפה אינטראקטיבית חזקה עם קומץ אפשרויות התאמה אישית. JHERE מפיק מפה להדמיה מפה כאן, שהוא אחד ספקי המפה הפופולריים ביותר עבור Windows Phone.

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

• מקור הנתונים: כאן מפות
• תלות: jQuery או ZeptoJS
• רישיוןרישיון MIT

קרטוגרף

קרטוגרף מורכב משני קבצים, Kartograph.ph כדי ליצור את המפה בפורמט SVG, ו Kartograph.js להוסיף רכיבים אינטראקטיביים על גבי המפה. מאז Kartograph.js בנוי על גבי Raphael.js המפה יעבוד יפה עד IE7. אתה יכול להעיף מבט על הדגמות המפה אינטראקטיבית כדי לגלות מה קרטוגרף יכול לעשות.

• מקור הנתונים: קרטוגרף
• תלות: Kartograph.py, Raphael ו- jQuery
• רישיון: AGPL ו- LGPL

מפאל

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

המפה בנויה עם SEO בחשבון על ידי מתן תוכן חלופי עבור מנוע החיפוש רובוטים שאינם מסוגלים לסרוק תוכן שנוצר JavaScript.

• מקור הנתונים: Raphael.js
• תלות: jQuery
• רישיוןרישיון MIT

D3

D3.js היא ספריית JavaScript מקיפה שתביא את הנתונים שלך לחיים באמצעות HTML, SVG ו- CSS. השימוש D3 היא מגוונת למדי כולל לבניית מפה אינטראקטיבית מאוד. ראה מפה זו של הבנק העולמי פיתוח גלובלי ואתה תראה את האפשרויות של מה שאתה יכול לבנות עם D3js.

• מקור הנתונים: D3.Js
• תלותYou אף אחד
• רישיוןYou לא מוגדר

DataMaps

אם בניית מפה עם D3js הוא מדהים, אתה יכול להשתמש DataMaps. DataMaps הוא למעשה תוסף D3.js שפותח במיוחד כדי לבנות מפות. זה יורש רבות של היכולת של D3.js, ולכן אתה יכול לבנות פשוט או מפות מותאמות אישית מאוד עם זה. הזכרתי שהמפה מגיבה?

• מקור הנתונים: D3.Js
• תלות: D3Js ו TopoJSON
• רישיוןרישיון MIT

GeoChart

GeoChart היא מפה פשוטה של ​​Google, שהופכת אזור, סמנים וטקסט, במקום מפה מלאה עם פרטים זעירים. המפה נוצרת ב- SVG, וניתן להתאימה אישית בדרכים רבות, כולל שינוי צבעי האזור, הוספת חלונות קופצים וסמני מפה מותאמים אישית.

• מקור הנתונים: גוגל מפות
• תלותYou אף אחד
• רישיון: קרא את מפות Google TOS

מפה

מפה, תוסף jQuery להפקת מפה דרך ממשק API של מפות Google v3. מפה פועלת בכל הדפדפנים, כולל IE6. אז זה עוד תוסף נהדר שווה את תשומת הלב שלך אם אתה רוצה לבנות מפה בדרך הקלה ביותר האפשרית.

• מקור הנתונים: גוגל מפות
• תלות: jQuery
• רישיוןרישיון MIT

מפואר

Stately הוא JavaScript הספרייה שפותחה כדי ליצור מפות בארה"ב. הספרייה היא קל משקל בהתחשב בכך שאתה יכול להוסיף אלמנטים אינטראקטיביים על גבי המפות שנוצרו שלך.

• מקור הנתונים: Stately / SVG
• תלותYou אף אחד
• רישיוןרישיון MIT

גיאוגרפי

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

• מקור הנתונים: גוגל מפות
• תלות: jQuery
• רישיוןרישיון MIT

כלי מפה

הכלי 'כלים' מספק ממשק API אינטואיטיבי להוספת מפות Google. הוא תומך טוען של נתונים בפורמט JSON גיאוגרפי כגון TopoJSON ו GeoJSON כדי לעבד את המפה. נוסף על כך, תוכל להוסיף סמנים מונפשים שלדעתי יהפכו את המפה ליותר תוססת, הוסף תוכן HTML עם משתנים או מצייני מיקום..

• מקור הנתונים: גוגל מפות
• תלותגאוזסון / טופוג'סון
• רישיוןרישיון MIT

OpenLayers

OpenLayers הוא ביצועים גבוהים קוד פתוח JavaScript מסגרת לבנות מפות אינטראקטיביות באמצעות שירותי מיפוי שונים. ניתן לבחור את מקור שכבת המפה באמצעות שכבת אריחים או שכבה וקטורית ממספר שירותי מפה.

OpenLayer לבוא מוכן מוכן מחוץ לקופסה, מתאים לבניית מפות על פני התקנים ודפדפנים. ניתן להשתמש ב- CSS למראה שונה של המפה שלך. כדי ליישם את המפה באינטרנט באמצעות OpenLayers, הנה מדריך שיעזור.

• מקור הנתונים: OpenStreetMap
• תלות: אף אחד
• רישיון: לא מוגדר

עלון

מפתחים נתנו עלון פונקציות בסיסיות לעבוד באופן מושלם, שמירה על גודלו קטן, מושלם עבור התקנים ניידים. עבור פונקציות ספציפיות, רק להרחיב את עלון באמצעות תוספים. Leaflet יש את רוב המפה המקוונת תכונות שאתה צריך: שכבות אריח, חלונות קופצים, סמנים, וקטוריות שכבות חינם כמו polylines, מצולעים, עיגולים או מלבנים. זה מגיע עם עיצובים ברירת המחדל נחמד למרות שאתה יכול להתאים אישית את הסגנון באמצעות CSS3 בקלות.

ל- Leaflet יש את תכונות האינטראקציה השימושיות ביותר הן לדפדפנים ניידים והן לדפדפנים.

• מקור הנתונים: OpenStreetMap
• תלות: אף אחד
• רישיון: לא מוגדר