ایجاد عارضه نقطه‌ای

عارضه نقطه‌ای از نوع point بوده و برای نمایش یک marker یا مکانی خاص با توجه به مختصات مدنظر کاربرد دارد. برای ایجاد نقطه قبل از هر کاری نیاز به نصب و راه اندازی خواهد بود. پس از آن لازم است که از متد createLayer استفاده نمود. این متد پس از ایجاد شیء از کلاس Map توسط متغییر آن (در این مثالها map) در دسترس خواهد بود.

عارضه نقطه‌ای ساده

حداقل نیاز برای ایجاد point تعیین مختصات جغرافیایی است. به طور پیشفرض نوع عارضه در متد createLayer برابر point است و نیاز به تخصیص نوع نیست و همچنین آیکون مربوط به آن نیز در صورت موجود نبودن از آیکون marker پارسی‌مپ استفاده می‌شود.

بررسی کد نهائی و یا مشاهده نمونه به صورت تمام صفحه.

در کد زیر لایه‌ای با شناسه simplePoint ایجاد می‌شود. این لایه محتوی یک عارضه نقطه‌ای است که در مختصات مدنظر توسط latlng بروی نقشه نمایش یافته است.

map.createLayer('simplePoint', {
    latlng: {
        lat: 35.6997,
        lng: 51.33638,
    },
});

استایل‌بندی عارضه نقطه‌ای

توسط استایل‌بندی می‌توان به طور کلی مشخصات مربوط به آیکونی که قرار است نمایانگر عارضه باشد را تعیین نمود. این مشخصات تعیین‌کننده موقعیت بر اساس حاشیه به نسبت اطراف، اندازه، آدرس تصویر، زاویه، محتوی و اختصاص کلاس CSS برای آیکون مدنظر هستند. بروی نقشه 4 نوع مختلف نشانگر که با استفاده از استایل‌بندی عارضه ایجاد شده‌اند به ترتیب شامل: عارضه با آیکون سفارشی ، عارضه با تنظیم زاویه آیکون ، عارضه با تنظیم کلاس CSS و عارضه با محتوی کد html است که در بخش‌های مربوطه به طول کامل ایجاد آنها شرح داده شده و بروی نقشه نمایش یافته‌اند.

بررسی کد نهائی و یا مشاهده نمونه به صورت تمام صفحه.

عارضه با آیکون سفارشی

در کد زیر لایه‌ای با شناسه customIconPoint ایجاد می‌شود. این لایه محتوی یک عارضه نقطه‌ای است که دارای یک تصویر سفارشی است و توسط گزینه src آدرس تصویر مشخص شده است و اندازه تصویر برای 45 پیکسل به ازای عرض و ارتفاع نقشه توسط width و height تعیین شده است.

map.createLayer('customIconPoint', {
    latlng: { lat: 35.68637, lng: 51.32516 },
    style: {
        src: 'IMAGE_SRC',
        size: { width: 45, height: 45 },
    },
});

لایه ایجاد شده بروی نقشه به صورت نشانگر هواپیما () مشاهده می‌شود.

عارضه با تنظیم زاویه آیکون

در کد زیر لایه‌ای با شناسه angleIconPoint ایجاد می‌شود. این لایه محتوی یک عارضه نقطه‌ای است که توسط گزینه angle آیکون آن با زاویه 60 درجه تنظیم شده است.

map.createLayer('angleIconPoint', {
    latlng: { lat: 35.72073, lng: 51.28006 },
    style: {
        src: 'IMAGE_SRC',
        size: { width: 45, height: 45 },
        angle: 60,
    },
});

لایه ایجاد شده بروی نقشه به صورت نشانگر پیشنهاد () مشاهده می‌شود.

عارضه با تنظیم کلاس CSS

در کد زیر لایه‌ای با شناسه classNameIconPoint ایجاد می‌شود. این لایه محتوی یک عارضه نقطه‌ای است که توسط گزینه className آیکون آن با استایل مدنظر تعیین می‌شود که کلاس CSS در اینجا circle-box یک استایل از قبل تعیین شده است.

map.createLayer('classNameIconPoint', {
    latlng: { lat: 35.72136, lng: 51.34666 },
    style: {
        src: 'IMAGE_SRC',
        size: { width: 45, height: 45 },
        className: 'circle-box',
    },
});

لایه ایجاد شده بروی نقشه به صورت نشانگر دوربین عکاسی () مشاهده می‌شود.

عارضه محتوی کد html

در کد زیر لایه‌ای با شناسه htmlIconPoint ایجاد می‌شود. این لایه محتوی یک عارضه نقطه‌ای است که توسط گزینه html آیکون آن به صورت استفاده از تگ h1 کد html تعیین گردیده است. باید در نظر گرفت که استفاده از گزینه html سبب می‌شود که از استفاده خودکار تگ img با src مربوط به آن خودداری می‌کند که با توجه به این موضوع پس از استفاده از این گزینه دیگر استفاده از گزینه‌های src و angle برای تعیین آدرس تصور و زاویه آن قابل استفاده نخواهد بود.

map.createLayer('htmlIconPoint', {
    latlng: { lat: 35.71739, lng: 51.33121 },
    style: {
        size: { width: 126 },
        html: '<h1>«مترو صادقیه»</h1>',
    },
});

لایه ایجاد شده بروی نقشه به صورت نشانگر متنی («مترو صادقیه») مشاهده می‌شود.

مجموعه‌ای از عارضه‌های نقطه‌ای

بجای ایجاد لایه‌های متعدد برای نقاط می‌توان از یک لایه که مجموعه‌ای از عارضه‌ها را دربرگرفته استفاده شود. جهت ایجاد مجموعه‌ای از عارضه‌ها برخلاف اینکه تنها یک object که حاوی گزینه‌های point است، به متد ایجاد لایه اختصاص یابد، می‌توان آرایه‌ای از objectها به متد createLayer ارسال شود، با این کار لایه ایجاد شده شامل مجموعه‌ای از نقاط خواهد بود، برای ساماندهی به تعداد زیاد نقاط می‌توان از لایه‌های متعدد استفاده نمود و همچنین می‌توان نقاط را تنها در یک لایه ایجاد کرد در صورت ایجاد کردن یک لایه برای نقاط می‌توان بعدا توسط متد removeLayer لایه حاوی مجموعه نقاط را یکدفعه از روی نقشه پاک نمود و یا لایه‌های متعددی که حاوی یک نقطه است را توسط کد ای دی مدنظر حذف نمود. ساخت لایه برای مجموعه نقاط سبب گروه بندی نقاط یا Point Grouping می‌شود و برای زمانیکه نیاز است از چند گروه مختلف استفاده نمود و یا نقاط مشابه باید در یک مجموعه گروه بندی شوند بسیار سودمند خواهد بود.

بررسی کد نهائی و یا مشاهده نمونه به صورت تمام صفحه.

مجموعه پرچم‌های آبی

قرار دادن استایل در متغییر blueFlagStyle به منظور اعمال در style مجموعه پرچم‌های آبی رنگ. تعیین مقدار 0 برای margin در گزینه margin سبب می‌گردد که میله پرچم مربوط به آیکون عیناً بروی مختصات قرار یابد و موقعیت آیکون از سمت چپ صفر در نظر گرفته شود و بجای IMAGE_SRC باید مسیر مربوط به تصویر وارد شود.

var blueFlagStyle = {
    margin: { left: 0 },
    size: { width: 32, height: 32 },
    src: 'IMAGE_SRC',
};

در کد زیر لایه‌ای با شناسه blueFlagCollection ایجاد می‌شود. این لایه محتوی مجموعه‌ای از عارضه‌های نقطه‌ای است که توسط متغییر blueFlagStyle استایل‌بندی شده است و بجای IMAGE_SRC باید مسیر مربوط به تصویر وارد شود.

map.createLayer('blueFlagCollection', [
    { latlng: { lat: 35.70023, lng: 51.33808 }, style: blueFlagStyle },
    { latlng: { lat: 35.71919, lng: 51.36658 }, style: blueFlagStyle },
    { latlng: { lat: 35.70692, lng: 51.3707 }, style: blueFlagStyle },
]);

لایه ایجاد شده بروی نقشه به صورت نشانگرهای پرچم آبی () مشاهده می‌شود.

مجموعه پرچم‌های قرمز

قرار دادن استایل در متغییر redFlagStyle به منظور اعمال در style مجموعه پرچم‌های قرمز رنگ.

var redFlagStyle = {
    margin: { left: 0 },
    size: { width: 32, height: 32 },
    src: 'IMAGE_SRC',
};

در کد زیر لایه‌ای با شناسه redFlagCollection ایجاد می‌شود. این لایه محتوی مجموعه‌ای از عارضه‌های نقطه‌ای است که توسط متغییر redFlagStyle استایل‌بندی شده است.

map.createLayer('redFlagCollection', [
    { latlng: { lat: 35.69158, lng: 51.38203 }, style: redFlagStyle },
    { latlng: { lat: 35.69075, lng: 51.40297 }, style: redFlagStyle },
    { latlng: { lat: 35.6966, lng: 51.41739 }, style: redFlagStyle },
]);

لایه ایجاد شده بروی نقشه به صورت نشانگرهای پرچم قرمز () مشاهده می‌شود.

گزینه‌های عارضه‌های نقطه‌ای

PointOptions شامل گزینه‌های مختلفی است که از آن برای نحوه تعامل با عارضه استفاده می‌شود.

بررسی کد نهائی و یا مشاهده نمونه به صورت تمام صفحه.

اعمال گزینه‌های عارضه نقطه‌ای

در کد زیر لایه‌ای با شناسه pointOptions ایجاد می‌شود. این لایه محتوی مجموعه‌ای از عارضه‌های نقطه‌ای است که تمامی گزینه‌های عارضه بروی چهار marker اعمال شده است. ترتیب قرار گیری markerها از سمت چپ است به طوری که با کلیک بروی اولین مارکر و دراگ کردن آن قادر به تغییر موقعیت نقطه هستیم. در کنار آن گزینه‌های دیگر به طور کامل در PointOptions شرح داده شده‌اند.

map.createLayer('pointOptions', [
    { latlng: { lat: 36, lng: 52 }, options: { draggable: true } },
    { latlng: { lat: 36, lng: 53 }, options: { focusable: true } },
    { latlng: { lat: 36, lng: 54 }, options: { areaInfo: true } },
    {
        latlng: { lat: 36, lng: 55 },
        options: { popup: { html: 'ساحل شرقی دریاچه ',  visible:true } },
    },
]);

بررسی کد نهائی

عارضه نقطه‌ای ساده

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Simple Point</title>
    <style>
      /* Optimal: The sample page fit to window. */
      body,
      html {
          margin: 0;
          height: 100%;
      }
    </style>
    <script src="https://pm2.parsimap.com/api/v2/parsimap.js?key=API_KEY"></script>
  </head>
  <body>
    <div id="map"></div>

    <script>
      var map = new parsimap.Map({
          id: 'map',
          zoom: 14,
          height: '100%',
          center: { lat: 35.6997, lng: 51.33638 },
      });

      // Create a layer includes a simple point via latlng. The icon and another
      // attributes use default values.
      map.createLayer('simplePoint', {
          latlng: {
              lat: 35.6997,
              lng: 51.33638,
          },
      });
    </script>
  </body>
</html>

استایل‌بندی عارضه نقطه‌ای

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Styling Point</title>
    <style>
      /* Optimal: The sample page fit to window. */
      body,
      html {
          margin: 0;
          height: 100%;
      }
    </style>
    <style>
      /* Add circle-box style to point. */
      .circle-box {
          box-shadow: 0 0 1px;
          border-radius: 50px;
          background: #fff;
          padding: 5px;
      }
    </style>
    <script src="https://pm2.parsimap.com/api/v2/parsimap.js?key=API_KEY"></script>
  </head>
  <body>
    <div id="map"></div>

    <script>
      var map = new parsimap.Map({
          id: 'map',
          zoom: 12,
          height: '100%',
          center: { lat: 35.71049, lng: 51.32323 },
      });

      // Create a layer with `customIconPoint` layerId, includes a point with
      // custom image with 45px width and 45px width. It's airplane icon on map.
      map.createLayer('customIconPoint', {
          latlng: { lat: 35.68637, lng: 51.32516 },
          style: {
              src: "https://www.parsimap.com/api/v2/docs/airport-pin.png",
              size: { width: 45, height: 45 },
          },
      });

      // Create a layer with `angleIconPoint` layerId, includes a point with
      //  60 degree icon. It's recommend icon on map.
      map.createLayer('angleIconPoint', {
          latlng: { lat: 35.72073, lng: 51.28006 },
          style: {
              src: "https://www.parsimap.com/api/v2/docs/recommendation.png",
              size: { width: 45, height: 45 },
              angle: 60,
          },
      });

      // Create a layer with `classNameIconPoint` layerId, includes a point with
      // icon that use className. It's camera icon on map.
      map.createLayer('classNameIconPoint', {
          latlng: { lat: 35.72136, lng: 51.34666 },
          style: {
              src: "https://www.parsimap.com/api/v2/docs/camera.png",
              size: { width: 45, height: 45 },
              className: 'circle-box',
          },
      });

      // Create a layer with 'htmlIconPoint' layerId, includes a point with html
      // icon contains h1 tag. It's `«مترو صادقیه»` text on map.
      map.createLayer('htmlIconPoint', {
          latlng: { lat: 35.71739, lng: 51.33121 },
          style: {
              size: { width: 126 },
              html: '<h1>«مترو صادقیه»</h1>',
          },
      });
    </script>
  </body>
</html>

مجموعه‌ای از عارضه‌های نقطه‌ای

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Point Collection</title>
    <style>
      /* Optimal: The sample page fit to window. */
      body,
      html {
          margin: 0;
          height: 100%;
      }
    </style>
    <script src="https://pm2.parsimap.com/api/v2/parsimap.js?key=API_KEY"></script>
  </head>
  <body>
    <div id="map"></div>

    <script>
      var map = new parsimap.Map({
          id: 'map',
          zoom: 12,
          height: '100%',
          center: { lat: 35.70022, lng: 51.39816 },
      });

      // The blueFlagStyle variable using for show blue flags on map. The left
      // margin is 0 pixel meaning the marker in side of left bottom showing on latlng.
      var blueFlagStyle = {
          margin: { left: 0 },
          size: { width: 32, height: 32 },
          src: "https://www.parsimap.com/api/v2/docs/blue-flag.png",
      };

      // Create a layer with `blueFlagCollection` layerId, includes points collection with
      // icon that styled by blueFlagStyle. Those blue flag icons on map.
      map.createLayer('blueFlagCollection', [
          { latlng: { lat: 35.70023, lng: 51.33808 }, style: blueFlagStyle },
          { latlng: { lat: 35.71919, lng: 51.36658 }, style: blueFlagStyle },
          { latlng: { lat: 35.70692, lng: 51.3707 }, style: blueFlagStyle },
      ]);

      // The redFlagStyle variable using for show red flags on map
      var redFlagStyle = {
          margin: { left: 0 },
          size: { width: 32, height: 32 },
          src: "https://www.parsimap.com/api/v2/docs/red-flag.png",
      };

      // Create a layer with `redFlagCollection` layerId, includes points collection with
      // icon that styled by redFlagStyle. Those red flag icons on map.
      map.createLayer('redFlagCollection', [
          { latlng: { lat: 35.69158, lng: 51.38203 }, style: redFlagStyle },
          { latlng: { lat: 35.69075, lng: 51.40297 }, style: redFlagStyle },
          { latlng: { lat: 35.6966, lng: 51.41739 }, style: redFlagStyle },
      ]);
    </script>
  </body>
</html>

گزینه‌های عارضه نقطه‌ای

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Point Options</title>
    <style>
      /* Optimal: The sample page fit to window. */
      body,
      html {
          margin: 0;
          height: 100%;
      }
    </style>
    <script src="https://pm2.parsimap.com/api/v2/parsimap.js?key=API_KEY"></script>
  </head>
  <body>
    <div id="map"></div>

    <script>
      var map = new parsimap.Map({
          id: 'map',
          zoom: 8,
          height: '100%',
          center: { lat: 36, lng: 53.5 },
      });

      // Create a layer with `pointOptions` layerId, includes points collection
      // with three options contains: draggable, focusable, areaInfo and popup.
      map.createLayer('pointOptions', [
          { latlng: { lat: 36, lng: 52 }, options: { draggable: true } },
          { latlng: { lat: 36, lng: 53 }, options: { focusable: true } },
          { latlng: { lat: 36, lng: 54 }, options: { areaInfo: true } },
          {
              latlng: { lat: 36, lng: 55 },
              options: { popup: { html: 'ساحل شرقی دریاچه ',  visible:true } },
          },
      ]);
    </script>
  </body>
</html>