Memulai Membuat Aplikasi Map/ Peta Sederhana Dengan Argis Javascript

 Author : hadinug, 08 September, 2014, Komentar



Seperti kita ketahui bersama banyak vendor luar yang menyediakan berbagai alternatif aplikasi pementaan secara online maupun ofline. Yang paling kita kenal salah satunya adalah googleMap, dan banyak webiste online menggunakan peta google untuk menampilkan alamat atau lokasi perusahaan.


Namun kali ini kita bukan membahas tentang googleMap, namun pada tutorial kali ini kita akan belajar bagaimana membuat peta online dengan teknologi selain googleMap, yaitu Arcgis. Arcgis memiliki banyak cabang, ada Arcgis Desktop, Arcgis Server dan Arcgis Online atau biasa disebut dengan Arcgis Portal. So.. mari kita mulai



Disini kita akan mengguakan salah satu dari sub teknologi bahasa pemprograman untuk arcgis, yaitu javascript. Kunjungi https://developers.arcgis.com/javascript/ sebagai tahap awal sebelum kita memulai.Siapkan editor web untuk memulia mengkode.

Menambahakan Librari Javascript Arcgis

Gunakan librari javascript arcgis dari CDN dengan menambahkan kode berikut pada halaman kode:


<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
<script src="http://js.arcgis.com/3.10/"></script>


Menambahkan Map

Untuk menambahkan sebuah map pada halaman website, yang perlu kita lakukan adalah dengan meninstasiasi Class Map pada library javascript arcgis seperti berikut:


var map = new Map("map",{
                       basemap: "topo", 
                       center: [-122.45,37.75],
                       zoom: 13, 
                       sliderStyle: "small"
                  });


Keterangan:

  • "map", merupakan id dari sebuah elemen yang nantinya akan kita gunakan untuk meletakan sebuah peta
  • basemap, merupakan type atau bentuk peta dasar yang kita gunakan pada map, ada beberapa peta dasar yang disediakan oleh arcgis seperti: streets | satellite | hybrid | topo | gray | oceans | national-geographic | osm.
  • center, merupakan letak atau posisi koordinat center sebuah map.
  • zoom, merupakan ukuran besar sekala peta
  • sliderStyle, merupakan style untuk slider peta, small | medium | big


Kode Selengkapnya

Berikut kode selengkapnya untuk membuat peta atau map pertama kali dengan arcgis:



<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title>Simple Map</title> <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css"> <style> html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } body { background-color: #FFF; overflow: hidden; font-family: "Trebuchet MS"; } </style> <script src="http://js.arcgis.com/3.10/"></script> <script> var map; require(["esri/map", "dojo/domReady!"], function(Map) { map = new Map("map", { basemap: "topo", center: [-122.45, 37.75], // longitude, latitude zoom: 13 }); }); </script> </head> <body> <div id="map"></div> </body> </html>


Semoga bermanfaat :-) 

 
Bagikan halaman ke sosial media
 
Tags :   arcgis    ArcGis    javascript       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda