Tutorial Offline Google Map API using GMAP.NET Cached Maps

Pemrograman berbasis peta google map sering dibutuhkan bersamaan dengan penggunaan GPS untuk plotting posisi di peta. Dan juga untuk pemakaian di lapangan menggunakan laptop diperlukan sistem standalone yang tidak perlu terhubung dengan internet, karena kondisi di lapangan yang terkadang sulit untuk mendapatkan sinyal 3G Internet yang bagus.

Pertama kali download data citra dari googlemap menggunakan software Mission Planner pada saat PC masih terkoneksi dengan Internet. Jalankan software "Mission Planner" - pilih tab "Flight Plan" - klik kanan mouse pada center map - pilih "MP Tool" - pilih "Prefetch". Kemudian pilih area yang akan disimpan offline map nya dengan menekan tombol "ALT" + "cursor selected area".

Hasil citra offline map nya secara otomatis akan disimpan di "C:\Program Files (x86)\Mission Planner\gmapcache\TileDBv3". Kemudian copy hasil citra dari offline map ini ke working directory program windows form yang akan digunakan.

Langkah berikutnya adalah menginstal library GMap.NET, ini adalah library yang digunakan untuk menampilkan peta google map yang responsif pada aplikasi pemrograman berbasis web ataupun desktop. Silahkan download library dan source code GMap.NET disini: https://github.com/radioman/greatmaps atau disini untuk mendownload file .zip yang berisi file komponen DLL dan source code yang dibutuhkan: https://codeplexarchive.blob.core.windows.net/archive/projects/greatmaps/greatmaps.zip
 

GMap.NET merupakan library yang sangat bagus dan powerfull, open source/ gratis, bisa digunakan di lintas platform, dan .NET control. Pengguna dapat menggunakan routing, geocoding, dan peta dari Google, Yahoo!, Bing, OpenStreetMap, ArcGIS, Pergo, SigPac, Yandex, Mapy.cz pada pemrograman Windows Form & Presentation, support caching dan bisa dijalankan pada windows mobile.

GMap.NET yang digunakan disini adalah versi 1.7, source code juga diberikan pada link diatas, tetapi masih banyak beberapa error perlu untuk didebug supaya bisa jalan normal librarynya. Library DLL yang bisa langsung dipakai adalah "GMap.NET.Core.dll" dan "GMap.NET.WindowsForm.dll". Untuk pertama kali buat project Windows Form pada Visual Studio, di dalam project tersebut buat subfolder baru dan copy DLL diatas kedalamnya.

 

Kemudian supaya project windows form ini bisa menggunakan komponen baru GMap.NET, anda harus menghubungkan reference project ke file DLL dari GMap.NET. Klik-kanan tab "Reference" di dalam "Solution Explorer" dan pilih "Add Reference". Di dalam dialog "Reference Manager" gunakan "Browse" untuk mencari file DLL dari GMap.NET, dan tambahkan reference tersebut.

Reference baru dari GMap.NET akan muncul sekarang di "Solution Explorer". Sekarang anda sudah siap untuk menggunakan kontrol kode instance dari GMap.NET, akan tetapi GMap.NET Control belum muncul di Toolbox, sehingga belom bisa digunakan pada WinForm.

Untuk menambah GMap.NET ke dalam Toolbox, klik-kanan pada "Toolbox" dan pilih tab "Choose Item". 

 

Pada dialog "Choose Toolbox", tab ".NET Framework Components", klik "browse" untuk memasukkan file "GMap.NET.WindowsForms.dll" (file GMap.NET DLL yang lainnya tidak perlu). 

Setelah itu DLL tersebut akan muncul di list dalam tab ".NET Framework Components". Perhatikan bahwa versi target Framework dari project WinForm ini harus sama dengan versi target Framework dari DLL yang diinstall.

Dalam contoh ini file DLL GMap.NET menggunakan target framework versi ".NET.Framework 4.5", sehingga setting project WinForm harus dipilih target framework versi ".NET.Framework 4.5" juga. Apabila versi target framework tidak sama, akan muncul error message seperti dibawah ini:

 

Untuk merubah versi ".NET framework", pada tab "Solution Explorer" pilih tab "Property", kemudian rubah target framework agar sama dengan target framework nya GMap.NET file DLL yang digunakan.

Setelah proses diatas selesai dan berhasil, tidak ada pesan error lagi yang muncul, maka Toolbox Control baru akan muncul di tab Toolbox, dan siap untuk di drag ke dalam Form.

Langkah selanjutnya adalah menampilkan peta di windows Form. Dari toolbox, pilih "GMapControl" dan drag ke project Form anda, dan peta kosong siap untuk ditampilkan pada project Form. GMap Control hanya menampilkan tanda plus merah kecil di project Form, belum ada peta nya. Dibutuhkan beberapa koding inisialisasi untuk sampai mengeluarkan gambar peta.

Pada window "Property", kita bisa mendefinisikan nama toolbox ini agar lebih sederhana yaitu "gmap", dari nama defaultnya "gMapControl1". Pada property "gmap" ini bisa mengkonfigurasikan pengaturan luar dari peta, tapi bukan pengaturan isi petanya.

Berikut ini adalah beberapa konfigurasi yang bisa dilakukan pada "property" :

• Bearing - property ini akan memutar peta senilai angka yang disetting ke arah kiri.
• CanDragMap - apabila diset "true", maka user dapat men "drag" /seret peta menggunakan tombol klik kanan mouse. Defaultnya adalah diset "true".
• EmptyTileColor - porperty ini untuk memberi warna tile pada gmap apabila tidak mendapatkan gambar dari providernya peta.
• MarkersEnabled - apabila diset "true",  maka akan ditampilkan semua marker yang didefinisikan user. Defaultnya adalah diset "true". Apabila diset "false" maka meskipun user sudah mendefinisikan marker, dipeta tidak akan muncul markernya.
• PolygonsEnabled - sama seperti diatas untuk polygon.
• RoutesEnabled - sama seperti diatas untuk routes.
• ShowTileGridLines - apabila diset "true", maka GMap.NET akan menampilkan nilai koordinat pada masing-masing tiles.
• Zoom, MinZoom, dan MaxZoom - Level Zoom pada peta yang bernilai milai 0 (level global) sampai 18 (level jalan kecil). Zoom adalah setting untuk normal zoom level (level 5 untuk level negara), sedangkan MinZoom dan MaxZoom bisa diset dari 0 ke 18 untuk user apabila ingin merubah nilai zoomnya. Zoom dirubah oleh user menggunakan mouse wheel.

Setelah ini barulah masuk ke coding.  Tambahkan code dibawah ini di awal program:

     using GMap.NET.WindowsForms;
     using GMap.NET;
     using GMap.NET.MapProviders;


Kemudian pada awal inisialisasi masukkan kode berikut untuk menentukan lokasi cache file, yaitu lokasi peta google yang sudah tersimpan offline di CPU.


           GMap.NET.GMaps.Instance.PrimaryCache = new SavedOfflineCache();


Selanjutnya masukkan map provider yg sesuai dengan map provider yang sudah disave sewaktu online:


            myGMAP1.MapProvider = GMapProviders.GoogleMap;


Dan kemudian pilih mode aksess ke map provider. Ada tiga pilihan, yaitu "ServerAndCache", "ServerOnly", dan "CacheOnly". Untuk akses ke offline Map, pilih "CacheOnly".


            myGMAP1.Manager.Mode = AccessMode.CacheOnly;

Kemudian lanjut setting posisi awal saat map dibuka, max zoom, min zoom, dan zoom awal saat map dibuka.

            myGMAP1.Position = new PointLatLng(-6.342751, 106.8566351);
            myGMAP1.MinZoom = 0;
            myGMAP1.MaxZoom = 24;
            myGMAP1.Zoom = 18;


Dan project Windows Form siap dijalankan tanpa perlu koneksi internet untuk akses peta Google map nya.

Silahkan ber experiment... apabila ada kendala silahkan diskusi disini....



Keyword: C# GMap.NET offline, GMap.NET Tutorial, cached maps, Offline Map API for C# Desktop, GMap.NET, gmapcache folder, Google Map Tiles, Google Map Offline, google map prefetch offline map, Visual Studio 2012, Windows Form, google map tile prefetch, Caching Google Maps Tiles Locally, Prefetch Offline maps, prefetch a map tile database to the local storage, for use as offline maps.

Tutorial menggunakan library reference SHARPKML pada C# .NET Visual Studio 2012

SharpKML adalah implementasi dari Open Geospatial Consortium (OGC) KML 2.2 standar yang dikembangkan di C#, mampu membaca / menulis file KML dan file KMZ.

Library ini dibuat berdasarkan pada implementasi standar Google C++  (libkml), namun, daripada menggunakan binding SWIG, library ini ditulis untuk memberikan kemudahan pada developer C#, dengan menggunakan property, metode ekstensi dan built in Xml handling. pada .NET Framework.

Untuk menggunakan library ini, cara yang paling mudah adalah dengan menginstall "SharpKml.Core NuGet package", atau bisa juga dengan mendownload source code nya pada link berikut ini:
https://github.com/samcragg/sharpkml

Untuk lebih detail tentang seluruh sintak element KML, dengan penjelasan dan diagram cara penggunaannya ada di link berikut ini: https://developers.google.com/kml/documentation/kmlreference

Pada Visual Studio 2012 C# .NET pilih menu "Project" , "Manage NuGet Packages..." , kemudian search online "SharpKml.Core".

Setelah itu keluar ada beberapa pilihan library SharpKml, pilih yg "versi 3.0.4", created by "Samuel Cragg". Klik "INSTALL", dan kemudian cek "references" pada project anda akan keluar library "SharpKml.Core".

Kemudian  pada Form.cs tambahkan statemen berikut ini untuk memudahkan pemanggilan class library dari SharpKml.

Selanjutnya yang perlu diperhatikan dalam penyusunan file KML ini adalah urutan prosedur dibawah ini:

1. Buat element baru berupa "Placemark"

    var placemark = new Placemark();

   atau bisa ditulis seperti dibawah ini:

      Placemark placemark = new Placemark(); 

2. Beri nama dari placemark yang telah dibuat tadi.

    placemark.Name = "tokek";

3. Tambahkan style yang lebih spesifik pada placemark tadi:

     placemark.StyleUrl = new Uri("#RoadStyle", UriKind.Relative);

4. Isi posisi koordinat Placemark sesuai dengan data dari GPS:

    placemark.Geometry = new SharpKml.Dom.Point

   {
                Coordinate = new Vector(-6.34329602, 106.85848160)
    };

5. Buat root element "Document" baru, kemudian masukkan element "Placemark" dan "Style" kedalam root element "Document".  Root element "Document" ini adalah KML element tipe container, digunakan untuk menampung element "Features" dan "Styles", ataupun sub "Document" didalam root element "Document". Selain itu bisa juga digunakan untuk menampung element "Shared Styles", "Schema",  atau untuk menampung lebih dari satu "Feature" seperti "placemark" yang lebih dari satu.

Cara penulisannya di SharpKml C# adalah sebagai berikut:

                var document = new Document();
                document.AddFeature(placemark);
                document.AddStyle(style);

 Ada dua macam root element tipe container yang bisa digunakan disini, yaitu "Document" dan "Folder" keduanya memiliki fungsi yang sama dan bisa saling menggantikan. perbedaannya adalah "Document" bisa menampung/ memiliki element "Shared Styles" dan "Schema", sedangkan "Folder" tidak bisa.

Cara penulisannya di SharpKml C# adalah sebagai berikut:

                var folder = new Folder();
                folder.AddFeature(placemark);
                folder.AddStyle(style);

6. Kemudian tetapkan kml.feature baru dari node yang telah dicreate diatas:

                var kml = new Kml();
                kml.Feature = document;

7. Terakhir, setelah semua data dimasukkan dalam node, dan dimasukkan dalam kml.Feature, maka data siap dituliskan dalam file kml:

                KmlFile kmlFile = KmlFile.Create(kml, true);
                using (var stream = System.IO.File.OpenWrite("kmlFileName.kml"))
                {
                    kmlFile.Save(stream);
                }

Dan finish, KML file dah selesai ditulis sesuai format standart, dan file kml siap dijalankan pada Google Earth untuk dicoba.

Apabila tidak memiliki program Google Earth, kode kml bisa dicoba dijalankan secara online pada link berikut ini: http://display-kml.appspot.com/


Berikut beberapa element yang bisa digunakan dalam penyusunan KML.

"LookAt" 

Digunakan untuk menentukan koordinat pengamatan atau eyepoint virtual kamera dari element "placemark", "Folder" atau "Ground Overlay". Element "LookAt" ini menempatkan camera terhubung dengan obyek yang sedang dilihat. Parameter yang ada pada "LookAt" adalah sebagai berikut:

• "Longitude" : titik Longitude dari obyek yang dilihat. Nilai Barat Meridian adalah dari -180 s/d o derajat. Nilai Timur Meridian adalah dari 0 s/d 180 derajat.
• "Latitude" :titik Latitude dari obyek yang dilihat.
• "Altitude": Jarak ketinggian dari permukaan bumi.
• "Heading" : Arah kompas kamera dalam derajat. Nilai dari 0 s/d 360 derajat.
• "Tilt" : Sudut antara posisi camera "LookAt" dan garis normal. Lihat gambar dibawah.
• "Range" : Jarak dalam meter dari titik yang ditentukan ke posisi camera "LookAt", Lihat gambar dibawah.
• "AltitudeMode" : pilihan bagaimana ketinggian dilihat dari satu titik, pilihannya adalah:

• "clampToGround" : abaikan nilai ketinggian, dan pasang lokasi "LookAt" diatas tanah.
• "relativeToGround" : pasang ketinggian sesuai nilainya diatas tanah.
• "absolute" : pasang ketinggian sesuai nilainya diatas level laut

Cara penulisannya di SharpKml C# adalah sebagai berikut:
Buat element baru "LookAt", kemudian masukkan nilai-nilai parameter yang dibutuhkan.

            var lookat = new LookAt();
            lookat.Longitude = 106.85848160;
            lookat.Latitude = -6.34329602;
            lookat.Altitude = 0;
            lookat.Heading = 0;
            lookat.Tilt = 45;
            lookat.Range = 400000;
            lookat.AltitudeMode = AltitudeMode.ClampToGround;

Setelah itu masukkan element "LookAt" kedalam root element "Folder":

            var folder = new Folder();
            folder.Viewpoint = lookat;

"Style"

Element ini menentukan alamat kelompok "Style" yang dapat direferensikan oleh element "styleMaps" dan "Feature". Element "Style" ini mempengaruhi secara Geometri penampilannya di 3D Viewer dan bagaimana "Feature" muncul di panel "Place" pada "ListView". "SharedStyle" dimasukkan dalam root element "Document" dan harus memiliki id yang ditentukan untuk mereka sehingga mereka dapat direferensikan oleh masing-masing "feature" yang menggunakannya.

Gunakan id untuk merujuk ke "Style" dari "StyleUrl"


Cara penulisannya di SharpKml C# adalah sebagai berikut:
Buat element baru "Stlye",  kemudian masukkan nama "id" nya.

            var style = new Style();
            style.Id = "default";

Setelah itu masukkan element "Style" kedalam root element "Folder":

            var folder = new Folder();
            folder.AddStyle(style);

Apabila direferensikan oleh "StyleUrl" pada Feature "Placemark" adalah sebagai berikut:

            placemark.StyleUrl = new Uri("#default1", UriKind.Relative);

"IconStyle"

Element ini adalah element spesifik untuk element "Style". Spesifik untuk menentukan bagaimana gambar Icon untuk poin "Placemark" digambarkan, baik pada panel "place" dan di "3D Viewer" dari Google Earth. Element "Icon" spesifik ke gambar Icon. Element "Scale" spesifik ke skala X dan Y dari Icon. Element "Color" spesifik pada warna dari Icon. Parameter yang ada didalam IconStyle adalah sebagai berikut:

• "Scale" : untuk merubah skala ukuran dari Icon.
• "Icon" : untuk memilih custom Icon dari link luar, dari alamat HTTP.
• "Color" : untuk setting warna & tingkat kecerahan, range nilai nya 0-255, untuk tingkat kecerahan, 0 = full transparant, 255 = full gelap. Urutan settingnya adalah (aa,bb,gg,rr), dimana aa = tingkat kecerahan, bb = biru, gg = hijau, rr = merah.

Cara penulisannya di SharpKml C# adalah sebagai berikut:
Buat element baru "IconStyle" didalam element "Style.Icon"
 
            style.Icon = new IconStyle();
            style.Icon.Scale = 0.2;
            style.Icon.Icon = new IconStyle.IconLink(new Uri("http://maps.google.com/mapfiles/kml/shapes/placemark_circle.png"));
            style.Icon.Color = new Color32(255, 0, 0, 255);

"Model"

Element ini digunakan untuk menampilkan placemark dalam bentuk gambar 3 dimensi. Pada KML, kita bisa mengimport model 3 dimensi - seperti bangunan, jembatan, monumen, patung, ataupun pesawat terbang - dalam format file COLLADA (file ekstensi *.dae). Gambar model 3 dimensi dibuat menggunakan aplikasi SketchUp, 3D Studio Max, Softimage XSI, atau Maya. Model yang sudah di load di Google Earth bisa dirubah posisi, ketinggian dan ukurannya menggunakan element spesifik. Contoh hasil tampilan "Model" di Gogle Earth adalah seperti gambar dibawah ini.

Element spesifik dari model adalah sebagai berikut:

• "altitudeMode" : pilihan bagaimana ketinggian dilihat dari satu titik, pilihannya adalah:

  • "clampToGround" : abaikan nilai ketinggian, dan pasang lokasi "Model" diatas tanah.

  • "relativeToGround" : pasang ketinggian sesuai nilainya diatas tanah.
  • "absolute" : pasang ketinggian sesuai nilainya diatas level laut

• "location" : menunjukkan posisi koordinat dari model di peta dalam "latitude", "longitude" dan "altitude". Pengukuran "Latitude" dan "Longitude" berdasarkan standard proyeksi lat-long dengan datum WGS84, "Altitude" adalah jarak diatas permukaan bumi, dalam meter, dan disesuaikan dengan pilihan "altitudeMode".

• "Orientation" : menjelaskan posisi sistem koordinat rotasi dari model 3 dimensi pada obyek di Google Earth. Parameter yang ditentukan dalam orientasi ini adalah "roll", "tilt", dan "heading".

•  "Scale" : menentukan skala perbesaran model pada masing - masing sumbu x,y, dan z.

•  "Link" : menentukan lokasi file Model 3 dimensi yang mau diload dan pilihan tambahan refresh parameter.

Cara penulisannya di Windows Form C# adalah sebagai berikut:
Buat element baru "Model", kemudian tentukan element spesifik pendukung lainnya. Siapkan dulu nilai Element "Location" nya:

            SharpKml.Dom.Location loc = new SharpKml.Dom.Location();
            loc.Latitude = -6.34329602;
            loc.Longitude = 106.85848160;
            loc.Altitude = 50.00;


Setelah Element "Model" dideklarasikan, masukkan element "Location" dan "AltitudeMode"ke dalam element "Model" :

            SharpKml.Dom.Model model = new SharpKml.Dom.Model();

            model.Location = loc;
            model.AltitudeMode = AltitudeMode.Absolute;

Tentukan lokasi file 3 dimensi nya (*.dae)  yang mau ditampilkan di Google Earth ke dalam element "link", dan kemudian masukkan ke dalam Element "Model":

            SharpKml.Dom.Link link = new SharpKml.Dom.Link();
            link.Href = new Uri("block_plane_0.dae", UriKind.Relative);
            model.Link = link;

Setting ukuran skala model 3 dimensi yg mau ditampilkan kedalam Element "scale", dan kemudian masukkan ke dalam Element "Model":

            SharpKml.Dom.Scale sca = new SharpKml.Dom.Scale();
            sca.X = 50;
            sca.Y = 50;
            sca.Z = 50;

            model.Scale = sca;

Kemudian siapkan Element "Placemark" yang akan ditampilkan model 3 dimensinya, masukkan element "Model" ke dalam element Placemark -> Geometry :

            SharpKml.Dom.Placemark pmplane = new SharpKml.Dom.Placemark();
            pmplane.Geometry = model;

Hasil output KML nya akan seperti dibawah ini: