Scribd Logo
Unggah

Selamat datang di Scribd!

  • LAOD MAP OpenStreet Menggunakan Leaftlet Dan Mapbox

    Diunggah oleh

    Nur Imansyah
    37 tayangan3 halaman
    LAOD MAP OpenStreet Menggunakan Leaftlet Dan Mapbox

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    LAOD MAP OpenStreet Menggunakan Leaftlet Dan Mapbox

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    37 tayangan3 halaman

    LAOD MAP OpenStreet Menggunakan Leaftlet Dan Mapbox

    Diunggah oleh

    Nur Imansyah
    LAOD MAP OpenStreet Menggunakan Leaftlet Dan Mapbox

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 3

    LAOD MAP OpenStreet menggunakan Leaftlet dan mapbox , mapku.

    php

    1. Load Library Leaflet sbb:

    2. Load Mapbox sebagai layer peta.

    <div id="mapid" style="width: 600px; height: 400px;"></div>

    Menentukan ukuran layer peta 600 x 400 px, dengan identitas tempat map pada html adalah mapid

    Didalam mapid deletakkan layer mapbox dimana peta akan diload dengan mana mymap, dengan view
    awal pada koordinat 0.14037,117.46006, dengan zoom awal 10,

    Selanjutnya mapbox diload ditampung dalam variable LayarKita, kemudian Variable LayarKita yang berisi
    map di tampilkan kedalam mymap, sebagai layer peta baru.

    Pada id: 'mapbox/satellite-v9', adalah type map yang digunakan

    Ada beberapa type sbg berikut (optional type):

    • mapbox/streets-v11
    • mapbox/outdoors-v11
    • mapbox/light-v10
    • mapbox/dark-v10
    • mapbox/satellite-v9
    • mapbox/satellite-streets-v11

    Sehingga akan muncul sebagai berikut ('mapbox/satellite-v9'):


    • Contoh mapbox/streets-v11, dengan zoom 15
    Source code lengkap mapku.php silahkan anda coba:

    - Buat web server dengan menggunakan xampp, selanjutnya buat folder baru dengan nama
    webgisku sebagai public web,

    - Buat file mapku.php tulis script sbag berikut :

    <!DOCTYPE html>
    <html>
    <head>

    <title>Load Peta Opensteet(Leaflet)</title>

    <meta charset="utf-8" />


    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-


    xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-
    gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
    crossorigin=""></script>

    </head>
    <body>

    <div id="mapid" style="width: 600px; height: 400px;"></div>


    <script>

    var mymap = L.map('mapid').setView([0.14037,117.46006], 15);

    var
    LayerKita=L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaW1hbnN5YWgiLCJhIjoiY2s4a
    nhhMWcwMGh6MjNmbndubWZ5OTAyciJ9.vmMYQcBsWfdKE5jay1wI4A', {
    maxZoom: 18,
    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>',
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1
    });
    mymap.addLayer(LayerKita);

    </script>

    </body>
    </html>

    Anda mungkin juga menyukai