Pernah denger tentang GIS atau SIG...???
Sistem Informasi Geografis adalah suatu sistem atau alat untuk membuat peta secara digital diikuti dengan data-data atribut/keterangan dari peta tersebut. Sehingga pada setiap peta terdapat sebuah link yang menuju data atributnya.
Ini contoh program yang dulu pernah saya buat di kampus. Aplikasinya simple, jadi kalau mau dikembangin lagi ya silahkan. :D
bikin dulu index.hml nya
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Proyek GIS</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBmqACGqWw6DNnly06NbSM-uoeWkyzJja4&sensor=true"></script>
<script type="text/javascript" src="js/map2.js"></script>
</head>
<body>
<h2 align="center">Lapangan Futsal Surabaya</h2>
<h5 align="center">ZADYTHA</h5>
<div id="map_canvas"></div>
</body>
</html>
lalu bikin 3 folder, yaitu folder css, img, dan js. seperti ini,
lalu kita buat css dulu, beri nama style.css. File css dimasukkan ke dalam folder css yang sudah kita buat tadi, begitu juga dengan file img dan js.
Script : style.css
/* CSS Document */
html, body {
hight: 100%;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:medium;
}
#map_canvas {
width: 100%;
height: 84%;
border: 1px solid black;
}
p {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
}
h4 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:16;
text-decoration:underline;
text-align:center;
color: #1155CC;
}
Script : map2.js
(function () {
window.onload = function()
{
var map_canvas = document.getElementById('map_canvas');
var futsal_map = new google.maps.LatLng(-7.28197, 112.71873);
var option = {
zoom: 12,
center: futsal_map,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById('map_canvas'), option);
var futsal = [
['<p>Jl. Kebraon II Surabaya</p><p>Tlp: 031 7337374</p>',-7.33662,112.70002,'Kebraon Sports Center'],
['<p>Jl. Raya Ngagel No. 109 Surabaya</p><p>Tlp: 031 5051491</p>',-7.28466,112.74759,'Ole Ole I Futsal'],
['<p>Jl. Bung Tomo Surabaya</p><p>Tlp: 031 505149048</p>',-7.29027,112.74563,'Ole Ole II Futsal'],
['<p>Jl. Raya Menganti Kedurus No. 88 Surabaya</p><p>Tlp: 031 72548173</p>',-7.31388,112.70594,'Primavera'],
['<p>Jl. Jambangan Kebon Agung No. 53 Surabaya</p><p>Tlp: 031 71630930</p>',-7.3221146,112.7150818,'Fabel Futsal'],
['<p>Jl. Raya Lontar No. 81 Surabaya</p><p>Tlp: 031 7408084</p>',-7.2827259,112.662571,'Fantasy Futsal I'],
['<p>Jl. Manyar Jaya III Surabaya</p><p>Tlp: 031 5912226</p>',-7.2969085,112.7696243,'Fantasy Futsal II'],
['<p>Jl. Tambaksari No. 10 Surabaya</p><p>Tlp: 031 5010111</p>',-7.2519432,112.7561642,'Gelora 10 Nopember'],
['<p>Jl. Kutisari No. 54-56 Surabaya</p><p>Tlp: 031 8417881</p>',-7.331654,112.748426,'GOR Kutisari'],
['<p>Jl. Kenjeran No. 621 Surabaya</p><p>Tlp: 031 3897619</p>',-7.2505779,112.7890111,'Graha Futsal'],
['<p>Jl. Jagir Wonokromo 100 Surabaya</p><p>Tlp: 031 5460900</p>',-7.302766,112.7448976,'Goal Futsal Mangga Dua'],
['<p>Jl. Nginden II No. 109 Surabaya</p><p>Tlp: 031 77111119</p>',-7.301291,112.767253,'Hokky Futsal'],
['<p>Plaza Graha Famili Surabaya</p><p>Tlp: 031 5544848</p>',-7.3217562, 112.7094107,'Futsal 134'],
['<p>Jl. Jojoran I No. 50 Surabaya</p><p>Tlp: 031 60768820</p>',-7.2745778,112.7710748,'Arena Futsal'],
['<p>Graha Famili Surbaya</p><p>Tlp: 031 72433389</p>',-7.2921888, 112.6767556,'Planet Futsal'],
];
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < futsal.length; i++)
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(futsal[i][1], futsal[i][2]),
map: map,
title: futsal[i][3],
icon: 'img/ball.png'
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent('<h4>'+futsal[i][3]+'</h4>'+futsal[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
};
}) ();
dan yang terakhir download file gambar untuk di masukkan ke dalam folder img.
setelah semua selesai dibuat. cobalah untuk membuka file index.html di browser kalian.
Selamat mencoba. Semoga sukses. :)
Sistem Informasi Geografis adalah suatu sistem atau alat untuk membuat peta secara digital diikuti dengan data-data atribut/keterangan dari peta tersebut. Sehingga pada setiap peta terdapat sebuah link yang menuju data atributnya.
Ini contoh program yang dulu pernah saya buat di kampus. Aplikasinya simple, jadi kalau mau dikembangin lagi ya silahkan. :D
bikin dulu index.hml nya
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Proyek GIS</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBmqACGqWw6DNnly06NbSM-uoeWkyzJja4&sensor=true"></script>
<script type="text/javascript" src="js/map2.js"></script>
</head>
<body>
<h2 align="center">Lapangan Futsal Surabaya</h2>
<h5 align="center">ZADYTHA</h5>
<div id="map_canvas"></div>
</body>
</html>
lalu bikin 3 folder, yaitu folder css, img, dan js. seperti ini,
lalu kita buat css dulu, beri nama style.css. File css dimasukkan ke dalam folder css yang sudah kita buat tadi, begitu juga dengan file img dan js.
Script : style.css
/* CSS Document */
html, body {
hight: 100%;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:medium;
}
#map_canvas {
width: 100%;
height: 84%;
border: 1px solid black;
}
p {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
}
h4 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:16;
text-decoration:underline;
text-align:center;
color: #1155CC;
}
Script : map2.js
(function () {
window.onload = function()
{
var map_canvas = document.getElementById('map_canvas');
var futsal_map = new google.maps.LatLng(-7.28197, 112.71873);
var option = {
zoom: 12,
center: futsal_map,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById('map_canvas'), option);
var futsal = [
['<p>Jl. Kebraon II Surabaya</p><p>Tlp: 031 7337374</p>',-7.33662,112.70002,'Kebraon Sports Center'],
['<p>Jl. Raya Ngagel No. 109 Surabaya</p><p>Tlp: 031 5051491</p>',-7.28466,112.74759,'Ole Ole I Futsal'],
['<p>Jl. Bung Tomo Surabaya</p><p>Tlp: 031 505149048</p>',-7.29027,112.74563,'Ole Ole II Futsal'],
['<p>Jl. Raya Menganti Kedurus No. 88 Surabaya</p><p>Tlp: 031 72548173</p>',-7.31388,112.70594,'Primavera'],
['<p>Jl. Jambangan Kebon Agung No. 53 Surabaya</p><p>Tlp: 031 71630930</p>',-7.3221146,112.7150818,'Fabel Futsal'],
['<p>Jl. Raya Lontar No. 81 Surabaya</p><p>Tlp: 031 7408084</p>',-7.2827259,112.662571,'Fantasy Futsal I'],
['<p>Jl. Manyar Jaya III Surabaya</p><p>Tlp: 031 5912226</p>',-7.2969085,112.7696243,'Fantasy Futsal II'],
['<p>Jl. Tambaksari No. 10 Surabaya</p><p>Tlp: 031 5010111</p>',-7.2519432,112.7561642,'Gelora 10 Nopember'],
['<p>Jl. Kutisari No. 54-56 Surabaya</p><p>Tlp: 031 8417881</p>',-7.331654,112.748426,'GOR Kutisari'],
['<p>Jl. Kenjeran No. 621 Surabaya</p><p>Tlp: 031 3897619</p>',-7.2505779,112.7890111,'Graha Futsal'],
['<p>Jl. Jagir Wonokromo 100 Surabaya</p><p>Tlp: 031 5460900</p>',-7.302766,112.7448976,'Goal Futsal Mangga Dua'],
['<p>Jl. Nginden II No. 109 Surabaya</p><p>Tlp: 031 77111119</p>',-7.301291,112.767253,'Hokky Futsal'],
['<p>Plaza Graha Famili Surabaya</p><p>Tlp: 031 5544848</p>',-7.3217562, 112.7094107,'Futsal 134'],
['<p>Jl. Jojoran I No. 50 Surabaya</p><p>Tlp: 031 60768820</p>',-7.2745778,112.7710748,'Arena Futsal'],
['<p>Graha Famili Surbaya</p><p>Tlp: 031 72433389</p>',-7.2921888, 112.6767556,'Planet Futsal'],
];
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < futsal.length; i++)
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(futsal[i][1], futsal[i][2]),
map: map,
title: futsal[i][3],
icon: 'img/ball.png'
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent('<h4>'+futsal[i][3]+'</h4>'+futsal[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
};
}) ();
dan yang terakhir download file gambar untuk di masukkan ke dalam folder img.
setelah semua selesai dibuat. cobalah untuk membuka file index.html di browser kalian.
Selamat mencoba. Semoga sukses. :)
