Skip to content

Instantly share code, notes, and snippets.

@rutgervanwaveren
Created November 29, 2012 10:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rutgervanwaveren/4168076 to your computer and use it in GitHub Desktop.
Save rutgervanwaveren/4168076 to your computer and use it in GitHub Desktop.
Silk API examples (PHP)
<?php
//
// This sample script performs a query on world.silkapp.com and outputs the results on a map
// Live example on: http://silktool.com/map-example.php
//
// function to post an http request
function doPost ($url, $payload){
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_HTTPHEADER, array("Content-Type: text/plain"));
curl_setopt($ch, CURLOPT_POSTFIELDS, $payload);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$output = curl_exec($ch);
curl_close($ch);
return new SimpleXMLElement($output);
}
// function to post a query to the Silk API
function silkQuery($querystring,$site){ // does a query
$url = 'http://api.silkapp.com/v1.4.0/site/uri/'.$site.'/query';
return doPost($url,$querystring);
}
// query to get the capitals with less that 100,000 inhabitants
$querystring = 'from all documents where
http://world.silkapp.com/tag/Population
and (document has type http://world.silkapp.com/tag/City)
and http://world.silkapp.com/tag/Population greater than "0" and http://world.silkapp.com/tag/Population less than "100000"
select
document name
and http://world.silkapp.com/tag/Population
order ascending by document name
slice from 0 to 499';
$site = "world.silkapp.com";
// documents is now a simpleXMLElement object with the results of the query
$documents = silkQuery($querystring,$site);
$locations = "";
$locationarray = array();
foreach ($documents->tbody->tr as $row) { // loop through the results from the query
$name = $row->td->a;
$name = str_replace("'", "`", $name); // some names have an apostrophe which we replace here so it cannot break the JS array we create later
$dirtyJsonGeo = $row->td[0]->a['data-normalized-geo']; // get the data-normalized-geo attribute
preg_match("/{[^;]+}/", $dirtyJsonGeo, $json); // the data-normalized-geo attribute contains a JSON string that we get out with a regular expression
if (@$geo = json_decode($json[0])){ // check if the geo is actually there
$latlng = $geo->{"lat"} . ", " . $geo->{"lng"}; // make a lat lng pair
if (array_search($latlng, $locationarray)){ // look for duplicate values, so results that have the same location, we want to show them in the same infowindow on the map
$arrkey = array_search($latlng, $locationarray);
unset($locationarray[$arrkey]); // delete the original key in the array
$newkey = $arrkey . ", " . $name; // make new key by joining the values with commas
$locationarray[$newkey] = $latlng; // put the new element in the array
} else {
$locationarray[$name] = $latlng;
}
}
}
foreach ($locationarray as $key => $value) {
$locations .= "['" . $key ."', " . $value . "],";
}
$locations = substr($locations,0,-1); // trim the last comma
?>
<!DOCTYPE html>
<!-- We ♥ HTML5 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Silk Map Example</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<style>
body, input {
font-family: arial;
font-size: 14px;
}
#map {
position:absolute;
height:100%;
width: 100%;
top: 0;
left:0;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var locations = [<?= $locations ?>]; // location array
var mystyle = [ // custom styling map, optional
{
featureType: "road",
stylers: [
{ lightness: 25 },
{ gamma: 2 },
{ hue: "#b2ff00" },
{ visibility: "on" },
{ saturation: -56 }
]
},{
featureType: "road",
stylers: [
{ visibility: "simplified" },
{ lightness: -5 }
]
},{
featureType: "water",
stylers: [
{ visibility: "simplified" },
{ gamma: 0.62 }
]
},{
}
]
var lightmap = new google.maps.StyledMapType(mystyle, {name: "SilkMap"}); // variable for custom style
var marker, i;
var infowindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: new google.maps.LatLng(0,0),
mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'SilkMap'] },
panControl: false,
zoomControl: true,
zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL},
scaleControl: false,
mapTypeControl: false,
});
map.mapTypes.set('SilkMap', lightmap);
map.setMapTypeId('SilkMap');
var bounds = new google.maps.LatLngBounds();
var image = "http://silktool.com/images/circle3.png";
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map, icon: image });
bounds.extend(new google.maps.LatLng(locations[i][1], locations[i][2])); // automatically fit the map to the query results
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var infotext = '<a href="http://world.silkapp.com/page/'+locations[i][0]+'">'+locations[i][0]+'</a>';
infowindow.setContent(infotext);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds); // automatically fit the map to the query results
</script>
</body>
</html>
<?php
//
// This sample script performs a query on world.silkapp.com and outputs the results in a tree graph
// Live example on: http://silktool.com/tree.php
//
// function to post an http request
function doPost ($url, $payload){
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_HTTPHEADER, array("Content-Type: text/plain"));
curl_setopt($ch, CURLOPT_POSTFIELDS, $payload);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$output = curl_exec($ch);
curl_close($ch);
return new SimpleXMLElement($output);
}
// function to post a query to the Silk API
function silkQuery($querystring,$site){ // does a query
$url = 'http://api.silkapp.com/v1.4.0/site/uri/'.$site.'/query';
return doPost($url,$querystring);
}
// query to get the number of airports per country
$q = "from all documents where http://world.silkapp.com/tag/Airports and (document has type http://world.silkapp.com/tag/Country) select document name
and http://world.silkapp.com/tag/Airports order descending by http://world.silkapp.com/tag/Airports slice from 0 to 999";
$site = "world.silkapp.com";
// documents is now a simpleXMLElement object with the results of the query
$documents = silkQuery($q,$site);
$doclist = "";
// loop through the query results to make $doclist, a JS array that we feed the Javascript Tree visualization later
foreach ($documents->tbody->tr as $row) {
$name = $row->td[0]->a;
$name = str_replace("'", "`", $name[0]); // some country names have an apostrophe
$dirtycount = $row->td[1]->a['data-normalized-numeric']; // this atribute has two numbers the confidence this is a number followed by a comma and the actual count
$nr = explode(",",$dirtycount);
$count = $nr[1];
$doclist .= "['". $name ."','Number of Airports'," . $count ."," . $count ."],";
}
$doclist = substr($doclist,0,-1); // strip the last comma from the JS array
?>
<!DOCTYPE html>
<!-- We ♥ HTML5 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="alternate" type="text/xml+oembed" href="http://silktool.com/map.xml" title="Silk Map" />
<title>Silk Tree</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {
packages: ["treemap"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Country', 'Parent', 'Airports', 'Airportss'],
['Number of Airports', null, 0, 0], <?= $doclist ?> ]);
// Create and draw the visualization.
var tree = new google.visualization.TreeMap(document.getElementById('chart'));
tree.draw(data, {
minColor: 'rgb(224, 236, 244)',
midColor: 'rgb(158, 188, 218)',
maxColor: 'rgb(158, 188, 210)',
headerHeight: 20,
fontColor: 'black',
showScale: true
});
}
</script>
<style>
body, input {
font-family: arial;
font-size: 14px;
}
#map {
position:absolute;
height:100%;
width: 100%;
top: 0;
left:0;
}
input {
padding:5px;
}
input[type=text] {
width:300px;
border: 1px solid #ccc;
}
input[type=submit] {
background-color:green;
color:white;
border:none;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="chart" style="width: 900px; height: 600px;"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment