Scribd Logo
Upload

Welcome to Scribd!

  • Map Based Programming - Pertemuan 2

    Uploaded by

    Ardityo Danoesoebroto
    7 views9 pages
    This document discusses how to add markers, circles, polylines, polygons, and popups to maps using Leaflet JavaScript library. It provides code snippets for adding each type of element to a map called "mymap", including a marker on Jalan Buah Batu, a circle around an area, a polyline along a path, a polygon around an apartment complex, and a popup to display latitude and longitude coordinates when the map is clicked. The document also explains how to get latitude and longitude values by right clicking on a map in Google Maps.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document discusses how to add markers, circles, polylines, polygons, and popups to maps using Leaflet JavaScript library. It provides code snippets for adding each type of element to a map called "mymap", including a marker on Jalan Buah Batu, a circle around an area, a polyline along a path, a polygon around an apartment complex, and a popup to display latitude and longitude coordinates when the map is clicked. The document also explains how to get latitude and longitude values by right clicking on a map in Google Maps.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    7 views9 pages

    Map Based Programming - Pertemuan 2

    Uploaded by

    Ardityo Danoesoebroto
    This document discusses how to add markers, circles, polylines, polygons, and popups to maps using Leaflet JavaScript library. It provides code snippets for adding each type of element to a map called "mymap", including a marker on Jalan Buah Batu, a circle around an area, a polyline along a path, a polygon around an apartment complex, and a popup to display latitude and longitude coordinates when the map is clicked. The document also explains how to get latitude and longitude values by right clicking on a map in Google Maps.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 9

    Map Based Programming

    Pertemuan 2

    Gelar Aditya Pratama, S.T., M.Kom.


    gelar@stmik-amikbandung.ac.id
    Marker, Line, Polygon
    Cara mendapatkan Lat Long

    ● Buka https://www.google.com/maps/
    ● Klik kanan di tempat yang diinginkan
    ● Klik pada menu yg bertuliskan angka lat long

    Map Based Programming


    Marker

    ● Script untuk marker


    // marker
    var marker1 = L.marker([-6.939709126803876, 107.62507039806015])
    .addTo(mymap)
    .bindPopup("jalan buah batu");

    Map Based Programming


    Circle

    ● Script untuk circle


    // circle
    var circle1 = L.circle([-6.922306, 107.606560], {
    color: 'red',
    opacity: 1,
    fillColor: 'white',
    fillOpacity: 0.5,
    radius: 300,
    weight: 0.7,
    })
    .addTo(mymap)
    .bindPopup("ini popup di circle.");

    Map Based Programming


    Polyline

    ● Script untuk polyline


    // line
    var lineData = [
    [-6.937513204790664, 107.60939264948995],
    [-6.931505792526657, 107.61553267642996],
    [-6.931374242495987, 107.61738793636867],
    [-6.931988142324987, 107.61818304777097],
    [-6.936855462657422, 107.62260033333932],
    [-6.93488223074608, 107.62480897612349],
    [-6.934443733643192, 107.62502984040191],
    ];
    var polyline = L.polyline(lineData, {
    color: 'green',
    opacity: 1,
    fillColor: '#f03',
    fillOpacity: 0.5,
    weight: 4,
    })
    .addTo(mymap)
    .bindPopup("ini jalan / jalur");

    Map Based Programming


    Polygon

    ● Script untuk polygon


    // polygon
    var polygonData = [
    [-6.922505124430737, 107.61764923122233],
    [-6.924108106360521, 107.61750550948187],
    [-6.925165567898261, 107.61859610386534],
    [-6.924183639406108, 107.61980505732922],
    [-6.922773687228035, 107.61950915962827],
    [-6.922572265144391, 107.61828329772435],
    [-6.922505124430737, 107.61764923122233],
    ];
    var polygon = L.polygon(polygonData, {
    color: 'purple',
    opacity: 0.5,
    weight: 1,
    fillColor: 'purple',
    fillOpacity: 0.5,
    })
    .addTo(mymap)
    .bindPopup("apartemen grand asia afrika");

    Map Based Programming


    Untuk mendapatkan titik lokasi

    ● Script untuk mendapatkan lat long


    // popup latlong
    var popup = L.popup();
    function onMapClick(e) {
    popup
    .setLatLng(e.latlng)
    .setContent(e.latlng.toString())
    .openOn(mymap);
    }
    mymap.on('click', onMapClick);

    Map Based Programming


    Hasil Jadi

    Map Based Programming

    You might also like