{"id":51162,"date":"2024-11-07T16:11:28","date_gmt":"2024-11-07T09:11:28","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=51162"},"modified":"2024-11-07T16:11:30","modified_gmt":"2024-11-07T09:11:30","slug":"cara-menambahkan-openstreetmap-di-codeigniter-4","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/cara-menambahkan-openstreetmap-di-codeigniter-4\/","title":{"rendered":"Cara Menambahkan OpenStreetMap di CodeIgniter 4"},"content":{"rendered":"\n

Apakah Anda ingin membuat peta interaktif ada website Anda? OpenStreetMap bisa menjadi pilihan yang tepat. Dalam artikel ini, kami akan berbagi cara menambahkan OpenStreetMap di CodeIgniter 4. <\/p>\n\n\n\n\n\n

Namun sebelum membahas cara menambahkan peta di CodeIgniter 4, terlebih dahulu kami akan membahas tentang apa itu OpenStreetMap. Simak informasi berikut ini.<\/p>\n\n\n\n

Apa Itu OpenStreetMap?<\/h2>\n\n\n\n

OpenStreetMap (OSM) adalah salah satu aplikasi berbasis web yang dibuat untuk menampilkan peta dunia. OpenStreetMap bersifat open source<\/em>, sehingga bebas digunakan oleh siapa saja. <\/p>\n\n\n\n

Berbeda dari layanan peta berbayar, OpenStreetMap memungkinkan penggunanya untuk mengakses dan menyesuaikan data peta sesuai kebutuhan tanpa biaya lisensi.<\/p>\n\n\n\n

OSM dikembangkan oleh komunitas global dan terus diperbarui agar tetap akurat dan up-to-date<\/em>. Bagi Anda yang ingin menambahkan fitur peta yang interaktif di CodeIgniter 4, OpenStreetMap merupakan pilihan yang tepat. <\/p>\n\n\n\n

Menambahkan OpenStreetMap di CodeIgniter 4<\/h2>\n\n\n\n

Menambahkan fitur peta di CodeIgniter<\/a> dapat dilakukan dengan berbagai cara, seperti melalui API berbayar milik Google Maps hingga OpenStreetMap yang gratis.<\/p>\n\n\n\n

Dalam artikel ini, kami memilih untuk menggunakan opsi OpenStreetMap dengan pemilihan kota pelajar – DI Yogyakarta karena kemudahan integrasi dan hanya memerlukan titik koordinat. Berikut cara menambahkan OpenStreetMap di CodeIgniter 4.<\/p>\n\n\n\n

Step 1. Buat Controller Maps<\/h3>\n\n\n\n

Buatlah file controller dengan nama MapController.php<\/strong> dalam folder \/app\/Controllers\/<\/em><\/strong> dengan isi dibawah:<\/p>\n\n\n\n

<?php\n\nnamespace App\\Controllers;\n\nuse App\\Controllers\\BaseController;\n\nclass MapController extends BaseController\n{\n    public function index()\n    {\n        return view('map-jogja');\n    }\n}<\/code><\/pre>\n\n\n\n
Simpan script diatas, kemudian lanjut ke step 2.<\/p>\n\n\n\n
Step 2. Tambah Routes Maps<\/h3>\n\n\n\n
Setelah Controller dibuat, Anda perlu menambahkan Routes mapnya dalam file \/app\/Config\/Routes.php<\/em><\/strong> dengan isi seperti dibawah. <\/p>\n\n\n\n
<?php\n\nuse CodeIgniter\\Router\\RouteCollection;\n\n\/**\n * @var RouteCollection $routes\n *\/\n$routes->get('\/', 'Home::index');\n$routes->get('\/map', 'MapController::index');<\/code><\/pre>\n\n\n\n
Silahkan disesuaikan dengan routes yang sudah Anda miliki saat ini.<\/p>\n\n\n\n
Step 3. Buat File View Maps<\/h3>\n\n\n\n
Bagian terakhir dari menambahkan OpenStreetMap di CodeIgniter 4 adalah dengan membuat file view yang berfungsi menampilkan petanya. Buatlah file dengan nama map-jogja.php<\/strong> dalam folder \/app\/Views\/<\/em><\/strong> dan isikan script dibawah:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.css\" \/>\n    <script src=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.js\"><\/script>\n    <title>Map Jogja | CodeIgniter 4.5<\/title>\n\n    <style>\n        #map {\n            height: 600px; \/* Set the height of the map *\/\n        }\n    <\/style>\n\n    <!-- STYLES -->\n\n    <style {csp-style-nonce}>\n        * {\n            transition: background-color 300ms ease, color 300ms ease;\n        }\n        *:focus {\n            background-color: rgba(221, 72, 20, .2);\n            outline: none;\n        }\n        html, body {\n            color: rgba(33, 37, 41, 1);\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";\n            font-size: 16px;\n            margin: 0;\n            padding: 0;\n            -webkit-font-smoothing: antialiased;\n            -moz-osx-font-smoothing: grayscale;\n            text-rendering: optimizeLegibility;\n        }\n        header {\n            background-color: rgba(247, 248, 249, 1);\n            padding: .4rem 0 0;\n        }\n        .menu {\n            padding: .4rem 2rem;\n        }\n        header ul {\n            border-bottom: 1px solid rgba(242, 242, 242, 1);\n            list-style-type: none;\n            margin: 0;\n            overflow: hidden;\n            padding: 0;\n            text-align: right;\n        }\n        header li {\n            display: inline-block;\n        }\n        header li a {\n            border-radius: 5px;\n            color: rgba(0, 0, 0, .5);\n            display: block;\n            height: 44px;\n            text-decoration: none;\n        }\n        header li.menu-item a {\n            border-radius: 5px;\n            margin: 5px 0;\n            height: 38px;\n            line-height: 36px;\n            padding: .4rem .65rem;\n            text-align: center;\n        }\n        header li.menu-item a:hover,\n        header li.menu-item a:focus {\n            background-color: rgba(221, 72, 20, .2);\n            color: rgba(221, 72, 20, 1);\n        }\n        header .logo {\n            float: left;\n            height: 44px;\n            padding: .4rem .5rem;\n        }\n        header .menu-toggle {\n            display: none;\n            float: right;\n            font-size: 2rem;\n            font-weight: bold;\n        }\n        header .menu-toggle button {\n            background-color: rgba(221, 72, 20, .6);\n            border: none;\n            border-radius: 3px;\n            color: rgba(255, 255, 255, 1);\n            cursor: pointer;\n            font: inherit;\n            font-size: 1.3rem;\n            height: 36px;\n            padding: 0;\n            margin: 11px 0;\n            overflow: visible;\n            width: 40px;\n        }\n        header .menu-toggle button:hover,\n        header .menu-toggle button:focus {\n            background-color: rgba(221, 72, 20, .8);\n            color: rgba(255, 255, 255, .8);\n        }\n        header .heroe {\n            margin: 0 auto;\n            max-width: 1100px;\n            padding: 1rem 1.75rem 1.75rem 1.75rem;\n        }\n        header .heroe h1 {\n            font-size: 2.5rem;\n            font-weight: 500;\n        }\n        header .heroe h2 {\n            font-size: 1.5rem;\n            font-weight: 300;\n        }\n        section {\n            margin: 0 auto;\n            max-width: 1100px;\n            padding: 2.5rem 1.75rem 3.5rem 1.75rem;\n        }\n        section h1 {\n            margin-bottom: 2.5rem;\n        }\n        section h2 {\n            font-size: 120%;\n            line-height: 2.5rem;\n            padding-top: 1.5rem;\n        }\n        section pre {\n            background-color: rgba(247, 248, 249, 1);\n            border: 1px solid rgba(242, 242, 242, 1);\n            display: block;\n            font-size: .9rem;\n            margin: 2rem 0;\n            padding: 1rem 1.5rem;\n            white-space: pre-wrap;\n            word-break: break-all;\n        }\n        section code {\n            display: block;\n        }\n        section a {\n            color: rgba(221, 72, 20, 1);\n        }\n        section svg {\n            margin-bottom: -5px;\n            margin-right: 5px;\n            width: 25px;\n        }\n        .further {\n            background-color: rgba(247, 248, 249, 1);\n            border-bottom: 1px solid rgba(242, 242, 242, 1);\n            border-top: 1px solid rgba(242, 242, 242, 1);\n        }\n        .further h2:first-of-type {\n            padding-top: 0;\n        }\n        .svg-stroke {\n            fill: none;\n            stroke: #000;\n            stroke-width: 32px;\n        }\n        footer {\n            background-color: rgba(221, 72, 20, .8);\n            text-align: center;\n        }\n        footer .environment {\n            color: rgba(255, 255, 255, 1);\n            padding: 2rem 1.75rem;\n        }\n        footer .copyrights {\n            background-color: rgba(62, 62, 62, 1);\n            color: rgba(200, 200, 200, 1);\n            padding: .25rem 1.75rem;\n        }\n        @media (max-width: 629px) {\n            header ul {\n                padding: 0;\n            }\n            header .menu-toggle {\n                padding: 0 1rem;\n            }\n            header .menu-item {\n                background-color: rgba(244, 245, 246, 1);\n                border-top: 1px solid rgba(242, 242, 242, 1);\n                margin: 0 15px;\n                width: calc(100% - 30px);\n            }\n            header .menu-toggle {\n                display: block;\n            }\n            header .hidden {\n                display: none;\n            }\n            header li.menu-item a {\n                background-color: rgba(221, 72, 20, .1);\n            }\n            header li.menu-item a:hover,\n            header li.menu-item a:focus {\n                background-color: rgba(221, 72, 20, .7);\n                color: rgba(255, 255, 255, .8);\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n\n<!-- HEADER: MENU + HEROE SECTION -->\n<header>\n\n    <div class=\"menu\">\n        <ul>\n            <li class=\"logo\">\n                <a href=\"https:\/\/codeigniter.com\" target=\"_blank\">\n                    <svg role=\"img\" aria-label=\"Visit CodeIgniter.com official website!\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 2100 500\" height=\"44\"><path fill=\"#dd4814\" d=\"M148.2 411c-20.53-9.07-34.48-28.61-36.31-50.99 1.2-23.02 13.36-44.06 32.67-56.61-3.17 7.73-2.4 16.53 2 23.6 5.01 7 13.63 10.36 22.07 8.61 12.02-3.38 19.06-15.86 15.68-27.89-1.2-4.21-3.6-8.03-6.88-10.91-13.6-11.06-20.43-28.44-18-45.81 2.33-9.2 7.42-17.52 14.61-23.8-5.4 14.4 9.83 28.61 20.05 35.6 18.14 10.88 35.6 22.84 52.32 35.81 18.27 14.4 28.23 36.94 26.67 60-4.11 24.54-21.47 44.8-45.13 52.4 47.33-10.53 96.13-48.13 97.06-101.46-.93-42.67-26.4-80.96-65.33-98.4h-1.73c.86 2.09 1.28 4.34 1.2 6.61.13-1.47.13-2.93 0-4.4.21 1.73.21 3.47 0 5.2-2.96 12.13-15.2 19.6-27.36 16.64-4.86-1.2-9.2-3.93-12.32-7.87-15.6-20 0-42.76 2.61-64.76 1.6-28.13-11.25-55.02-34.05-71.46 11.41 19.02-3.79 44-14.84 58.21-11.07 14.21-27.07 24.8-40.11 37.2-14.05 13.07-26.93 27.44-38.49 42.8-24.99 30.53-34.8 70.8-26.67 109.4 11.15 37.2 42.07 65.15 80.2 72.4h.21l-.13-.12Zm324.56-159.8q0-17.92 6.16-35.56 6.44-17.92 18.48-31.92t29.68-22.68q17.64-8.96 40.04-8.96 26.6 0 45.36 12.04 19.04 12.04 28 31.36l-15.4 9.52q-4.76-9.8-11.76-16.52-6.72-6.72-14.56-10.92-7.84-4.2-16.24-5.88-8.4-1.96-16.52-1.96-17.92 0-31.64 7.28-13.72 7.28-23.24 19.04-9.24 11.76-14 26.6-4.76 14.56-4.76 29.68 0 16.52 5.6 31.64 5.88 15.12 15.68 26.88 10.08 11.48 23.52 18.48 13.72 6.72 29.68 6.72 8.4 0 17.08-1.96 8.96-2.24 17.08-6.72 8.4-4.76 15.4-11.48 7-7 11.76-16.8l16.24 8.4q-4.76 11.2-13.44 19.88-8.68 8.4-19.32 14.28-10.64 5.88-22.68 8.96-11.76 3.08-23.24 3.08-20.44 0-37.52-8.96-17.08-8.96-29.4-23.24-12.32-14.56-19.32-32.76-6.72-18.48-6.72-37.52Zm263.48 103.6q-15.96 0-29.12-5.88-13.16-6.16-22.96-16.52-9.52-10.36-14.84-24.08Q664 294.6 664 279.48q0-15.4 5.32-29.12 5.6-13.72 15.12-24.08 9.8-10.36 22.96-16.52t28.84-6.16q15.68 0 28.84 6.16 13.44 6.16 22.96 16.52 9.8 10.36 15.12 24.08 5.6 13.72 5.6 29.12 0 15.12-5.32 28.84t-15.12 24.08q-9.52 10.36-22.96 16.52-13.16 5.88-29.12 5.88Zm-52.92-75.04q0 12.32 4.2 22.96 4.2 10.36 11.2 18.48 7.28 7.84 16.8 12.32 9.8 4.48 20.72 4.48 10.92 0 20.44-4.48 9.8-4.76 17.08-12.6 7.28-8.12 11.48-18.76 4.2-10.64 4.2-22.96 0-12.04-4.2-22.68-4.2-10.92-11.48-18.76-7.28-8.12-17.08-12.6-9.52-4.76-20.44-4.76-10.92 0-20.44 4.76-9.52 4.48-16.8 12.6-7.28 8.12-11.48 19.04-4.2 10.64-4.2 22.96ZM900.6 354.8q-15.12 0-28-6.16-12.88-6.44-22.12-16.8t-14.56-23.8q-5.04-13.72-5.04-28.56 0-15.4 5.04-29.12 5.04-14 13.72-24.36 8.96-10.36 21-16.24 12.32-6.16 26.88-6.16 18.48 0 32.76 9.8 14.28 9.52 22.4 23.24V147.6h19.04v179.76q0 7.84 6.72 7.84V352q-4.2.84-6.72.84-6.72 0-11.76-4.2-5.04-4.48-5.04-10.64v-14.28Q946.24 338 931.4 346.4t-30.8 8.4Zm4.2-16.8q7 0 14.84-2.8 8.12-2.8 15.12-7.56 7-5.04 11.76-11.48 5.04-6.72 6.16-14.28V256.8q-2.8-7.56-8.12-14-5.32-6.72-12.32-11.76-6.72-5.04-14.56-7.84-7.84-2.8-15.4-2.8-11.76 0-21.28 5.04-9.52 5.04-16.52 13.44-6.72 8.12-10.36 18.76-3.64 10.64-3.64 21.84 0 11.76 4.2 22.4 4.2 10.64 11.48 18.76 7.28 7.84 17.08 12.6Q893.32 338 904.8 338Zm173.04 16.8q-15.96 0-29.4-5.88-13.16-6.16-22.96-16.52-9.8-10.64-15.4-24.36-5.32-13.72-5.32-29.4 0-15.4 5.32-28.84 5.6-13.72 15.12-23.8 9.8-10.36 23.24-16.24 13.44-6.16 29.12-6.16 15.96 0 29.12 6.16 13.44 5.88 22.96 16.24 9.52 10.36 14.84 23.8 5.32 13.44 5.32 28.56v4.48q0 2.24-.28 3.08h-124.88q.84 11.76 5.32 21.84 4.76 9.8 12.04 17.08 7.28 7.28 16.52 11.48 9.52 3.92 20.16 3.92 7 0 14-1.96t12.88-5.32q5.88-3.36 10.64-8.12 4.76-5.04 7.28-10.92l16.52 4.48q-3.36 8.12-9.52 14.84-6.16 6.44-14.28 11.48-8.12 4.76-17.92 7.56-9.8 2.52-20.44 2.52Zm-53.48-83.44h107.24q-.84-11.76-5.6-21.28-4.48-9.8-11.76-16.8-7-7-16.52-10.92-9.24-3.92-19.88-3.92-10.64 0-20.16 3.92t-16.8 10.92q-7 7-11.48 16.8-4.2 9.8-5.04 21.28Zm193.2 80.64h-38.64V153.2h38.64V352Zm93.52.84q-14.84 0-26.88-5.88t-21-15.96q-8.68-10.36-13.44-23.8-4.76-13.44-4.76-28.56 0-15.96 5.04-29.68 5.04-13.72 14-24.08 8.96-10.36 21.56-16.24 12.6-5.88 27.72-5.88 17.08 0 29.96 7.84 12.88 7.56 21.28 20.44v-25.76h32.76V345q0 16.24-6.16 29.12-6.16 12.88-17.08 21.84-10.64 8.96-25.76 13.72-14.84 4.76-32.48 4.76-24.08 0-40.6-7.84-16.24-8.12-28-22.68l20.44-19.88q8.4 10.36 21 16.24 12.88 5.88 27.16 5.88 8.68 0 16.52-2.24 8.12-2.52 14.28-7.56 6.16-5.04 9.52-12.88 3.64-7.84 3.64-18.48v-18.48q-7.28 12.6-20.44 19.6-13.16 6.72-28.28 6.72Zm12.6-29.96q6.16 0 11.76-1.96t10.36-5.32q4.76-3.36 8.4-7.84 3.64-4.48 5.6-9.52v-35q-5.04-12.88-15.96-20.72-10.64-7.84-22.4-7.84-8.68 0-15.68 3.92-7 3.64-12.04 10.08-5.04 6.16-7.84 14.28-2.52 8.12-2.52 16.8 0 8.96 3.08 16.8t8.4 13.72q5.6 5.88 12.88 9.24 7.28 3.36 15.96 3.36Zm243.88-62.44V352h-37.52v-82.32q0-17.64-6.16-25.76-6.16-8.12-17.08-8.12-5.6 0-11.48 2.24-5.88 2.24-11.2 6.44-5.04 3.92-9.24 9.52t-6.16 12.32V352h-37.52V205.28h33.88v27.16q8.12-14 23.52-21.84t34.72-7.84q13.72 0 22.4 5.04 8.68 5.04 13.44 13.16 4.76 8.12 6.44 18.48 1.96 10.36 1.96 21Zm70.28 91.56h-37.52V205.28h37.52V352Zm0-167.16h-37.52V147.6h37.52v37.24Zm114.24 129.92 7.56 29.68q-7.56 3.36-18.48 6.72-10.92 3.36-22.96 3.36-7.84 0-14.84-1.96-6.72-1.96-12.04-6.16-5.04-4.48-8.12-11.2-3.08-7-3.08-16.8v-84.28h-19.32v-28.84h19.32v-47.6h37.52v47.6h30.8v28.84h-30.8v71.68q0 7.84 3.92 11.2 4.2 3.08 10.08 3.08t11.48-1.96q5.6-1.96 8.96-3.36Zm91.56 40.04q-17.64 0-31.92-5.88-14.28-6.16-24.36-16.52t-15.68-24.08q-5.32-13.72-5.32-28.84 0-15.68 5.32-29.4 5.32-14 15.4-24.36 10.08-10.64 24.36-16.8 14.56-6.16 32.48-6.16 17.92 0 31.92 6.16 14.28 6.16 24.08 16.52 10.08 10.36 15.12 24.08 5.32 13.72 5.32 28.56 0 3.64-.28 7 0 3.36-.56 5.6h-113.4q.84 8.68 4.2 15.4 3.36 6.72 8.68 11.48 5.32 4.76 12.04 7.28 6.72 2.52 14 2.52 11.2 0 21-5.32 10.08-5.6 13.72-14.56l32.2 8.96q-8.12 16.8-26.04 27.72-17.64 10.64-42.28 10.64Zm-38.08-88.48h76.16q-1.4-16.52-12.32-26.32-10.64-10.08-26.04-10.08-7.56 0-14.28 2.8-6.44 2.52-11.48 7.28t-8.4 11.48q-3.08 6.72-3.64 14.84Zm225.12-62.72v34.16q-17.08.28-30.52 6.72-13.44 6.16-19.32 18.76V352h-37.52V205.28h34.44v31.36q3.92-7.56 9.24-13.44 5.32-6.16 11.48-10.64t12.32-6.72q6.44-2.52 12.32-2.52h4.48q1.68 0 3.08.28Z\"\/><\/svg>\n                <\/a>\n            <\/li>\n            <li class=\"menu-toggle\">\n                <button id=\"menuToggle\">&#9776;<\/button>\n            <\/li>\n            <li class=\"menu-item hidden\"><a href=\"#\">Home<\/a><\/li>\n            <li class=\"menu-item hidden\"><a href=\"https:\/\/codeigniter.com\/user_guide\/\" target=\"_blank\">Docs<\/a>\n            <\/li>\n            <li class=\"menu-item hidden\"><a href=\"https:\/\/forum.codeigniter.com\/\" target=\"_blank\">Community<\/a><\/li>\n            <li class=\"menu-item hidden\"><a\n                    href=\"https:\/\/codeigniter.com\/contribute\" target=\"_blank\">Contribute<\/a>\n            <\/li>\n        <\/ul>\n    <\/div>\n\n    <div id=\"map\"><\/div>\n    <script>\n        \/\/ Inisialisasi map<\/strong>\n        const map = L.map('map').setView([-7.8052485, 110.3642824], 13); \/\/ Set initial coordinates\n\n        \/\/ Tambah OSM tile layer<\/strong>\n        L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n            maxZoom: 19,\n            attribution: '\u00a9 OpenStreetMap contributors'\n        }).addTo(map);\n\n        \/\/ Tambah penanda di map<\/strong>\n        L.marker([-7.8052485, 110.3642824]).addTo(map)\n            .bindPopup('Yogyakarta')\n            .openPopup();\n    <\/script>\n    \n    \n<footer>\n    <div class=\"environment\">\n\n        <p>Page rendered in {elapsed_time} seconds using {memory_usage} MB of memory.<\/p>\n\n        <p>Environment: <?= ENVIRONMENT ?><\/p>\n\n    <\/div>\n\n    <div class=\"copyrights\">\n\n        <p>&copy; <?= date('Y') ?> CodeIgniter Foundation. CodeIgniter is open source project released under the MIT\n            open source licence.<\/p>\n\n    <\/div>\n\n<\/footer>\n\n<!-- SCRIPTS -->\n\n<script {csp-script-nonce}>\n    document.getElementById(\"menuToggle\").addEventListener('click', toggleMenu);\n    function toggleMenu() {\n        var menuItems = document.getElementsByClassName('menu-item');\n        for (var i = 0; i < menuItems.length; i++) {\n            var menuItem = menuItems[i];\n            menuItem.classList.toggle(\"hidden\");\n        }\n    }\n<\/script>\n\n<!-- -->\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n