Tugas SIG Poligon

You might also like

Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 13

TUGAS SISTEM INFORMASI GEOGRAFIS

Tugas Sistem Informasi Geografis Line, Circle, Polygon

Di Susun Oleh :

Glorious Marshal ( 12.5.00043 )

Sekolah Tinggi Manajemen Informatika dan Komputer

Teknik Informatika STMIK Sinar Nusantara

Surakarta

2015
1. Line
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oH
xOIYM&sensor=false">
</script>
<script>
var x=new google.maps.LatLng(-7.5633536,110.8165557);
var t1=new google.maps.LatLng(-7.5619402,110.811092);
var t2=new google.maps.LatLng(-7.5633205,110.8146918);
var t3=new google.maps.LatLng(-7.5648647,110.8185515);
var t4=new google.maps.LatLng(-7.5653636,110.8197518);
var t5=new google.maps.LatLng(-7.5660971,110.8215492);
function initialize()
{
var mapProp = {
center:x,
zoom:15,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myTrip=[t1,t2,t3,t4,t5];
var flightPath=new google.maps.Polyline({
path:myTrip,
strokeColor:"#00ffcc",
strokeOpacity:0.8,
strokeWeight:2
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
Line Map Jl. Yosodipuro

2. Lingkaran
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oH
xOIYM&sensor=false">
</script>
<script>
var balekambang=new google.maps.LatLng(-7.5523057,110.8075999);
function initialize()
{
var mapProp = {
center:balekambang,
zoom:15,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var nongkrong = new google.maps.Circle({
center:balekambang,
radius:75,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#00ffcc",
fillOpacity:0.4
});
nongkrong.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

Lingkaran Area Taman Balekambang

3. Lingkaran dengan Marker


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<script src="http://maps.google.com/maps/api/js?sensor=false&amp;language=id"
type="text/javascript">
</script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
function initialize() {
var latLng = new google.maps.LatLng(-7.559718, 110.827223);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 10,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Wilayah Surakarta',
map: map,
draggable: true
});
// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
map: map,
radius: 3500, //16093, // 10 miles in metres
fillColor: '#00ffcc'
});
circle.bindTo('center', marker, 'position');
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#mapCanvas {
width: 500px;
height: 300px;
float: left;
}
</style>
<br />
<div id="mapCanvas">
</div>
</body>
</html>

Lingkaran Marker area Surakarta


4. Polygon
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oH
xOIYM&sensor=false">
</script>
<script>
var x=new google.maps.LatLng(-7.5634598,110.7999718);
var t1=new google.maps.LatLng(-7.5666317,110.8073481);
var t2=new google.maps.LatLng(-7.5625437,110.8099941);
var t3=new google.maps.LatLng(-7.5607031,110.7886992);
function initialize()
{
var mapProp = {
center:x,
zoom:15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myTrip=[t1,t2,t3,t1];
var flightPath=new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#00FFCC",
fillOpacity:0.4
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:650px;height:380px;"></div>
</body>
</html>
Poligon Mall area Solo

5. Multi Polygon dengan Database


Index.php
<?php
session_start();
include('koneksi.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SISTEM INFORMASI LONGSOR</title>
<style type="text/css">
#halaman { width:980px; margin:0 auto; }
#header { height:100px; padding:10px;
background-color: #9FB5BD;
}
#kiri { padding:10px;background-color:#CCCCCC;float:left;width:250px; margin-top:10px; }
#tengah { height:500px; padding:10px;background-color:#CCCCCC;margin:10px 0px 0 290px; }
#footer { clear:both; height:50px;padding:10px; background-color:#CCCCCC; margin-top:10px;}
#nav {
margin: 0;
padding: 0;
list-style-type: none;
background-color: #663300;
width: 180px;
float: left;
}
#nav li {
margin: 0;
padding: 0;
float:left;
width:100%;
}
#nav a {
display: block; /* untuk memperbesar area klik karena tag a defaultnya inline
*/
color: #FFF;
text-decoration: none;
padding: 0 15px;
line-height: 2;
border-bottom:1px solid #FFF;
}
#nav a:hover {
background: #330000;
}
</style>
</head>
<body>
<div id="halaman">
<div id="header">SISTEM INFORMASI LONGSOR</div>
<div id="kiri">
<ul id='nav'>
<li><a href="#" >Lokasi Longsor</a></li>
<?php
$lokasi = mysql_query("select * from lokasi");
while($koor=mysql_fetch_array($lokasi)){
?>
<li><a href="index.php?p=<?php echo $koor['id']; ?>" )">
<?php echo $koor['nama_lokasi'];?></a></li>
<?php
}
?>
<li><a href="index.php?p=0" >semua lokasi </a></li>
</ul>
</div>
<div id="tengah">
<?php
$p=$_GET['p'];
if ($p==0){include "all.php";
}else{
$_SESSION['p'] = $p;
include "satu.php";
}
?>
</div>
<div id="footer">Glorious Marshal - 12.5.00043</div>
</div>
</body>
</html>

All.php
<?php
include "koneksi.php" ;
session_start();
$username=1;
?>
<script src="http://maps.google.com/maps/api/js?sensor=false&amp;language=id"
type="text/javascript">
</script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
function initialize() {
<?php
$lokasi2 = mysql_query("select * from titik where id='$username' order by no");
$koora=mysql_fetch_array($lokasi2);
$xp=$koora['x']; $yp=$koora['y'];
?>
//***************** lokasi pusat peta
var latLng = new google.maps.LatLng(<?php echo $xp; ?>,<?php echo $yp; ?>);
var map = new google.maps.Map(document.getElementById('tengah'), {
zoom: 13,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// buat_array
var A_lokasi = [];

var i=0;// jumlah lokasi


<?php
$lokasi = mysql_query("select * from lokasi order by id");
while($lokasinya=mysql_fetch_array($lokasi)){
$id=$lokasinya['id'];
?>
A_lokasi.push(new google.maps.Polygon({
paths:[<?php
$titik = mysql_query("select * from titik where id='$id' order by no");
while($koor=mysql_fetch_array($titik)){?> new google.maps.LatLng(<?php echo $koor['x'];
?>,<?php echo $koor['y']; ?>), <?php } ?> ] ,
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#00ffcc",
fillOpacity: 0.35 })
);
A_lokasi[i].setMap(map);;
i=i+1;
<?php
}//lokasi
?>
} // initialize
//*****************
//pagill fungsi initialize
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<br />
<div id="tengah">
</div>

Koneksi.php
<?php
mysql_connect("localhost","root","");
mysql_select_db("db_longsor");
?>

Satu.php
<?php
session_start();
$username=$_SESSION['p'];
?>
<script src="http://maps.google.com/maps/api/js?sensor=false&amp;language=id"
type="text/javascript">
</script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
function initialize() {
<?php
$lokasi2 = mysql_query("select * from titik where id='$username' order by no");
$koora=mysql_fetch_array($lokasi2);
$xp=$koora['x']; $yp=$koora['y'];
?>
var latLng = new google.maps.LatLng(<?php echo $xp; ?>,<?php echo $yp; ?>);
var map = new google.maps.Map(document.getElementById('tengah'), {
zoom: 15,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var aliranLavaCoordinates = [
<?php include "koneksi.php" ;
$id=$username;
$lokasi = mysql_query("select * from titik where id='$id' order by no");
while($koor=mysql_fetch_array($lokasi)){?> new google.maps.LatLng(<?php echo $koor['x'];
?>,<?php echo $koor['y']; ?>), <?php } ?> ];
var aliranLava = new google.maps.Polygon({
path: aliranLavaCoordinates,
strokeColor: "#0000FF",
strokeOpacity: 0.5,
strokeWeight: 10,
strokeColor: "#FF0000",
fillColor: "#00ffcc",
fillOpacity: 0.35
});
aliranLava.setMap(map);
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<br />
<div id="tengah">
</div>

You might also like