Hi everyone,
it is my first tutorial, so if something is not understandable, please tell me (:
OK let's start:
1. What's the effect of this tutrial?
Google Map of opened incidents. In my case, it will be Poland.
2. How it looks?
It looks like this:
awesome, right? (:
3. How to do it in a few minutes?
It's possible. Use my tutorial (:
TUTORIAL
Requirements:
- Completely installed LANDesk with IIS7 and MSSQL database (known dbuser, dbname, dbpass)
- (on server with IIS) Installed PHPManagerForIIS-1.2.0 (or newer) version x64 or x86 from [HERE]
- (on server with IIS) Installed PHP v 5.3 (or newer)from [HERE]
- Installed text editor like Notepad++ from [HERE]
Step by step:
1. Make new files in directory C:\inetpub\wwwroot\map
index.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;">
<title>Mapa incydentów</title>
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language='pl'" type="text/javascript"></script>
<script src="markerclusterer.js" type="text/javascript"></script>
<script src="markers_m.js" type="text/javascript"></script>
<script src="jquery-latest.min.js" type="text/javascript"></script>
<style>
html, body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body onload="initialize();">
<div id="map" style="height: 100%; width: 100%;"></div>
</body>
</html>
file.php
<?php
//Connect to MSSQL
$serverName = "SrvName"; //serverName\instanceName
$db = "dbName"; //name of database
$dbuser = "UserName"; //username of database
$dbpass = "PassWord"; //password of database
$code = "UTF-8"; //coding of output
$connectionInfo = array( "Database"=>$db, "CharacterSet"=>$code, "UID"=>$dbuser, "PWD"=>$dbpass); //connecting..
$conn = sqlsrv_connect( $serverName, $connectionInfo); //connected
if( $conn ) {
echo "";
}else{
echo "Connection could not be established.<br />";
die( print_r( sqlsrv_errors(), true));
}
//declare the SQL statement that will query the database
$sql = " SELECT usr_location.usr_city AS miasto, usr_location.usr_street AS ulica
FROM pm_process
LEFT JOIN lc_status
ON pm_process.pm_status_guid=lc_status.lc_guid
LEFT JOIN im_incident
ON pm_process.pm_guid=im_incident.pm_guid
RIGHT JOIN usr_location
ON im_incident.usr_location=usr_location.usr_guid
WHERE lc_status.lc_title <> 'NULL'
AND lc_status.lc_title <> 'Closed'
ORDER BY im_incident.im_id ASC;";
//execute the SQL query and return records
$stmt = sqlsrv_query( $conn, $sql );
if( $stmt === false) {
die( print_r( sqlsrv_errors(), true) );
}
$locations = array();
while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC) ) {
$locations[] = $row['ulica'].", ".$row['miasto'];
}
sqlsrv_free_stmt( $stmt);
header('Content-Type: application/json');
echo json_encode($locations);
?>
markers_m.js
function initialize() {
//settings of map style
var styles = [
{
stylers: [
{ color: "#eeeeee" }
]
},{
featureType: "administrative.province",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "administrative.neighborhood",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "administrative.land_parcel",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "administrative.country",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "administrative",
elementType: "labels",
stylers: [
{ color: "#999999" }
]
},{
featureType: "administrative",
elementType: "labels.text.stroke",
stylers: [
{ visibility: "off" }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
// Create a map object, and include the MapTypeId to add
// to the map type control.
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(52.04, 19.28), // Centering map on POLAND
disableDefaultUI: true, // disabling main controllers
mapTypeControl: false, // disabling map type controller
scaleControl: false, // disabling scale controller
navigationControl: false, // disabling navigation cotroller
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
// setting borders of POLAND
var punkty = [
new google.maps.LatLng(53.748711, 14.238281),
new google.maps.LatLng(53.258641, 14.425049),
new google.maps.LatLng(53.067627, 14.304199),
new google.maps.LatLng(52.975108, 14.161377),
new google.maps.LatLng(52.882391, 14.161377),
new google.maps.LatLng(52.716331, 14.425049),
new google.maps.LatLng(52.576350, 14.633789),
new google.maps.LatLng(52.375599, 14.556885),
new google.maps.LatLng(52.234528, 14.710693),
new google.maps.LatLng(52.099757, 14.699707),
new google.maps.LatLng(51.842566, 14.567871),
new google.maps.LatLng(51.618017, 14.743652),
new google.maps.LatLng(51.508742, 14.732666),
new google.maps.LatLng(51.447160, 14.963379),
new google.maps.LatLng(51.206883, 15.007324),
new google.maps.LatLng(50.889174, 14.820557),
new google.maps.LatLng(50.889174, 14.930420),
new google.maps.LatLng(51.062113, 15.095215),
new google.maps.LatLng(50.937662, 15.292969),
new google.maps.LatLng(50.805935, 15.380859),
new google.maps.LatLng(50.659908, 16.062012),
new google.maps.LatLng(50.659908, 16.369629),
new google.maps.LatLng(50.464498, 16.237793),
new google.maps.LatLng(50.120578, 16.622314),
new google.maps.LatLng(50.282319, 16.984863),
new google.maps.LatLng(50.478483, 16.875000),
new google.maps.LatLng(50.282319, 17.402344),
new google.maps.LatLng(50.275299, 17.753906),
new google.maps.LatLng(50.148746, 17.611084),
new google.maps.LatLng(49.986552, 17.863770),
new google.maps.LatLng(49.944150, 18.347168),
new google.maps.LatLng(49.731581, 18.665771),
new google.maps.LatLng(49.518076, 18.896484),
new google.maps.LatLng(49.396675, 19.072266),
new google.maps.LatLng(49.610710, 19.500732),
new google.maps.LatLng(49.439557, 19.610596),
new google.maps.LatLng(49.210420, 19.775391),
new google.maps.LatLng(49.224773, 20.104980),
new google.maps.LatLng(49.446700, 20.621338),
new google.maps.LatLng(49.317961, 20.928955),
new google.maps.LatLng(49.396675, 21.126709),
new google.maps.LatLng(49.468124, 21.434326),
new google.maps.LatLng(49.382373, 21.939697),
new google.maps.LatLng(49.174522, 22.159424),
new google.maps.LatLng(49.030665, 22.851563),
new google.maps.LatLng(49.174522, 22.763672),
new google.maps.LatLng(49.589349, 22.664795),
new google.maps.LatLng(50.373496, 23.653564),
new google.maps.LatLng(50.464498, 23.972168),
new google.maps.LatLng(50.736455, 24.016113),
new google.maps.LatLng(50.840636, 23.950195),
new google.maps.LatLng(50.903033, 24.158936),
new google.maps.LatLng(51.268789, 23.752441),
new google.maps.LatLng(51.488224, 23.598633),
new google.maps.LatLng(51.672555, 23.521729),
new google.maps.LatLng(51.849353, 23.598633),
new google.maps.LatLng(52.086257, 23.697510),
new google.maps.LatLng(52.187405, 23.411865),
new google.maps.LatLng(52.281602, 23.181152),
new google.maps.LatLng(52.476089, 23.378906),
new google.maps.LatLng(52.649729, 23.708496),
new google.maps.LatLng(52.722986, 23.818359),
new google.maps.LatLng(52.915527, 23.928223),
new google.maps.LatLng(53.363665, 23.719482),
new google.maps.LatLng(53.904338, 23.554688),
new google.maps.LatLng(54.130260, 23.499756),
new google.maps.LatLng(54.278055, 23.312988),
new google.maps.LatLng(54.335744, 23.071289),
new google.maps.LatLng(54.425322, 22.884521),
new google.maps.LatLng(54.393352, 22.598877),
new google.maps.LatLng(54.367759, 20.643311),
new google.maps.LatLng(54.444492, 19.819336),
new google.maps.LatLng(54.239551, 19.390869),
new google.maps.LatLng(54.354956, 19.171143),
new google.maps.LatLng(54.367759, 18.775635),
new google.maps.LatLng(54.521081, 18.511963),
new google.maps.LatLng(54.756331, 18.402100),
new google.maps.LatLng(54.616617, 18.753662),
new google.maps.LatLng(54.851315, 18.369141),
new google.maps.LatLng(54.838664, 17.918701),
new google.maps.LatLng(54.692884, 17.171631),
new google.maps.LatLng(54.470038, 16.314697),
new google.maps.LatLng(54.284469, 16.127930),
new google.maps.LatLng(54.194583, 15.534668),
new google.maps.LatLng(53.988395, 14.589844),
new google.maps.LatLng(53.905280, 14.258890),
new google.maps.LatLng(53.868725, 14.551392),
new google.maps.LatLng(53.768196, 14.589844),
new google.maps.LatLng(53.685290, 14.510520),
new google.maps.LatLng(53.690201, 14.375610),
new google.maps.LatLng(53.748711, 14.238281)
];
// border line
var polilinia = new google.maps.Polygon({
map: map,
paths: [punkty],
strokeColor: '#33ffff', //default: 99ffff
strokeWeight: 4,
strokeOpacity: 1,
fillColor: '#33ffff',
fillOpacity: 0.2
});
mc = new MarkerClusterer(map); //enabling grouping markers
var geocoder = new google.maps.Geocoder();
$.getJSON("file.php", function (data) {
locations = data;
j = -1;
for (var i = 0; i < locations.length; i++) {
addMarker(locations[i]);
}
});
setInterval(function () {
$.getJSON("file.php", function (data) {
if (locations.length < data.length) {
locations = data;
j = 0;
console.log(locations);
addMarker(locations[locations.length - 1]);
}
});
}, 5000);
function addMarker(location) {
geocoder.geocode({ 'address': location }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
j++;
setTimeout(function () {
var marker = new google.maps.Marker({
position: results[0].geometry.location,
animation: google.maps.Animation.DROP,
icon: "marker.png",
map: map
});
setTimeout(function () {
mc.addMarker(marker);
}, 1500);
}, j * 50);
}
else {
alert("some problem in geocode" + status); //show ALERT if some problems occured
}
});
}
}
markerclusterer.js from attached files
jquery-latest.min.js from attached files
marker.png from attached files
2. Test your map by this link:
Hint: If map is working correctly - go to next step, if not - restart IIS and try again.
Hint2: If u see alert with OVER_QUERY_LIMIT u will find explanation at the end of this tutorial.
3. Make new gadget on dashboard where you want add your map.
Gadget type LINK/URL and paste there you map link.
It can not be visible in console but in WebAccess it looks awesome (:
Explanation:
OVER_QUERY_LIMIT - too much queries to google server about decoding locations.
I will update this script soon with some workaround here.
REMEMBER:
You have to use your OWN names of tables in SQL QUERY.
In my case I'm using locations of Configuration Items of which one is opened incident.
GOOD LUCK !