SmallWorld.js : تولید کردن نقشه کوچک جهان

- visibility ٠ mode_comment

در این مطلب میخوام ابزاری رو بهتون معرفی کنم که با استفاده از اون میتونین نقشه ی کوچکی از جهان رو در ساییتون قرار بدین.

خب برای شروع به بخش مربوط به این ابزار در Github برید. از سمت راست روی دکمه Download Zip کلیک کنید ، تا محتویاتش دانلود بشه.

برای دیدن دمو میتونین اینجا رو ببینید.

من فایلهایی که لازم هستن رو جدا کردم و شما میتونین اونارو از آخر همین مطلب دانلود کنید. فایلهایی که بهشون نیاز داریم ، فایلهای زیر هستن :

  • smallworld.jquery.js
  • smallworld.js
  • world.json

در این ابزار باید از کتابخونه ی jQuery هم استفاده کنید.

برای کارایی بهتر میتونین این کدهارو روی Localhost اجرا کنید.

خب برای شروع یه پوشه بسازید و فایلهای مورد نظر رو به اون اضافه کنید. حالا یک فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

در خط 14 اومدیم و یک div با id = map ساختیم. در قسمت Head هم کدهای CSS رو قرار دادیم و اینطوری عرض و ارتفاع رو برای div مشخص میکنیم. عرض و ارتفاع نقشمون رو با استفاده از CSS مشخص میکنیم.

در خط 16 و 17 و 18 فایلهای Javascript رو اضافه کردیم.

در انتها هم تگ باز و بسته ی Script رو قرار دادیم ، تا کدهای مورد نظر خودمونو در اونجا قرار بدیم.

برای استفاده از این ابزار باید در دو تگ اسکریپت کدهای زیر رو قرار بدین :

تا اینجا فقط اطلاعاتی که درون فایل world.json هستند رو استفاده کردیم.

اگر تا اینجا خروجی رو در مرورگر ببینید ، بصورت زیر خواهد بود :

1

میبینید که همه چیز در حالت پیش فرض هست. یعنی مرکز نقشه در نقطه ی [ 0 , 0 ] قرار داره. ما میتونیم مرکز نقشه رو عوض کنیم و همچنین میتونیم ، بزرگنمایی ( Zoom ) صفحه رو بیشتر کنید. بصورت زیر :

مقدار پیش فرض بزرگنمایی 0 هست. شما میتونین همانند کدهای بالا zoom رو به عدد دلخواهتون تغییر بدین و مرکز نقشه رو هم با خاصیت center عوض کنید. اگر اینکارارو انجام بدین ، تصویر زیر رو نمایش میده :

2

با استفاده از خصوصیتهای waterColor و landColor میتونین به ترتیب ، رنگ مناطق آبی و رنگ خشکی رو تغییر بدین. کدهاش بصورت زیر هستن :

با اینکار چنین چیزی در خروجی خواهید دید :

3

همچنین شما میتونین بعضی از نقاط نقشه رو علامتگذاری کنید. این کار با استفاده از خصوصیت marker انجام میشه. همچنین با استفاده از خصوصیت markerSize میتونین سایز اون مارکر رو عوض کنید. با استفاده از خصوصیت markerColor هم میتونین رنگ اون مارکر رو عوض کنید. بصورت زیر :

چیزی که در خروجی میبینید ، بصورت زیر :

4

همچنین میتونین با استفاده از خصوصیت markers چندین نشونه بر روی نقشه قرار بدین :

خروجی هم بصورت زیر هست :

5

خب دوستان خسته نباشید.

موفق باشید. یا علی

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.