Memulai Menggunakan Here Maps API JavaScript

Ahmad Hakim 2 Maret 2020

Memulai Menggunakan Here Maps API JavaScript

Memulai Menggunakan Here Maps API

Para coders mungkin sedikit banyak sudah mengenal layanan geomapping yang sudah banyak pemanfaatannya. Mulai dari sekadar petunjuk arah, digunakan untuk layanan transportasi, pengiriman barang, taggging suatu tempat dan lain sebagainya tergantung kekayaan fitur yang diberikan oleh penyedia.

Salah satu penyedia dari layanan tersebut adalah Here Maps. Produk dari Here Maps sendiri cukup banyak. Bukan hanya layanan yang menentukan suatu lokasi, tetapi terdapat juga produk yang digunakan untuk otomatisasi kendaraan, pemetaan suatu tempat beserta datanya, memantau padatnya kendaraan di jalanan, pemantauan posisi dan masih banyak lagi ragam implementasi dari masing-masing layanan tersebut yang bisa kamu temukan di Halaman Produknya

Dan kali ini, kita akan mencoba secara sederhana bagaimana menggunakan Here Maps ini pada halaman web kita dengan menggunakan API JavaScript yang sudah disediakan oleh Here Maps.

Langkah sebelum kamu ingin mencoba Here Maps API:

  • Pastikan kamu sudah mendaftar sebagai developer di Here Maps. Silakan kunjungi Developer Here dan lakukan pendaftaran
  • Setelah mendaftar dan mengkonfirmasi akunnya, silakan masuk ke dalam menu project dan generate APP ID beserta API Key-nya pada bagian JavaScript. Karena kita akan menggunakan platform javascript terlebih dahulu. Silakan kunjungi halaman Developer Project Here.

OK, pastikan kamu sudah siap dan sekarang saatnya kita buat suatu file HTML dengan isi seperti ini:

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Here Maps</title>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
    <script src="js/app.js"></script>
</body>

</html>

Jika kamu perhatikan, isi file HTML tersebut gabungan dari Framework CSS Bootstrap dengan file JavaScript dari API Here Maps.

Baris 10: Memanggil file css milik bootstrap

Baris 14-15: Memanggil file Javascript API Here Maps

Baris 22-30: Memanggil jQuery, Popper dan Bootstrap JS untuk keperluan Framework Bootstrap itu sendiri

Baris 31: File JavaScript yang harus kamu buat dalam satu project dan dimasukkan ke dalam folder js yang sejajar dengan file HTML. Di mana file app.js ini akan kita gunakan untuk menyimpan coding untuk implementasi Here Maps.

Kamu bisa lihat struktur projectnya akan seperti ini jika di lihat melalu Visual Studio Code.

Struktur Project

Selanjutnya, silakan isikan potongan script di bawah ini dan letakkan di dalam body. Tepatnya di bawah setelah tag pembuka dari <body>:

<div class="container">
    <div style="height: 500px" id="mapContainer"></div>
</div>

Jika sudah, pastikan kamu juga sudah mengisikan script di bawah ini pada file app.js di dalam folder js pada project yang sudah dibuat.

// Initialize the platform object:
var platform = new H.service.Platform({
  apikey: "isikan-app-key-disini"
});

// Obtain the default map types from the platform object
var maptypes = platform.createDefaultLayers();

// Instantiate (and display) a map object:
var map = new H.Map(
    document.getElementById("mapContainer"),
    maptypes.vector.normal.map,
    {
        zoom: 13,
        center: { lng: 107.600, lat: -6.919 }
    });

Baris 2-4: Proses inisialisasi bahwa kita akan menggunakan Maps dari Here dengan mengirimkan apikey yang sudah didapatkan pada halaman project di dalam akun developer here maps teman-teman.

Baris 7: Proses di mana kamu akan menggunakan jenis terrain peta yang akan ditampilkan. Di sini kita akan gunakan medan default dari Here Maps.

Baris 10-16: Di mana kita akan membuat object peta yang akan ditampilkan pada element <div> yang sudah kita buat di dalam file HTML sebelumnya. Selain itu juga kita akan menentukan koordinat dan jarak zoom dari peta yang akan ditampilkan.

Jika kita buka di dalam browser, maka hasilnya akan tampil seperti ini:

Here Maps

Ok sobat coders, sekian cara Memulai Menggunakan Here Maps API menggunakan JavaScript. Untuk fitur lainnya kita akan bahas pada postingan selanjutnya.

Tags
javascriptapiTutorialmaps geocoding here
Share to
FacebookTwitterLinkedIn