DEV Community

Roby Cigar
Roby Cigar

Posted on

Cara Menggunakan leaflet js di React

#react #leafletjs #javascript #webdev

Halo, disaat pandemi yang tak berujung ini Saya akan membagikan cara menggabungkan leafletjs di dalam aplikasi React anda. Gausah banyak cincong skuy.

Instalasi React

Jika memakai npm

npm install -s react react-dom leaflet react-leaflet
Enter fullscreen mode Exit fullscreen mode

Jika pakai yarn

yarn add react react-dom leaflet react-leaflet
Enter fullscreen mode Exit fullscreen mode

Note: didalam instalasi diatas, kalian sudah menginstall leafletjs, namun ada hal tambahan agar program dapat berjalan.

Menambah CDN (Content Delivery Network)

Untuk step ini klian cukup copy paste saja. karena disini kalian akan mengambil css dan js dari leafletjs kedalam program kalian.

taruh stylesheet berikut di header file index.html kalian yang berada di direktori "namaProject/public/index.html" 
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
Enter fullscreen mode Exit fullscreen mode
taruh script berikut di bagian bawah diakhir body tag index.html kalian. 
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
Enter fullscreen mode Exit fullscreen mode

Jika sudah, beginilah index.html Anda.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <!-- Load Leaflet js -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
         integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
         crossorigin=""/>
    <title>Title</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
     <!-- Make sure you put this AFTER Leaflet's CSS -->
         <!-- Make sure you put this AFTER Leaflet's CSS -->
     <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
         integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
         crossorigin=""></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Setting React Component

Step terakhir kalian dapat mengambil class dari react-leaflet yang sudah kalian install di step sebelumnya di file js Anda.
class yang kalian butuhkan adalah MapContainer, TileLayer, Marker, Popup

import React from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import style from './Map.css';

function Map() {
    return (
        <div>
            <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false} id="mapid">
                <TileLayer
                    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                <Marker position={[51.505, -0.09]}>
                    <Popup>
                        A pretty CSS3 popup. <br /> Easily customizable.
                    </Popup>
                </Marker>
            </MapContainer>
        </div>
    )
}

export default Map;
Enter fullscreen mode Exit fullscreen mode

Note: code diatas mempunyai id="mapid"
kita harus tentukan dulu seberapa tinggi dan lebar map yang akan ditampilkan. Tambahkan css ke id tersebut.

#mapid { 
    height: 500px;
    width: 600px;

}
Enter fullscreen mode Exit fullscreen mode

Selamat kalian suda bs menampilkan map didlm localhost klian yey.

Top comments (0)

Read next

dev_bilal profile image

What is JavaScript ?

Muhammad Bilal -

ramadhan002 profile image

Axios interceptor + React JS

ramadhan.dev -

sty6x profile image

Scaling Zensearch's capabilities to query the whole database

FDiaz -

elanatframework profile image

Migrating Project from ASP.NET Core MVC to CodeBehind Framework

elanatframework -