افزودن آیکون شخصی سازی شده به نقشه با استفاده از کتابخانه mapboxgl

برای استفاده از کیت توسعه‌ی نقشه وب ابتدا بایستی از طریق ثبت نام رایگان در پنل توسعه‌دهندگان نشان، اقدام به دریافت کلید دسترسی برای (API Key) برای وب‌سایت یا اپلیکیشن تحت وب خود نمایید.

در اینجا با استفاده از کتابخانه mapboxgl نشان یک نقشه را پیاده سازی می‌کنیم و سپس بر روی موقعیت جغرافیایی مشخص شده مارکر های شخصی سازی شده با قابلیت افزودن تصویر دلخواه و افزودن popUp را به نقشه اضافه می‌کنیم و همین طور نشان می‌دهیم چگونه به مارکر خود قابلیت جابه‌جایی بر روی نقشه را اضافه کنید.

1- راه اندازی نقشه

ابتدا یک فایل HTML با محتوای زیر ایجاد می‌کنیم. توجه داشته باشید برای نمایش نقشه ما نیازمند این هستیم که نقشه را با یک Id شناسایی کنیم.

            <!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Mapbox Neshan Map</title>

    <link rel="stylesheet" href="https://static.neshan.org/sdk/mapboxgl/v1.13.2/neshan-sdk/v1.1.1/index.css" />
    <script src="https://static.neshan.org/sdk/mapboxgl/v1.13.2/neshan-sdk/v1.1.1/index.js"></script>

    <style>
        body {
            height: 100vh;
            width: 100vw;
            margin: 0;
        }

        #map {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">

const neshanMap = new nmp_mapboxgl.Map({
            mapType: nmp_mapboxgl.Map.mapTypes.neshanVector,
            container: "map",
            zoom: 11,
            pitch: 0,
            center: [51.389, 35.6892],
            minZoom: 2,
            maxZoom: 21,
            trackResize: true,
            mapKey: "YOUR_MAP_API_KEY", // Get your own API Key on https://platform.neshan.org/panel
            poi: true,
            traffic: true,
            mapTypeControllerOptions: {
                show: true,
                position: 'bottom-left'
            }
        });
        
</script>
</body>
</html>

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

به طور مثال فوق آیکون زیر را در پروژه اضافه کرده ایم و از آن ها استفاده می‌کنیم.

2- افزودن مارکر های شخصی سازی شده

حال چند نمونه مارکر شخصی سازی شده به نقشه اضافه می‌کنیم

مارکر با تغییر رنگ آیکون و قابلیت جابه‌جایی و PopUp:

            var marker = new nmp_mapboxgl.Marker({ color: "purple" })
      .setLngLat([51.391173, 35.700954])
      .addTo(neshanMap);

    var popup = new nmp_mapboxgl.Popup({ offset: 25 }).setText(
      'با نگه داشتن مارکر می‌توانید آن را روی نقشه جابه‌جا کنید'
    );

    var marker_with_popup = new nmp_mapboxgl.Marker({ color: "#00F955", draggable: true }).setPopup(popup)
      .setLngLat([51.4055941, 35.70019216])
      .addTo(neshanMap).togglePopup();

مارکر با استفاده از geoJson و افزودن PopUp و آیکون شخصی سازی شده:

برای ایجاد PopUp های شخصی سازی شده لازم است تا استایل های زیر را به قسمت هدر صفحه اضافه کنیم.

             .marker {
      background-image: url('custom_marker.png');
      background-size: cover;
      width: 32px;
      height: 40px;
      top: -20px;
      cursor: pointer;
    }

    .mapboxgl-popup {
      max-width: 200px;
    }

    .mapboxgl-popup-content {
      direction: rtl;
      text-align: center;
      font-family: 'Open Sans', sans-serif;
    }

افزودن geoJson حاوی اطلاعات نقاط مورد نظر و ایجاد مارکر ها بر اساس اطلاعات geoJson به نقشه:

            const geojson = {
      'type': 'FeatureCollection',
      'features': [
        {
          'type': 'Feature',
          'geometry': {
            'type': 'Point',
            'coordinates': [51.338057, 35.699736]
          },
          'properties': {
            'title': 'میدان آزادی',
            'description': 'نمایش مارکر با آیکون اختصاصی <br/> مختصات:<br/> [51.338057 , 35.699736]'
          }
        },
        {
          'type': 'Feature',
          'geometry': {
            'type': 'Point',
            'coordinates': [51.375265, 35.744720]
          },
          'properties': {
            'title': 'برج میلاد',
            'description': 'مختصات:<br/> [51.375265 , 35.744720]'
          }
        }
      ]
    };

    // add markers to map
    for (const feature of geojson.features) {
      const el = document.createElement('div');
      el.className = 'marker';

      new nmp_mapboxgl.Marker(el)
        .setLngLat(feature.geometry.coordinates)
        .setPopup(
          new nmp_mapboxgl.Popup({ offset: 40 }) 
            .setHTML(
              `<h3>${feature.properties.title}</h3><p>${feature.properties.description}</p>`
            )
        )
        .addTo(neshanMap).togglePopup();
    }

پس از افزودن کد های بالا محتویات صفحه به صورت زیر تکمیل خواهد شد:

            <!DOCTYPE html>
<html lang="fa">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Mapbox Neshan Map (Custom Marker)</title>


  <link rel="stylesheet" href="https://static.neshan.org/sdk/mapboxgl/v1.13.2/neshan-sdk/v1.1.1/index.css" />
  <script src="https://static.neshan.org/sdk/mapboxgl/v1.13.2/neshan-sdk/v1.1.1/index.js"></script>

  <style>
    body {
      height: 100vh;
      width: 100vw;
      margin: 0;
    }

    #map {
      height: 100%;
      width: 100%;
    }

    .marker {
      background-image: url('custom_marker.png');
      background-size: cover;
      width: 32px;
      height: 40px;
      top: -20px;
      cursor: pointer;
    }

    .mapboxgl-popup {
      max-width: 200px;
    }

    .mapboxgl-popup-content {
      direction: rtl;
      text-align: center;
      font-family: 'Open Sans', sans-serif;
    }

  </style>
</head>

<body>
  <div id="map"></div>
  <script type="text/javascript">

    const neshanMap = new nmp_mapboxgl.Map({
      mapType: nmp_mapboxgl.Map.mapTypes.neshanVector,
      container: "map",
      zoom: 12,
      pitch: 0,
      center: [51.359453,35.722753],
      minZoom: 2,
      maxZoom: 21,
      trackResize: true,
      mapKey: "YOUR_WEB_API_KEY", // Get your own API Key on https://platform.neshan.org/panel
      poi: true,
      traffic: false,
      mapTypeControllerOptions : {
        show: true,
        position: 'bottom-left'
      }
    });

    var marker = new nmp_mapboxgl.Marker({ color: "purple" })
      .setLngLat([51.391173, 35.700954])
      .addTo(neshanMap);

    var popup = new nmp_mapboxgl.Popup({ offset: 25 }).setText(
      'با نگه داشتن مارکر می‌توانید آن را روی نقشه جابه‌جا کنید'
    );

    var marker_with_popup = new nmp_mapboxgl.Marker({ color: "#00F955", draggable: true }).setPopup(popup)
      .setLngLat([51.4055941, 35.70019216])
      .addTo(neshanMap).togglePopup();

    const geojson = {
      'type': 'FeatureCollection',
      'features': [
        {
          'type': 'Feature',
          'geometry': {
            'type': 'Point',
            'coordinates': [51.338057, 35.699736]
          },
          'properties': {
            'title': 'میدان آزادی',
            'description': 'نمایش مارکر با آیکون اختصاصی <br/> مختصات:<br/> [51.338057 , 35.699736]'
          }
        },
        {
          'type': 'Feature',
          'geometry': {
            'type': 'Point',
            'coordinates': [51.375265, 35.744720]
          },
          'properties': {
            'title': 'برج میلاد',
            'description': 'مختصات:<br/> [51.375265 , 35.744720]'
          }
        }
      ]
    };

    // add markers to map
    for (const feature of geojson.features) {
      const el = document.createElement('div');
      el.className = 'marker';

      new nmp_mapboxgl.Marker(el)
        .setLngLat(feature.geometry.coordinates)
        .setPopup(
          new nmp_mapboxgl.Popup({ offset: 40 }) 
            .setHTML(
              `<h3>${feature.properties.title}</h3><p>${feature.properties.description}</p>`
            )
        )
        .addTo(neshanMap).togglePopup();
    }


  </script>
</body>

</html>

افزودن آیکون شخصی سازی شده به نقشه با استفاده از کتابخانه mapboxgl