Javascript

Menambahkan Markers Pada Peta LeafletJS

Pada kesempatan kali ini kita masih akan membahas mengenai mengenai memasukkan peta kedalam website. Tetapi kali ini bukan hanya sekedar memasukkan peta saja tetapi kali ini kita kan menambahkan fitur lain pada peta leaflet. Fitur lain tersebut adalah markers atau penanda peta . Seperti ini:

contoh marker pada peta LeafletJS

Markers ini biasanya digunakan oleh pembuat web untuk menunjukkan lokasi dari suatu posisi di peta. Tampilan dari merker pada contoh diatas adalah tampilan tanda marker yang umum selanjutnya kita bisa memodifikasinya sesuai dengan selera kita masing-masing. Nah, pada tutorial ini kita akan membahas mengenai cara menambahkan marker, cara menyesuaikan marker dengan petanya, serta mengaktif dan nonaktifkan marker.

Menambahkan Marker

Untuk menambahkan marker kedalam peta leaflet jangan lupa menambahkan Library CSS dan JS Leaflet dibawah dalam tag head:

<!--CSS LeafletJS-->    <link      rel="stylesheet"      href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="      crossorigin=""    />    

<!--JavaScript LeafletJS-->    <script      src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"      integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="      crossorigin=""    ></script>

Setelah menambahakan library nya ada beberapa step yang perlu dilakukan:

  • Buat Object map leaflet didalam tag <div> untuk membuat area penampung tampilan peta, dengan script dasar:

<div id="mapid"></div>

tag dibv disini harus memiliki id ya teman – teman , id ini nantinya akan kita gunakan untuk pointer dari script javascript tampilan peta.

  • Buat variabel penampung data, contohnya

var mymap = L.map("mapid").setView([lat, lng], zoom);

variabel ini yang akan kita gunakan untuk menentukan pusat dari tampilan awal peta yang tampil disertai tingkat dari perbesaran peta. nomor lat dan lng kita bisa cari melalui google maps ya (cara paling mudah).

  • Buat Tile Layer

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', maxZoom: 18, id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, accessToken: 'your.mapbox.access.token' }).addTo(mymap);

Tile layer harus berisi token akses serta atribut peta lainnya. token akses sendiri dapat teman teman buat di situs mapBox.

  • Menambahkan marker

L.marker([lat, lng])        .addTo(mymap);

didalam L.marker ini harus berisi koordinat posisi yang akan ditandai, kemudian untuk menambahkan ke dalam peta yang akan dibuat tampahkan fungsi addTo(variabel).

  • Script lengkapnya:
<!DOCTYPE html>
<html>
  <head>
    <title>Peta</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"
    />
    <!--CSS LeafletJS-->
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
      crossorigin=""
    />
    <!--JavaScript LeafletJS-->
    <script
      src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
      integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
      crossorigin=""
    ></script>
  </head>
  <body>
    <h2>Menambahkan Peta Pada website</h2>

    <div id="mapid" style="width: 600px; height: 400px"></div>
    <script>
      var mymap = L.map("mapid").setView([-8.05923, 111.394501], 13);

      L.tileLayer(
        "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
        {
          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,
        }
      ).addTo(mymap);

      L.marker([-8.05923, 111.394501])
        .addTo(mymap);
    </script>
  </body>
</html>

Menambahkan Popup Marker

contoh marker popup

Ini merupakan salah satu variasi dari marker yang ada pada leafletJS, yaitu menambahkan popup marker. Popup ini dapat berisi suatu pesan atau nama dari tempat yang ditandai dengan marker. Cara nya sangat mudah yaitu hanya menambahkan script dibawah setelah .addTo(namaVariabel) saat membuat marker.

.bindPopup("<b>Hai</b><br />Ini adalah PopUp Marker.")        .openPopup();

fungsu .openPopup() digunakan untuk membuat marker popup langsung memunculkan pesan didalamnya, Jika teman – teman ingin menghilangkan ini juga tidak apa-apa. Sebagai gantinya teman – teman harus men-klik marker untuk dapat membaca pesan didalamnya.

script lengkapnya:

<!DOCTYPE html>
<html>
  <head>
    <title>Peta</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"
    />
    <!--CSS LeafletJS-->
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
      crossorigin=""
    />
    <!--JavaScript LeafletJS-->
    <script
      src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
      integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
      crossorigin=""
    ></script>
  </head>
  <body>
    <h2>Menambahakan Peta Pada website</h2>

    <div id="mapid" style="width: 600px; height: 400px"></div>
    <script>
      var mymap = L.map("mapid").setView([-8.05923, 111.394501], 13);

      L.tileLayer(
        "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
        {
          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,
        }
      ).addTo(mymap);

      L.marker([-8.05923, 111.394501])
        .addTo(mymap)
        .bindPopup("<b>Hai!</b><br />Ini adalah marker PopUp.")
        .openPopup();
    </script>
  </body>
</html>

Marker dengan custom ikon

contoh peta dengan custom marker

Tidak hanya menambahkan marker biasa saja, kita juga bisa men-custom tampilan dari marker sesuka kita atau kita dapat mendownloadnya di sini. Untuk menambahakan custom marker kita perlu mendefinisikan variabel yang yang didalamnya terdapat lokasi dari gambar custom markernya.

var greenIcon = L.icon({        iconUrl: “https://img.icons8.com/fluent/48/000000/marker-sun.png”,
        iconSize: [38, 95], // ukuran ikon        shadowSize: [50, 64], // ukuran bayangan ikon        iconAnchor: [22, 94], // titik dari ikon yang menyesuaikan dengan koordinat marker        shadowAnchor: [4, 62], //mengatur bayangan        popupAnchor: [-3, -76], // ini untuk membuat popup yang tampil akan menyesuaikan dengan ukuran ikon.      });

kemudian setelah membuat variabel yang menampung pengaturan dari ikon markernya, kita tinggal menambahkannya dalam script marker seperti

L.marker([-8.05923, 111.494501], { icon: greenIcon })        .addTo(mymap)

contoh lengkapnya seperti:

<!DOCTYPE html>
<html>
  <head>
    <title>Peta</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"
    />
    <!--CSS LeafletJS-->
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
      crossorigin=""
    />
    <!--JavaScript LeafletJS-->
    <script
      src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
      integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
      crossorigin=""
    ></script>
  </head>
  <body>
    <h2>Menambahakan Peta Pada website</h2>

    <div id="mapid" style="width: 600px; height: 400px"></div>
    <script>
      var mymap = L.map("mapid").setView([-8.05923, 111.394501], 13);
      var greenIcon = L.icon({
        iconUrl: "https://img.icons8.com/fluent/48/000000/marker-sun.png",

        iconSize: [38, 95], // size of the icon
        shadowSize: [50, 64], // size of the shadow
        iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
        shadowAnchor: [4, 62], // the same for the shadow
        popupAnchor: [-3, -76], // point from which the popup should open relative to the iconAnchor
      });
      L.tileLayer(
        "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
        {
          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,
        }
      ).addTo(mymap);

      L.marker([-8.05923, 111.394501], { icon: greenIcon })
        .addTo(mymap)
        .bindPopup("<b>Hai!</b><br />Ini popup denan custom marker");
    </script>
  </body>
</html>

bagaimana kalau membuat banyak ikon sekaligus ?, tinggal menambahkan variabel penampung URL dari gambar ikon atau bisa buat array untuk lebih simplenya.

Sekian penjelasan dan pembahasan mengenai marker pada leafletJS semoga bermanfaat, terima kasih.


YogaBayu

Seorang yang menyukai dunia elektronika dan website.

Share
Tags: marker leafletJSmembuat penanda pada peta

    Related Post