افزودن مارکر به نقشه با استفاده از کتابخانه mapboxgl

افزودن مارکر به نقشه با استفاده از کتابخانه mapboxgl نشان

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

فهرست مطالب این صفحه

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

1- راه اندازی صفحه

ابتدا یک فایل HTML با محتوای زیر ایجاد می‌کنیم. توجه داشته باشید برای نمایش نقشه ما نیازمند این هستیم که نقشه را با یک Id شناسایی کنیم. از این رو یک div با 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">
</script>
</body>
</html>

2- افزودن نقشه

حال در قسمت <script> برای ایجاد نقشه کد های زیر را اضافه می‌کنیم.

            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_WEB_API_KEY",
            poi: false,
            traffic: false,
            mapTypeControllerOptions: {
                show: true,
                position: 'bottom-left'
            }
        });

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

کلید دسترسی سرویس (api-key) برای ساخت کلید دسترسی (api-key) مناسب برای این سرویس شما باید در پنل ساخت کلید دسترسی گزینه نقشه وب را انتخاب کنید. این را هم در نظر داشته باشید برای امنیت بیشتر کلید دسترسی خود و جلو گیری از سواستفاده شدن از آن domain سرور خود را نیز میتوانید در فیلد دامنه/Ip های مجاز وارد کنید.

            <!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_WEB_API_KEY", // Get your own API Key on https://platform.neshan.org/panel
            poi: false,
            traffic: false,
            mapTypeControllerOptions: {
                show: true,
                position: 'bottom-left'
            }
        });
    
</script>
</body>
</html>

خروجی کد بالا:

3- افزودن مارکر

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

            // add marker to map
var marker = new nmp_mapboxgl.Marker()
            .setLngLat([51.391173, 35.700954])
            .addTo(neshanMap);

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

            <!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: 14,
            pitch: 0,
            center: [51.391173, 35.700954],
            minZoom: 2,
            maxZoom: 21,
            trackResize: true,
            mapKey: "YOUR_WEB_API_KEY",
            poi: false,
            traffic: false,
            mapTypeControllerOptions: {
                show: true,
                position: 'bottom-left'
            }
        });

        var marker = new nmp_mapboxgl.Marker()
            .setLngLat([51.391173, 35.700954])
            .addTo(neshanMap);

    </script>
</body>

</html>

افزودن مارکر به نقشه با استفاده از کتابخانه mapboxgl