• 1

راه اندازی Open Street Map

درود

برای راه اندازی Open Street Map شما باید ابتدا کتابخانه leaflet و استایل های css آن را وارد پروژه خود نمایید.

برای دریافت آخرین نسخه میتونید به سایت leaflet مراجعه کنید

 

وارد کردن استایل ها در پروژه.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />

 

وارد کردن اسکریپت به پروژه

<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>

 

پس از وارد کردن فایل های مورد نیاز. یک تگ اسکریپت باز نمایید و کدهای زیر را در آن قرار دهید

<script>

        // مشخص کردن لت و لانگ ابتدایی نقشه با زوم 16
        var mymap = L.map('map').setView([36.286324, 59.609953], 16);


        // لد کردن لایه های نقشه. سرورهای مختلفی برای این لایه ها وجود دارد که میتوانید از انها استفاده کنید
        L.tileLayer('https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey={accessToken}', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox.streets',
            accessToken: '---'
        }).addTo(mymap);

</script>

لینک سرورهای مختلف برای لایه ها

* در صورتی که لایه تاندرفارست نیاز به Access Token داشت برای دریافت Access Token به وبسایت Map Box مراجعه نمایید.

 

در صورتی که بخواهید به نقشه تان مارکر اضافه کنید. با مشخص کردن مختصات، مارکر را به صورت زیر اضافه میکنیم

L.marker([36.286324, 59.609953]).addTo(mymap);

در صورتی که بخواهید با کلیک به روی مارکر یک متن کوچک از مشخصات مارکر نشان داده شود

L.marker([36.286324, 59.609953]).addTo(mymap).bindPopup('عنوان مارکر ');

 

در صورتی که بخواهید با کلیک بر روی یک لینک در وبسایت مختصات نقشه به نقطه ی دلخواه تغییر داده شود

$('#change-to-mashhad').on('click', function(){
      mymap.setView([36.286324, 59.609953], 16);
 });

 

برای اطلاعات بیشتر به وبسایت leaflet مراجعه نمایید.

افزودن دیدگاه

بدون پاسخ

لیست امتیاز دهندگان
    تنها امتیازهای مثبت لیست میگردند.