// create a map
var map = $("#map").geomap({
center: [-71.0595678, 42.3604823],
zoom: 8
});
// append a red Point
var pt = {
type: "Point",
coordinates: [-71, 42]
};
map.geomap("append", pt);
// append a red LineString
var line = {
type: "LineString",
coordinates: [
[-71.5, 42],
[-72, 41.5]
]
};
map.geomap("append", line);
// append a red Polygon
var poly = {
type: "Polygon",
coordinates: [[
[-72.5, 41.7],
[-72.3, 41.3],
[-72.7, 41.3],
[-72.5, 41.7]
]]
};
map.geomap("append", poly);
// distance calculations between all red shapes
$(".rpt-2-rpt-distance").text($.geo.distance(pt, pt));
$(".rpt-2-line-distance").text($.geo.distance(pt, line));
$(".rpt-2-poly-distance").text($.geo.distance(pt, poly));
$(".line-2-rpt-distance").text($.geo.distance(line, pt));
$(".line-2-line-distance").text($.geo.distance(line, line));
$(".line-2-poly-distance").text($.geo.distance(line, poly));
$(".poly-2-rpt-distance").text($.geo.distance(poly, pt));
$(".poly-2-line-distance").text($.geo.distance(poly, line));
$(".poly-2-poly-distance").text($.geo.distance(poly, poly));
// contains relationships between all red shapes
$(".rpt-2-rpt-contains").text($.geo.contains(pt, pt));
$(".rpt-2-line-contains").text($.geo.contains(pt, line));
$(".rpt-2-poly-contains").text($.geo.contains(pt, poly));
$(".line-2-rpt-contains").text($.geo.contains(line, pt));
$(".line-2-line-contains").text($.geo.contains(line, line));
$(".line-2-poly-contains").text($.geo.contains(line, poly));
$(".poly-2-rpt-contains").text($.geo.contains(poly, pt));
$(".poly-2-line-contains").text($.geo.contains(poly, line));
$(".poly-2-poly-contains").text($.geo.contains(poly, poly));
// append a green Point inside the red Polygon
var gpt = {
type: "Point",
coordinates: [-72.5, 41.6]
};
map.geomap("append", gpt, {
color: "green"
});
// append a green LineString inside the red Polygon
var gline = {
type: "LineString",
coordinates: [
[-72.55, 41.5],
[-72.45, 41.5]
]
};
map.geomap("append", gline, {
color: "green",
strokeWidth: "3px"
});
// append a green Polygon completely inside the red Polygon
var gpoly = {
type: "Polygon",
coordinates: [[
[-72.55, 41.45],
[-72.5, 41.35],
[-72.65, 41.35],
[-72.55, 41.45]
]]
};
map.geomap("append", gpoly, {
color: "green",
strokeWidth: "3px"
});
// contains relationships between the red polygon & some green shapes
// these all return true because the red polygon completely contains all of them
$(".poly-2-gpt-contains").text($.geo.contains(poly, gpt));
$(".poly-2-gline-contains").text($.geo.contains(poly, gline));
$(".poly-2-gpoly-contains").text($.geo.contains(poly, gpoly));
// append a blue Polygon partially inside the red Polygon
var bpoly = {
type: "Polygon",
coordinates: [[
[-72.35, 41.45],
[-72.25, 41.35],
[-72.45, 41.35],
[-72.35, 41.45]
]]
};
map.geomap("append", bpoly, {
color: "blue",
strokeWidth: "3px"
});
// contains relationships between the red polygon the blue polygon
// this returns false because the red polygon does not completely contain the blue one
$(".poly-2-bpoly-contains").text($.geo.contains(poly, bpoly));
// centroid calculations for all red shapes and the green and blue polygons
// the centroid function returns a full GeoJSON Point object
// but we will only show the coordinates array on the page
$(".rpt-centroid").text($.geo.centroid(pt).coordinates.join(", "));
$(".rline-centroid").text($.geo.centroid(line).coordinates.join(", "));
$(".rpoly-centroid").text($.geo.centroid(poly).coordinates.join(", "));
$(".gpoly-centroid").text($.geo.centroid(gpoly).coordinates.join(", "));
$(".bpoly-centroid").text($.geo.centroid(bpoly).coordinates.join(", "));
<div>
<div id="map">
</div>
<div class="info">
<h1>
geometry functions</h1>
<p>This example appends a few Points, LineStrings, and Polygons. It then calculates some relationships and info about the shapes using the geometry functions in the $.geo namespace.</p>
<div class="calc">
<table>
<tr>
<td></td>
<th>distance</th>
</tr>
<tr>
<th><span class="red">pt</span>, <span class="red">pt</span></th>
<td class="rpt-2-rpt-distance"></td>
</tr>
<tr>
<th><span class="red">pt</span>, <span class="red">line</span></th>
<td class="rpt-2-line-distance"></td>
</tr>
<tr>
<th><span class="red">pt</span>, <span class="red">poly</span></th>
<td class="rpt-2-poly-distance"></td>
</tr>
<tr>
<th><span class="red">line</span>, <span class="red">pt</span></th>
<td class="line-2-rpt-distance"></td>
</tr>
<tr>
<th><span class="red">line</span>, <span class="red">line</span></th>
<td class="line-2-line-distance"></td>
</tr>
<tr>
<th><span class="red">line</span>, <span class="red">poly</span></th>
<td class="line-2-poly-distance"></td>
</tr>
<tr>
<th><span class="red">poly</span>, <span class="red">pt</span></th>
<td class="poly-2-rpt-distance"></td>
</tr>
<tr>
<th><span class="red">poly</span>, <span class="red">line</span></th>
<td class="poly-2-line-distance"></td>
</tr>
<tr>
<th><span class="red">poly</span>, <span class="red">poly</span></th>
<td class="poly-2-poly-distance"></td>
</tr>
</table>
</div>
<div class="calc">
<table>
<tr>
<td></td>
<th>contains</th>
</tr>
<tr>
<th><span class="red">pt</span>, <span class="red">pt</span></th>
<td class="rpt-2-rpt-contains"></td>
</tr>
<tr>
<th><span class="red">pt</span>, <span class="red">line</span></th>
<td class="rpt-2-line-contains"></td>
</tr>
<tr>
<th><span class="red">pt</span>, <span class="red">poly</span></th>
<td class="rpt-2-poly-contains"></td>
</tr>
<tr>
<th><span class="red">line</span>, <span class="red">pt</span></th>
<td class="line-2-rpt-contains"></td>
</tr>
<tr>
<th><span class="red">line</span>, <span class="red">line</span></th>
<td class="line-2-line-contains"></td>
</tr>
<tr>
<th><span class="red">line</span>, <span class="red">poly</span></th>
<td class="line-2-poly-contains"></td>
</tr>
<tr>
<th><span class="red">poly</span>, <span class="red">pt</span></th>
<td class="poly-2-rpt-contains"></td>
</tr>
<tr>
<th><span class="red">poly</span>, <span class="red">line</span></th>
<td class="poly-2-line-contains"></td>
</tr>
<tr>
<th><span class="red">poly</span>, <span class="red">poly</span></th>
<td class="poly-2-poly-contains"></td>
</tr>
</table>
</div>
<div class="calc">
<table>
<tr>
<td></td>
<th>contains</th>
</tr>
<tr>
<th><span class="red">poly</span>, <span class="green">pt</span></th>
<td class="poly-2-gpt-contains"></td>
</tr>
<tr>
<th><span class="red">poly</span>, <span class="green">line</span></th>
<td class="poly-2-gline-contains"></td>
</tr>
<tr>
<th><span class="red">poly</span>, <span class="green">poly</span></th>
<td class="poly-2-gpoly-contains"></td>
</tr>
<tr>
<th><span class="red">poly</span>, <span class="blue">poly</span></th>
<td class="poly-2-bpoly-contains"></td>
</tr>
</table>
</div>
<div class="calc">
<table>
<tr>
<td></td>
<th>centroid</th>
</tr>
<tr>
<th><span class="red">pt</span></th>
<td class="rpt-centroid"></td>
</tr>
<tr>
<th><span class="red">line</span></th>
<td class="rline-centroid"></td>
</tr>
<tr>
<th><span class="red">poly</span></th>
<td class="rpoly-centroid"></td>
</tr>
<tr>
<th><span class="green">poly</span></th>
<td class="gpoly-centroid"></td>
</tr>
<tr>
<th><span class="blue">poly</span></th>
<td class="bpoly-centroid"></td>
</tr>
</table>
</div>
</div>
</div>
html
{
font:13px/1.231 Calibri,Arial,sans-serif; *font-size:small;
}
.info
{
background: #fff;
border-radius: 8px;
box-shadow: -4px 4px #444;
opacity: .8;
padding: 8px;
width: 95%;
}
#map
{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.calc
{
display: inline-block;
vertical-align: top;
}
td
{
max-width: 96px;
overflow: hidden;
text-overflow: ellipsis;
}
.red { color: #c00; }
.green { color: #0c0; }
.blue { color: #00c; }
External resources loaded into this fiddle: