Latihan LeafletJS dan OpenLayers

farmanaditya · Oct 17, 2023 · 77d0556 · 77d0556
1 parent 09d2613
commit 77d0556
Show file tree

Hide file tree

Showing 2 changed files with 190 additions and 0 deletions.
diff --git a/latihan_leafletJS.html b/latihan_leafletJS.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Latihan7</title>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
+    <!-- The line below is only needed for old environments like Internet
+    Explorer and Android 4.x -->
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+
+    <style>
+        #map {
+            height: 1000px;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="map"></div>
+    <script>
+        var map = L.map('map').setView([-7.797068, 110.370529], 13);
+        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 19,
+            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+        }).addTo(map);
+        // Tambah Titik
+        var marker = L.marker([-7.797068, 110.370529]).addTo(map);
+
+        var circle = L.circle([-7.797068, 110.370529], {
+            color: 'red',
+            fillColor: '#f03',
+            fillOpacity: 0.5,
+            radius: 500
+        }).addTo(map);
+
+        var polygon = L.polygon([
+            [-7.797068, 110.370529],
+            [-7.797068, 110.370529],
+            [-7.797068, 110.370529]
+        ]).addTo(map);
+
+        marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
+        circle.bindPopup("I am a circle.");
+        polygon.bindPopup("I am a polygon.");
+
+        var popup = L.popup()
+            .setLatLng([-7.797068, 110.370529])
+            .setContent("I am a standalone popup.")
+            .openOn(map);
+
+        function onMapClick(e) {
+            alert("You clicked the map at " + e.latlng);
+        }
+
+        map.on('click', onMapClick);
+
+        var popup = L.popup();
+
+        function onMapClick(e) {
+            popup
+                .setLatLng(e.latlng)
+                .setContent("You clicked the map at " + e.latlng.toString())
+                .openOn(map);
+        }
+
+            var markers = [
+                {
+                    name: "Tugu Jogja",
+                    location: [-7.782889, 110.364917]
+                },
+                {
+                    name: "Malioboro",
+                    location: [-7.793611, 110.365833]
+                },
+                {
+                    name: "Keraton Yogyakarta",
+                    location: [-7.805139, 110.364444]
+                },
+                {
+                    name: "Candi Prambanan",
+                    location: [-7.752917, 110.491389]
+                }
+            ];
+
+            for (var i = 0; i < markers.length; i++) {
+                var marker = L.marker(markers[i].location).addTo(map);
+                marker.bindPopup(markers[i].name);
+            }
+
+
+
+        map.on('click', onMapClick);
+
+    </script>
+</body>
+
+</html>
diff --git a/latihan_openLayers.html b/latihan_openLayers.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>My Map</title>
+    <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
+    <!-- The line below is only needed for old environments like Internet
+Explorer and Android 4.x -->
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,El
+ement.prototype.classList,URL"></script>
+    <script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
+    <style>
+        #map:focus {
+            outline: #4A74A8 solid 0.15em;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="map" class="map" tabindex="0"></div>
+    <button id="zoom-out">Zoom out</button>
+    <button id="zoom-in">Zoom in</button>
+    <script>
+        var map = new ol.Map({
+            layers: [
+                new ol.layer.Tile({
+                    source: new ol.source.OSM()
+                })
+            ],
+            target: 'map',
+            controls: ol.control.defaults({
+                attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+                    collapsible: false
+                })
+            }),
+
+            //EPSG : 3857
+            view: new ol.View({
+                center: ol.proj.transform ([110, -7,0], 'EPSG:4326', 'EPSG:3857'),
+                //center: [545377, 5290934666, 6867785, 761987235],
+                zoom: 7
+            })
+        });
+        document.getElementById('zoom-out').onclick = function () {
+            var view = map.getView();
+            var zoom = view.getZoom();
+            console.log('Debug zoom out : ' + zoom);
+            view.setZoom(zoom - 1);
+        };
+        document.getElementById('zoom-in').onclick = function () {
+            var view = map.getView();
+            var zoom = view.getZoom();
+            console.log('Debug zoom in : ' + zoom);
+            view.setZoom(zoom + 1);
+        };
+
+        //Tambah Data Point
+
+        //var point = new ol.geom.Point(ol.proj.transform([110, -7], 'EPSG:4326', 'EPSG:3857'),)
+        //var feature = new ol.Feature({
+           // geometry: point
+     //   })
+
+       // var vectorLayer = new ol.layer.Vector({
+          //  source: new ol.source.Vector({
+              //  features: [feature]
+          //  })
+       // });
+
+        var point = new ol.geom.Point(ol.proj.transform([110.374534, -7.774860], 'EPSG:4326', 'EPSG:3857'),)
+        var feature = new ol.Feature({
+            geometry: point
+        })
+
+        var vectorLayer = new ol.layer.Vector({
+            source: new ol.source.Vector({
+                features: [feature]
+            })
+        });
+
+        map.addLayer(vectorLayer);
+
+
+
+    </script>
+
+
+
+</body>
+
+</html>