Altenatif Google Maps : Leaflet Open-source JavaScript library
Google telah memperkenalkan kaedah pakej subscription google maps pada maps yang gunakan pada web apps & mobile apps. Jadi ia memberi kesan kepada aplikasi yang ingin menggunakan maps pada web application atau mobile application. Salah satu alternatif yang popular utk mengantikan google maps adalah menggunakan library maps yang dibangunkan atas openstreetmap iaitu Leaflet .js. Kelebihan Leaflet .js adalah ia support mobile juga dan percuma.
Berikut merupakan step untuk menggunakan library Leaflet ini :.
- Download library js di https://leafletjs.com/
- Extract file ini letak dalam mana2 folder di dalam web apps server
- buat file index.php
- buat file js untuk load data dari database (mysql) ajax. (loadcity.js)
index.php
<?php
include(‘./includes/config.php’);
?>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta http-equiv=”content-type” content=”text/html;charset=utf-8″ />
<link rel=”stylesheet” href=”modules/leaflet/leaflet.css” />
<script src=”modules/jquery/jquery-1.10.2.min.js” type=”text/javascript”></script>
<script src=”modules/leaflet/leaflet.js” type=”text/javascript”></script>
<script src=”modules/loadcity.js” type=”text/javascript”></script>
<script src=”modules/leaflet/leaflet-hash.js” type=”text/javascript”></script>
</head>
<body>
<div class=”main-panel”>
<?phprequire(“includes/halalHeader.php”); ?>
<div class=”content”>
<div class=”container-fluid”>
<div class=”row”>
<div class=”col-md-12″>
<div class=”card data-tables”>
<div class=”card-header “>
<h4 class=”card-title”><i class=”nc-icon nc-notes icon-bold”></i> Kawasan Hotspot Kecurian Kenderaan Bandar Negeri Pulau Pinang</h4>
</div>
<div class=”card-body table-striped table-no-bordered table-hover dataTable dtr-inline table-full-width”>
<div class=”fresh-datatables”>
<table id=”datatables” class=”table table-striped table-no-bordered table-hover” cellspacing=”0″ width=”100%” style=”width:100%”>
<thead>
<tr>
<td><div id=”mapdiv” style=”width: 1300px; height: 600px;”></div> </td>
</tr>
</thead>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
loadcity.js
/*
* global variables
*/
var map; // global map object
var lyrOsm; // the Mapnik base layer of the map
var lyrPlq; // the geoJson layer to display plaques with
var blueicon; // a blue icon for blue plaques
var greenicon; // a green icon for green plaques
var whiteicon; // a white icon for white plaques
// when the whole document has loaded call the init function
$(document).ready(init);
function init() {
// map stuff
// create the icons
blueicon=L.icon({
iconUrl: ‘modules/hcbHotspot/images/blueplaque.png’,
iconSize: [24, 24], // size of the icon
iconAnchor: [12, 23], // point of the icon which will correspond to marker’s location
popupAnchor: [0, -12] // point from which the popup should open relative to the iconAnchor
});
greenicon=L.icon({
iconUrl: ‘modules/hcbHotspot/images/greenplaque.png’,
iconSize: [24, 24], // size of the icon
iconAnchor: [12, 23], // point of the icon which will correspond to marker’s location
popupAnchor: [0, -12] // point from which the popup should open relative to the iconAnchor
});
whiteicon=L.icon({
iconUrl: ‘modules/hcbHotspot/images/whiteplaque.png’,
iconSize: [24, 24], // size of the icon
iconAnchor: [12, 23], // point of the icon which will correspond to marker’s location
popupAnchor: [0, -12] // point from which the popup should open relative to the iconAnchor
});
// base layer
var osmUrl=’http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’;
var osmAttrib=’Map data © <a href=”http://openstreetmap.org”>OpenStreetMap</a> contributors’;
lyrOsm = new L.TileLayer(osmUrl, {
minZoom: 9,
maxZoom: 19,
attribution: osmAttrib
});
// a geojson layer
lyrPlq = L.geoJson(null, {
pointToLayer: setIcon
}
);
// set the starting location for the centre of the map
/**penang */
var start =newL.LatLng(5.285153,100.456238);
/**malaysia */
//var start = new L.LatLng(4.210484,101.975769);
// create the map
map = new L.Map(‘mapdiv’, { // use the div called mapdiv
center: start, // centre the map as above
zoom: 12, // start up zoom level
layers: [lyrOsm,lyrPlq] // layers to add
});
// create a layer control
// add the base layers
var baseLayers = {
“OpenStreetMap”: lyrOsm
};
// add the overlays
var overlays = {
“Plaques”: lyrPlq
};
// add the layers to a layer control
L.control.layers(baseLayers, overlays).addTo(map);
L.circle([5.3991, 100.36382], 500, {
color: ‘red’,
fillColor: ‘#f03’,
fillOpacity: 0.5
}).addTo(map).bindPopup(“K”);
// create the hash url on the browser address line
var hash = new L.Hash(map);
map.on(‘moveend’, whenMapMoves);
askForPlaques();
}
function whenMapMoves(e) {
askForPlaques();
}
function setIcon(feature,ll) {
var plq;
if (feature.properties.colour==’green’) {
plq=L.marker(ll, {icon: greenicon});
}
else if (feature.properties.colour==’white’) {
plq=L.marker(ll, {icon: whiteicon});
}
else {
plq=L.marker(ll, {icon: blueicon});
}
plq.bindPopup(feature.properties.plaquedesc + ‘, Jumlah Kes : ‘ +feature.properties.jumlah);
return plq;
}
function askForPlaques() {
var data=’bbox=’ + map.getBounds().toBBoxString();
$.ajax({
url: ‘modules/loadDataMapCity.php’,
dataType: ‘json’,
data: data,
success: showPlaques
});
}
function showPlaques(ajxresponse) {
lyrPlq.clearLayers();
lyrPlq.addData(ajxresponse);
}
loadDataMapCity.php
<?php
include(‘../../includes/config.php’);
if (isset($_GET[‘bbox’])) {
$bbox=$_GET[‘bbox’];
} else {
// invalid request
$ajxres=array();
$ajxres[‘resp’]=4;
$ajxres[‘dberror’]=0;
$ajxres[‘msg’]=’missing bounding box’;
sendajax($ajxres);
}
// split the bbox into it’s parts
list($left,$bottom,$right,$top)=explode(“,”,$bbox);
// open the database
try {
$db = new PDO(‘mysql:host=localhost;dbname=’.$database_config.’;charset=utf8′, $username_config, $password_config);
} catch(PDOException $e) {
// send the PDOException message
$ajxres=array();
$ajxres[‘resp’]=40;
$ajxres[‘dberror’]=$e->getCode();
$ajxres[‘msg’]=$e->getMessage();
sendajax($ajxres);
}
try {
// $sql=”SELECT plaqueid,lat,lon,plaquedesc,colour,imageid FROM plaques WHERE lon>=:left AND lon<=:right AND lat>=:bottom AND lat<=:top”;
$sql= “SELECT ak.id as id,ts.description as description,
ts.latas lat,ts.lonas lon,ts.colouras colour,SUM(jumlah) as jumlah
from auto_kes_bandar ak,
tblcity ts
wherets.id=ak.bandar
andak.negeri=’PP’
andak.tahun=’2009′
AND lon>=:leftAND lon<=:right AND lat>=:bottom AND lat<=:top
GROUP BYts.description”;
$stmt = $db->prepare($sql);
$stmt->bindParam(‘:left’, $left, PDO::PARAM_STR);
$stmt->bindParam(‘:right’, $right, PDO::PARAM_STR);
$stmt->bindParam(‘:bottom’, $bottom, PDO::PARAM_STR);
$stmt->bindParam(‘:top’, $top, PDO::PARAM_STR);
$stmt->execute();
} catch(PDOException $e) {
// send the PDOException message
$ajxres=array();
$ajxres[‘resp’]=40;
$ajxres[‘dberror’]=$e->getCode();
$ajxres[‘msg’]=$e->getMessage();
sendajax($ajxres);
}
$ajxres=array(); // place to store the geojson result
$features=array(); // array to build up the feature collection
$ajxres[‘type’]=’FeatureCollection’;
// go through the list adding each one to the array to be returned
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
$lat=$row[‘lat’];
$lon=$row[‘lon’];
$prop=array();
$prop[‘plaqueid’]=$row[‘id’];
$prop[‘plaquedesc’]=$row[‘description’];
$prop[‘colour’]=$row[‘colour’];
$prop[‘jumlah’]=$row[‘jumlah’];
//$prop[‘imageid’]=$row[‘imageid’];
$f=array();
$geom=array();
$coords=array();
$geom[‘type’]=’Point’;
$coords[0]=floatval($lon);
$coords[1]=floatval($lat);
$geom[‘coordinates’]=$coords;
$f[‘type’]=’Feature’;
$f[‘geometry’]=$geom;
$f[‘properties’]=$prop;
$features[]=$f;
}
// add the features array to the end of the ajxres array
$ajxres[‘features’]=$features;
// tidy up the DB
$db = null;
sendajax($ajxres); // no return from there
function sendajax($ajx) {
// encode the ajx array as json and return it.
$encoded = json_encode($ajx);
exit($encoded);
}
?>
Recent Comments