Piperpal Location JavaScript API provides a simple way to retrieve location information based on geographical coordinates and to push new location data to the server. This tutorial will guide you through the process of making requests to the API for both reading (pull) and writing (push) location data.
Endpoint:
arduino
https://api.piperpal.com/location/json.php
Query Parameters:
service (required): Specifies the type of location/service you are searching for.
glat (required): Latitude of the location.
glon (required): Longitude of the location.
Example Usage:
html
<script type="text/javascript" src="https://api.piperpal.com/location/json.php?service=Books&glat=37.4375596&glon=-122.11922789999998"></script>
<script language="JavaScript">
var obj = JSON.parse(locations);
for (i = 0; i < obj.locations.length; i++) {
// Process and display location data as needed
}
</script>
Endpoint:
arduino
https://api.piperpal.com/location/push.php
Query Parameters:
name (required): Name of the location.
location (required): URL of the location.
service (required): Type of service associated with the location.
glat (required): Latitude of the location.
glon (required): Longitude of the location.
paid (optional): Amount paid for the service.
Example Usage:
html
<script type="text/javascript" src="https://api.piperpal.com/location/push.php?name=Google&location=http://www.google.com/&service=Books&glat=37.4375596&glon=-122.11922789999998&paid=50"></script>
Notes:
For the pull API, include the script tag with the API URL and necessary query parameters. The response will be available as a JavaScript object named locations.
For the push API, include the script tag with the API URL and required query parameters. This will push the specified location data to the server.
Ensure that you replace placeholder values with your actual data when making API requests. The pull API is designed to retrieve location information, while the push API is used to add new locations to the Piperpal database.
In this tutorial, we'll guide you through creating an HTML document with embedded JavaScript to interact with Piperpal's Location API. This example will focus on a simple web page that allows users to submit location data and retrieve nearby locations using the API.
Create a new HTML file (e.g., index.html) and set up the basic structure:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Piperpal Location API Demo</title>
<!-- Include necessary stylesheets or link to external styles -->
</head>
<body>
<!-- Content will go here -->
<!-- Include necessary scripts, such as jQuery and Piperpal's API script -->
</body>
</html>
Include necessary external scripts and stylesheets in the
section of your HTML file. For example, include jQuery and Piperpal's API script:
html
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Include Piperpal's Location API Script -->
<script src="https://api.piperpal.com/location/json.php"></script>
<!-- Include any additional stylesheets -->
<link rel="stylesheet" href="styles.css">
Create a form that allows users to submit location data. Include fields for name, service, location, and any other relevant information:
html
<form id="locationForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="service">Service:</label>
<select id="service" name="service">
<option value="Restaurant">Restaurant</option>
<!-- Add other service options -->
</select>
<label for="location">Location:</label>
<input type="text" id="location" name="location" required>
<!-- Add more fields as needed -->
<button type="button" onclick="submitLocation()">Submit Location</button>
</form>
Write JavaScript code to handle location submission. Define the submitLocation function that will be called when the user clicks the submit button:
html
<script language="JavaScript">
function submitLocation() {
// Get values from form fields
const name = document.getElementById('name').value;
const service = document.getElementById('service').value;
const location = document.getElementById('location').value;
// Use Piperpal's API endpoint to push location data
const apiUrl = `https://api.piperpal.com/location/push.php?name=${name}&service=${service}&location=${location}`;
// Make an AJAX request to submit data
$.get(apiUrl, function(response) {
// Handle the response if needed
console.log(response);
});
}
</script>
Create a section on the page to display nearby locations retrieved from Piperpal's API:
html
<div id="nearbyLocations">
<!-- Nearby locations will be displayed here -->
</div>
Write JavaScript code to fetch and display nearby locations:
html
<script language="JavaScript">
// Use Piperpal's API endpoint to pull nearby locations
const readApiUrl = 'https://api.piperpal.com/location/json.php?service=Search&glat=37.4375596&glon=-122.11922789999998';
// Make an AJAX request to fetch data
$.get(readApiUrl, function(response) {
// Handle the response and display nearby locations
const nearbyLocations = response.locations;
const nearbyLocationsDiv = document.getElementById('nearbyLocations');
nearbyLocations.forEach(location => {
const locationInfo = `<p><strong>${location.name}</strong> (${location.distance} away) - ${location.service}</p>`;
nearbyLocationsDiv.innerHTML += locationInfo;
});
});
</script>
Save your HTML file and open it in a web browser. Test the location submission form and check if nearby locations are displayed.
Congratulations! You've created a simple web page that interacts with Piperpal's Location API. You can customize and expand upon this example based on your specific needs.
Example
<script type="text/javascript" src="https://api.piperpal.com/location/json.php?service=Search&glat=37.4375596&glon=-122.11922789999998"></script>
<script language="JavaScript">
var obj = JSON.parse(locations);
for (i=0; i < obj.locations.length; i++) {
document.write("<h4>" + obj.locations[i].name + "</h4><h6><a href='" + obj.locations[i].location + "'>" + obj.locations[i].location + "</a> (" + obj.locations[i].distance + ")</h6><p>" + " " + obj.locations[i].service + " " + "</p>");
document.write("<p>" + obj.locations[i].distance + "</p><form method='GET' action='/'><input type='text' name='query' placeholder='' value='" + obj.locations[i].name + "'/><input type='hidden' name='glat' value='" + obj.locations[i].glat + "' /><input type='hidden' name='glon' value='" + obj.locations[i].glon + "'/><span id='geopher'></span><select name='service'><option selected value='" + obj.locations[i].service + "'>" + obj.locations[i].service + "</option></select><input type='submit' value='Search' /></p>");
}
</script>
Example <script type="text/javascript" src="https://api.piperpal.com/location/push.php?name=Google&location=http://www.google.com/&service=Books&glat=37.4375596&glon=-122.11922789999998&paid=50"></script>
Example https://api.piperpal.com/location/json.php?service=Books&glat=37.4375596&glon=-122.11922789999998
Example https://api.piperpal.com/location/push.php?name=Google&location=http://www.google.com/&service=Books&glat=37.4375596&glon=-122.11922789999998&paid=50
© 2023 Aamot Engineering