Mengenal SAGA GIS

SAGA (System for Automated Geoscientific Analyses) GIS merupakan software Sistem Informasi Geografis gratis dan open source, yang awalnya dikembangkan oleh tim kecil di Departemen Geografi Fisik – University of Göttingen di Jerman, pada awal millenium ketiga (tahun 2001). Tahun 2007 pengembangan software ini berpindah ke Hamburg tepatnya di Departemen Geografi Fisik, Institute of Geography di University of Hamburg – Jerman, dan saat ini dikembangkan secara bersama-sama oleh komunitas pengembang software SAGA GIS.

SAGA GIS mempunyai tampilan yang user friendly dengan berbagai tool dan modul yang mudah untuk dioperasikan. Beberapa modul standar yang terdapat pada SAGA GIS antara lain klasifikasi data geospasial, projection, analisis terrain, gridding, serta banyak lainnya.

Penjelasan singkatnya sebagai berikut :

• SAGA adalah singkatan dari System for Automated Geoscientific Analyses
• SAGA merupakan software Sistem Informasi Geografi (SIG)
• SAGA telah didesain untuk implementasi yang mudah dan efektif dari algoritma spasial.
• SAGA menyediakan metode geosains yang komprehensip dan terus berkembang.
• SAGA menyediakan user interface yang mudah untuk digunakan dengan berbagai macam pilihan visualisasi.
• SAGA dijalankan dibawah Sistem Operasi Windows dan Linux.
• SAGA merupakan Free Open Source Software (FOSS) yaitu software Open Source yang gratis.

License issues

SAGA merupakan Free Open Source Software (FOSS),yang berarti bahwa anda mempunyai kebebasan

• Untuk menjalankan program untuk berbagai tujuan
• Untuk mempelajari bagaimana program bekerja dan memodifikasinya
• Untuk men-copy dan mendistribusikan SAGA dengan bebas
• Untuk mengembangkan program dan memberikan hasil pengembangan progam tersebut ke masyarakat secara luas.

Siapa yang membuat SAGA?

Pengembangan SAGA dimulai pada awal dari abad ke 3 atas ide dari sekelompok kecil peneliti pada Dept. of Physical Geography, Göttingen. Tahun 2007, pusat pengembangan SAGA pindah ke Hamburg, dimana beberapa dari mereka bekerja pada Dept. of Physical Geography, Göttingen. Untuk informasi lebih lanjut, silahkan buka website SAGA pada sesi Development.

GIS/SIDS

SAGA GIS

Mengenal SAGA GIS

SAGA (System for Automated Geoscientific Analyses) GIS merupakan software Sistem Informasi Geografis gratis dan open source, yang awalnya dikembangkan oleh tim kecil di Departemen Geografi Fisik – University of Göttingen di Jerman, pada awal millenium ketiga (tahun 2001). Tahun 2007 pengembangan software ini berpindah ke Hamburg tepatnya di Departemen Geografi Fisik, Institute of Geography di University of Hamburg – Jerman, dan saat ini dikembangkan secara bersama-sama oleh komunitas pengembang software SAGA GIS.

SAGA GIS mempunyai tampilan yang user friendly dengan berbagai tool dan modul yang mudah untuk dioperasikan. Beberapa modul standar yang terdapat pada SAGA GIS antara lain klasifikasi data geospasial, projection, analisis terrain, gridding, serta banyak lainnya.

Penjelasan singkatnya sebagai berikut :

• SAGA adalah singkatan dari System for Automated Geoscientific Analyses
• SAGA merupakan software Sistem Informasi Geografi (SIG)
• SAGA telah didesain untuk implementasi yang mudah dan efektif dari algoritma spasial.
• SAGA menyediakan metode geosains yang komprehensip dan terus berkembang.
• SAGA menyediakan user interface yang mudah untuk digunakan dengan berbagai macam pilihan visualisasi.
• SAGA dijalankan dibawah Sistem Operasi Windows dan Linux.
• SAGA merupakan Free Open Source Software (FOSS) yaitu software Open Source yang gratis.

License issues

SAGA merupakan Free Open Source Software (FOSS),yang berarti bahwa anda mempunyai kebebasan

• Untuk menjalankan program untuk berbagai tujuan
• Untuk mempelajari bagaimana program bekerja dan memodifikasinya
• Untuk men-copy dan mendistribusikan SAGA dengan bebas
• Untuk mengembangkan program dan memberikan hasil pengembangan progam tersebut ke masyarakat secara luas.

Siapa yang membuat SAGA?

Pengembangan SAGA dimulai pada awal dari abad ke 3 atas ide dari sekelompok kecil peneliti pada Dept. of Physical Geography, Göttingen. Tahun 2007, pusat pengembangan SAGA pindah ke Hamburg, dimana beberapa dari mereka bekerja pada Dept. of Physical Geography, Göttingen. Untuk informasi lebih lanjut, silahkan buka website SAGA pada sesi Development.

Pembuatan peta sederhana menggunakan D3.js seperti diatas menggunakan source code sebagai berikut :

<!DOCTYPE html> <html> <script src="https://d3js.org/d3.v4.js"></script> <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script> <head>   <title></title>   <div id="my_dataviz"></div> <style> .circle:hover{   stroke: black;   stroke-width: 4px; } </style> <script> // Size ? var width = 1280 var height = 600 // The svg var svg = d3.select("#my_dataviz")   .append("svg")   .attr("width", width)   .attr("height", height)     .call(d3.zoom().on("zoom", function () {        svg.attr("transform", d3.event.transform)     }))   .append("g") // Map and projection   var projection = d3.geoNaturalEarth()       .center([100, 35])       .scale(width / 0.5 / Math.PI)       .translate([width / 2, height / 2]) // Create data for circles: // Load external data and boot d3.json("china.json", function(data){        // Draw the map     svg.append("g")         .selectAll("path")         .data(data.features)         .enter()         .append("path")           .attr("fill", "#b8b8b8")           .attr("d", d3.geoPath()               .projection(projection)           )         .style("stroke", "black")         .style("opacity", .3)     // create a tooltip     var Tooltip = d3.select("#my_dataviz")       .append("div")       .attr("class", "tooltip")       .style("opacity", 1)       .style("background-color", "white")       .style("border", "solid")       .style("position","absolute") /*      .style("width", "100px")*/       .style("border-width", "2px")       .style("border-radius", "5px")       .style("padding", "5px")     // Three function that change the tooltip when user hover / move / leave a cell     // Add circles:     // d3.json("data.php", function(data) {     d3.json("data.php", function(data) {     var mouseover = function(d) {       Tooltip       .style("opacity", 1)       .transition()       Tooltip       .duration(200)       .style("left", (d3.mouse(this)[0]-30) + "px")       .style("top", (d3.mouse(this)[1]) + "px")     }     var mousemove = function(d) {       Tooltip                .style("opacity", 1)                .data(data)         .html("Events ID " + d.event_id + "<br>" +               "Jenis Kelamin: " + d.gender + "<br>" +               "Umur: " + d.age + "<br>" +               "Long: " + d.longitude + "<br>" +               "Lat: " + d.latitude)         .style("left", (d3.mouse(this)[0]) + "px")         .style("top", (d3.mouse(this)[1]) + "px")     }     var mouseleave = function(d) {       Tooltip.style("opacity", 0)     }     svg       .selectAll("myCircles")       .data(data)       .enter()       .append("circle")         .attr("cx", function(d){ return projection([d.longitude, d.latitude])[0] })         .attr("cy", function(d){ return projection([d.longitude, d.latitude])[1] })         .attr("r", 3)         .attr("class", "circle")         .style("fill", "blue")         .attr("stroke", "white")         .attr("stroke-width", 1)         .attr("fill-opacity", 1)       .on("mouseover", mouseover)       .on("mousemove", mousemove)       .on("mouseleave", mouseleave)     });        }) </script> </head> <body> </body> </html>

Penjelasan :

Pembuatan variabel SVG.

Proyeksi Peta

Memuat data json untuk pembuatan peta

Untuk membuat tooltip dan bubble pada peta

Event handler untuk mouse

Isi dari file data.php

GIS/SIDS

UAS SIDS Proyeksi Peta

Pembuatan peta sederhana menggunakan D3.js seperti diatas menggunakan source code sebagai berikut :

<!DOCTYPE html> <html> <script src="https://d3js.org/d3.v4.js"></script> <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script> <head>   <title></title>   <div id="my_dataviz"></div> <style> .circle:hover{   stroke: black;   stroke-width: 4px; } </style> <script> // Size ? var width = 1280 var height = 600 // The svg var svg = d3.select("#my_dataviz")   .append("svg")   .attr("width", width)   .attr("height", height)     .call(d3.zoom().on("zoom", function () {        svg.attr("transform", d3.event.transform)     }))   .append("g") // Map and projection   var projection = d3.geoNaturalEarth()       .center([100, 35])       .scale(width / 0.5 / Math.PI)       .translate([width / 2, height / 2]) // Create data for circles: // Load external data and boot d3.json("china.json", function(data){        // Draw the map     svg.append("g")         .selectAll("path")         .data(data.features)         .enter()         .append("path")           .attr("fill", "#b8b8b8")           .attr("d", d3.geoPath()               .projection(projection)           )         .style("stroke", "black")         .style("opacity", .3)     // create a tooltip     var Tooltip = d3.select("#my_dataviz")       .append("div")       .attr("class", "tooltip")       .style("opacity", 1)       .style("background-color", "white")       .style("border", "solid")       .style("position","absolute") /*      .style("width", "100px")*/       .style("border-width", "2px")       .style("border-radius", "5px")       .style("padding", "5px")     // Three function that change the tooltip when user hover / move / leave a cell     // Add circles:     // d3.json("data.php", function(data) {     d3.json("data.php", function(data) {     var mouseover = function(d) {       Tooltip       .style("opacity", 1)       .transition()       Tooltip       .duration(200)       .style("left", (d3.mouse(this)[0]-30) + "px")       .style("top", (d3.mouse(this)[1]) + "px")     }     var mousemove = function(d) {       Tooltip                .style("opacity", 1)                .data(data)         .html("Events ID " + d.event_id + "<br>" +               "Jenis Kelamin: " + d.gender + "<br>" +               "Umur: " + d.age + "<br>" +               "Long: " + d.longitude + "<br>" +               "Lat: " + d.latitude)         .style("left", (d3.mouse(this)[0]) + "px")         .style("top", (d3.mouse(this)[1]) + "px")     }     var mouseleave = function(d) {       Tooltip.style("opacity", 0)     }     svg       .selectAll("myCircles")       .data(data)       .enter()       .append("circle")         .attr("cx", function(d){ return projection([d.longitude, d.latitude])[0] })         .attr("cy", function(d){ return projection([d.longitude, d.latitude])[1] })         .attr("r", 3)         .attr("class", "circle")         .style("fill", "blue")         .attr("stroke", "white")         .attr("stroke-width", 1)         .attr("fill-opacity", 1)       .on("mouseover", mouseover)       .on("mousemove", mousemove)       .on("mouseleave", mouseleave)     });        }) </script> </head> <body> </body> </html>

Penjelasan :

Pembuatan variabel SVG.

Proyeksi Peta

Memuat data json untuk pembuatan peta

Untuk membuat tooltip dan bubble pada peta

Event handler untuk mouse

Isi dari file data.php

Pengertian

QGIS memiliki sebuah antarmuka pemrograman yang ampuh sehingga kita bisa memperlebar fungsi inti dari software dan juga menulis skrip untuk otomasi pelaksanaan tugas. QGIS mendukung Bahasa skript Phyton yang terkenal. Walaupun anda seorang pemula, mempelajari sedikit phyton dan antarmuka Pemrogramman QGIS akan membuat anda jauh lebih produktif dalam pekerjaan anda. Tutorial ini mengasumsikan anda tanpa pengalaman pemrograman dan ditujukan untuk memberikan perkenalan pada scripting Python di QGIS (PyQGIS).

Tinjauan Tugas 

Kita akan membjuka sebuah layer poin yang merepresentasikan semua airport besan dan menggunakan skript python untuk menghasilkan sebuah file teks dengan nama airport, kode airport, garis lintang dan garis bujur untuk setiap airport pada layer.

Mendapatkan data

kita akan menggunakan dataset dari Natural Earth Airports

Unduh Airports shapefile.

Sumber data [NATURALEARTH]

Prosedur

1. Dalam QGIS, akses Layers ‣ Add Vector Layer . Jelajah ke file ne_10m_airports.zip yang sudah terunduh dan klik ne_10m_airports.zip . Pilih layer ne_10m_airports.shp dan klik OK.

2. Anda akan melihat layer ne_10m_airports terbuka di QGIS

3. Pilih tool Identify dan klik pada poin mana saja untuk memeriksa attribut yang tersedia. Anda akan melihat bahwa nama airport dan 3 digit kode didalamnya adalah attribut name dan iata_code secara berurutan

4. QGIS menyediakan konsol built-in dimana anda bisa mengetik command phyton dan mendapatkan hasilnya. Konsol ini merupakan cara yang sangat baik untuk belajar scripting dan juga melakukan proses data cepat. Buka Python Console dengan mengakses Plugins ‣ Python Console.

5. Anda akan melihat sebuah panel baru di bawah kanvas QGIS. Anda akan melihat sebuah tanda seperti >>> di bawah dimana anda dapat mengetik command. Untuk interaksi dengan environment QGIS, anda harus menggunakan variabel iface . Untuk mengakses layer yang sedang aktif di QGIS, anda dapat mengetik sebagai berikut dan tekan iface . Command ini menarik referensi ke layer yang sedang dibuka dan menyimpannya sebagai variabel layer.

layer = iface.activeLayer()

6. Ada function berguna yang disebut dir() di phyton yang menunjukkan anda semua metode yang tersedia untuk objek mana saja. Ini berguna ketika anda tidak yakin function mana yang tersedia untuk obyek tertentu. Jalankan command berikut dan lihat operasi apa yang bisa kita lakukan pada variabel layer .

dir(layer)

7. Anda akan melihat sebuah daftar panjang dari function yang tersedia. Untuk sekarang, kita akan menggunakan sebuah fungsi bernama getFeatures() dimana akan memberikan anda referensi untuk semua fitur pada sebuah layer. Pada kasus kita, setiap fitur akan menjadi sebuah poin yang merepresentasikan airport. Anda dapat mengetik command untuk memgiterasi melalui setiap fitur pada layer yang sedang aktif. Pastikan untuk menambah 2 spasi sebelum mengetik garis kedua.

for f in layer.getFeatures():

  print f

8. Seperti yang anda lihat di output, setiap garis mengandung sebuah referensi ke sebuah fitur di layer. Referensi ke fitur disimpan dalam variabel f . Kita dapat menggunakan variabel f``untuk mengakses attribut pada setiap fitur. Ketik sebagai berikut untuk mencetak ``name dan iata_code untuk setiap fitur airport.

for f in layer.getFeatures():

  print f['name'], f['iata_code']

9. Jadi sekarang anda tahu bagaimana secara programatik mengakses attribut dari seitap fitur di layer. Sekarang, mari kita lihat bagaimana mengakses koordinat fitur. Koordinat dari sebuah fitur vektor dapat diakses dengan memanggil function geometry() . Function ini memberikan sebuah obyek geometri yang dapat kita simpan pada variable geom . Anda dapat menjalankan function asPoint() pada obyek geometri untuk mendapatkan koordinat x dan y poin tersebut. Jika fitur anda adalah sebuah garis atau sebuah poligon, anda dapat menggunakan fungsi asPolyline() atau asPolygon(). Ketik Kode berikut pada prompt dan tekan Enter untuk melihat koordinat x dan y dari setiap fitur.

for f in layer.getFeatures():

  geom = f.geometry()

  print geom.asPoint()

10. Bagaimana jika kita hanya ingin mendapatkan koordinat x dari fitur ? Anda dapat memanggil fungsi x() pada obyek poin dan mendapatkan koordinat x nya.

for f in layer.getFeatures():

  geom = f.geometry()

  print geom.asPoint().x()

11. Sekarang kita mempunyai semua kepingan yang akan kita satukan untuk menghasilkan output yang kita inginkan. Ketik kode berikut untuk mencetak name, iata_code, latitude dan longitude dari setiap fitur airport. Notasi %s dan %f adalah cara untuk memformat sebuah variabel string dan numerik.

for f in layer.getFeatures():

  geom = f.geometry()

  print '%s, %s, %f, %f' % (f['name'], f['iata_code'],

         geom.asPoint().y(), geom.asPoint().x())

12. Anda dapat melihat outpu tercetak pada konsol. Sebuah cara yang lebih berguna untuk menyimpan output adalah dengan sebuah file. Anda dapat mengetik kode berikut untuk membuat sebuah file dan menulis outputnya di sana, Ganti path atau alamat file dengan sebuah path dalam sistem anda sendiri. Catat bahwa kita menambahkan \n di akhir baris. Ini untuk menambah sebuah garis baru setelah kita menambahkan data untuk setiap fitur. Anda seharusnya juga memperhatikan garis unicode_line = line.encode('utf-8') . Karena layer kita mengandung sejumlah fitur dengan karakter unicode, kita tidak bisa begitu saja menulisnya ke dalam file teks. Kita encode teks menggunakan UTF-8 encoding dan kemudian menulis file teks tersebut.

output_file = open('c:/Users/Ujaval/Desktop/airports.txt', 'w')

for f in layer.getFeatures():

  geom = f.geometry()

  line = '%s, %s, %f, %f\n' % (f['name'], f['iata_code'],

          geom.asPoint().y(), geom.asPoint().x())

  unicode_line = line.encode('utf-8')

  output_file.write(unicode_line)

output_file.close()

13. Anda dapat mengakses lokasi file output yang sudah ditentukan dan membuka file teks. Anda akan melihat data dari shapefile airport yang kita ekstraksi menggunakan skripting phyton.

GIS/SIDS

QGIS DENGAN PYTHON

Pengertian

QGIS memiliki sebuah antarmuka pemrograman yang ampuh sehingga kita bisa memperlebar fungsi inti dari software dan juga menulis skrip untuk otomasi pelaksanaan tugas. QGIS mendukung Bahasa skript Phyton yang terkenal. Walaupun anda seorang pemula, mempelajari sedikit phyton dan antarmuka Pemrogramman QGIS akan membuat anda jauh lebih produktif dalam pekerjaan anda. Tutorial ini mengasumsikan anda tanpa pengalaman pemrograman dan ditujukan untuk memberikan perkenalan pada scripting Python di QGIS (PyQGIS).

Tinjauan Tugas 

Kita akan membjuka sebuah layer poin yang merepresentasikan semua airport besan dan menggunakan skript python untuk menghasilkan sebuah file teks dengan nama airport, kode airport, garis lintang dan garis bujur untuk setiap airport pada layer.

Mendapatkan data

kita akan menggunakan dataset dari Natural Earth Airports

Unduh Airports shapefile.

Sumber data [NATURALEARTH]

Prosedur

1. Dalam QGIS, akses Layers ‣ Add Vector Layer . Jelajah ke file ne_10m_airports.zip yang sudah terunduh dan klik ne_10m_airports.zip . Pilih layer ne_10m_airports.shp dan klik OK.

2. Anda akan melihat layer ne_10m_airports terbuka di QGIS

3. Pilih tool Identify dan klik pada poin mana saja untuk memeriksa attribut yang tersedia. Anda akan melihat bahwa nama airport dan 3 digit kode didalamnya adalah attribut name dan iata_code secara berurutan

4. QGIS menyediakan konsol built-in dimana anda bisa mengetik command phyton dan mendapatkan hasilnya. Konsol ini merupakan cara yang sangat baik untuk belajar scripting dan juga melakukan proses data cepat. Buka Python Console dengan mengakses Plugins ‣ Python Console.

5. Anda akan melihat sebuah panel baru di bawah kanvas QGIS. Anda akan melihat sebuah tanda seperti >>> di bawah dimana anda dapat mengetik command. Untuk interaksi dengan environment QGIS, anda harus menggunakan variabel iface . Untuk mengakses layer yang sedang aktif di QGIS, anda dapat mengetik sebagai berikut dan tekan iface . Command ini menarik referensi ke layer yang sedang dibuka dan menyimpannya sebagai variabel layer.

layer = iface.activeLayer()

6. Ada function berguna yang disebut dir() di phyton yang menunjukkan anda semua metode yang tersedia untuk objek mana saja. Ini berguna ketika anda tidak yakin function mana yang tersedia untuk obyek tertentu. Jalankan command berikut dan lihat operasi apa yang bisa kita lakukan pada variabel layer .

dir(layer)

7. Anda akan melihat sebuah daftar panjang dari function yang tersedia. Untuk sekarang, kita akan menggunakan sebuah fungsi bernama getFeatures() dimana akan memberikan anda referensi untuk semua fitur pada sebuah layer. Pada kasus kita, setiap fitur akan menjadi sebuah poin yang merepresentasikan airport. Anda dapat mengetik command untuk memgiterasi melalui setiap fitur pada layer yang sedang aktif. Pastikan untuk menambah 2 spasi sebelum mengetik garis kedua.

for f in layer.getFeatures():

  print f

8. Seperti yang anda lihat di output, setiap garis mengandung sebuah referensi ke sebuah fitur di layer. Referensi ke fitur disimpan dalam variabel f . Kita dapat menggunakan variabel f``untuk mengakses attribut pada setiap fitur. Ketik sebagai berikut untuk mencetak ``name dan iata_code untuk setiap fitur airport.

for f in layer.getFeatures():

  print f['name'], f['iata_code']

9. Jadi sekarang anda tahu bagaimana secara programatik mengakses attribut dari seitap fitur di layer. Sekarang, mari kita lihat bagaimana mengakses koordinat fitur. Koordinat dari sebuah fitur vektor dapat diakses dengan memanggil function geometry() . Function ini memberikan sebuah obyek geometri yang dapat kita simpan pada variable geom . Anda dapat menjalankan function asPoint() pada obyek geometri untuk mendapatkan koordinat x dan y poin tersebut. Jika fitur anda adalah sebuah garis atau sebuah poligon, anda dapat menggunakan fungsi asPolyline() atau asPolygon(). Ketik Kode berikut pada prompt dan tekan Enter untuk melihat koordinat x dan y dari setiap fitur.

for f in layer.getFeatures():

  geom = f.geometry()

  print geom.asPoint()

10. Bagaimana jika kita hanya ingin mendapatkan koordinat x dari fitur ? Anda dapat memanggil fungsi x() pada obyek poin dan mendapatkan koordinat x nya.

for f in layer.getFeatures():

  geom = f.geometry()

  print geom.asPoint().x()

11. Sekarang kita mempunyai semua kepingan yang akan kita satukan untuk menghasilkan output yang kita inginkan. Ketik kode berikut untuk mencetak name, iata_code, latitude dan longitude dari setiap fitur airport. Notasi %s dan %f adalah cara untuk memformat sebuah variabel string dan numerik.

for f in layer.getFeatures():

  geom = f.geometry()

  print '%s, %s, %f, %f' % (f['name'], f['iata_code'],

         geom.asPoint().y(), geom.asPoint().x())

12. Anda dapat melihat outpu tercetak pada konsol. Sebuah cara yang lebih berguna untuk menyimpan output adalah dengan sebuah file. Anda dapat mengetik kode berikut untuk membuat sebuah file dan menulis outputnya di sana, Ganti path atau alamat file dengan sebuah path dalam sistem anda sendiri. Catat bahwa kita menambahkan \n di akhir baris. Ini untuk menambah sebuah garis baru setelah kita menambahkan data untuk setiap fitur. Anda seharusnya juga memperhatikan garis unicode_line = line.encode('utf-8') . Karena layer kita mengandung sejumlah fitur dengan karakter unicode, kita tidak bisa begitu saja menulisnya ke dalam file teks. Kita encode teks menggunakan UTF-8 encoding dan kemudian menulis file teks tersebut.

output_file = open('c:/Users/Ujaval/Desktop/airports.txt', 'w')

for f in layer.getFeatures():

  geom = f.geometry()

  line = '%s, %s, %f, %f\n' % (f['name'], f['iata_code'],

          geom.asPoint().y(), geom.asPoint().x())

  unicode_line = line.encode('utf-8')

  output_file.write(unicode_line)

output_file.close()

13. Anda dapat mengakses lokasi file output yang sudah ditentukan dan membuka file teks. Anda akan melihat data dari shapefile airport yang kita ekstraksi menggunakan skripting phyton.

WebGL adalah teknologi web yang menyuguhkan akselerasi grafis 3D ke dalam browser tanpa memasang perangkat lunak tambahan. WebGL merupakkan kependekan dari Web Graphics Library. Untuk API, WebGL biasanya dipanggil melalui API Javascript dan penggunaannya selalu melibatkan elemen HTML5 <canvas>.

WebGL biasanya digunakan untuk desain web dan game 3D yang berbasis web. WebGL juga juga digunakan oleh beberapa peneliti untuk tujuan sains. Sebagai contoh, dalam buku yang berjudul "Cellular Automata", peneliti menggunakan WebGL untuk mensimulasikan alur Debris. Sedangkan pada paper "Visualization of molecular structures using state-of-the-art techniques in WebGL", peneliti mensimulasikan molekul didalamnya. NASA juga membangun aplikasi web yang interaktif yang disebut Experience Curiosity untuk merayakan ulang tahun ketiga dimana Curiosity Rover mendarat di Mars.

Bagaimana cara melakukannya  

• Untuk sisi server aplikasi kami telah menggunakan beberapa modul Node.js:
• Express adalah kerangka kerja web.
• Request untuk melakukan permintaan ajax di Node.
• Is-bot untuk menangkap crawler mesin pencari.
• Dunia:
• Globe itu sendiri dimungkinkan berkat WebGL Earth.
• OpenStreetMap untuk petak peta.
• Desain:
• Menu samping dianimasikan sepenuhnya dengan CSS.
• Beberapa jQuery untuk front-end.
• Menemukan koordinat alamat IP dilakukan dengan bantuan geoplugin.com .

Cara menjalankannya

Jika ingin menjalankan aplikasi ini secara lokal, hal pertama yang harus dilakukan adalah pastikan kita memiliki node.js yang terinstal di PC terlebih dahulu. Setelah itu, unduh dan unzip arsip dengan kode ke folder bernama nodejs-visior-globe . Setelah selesai, buka terminal dan navigasikan ke folder yang baru dibuat. Sesampai di sana, jalankan perintah di bawah ini untuk menginstal paket npm yang dibutuhkan: 

  npm instal 

Ketika proses ini selesai, jalankan kode berikut dan pergi ke http: // localhost: 8888 di browser. 

  simpul app.js 

Di sana kita akan melihat globe. Namun,  jika diperhatikan bahwa tidak ada orang di peta. Itu karena semuanya bekerja secara offline dan oleh karena itu  kita memerlukan server aktif, ini tidak akan cukup. 

Mengintegrasikannya dengan situs kita

Ada dua hal yang perlu Anda lakukan sebelum Anda melihat pengunjung situs web Anda di dunia:

1. Unggah aplikasi ke layanan hosting seperti heroku . Kami telah membahas cara menyebarkan kode Anda ke heroku sebelumnya. Instruksi persis sama. Satu-satunya perbedaan adalah Anda akan berakhir dengan URL globe baru Anda alih-alih aplikasi obrolan pribadi.
2. Sertakan gambar pelacakan khusus di situs Anda. Anda dapat melakukan ini dengan menambahkan html ini ke footer setiap halaman situs Anda <img src="http://yourglobe/ping" width="1" height="1" style="display:none" /> . Ganti yourglobe dengan url heroku dari aplikasi Anda. Jika Anda memuat url src dari gambar di browser, Anda akan melihat teks "Selesai".

Gambar pelacakan adalah gambar tak terlihat yang tertanam di setiap halaman situs web Anda, dan yang menunjuk ke http://yourglobeurl.com/ping . Saat orang memuat situs Anda, browser mereka memuat semua gambar secara otomatis, yang menyebabkan URL pelacakan juga dimuat. Aplikasi kami mendengarkan URL spesifik itu, dan mendapatkan alamat ip pengunjung, menemukan lokasi mereka dan menyimpannya. Pengguna dianggap online hingga 5 menit setelah mengunjungi situs Anda (ini dapat dikonfigurasi di app.js).

GIS/SIDS

WEBGL GLOBE

WebGL adalah teknologi web yang menyuguhkan akselerasi grafis 3D ke dalam browser tanpa memasang perangkat lunak tambahan. WebGL merupakkan kependekan dari Web Graphics Library. Untuk API, WebGL biasanya dipanggil melalui API Javascript dan penggunaannya selalu melibatkan elemen HTML5 <canvas>.

WebGL biasanya digunakan untuk desain web dan game 3D yang berbasis web. WebGL juga juga digunakan oleh beberapa peneliti untuk tujuan sains. Sebagai contoh, dalam buku yang berjudul "Cellular Automata", peneliti menggunakan WebGL untuk mensimulasikan alur Debris. Sedangkan pada paper "Visualization of molecular structures using state-of-the-art techniques in WebGL", peneliti mensimulasikan molekul didalamnya. NASA juga membangun aplikasi web yang interaktif yang disebut Experience Curiosity untuk merayakan ulang tahun ketiga dimana Curiosity Rover mendarat di Mars.

Bagaimana cara melakukannya  

• Untuk sisi server aplikasi kami telah menggunakan beberapa modul Node.js:
• Express adalah kerangka kerja web.
• Request untuk melakukan permintaan ajax di Node.
• Is-bot untuk menangkap crawler mesin pencari.
• Dunia:
• Globe itu sendiri dimungkinkan berkat WebGL Earth.
• OpenStreetMap untuk petak peta.
• Desain:
• Menu samping dianimasikan sepenuhnya dengan CSS.
• Beberapa jQuery untuk front-end.
• Menemukan koordinat alamat IP dilakukan dengan bantuan geoplugin.com .

Cara menjalankannya

Jika ingin menjalankan aplikasi ini secara lokal, hal pertama yang harus dilakukan adalah pastikan kita memiliki node.js yang terinstal di PC terlebih dahulu. Setelah itu, unduh dan unzip arsip dengan kode ke folder bernama nodejs-visior-globe . Setelah selesai, buka terminal dan navigasikan ke folder yang baru dibuat. Sesampai di sana, jalankan perintah di bawah ini untuk menginstal paket npm yang dibutuhkan: 

  npm instal 

Ketika proses ini selesai, jalankan kode berikut dan pergi ke http: // localhost: 8888 di browser. 

  simpul app.js 

Di sana kita akan melihat globe. Namun,  jika diperhatikan bahwa tidak ada orang di peta. Itu karena semuanya bekerja secara offline dan oleh karena itu  kita memerlukan server aktif, ini tidak akan cukup. 

Mengintegrasikannya dengan situs kita

Ada dua hal yang perlu Anda lakukan sebelum Anda melihat pengunjung situs web Anda di dunia:

1. Unggah aplikasi ke layanan hosting seperti heroku . Kami telah membahas cara menyebarkan kode Anda ke heroku sebelumnya. Instruksi persis sama. Satu-satunya perbedaan adalah Anda akan berakhir dengan URL globe baru Anda alih-alih aplikasi obrolan pribadi.
2. Sertakan gambar pelacakan khusus di situs Anda. Anda dapat melakukan ini dengan menambahkan html ini ke footer setiap halaman situs Anda <img src="http://yourglobe/ping" width="1" height="1" style="display:none" /> . Ganti yourglobe dengan url heroku dari aplikasi Anda. Jika Anda memuat url src dari gambar di browser, Anda akan melihat teks "Selesai".

Gambar pelacakan adalah gambar tak terlihat yang tertanam di setiap halaman situs web Anda, dan yang menunjuk ke http://yourglobeurl.com/ping . Saat orang memuat situs Anda, browser mereka memuat semua gambar secara otomatis, yang menyebabkan URL pelacakan juga dimuat. Aplikasi kami mendengarkan URL spesifik itu, dan mendapatkan alamat ip pengunjung, menemukan lokasi mereka dan menyimpannya. Pengguna dianggap online hingga 5 menit setelah mengunjungi situs Anda (ini dapat dikonfigurasi di app.js).