Wednesday 19 March 2014

All in one Jquery tools

Introduction to jQuery tools

Essential tools for modern websites

Let’s face it: do you really need drag-and-drop, resizable windows or sortable lists in your web applications?
Websites are not desktop applications. They are different. What you really need is high usability, striking visual effects and all those “web 2.0″ goodies that you have seen on your favourite websites.This library is an answer to this need. All tools can be used together, extended, configured and styled. You’ll find your personal way of using the library.

The CDN is configured with the proper expire headers and compression settings so that the file loads fast. This CDN can be used in production environments without any charge.   

Feature :
Tabs,Accoirdian,Popup,Form Validation,Date picker,Tool tips, range slider,Flash Scrollable.
More :

Point lying inside the polygon or not in google map

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head id=”Head1″ runat=”server”>
<title></title>
<script type=”text/javascript” src=”https://maps.googleapis.com/maps/api/js?key=AIzaSyBfaExFhABnh7I3-vTHJjA4TWqtYnMccKE&sensor=false”></script&gt;
<script type=”text/javascript” src=”http://www.the-di-lab.com/polygon/jquery-1.4.2.min.js”></script&gt;
<script type=”text/javascript”>
var map;
var boundaryPolygon;
function initialize() {
google.maps.Polygon.prototype.Contains = function (point) {
// ray casting alogrithm http://rosettacode.org/wiki/Ray-casting_algorithm
var crossings = 0,
path = this.getPath();
// for each edge
for (var i = 0; i < path.getLength(); i++) {
var a = path.getAt(i),
j = i + 1;
if (j >= path.getLength()) {
j = 0;
}
var b = path.getAt(j);
if (rayCrossesSegment(point, a, b)) {
crossings++;
}
}
// odd number of crossings?
return (crossings % 2 == 1);
function rayCrossesSegment(point, a, b) {
var px = point.lng(),
py = point.lat(),
ax = a.lng(),
ay = a.lat(),
bx = b.lng(),
by = b.lat();
if (ay > by) {
ax = b.lng();
ay = b.lat();
bx = a.lng();
by = a.lat();
}
if (py == ay || py == by) py += 0.00000001;
if ((py > by || py < ay) || (px > Math.max(ax, bx))) return false;
if (px < Math.min(ax, bx)) return true;
var red = (ax != bx) ? ((by – ay) / (bx – ax)) : Infinity;
var blue = (ax != px) ? ((py – ay) / (px – ax)) : Infinity;
return (blue >= red);
}
};
var mapProp = {
center: new google.maps.LatLng(37.684, -122.591),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById(“googleMap”), mapProp);
google.maps.event.addListener(map, ‘click’, function (event) {
if (boundaryPolygon!=null && boundaryPolygon.Contains(event.latLng)) {
alert(event.latLng + ” is inside the polygon”);
} else {
alert(event.latLng + ” is outside the polygon”);
}
});
}
function btnCheckPointExistence_onclick() {
var latitude = document.getElementById(‘txtLattitude’).value;
var longitude = document.getElementById(‘txtLongitude’).value;
//alert(latitude); alert(longitude)
var myPoint = new google.maps.LatLng(latitude, longitude);
if (boundaryPolygon == null) {
alert(“No Polygon”);
}
else {
if (boundaryPolygon.Contains(myPoint)) {
alert(myPoint + “is inside the polygon.”);
} else {
alert(myPoint + “is outside the polygon.”);
}
}
}
function drawPolygon() {
initialize();
var boundary = ’77.702866 28.987153, 77.699776 28.978594 ,77.735996 28.974164 ,77.719946 28.99346 ,77.713423 28.994361 ,77.711706 28.990382 ‘;
var boundarydata = new Array();
var latlongs = boundary.split(“,”);
for (var i = 0; i < latlongs.length; i++) {
latlong = latlongs[i].trim().split(” “);
boundarydata[i] = new google.maps.LatLng(latlong[1], latlong[0]);
}
boundaryPolygon = new google.maps.Polygon({
path: boundarydata,
strokeColor: “#0000FF”,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: ‘Red’,
fillOpacity: 0.4
});
google.maps.event.addListener(boundaryPolygon, ‘click’, function (event) {
if (boundaryPolygon.Contains(event.latLng)) {
alert(event.latLng + “is inside the polygon.”);
} else {
alert(event.latLng + “is outside the polygon.”);
}
});
map.setZoom(14);
map.setCenter(boundarydata[0]);
boundaryPolygon.setMap(map);
}
</script>
</head>
<body onload=”initialize();drawPolygon();”>
<form id=”form1″ runat=”server”>
<input type=”text” value=”28.982005022927137″ name=”txtLattitude” id=”txtLattitude” placeholder=”Enter Latitude”>
<input type=”text” value=”77.72157669067383″ name=”txtLongitude” id=”txtLongitude” placeholder=”Enter Langitude”>
<input type=”button” value=”Submit” name=”submit” id=”submit-text” value=”submit” onclick=”btnCheckPointExistence_onclick();”>
<h3>Check If Point Exist in a Polygon</h3>
<span id=”spnMsg” style=”font-family: Arial; text-align: center; font-size: 14px; color: red;”>this is message</span>
<br />
<br />
<div id=”googleMap” style=”width: auto; height: 500px;”>
</div>
</form>
</body>
</html>
More Reference :

Get address point is exist in polygon boundary in php

<?php
$pointOnVertex = $pointOnVertex; // or true
// Transform string coordinates into arrays with x and y values
$point = $this->pointStringToCoordinates($point);
$vertices = array();
foreach ($polygon as $vertex) {
$vertices[] = $this->pointStringToCoordinates($vertex);
}
// Check if the point sits exactly on a vertex
if ($this->pointOnVertex == true and $this->pointOnVertex($point, $vertices) == true) {
return “vertex”;
}
// Check if the point is inside the polygon or on the boundary
$intersections = 0;
$vertices_count = count($vertices);
for ($i=1; $i min($vertex1['x'], $vertex2['x']) and $point['x'] min($vertex1['y'], $vertex2['y']) and $point['y'] <= max($vertex1['y'], $vertex2['y']) and $point['x'] <= max($vertex1['x'], $vertex2['x']) and $vertex1['y'] != $vertex2['y']) {
$xinters = ($point['y'] – $vertex1['y']) * ($vertex2['x'] – $vertex1['x']) / ($vertex2['y'] – $vertex1['y']) + $vertex1['x'];
if ($xinters == $point['x']) { // Check if point is on the polygon boundary (other than horizontal)
return “boundary”;
}
if ($vertex1['x'] == $vertex2['x'] || $point['x'] $coordinates[0], “y” => $coordinates[1]);
}
}
/*** Example ***/
$pointLocation = new pointLocation();
$points = array(“18.353135541330925 73.85009765625″); //pune
$polygon_1 = array(“18.988116 75.60791″, “16.279608 75.997925″, “17.008859 73.24585″, “19.514128 73.410645″, “18.988116 75.60791″); //ok
$polygon_2 = array(“19.029665 78.464355″, “16.321787 78.85437″, “17.050877 76.102295″, “19.555543,76.26709″, “19.029665 78.464355″); //ok
$polygon_3 = array(“19.734391 80.595703″, “17.037419 80.985718″, “17.763728 78.233643″, “20.257969 78.398438″, “19.734391 80.595703″);
$polygon_4 = array(“18.447044 77.497558″, “15.730466 77.887573″, “16.461769 75.135498″, “18.974764 75.300293″, “18.447044 77.497558″);
$polygon_5 = array(“17.757842 77.497558″, “15.031344 77.887573″, “15.765162 75.135498″, “18.287671 75.300293″, “17.757842 77.497558″);
$polygon_6 = array(“21.462016 76.179199″, “18.793543 76.569214″, “19.512551 73.817139″, “21.979622 73.981934″, “21.462016 76.179199″);
$polygon_7 = array(“19.920422 75.9375″, “17.226398 76.327515″, “17.951954 73.57544″, “20.44338 73.740235″, “19.920422 75.9375″); // ok
$polygon_8 = array(“19.008892 75.563964″, “15.434156 76.744995″, “17.575303 73.223877″, “19.534837 73.366699″, “19.008892 75.563964″); // ok
$polygon_9 = array(“19.112732 77.849121″, “15.54003 79.030151″, “17.680008 75.509034″, “19.638343 75.651856″, “19.112732 77.849121″); // ok
echo ” polygon_1 ” . $pointLocation->pointInPolygon($points[0], $polygon_1) . “”;
echo ” polygon_2 ” . $pointLocation->pointInPolygon($points[0], $polygon_2) . “”;
echo ” polygon_3 ” . $pointLocation->pointInPolygon($points[0], $polygon_3) . “”;
echo ” polygon_4 ” . $pointLocation->pointInPolygon($points[0], $polygon_4) . “”;
echo ” polygon_5 ” . $pointLocation->pointInPolygon($points[0], $polygon_5) . “”;
echo ” polygon_6 ” . $pointLocation->pointInPolygon($points[0], $polygon_6) . “”;
echo ” polygon_7 ” . $pointLocation->pointInPolygon($points[0], $polygon_7) . “”;
echo ” polygon_8 ” . $pointLocation->pointInPolygon($points[0], $polygon_8) . “”;
echo ” polygon_9 ” . $pointLocation->pointInPolygon($points[0], $polygon_9) . “”;
?>

Get Latitude and Longitude Coordinates of a Polygon – Google Maps API v3

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html>
<head>
<title>Get Latitude and Longitude Coordinates of a Polygon – Google Maps API v3</title>
<script type=”text/javascript” src=”https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false”></script&gt;
<script type=”text/javascript”>
var bermudaTriangle;
function initialize() {
var myLatLng = new google.maps.LatLng(18.353135, 73.850097);
var mapOptions = {
zoom: 7,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.RoadMap
};
var map = new google.maps.Map(document.getElementById(‘map-canvas’),
mapOptions);
var triangleCoords = [
new google.maps.LatLng(18.988116, 75.60791),
new google.maps.LatLng(16.279608, 75.997925),
new google.maps.LatLng(17.008859, 73.24585)
];
// Construct the polygon
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
draggable: true,
editable: true,
strokeColor: ‘#FF0000′,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: ‘#FF0000′,
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
google.maps.event.addListener(bermudaTriangle, “dragend”, getPolygonCoords);
google.maps.event.addListener(bermudaTriangle.getPath(), “insert_at”, getPolygonCoords);
google.maps.event.addListener(bermudaTriangle.getPath(), “remove_at”, getPolygonCoords);
google.maps.event.addListener(bermudaTriangle.getPath(), “set_at”, getPolygonCoords);
}
function getPolygonCoords() {
var len = bermudaTriangle.getPath().getLength();
var htmlStr = “”;
for (var i = 0; i < len; i++) {
htmlStr += bermudaTriangle.getPath().getAt(i).toUrlValue(6) + “<br>”;
}
document.getElementById(‘info’).innerHTML = htmlStr;
}
</script>
</head>
<body onload=”initialize()”>
<div><h2>Please drag and resize the polygon to select desired area </h2></div>
<div id=”map-canvas” style=”height: 600px; width: auto;”>
</div>
<div>Selected Polugon Co-ordinates are as below </div>
<div id=”info” style=”position: absolute; font-family: Arial; font-size: 14px;”>
</div>
</body>
</html>