I'm trying to find the number of POIs inside a particular area using a map API. It's been recommended that I use either Nokia or Yelp APIs but I'm struggling to work out how to start on this project.
The actual type of the Point of interest is unimportant, all are relevant in this case. If anyone has any experience of these map APIs and would know what I should look at, or examples that would be useful for me to start, I would be extremely grateful!
Thanks
The first place to look would be the developer documentation site of the relevant API. For the Nokia APIs you would be looking at the JavaScript documentation or the RESTful Places API, for Yelp try the links under http://www.yelp.com/developers/ (disclaimer - I don't personally use Yelp)
There are numerous examples using the Nokia Place apis held within the API explorer to play with and see the results on screen.
Here are a couple of useful examples to get you started
Nearby places REST response Example
Places to eat JavaScript Example
Both the Nokia Places API and the Yelp API are local search APIs - in other words they always answer the question "Where can I find an X near Y?", so finding total number of POIs in their database is not a realistic task (since many POIs will be considered irrelevant to a search location, what you could do is find the density of POIs within a specific location.
The code below will initially show bookshops in central Berlin, but if you change the Focus of the map it will find bookshops in other towns as well. You need to obtain your own free app id and token to get it to work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Example from Nokia Maps API Playground, for more information visit http://api.maps.nokia.com
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Nokia Maps API Example: Search by category</title>
<meta name="description" content="Search by category"/>
<meta name="keywords" content="search, services, places, category"/>
<!-- For scaling content for mobile devices, setting the viewport to the width of the device-->
<meta name=viewport content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<!-- By default we add ?with=all to load every package available, it's better to change this parameter to your use case. Options ?with=maps|positioning|places|placesdata|directions|datarendering|all -->
<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.3/jsl.js?with=all"></script>
<!-- JavaScript for example container (NoteContainer & Logger) -->
<style type="text/css">
html {
overflow:hidden;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
position: absolute;
}
#mapContainer {
width: 80%;
height: 80%;
left: 0;
top: 0;
position: absolute;
}
#progress {
width: 80%;
height: 10%;
left: 0;
top: 80%;
position: absolute;
}
#buttons {
width: 80%;
height: 10%;
left: 0;
top: 90%;
position: absolute;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<div id="progress"></div>
<div id="buttons">
<a onClick="searchByCategory( map.center, 'bookshop' );return false;" href="#">Find Bookshops</a>
</div>
<script type="text/javascript" id="exampleJsSource">
/* Set authentication token and appid
* WARNING: this is a demo-only key
* please register on http://api.developer.nokia.com/
* and obtain your own developer's API key
*/
nokia.Settings.set("appId", "YOUR APP_ID");
nokia.Settings.set("authenticationToken", "YOUR TOKEN");
// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapContainer");
// Create a map inside the map container DOM node
var map = new nokia.maps.map.Display(mapContainer, {
// Initial center and zoom level of the map
center: [52.51, 13.4],
zoomLevel: 10,
components: [
new nokia.maps.map.component.Behavior()
]
});
var searchManager = nokia.places.search.manager,
resultSet;
var searchCat;
var maxDistance = 0;
// Function for receiving search results from places search and process them
var processResults = function (data, requestStatus, requestId) {
var i, len, locations, marker;
if (requestStatus == "OK") {
// The function findPlaces() and reverseGeoCode() of return results in slightly different formats
locations = data.results ? data.results.items : [data.location];
// We check that at least one location has been found
if (locations.length > 0) {
// Remove results from previous search from the map
if (resultSet) map.objects.remove(resultSet);
// Convert all found locations into a set of markers
resultSet = new nokia.maps.map.Container();
for (i = 0, len = locations.length; i < len; i++) {
marker = new nokia.maps.map.StandardMarker(locations[i].position, { text: i+1 });
resultSet.objects.add(marker);
if (locations[i].distance > maxDistance){
maxDistance = locations[i].distance;
}
}
// Next we add the marker(s) to the map's object collection so they will be rendered onto the map
map.objects.add(resultSet);
// We zoom the map to a view that encapsulates all the markers into map's viewport
map.zoomTo(resultSet.getBoundingBox(), false);
progressUiElt.innerHTML = locations.length + " places found in the '" + searchCat + "' category within " + maxDistance + "m of "+ data.search.location.address.city ;
} else {
alert("Your search produced no results!");
}
} else {
alert("The search request failed");
}
};
// Binding of DOM elements to several variables so we can install event handlers.
var progressUiElt = document.getElementById("progress");
searchByCategory = function(searchCenter , category){
// Make a place search request
searchCat = category;
progressUiElt.innerHTML = "Looking for places in the '" + category + "' category...'";
searchManager.findPlacesByCategory({
category: category,
onComplete: processResults,
searchCenter: searchCenter,
limit: 100,
});
}
// Search for Bookshops in Berlin
searchByCategory( new nokia.maps.geo.Coordinate(52.51, 13.4), "bookshop" );
</script>
</body>
</html>
So you can see that there are over 100 bookshops in Berlin, but only 37 in Potsdam for example.
Related
I'm trying to read data from the datastore of my Google App Engine Application, populate the google charts Datatable with it then visualize the whole thing into a graph using the source code from the google charts example which uses Javascript code embedded on the web page.
My issue is with fetching the data. I thought of two ways of doing this: either run the query directly inside the javascript code or run the query from the python code , send the results of that query as a template value to the html code, filter it to get the values I'm interested in and somehow passing the whole thing to the javascript code then diplay the data (looks more complicated). I've tried the first option but it doesn't seem to work. Since i wasn't sure what the URL of my datastore was, I though it was the same as the server which uses it so I passed the URL of my appengine application as a parameter to the query function. I tried to run an SQL query on this but I got an error.
Below are the corresponding JS code (alone) and the whole HTML code
function drawVisualization() {
var query = new google.visualization.Query('http://davidfirstapp.appspot.com');
query.setQuery('SELECT ac_current1, ac_voltage1 ORDER BY ac_current1 LIMIT 10');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
visualization = new google.visualization.LineChart(document.getElementById('visualization'));
visualization.draw(data, {legend: 'bottom'});
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['linechart']});
</script>
<script type="text/javascript">
var visualization;
function drawVisualization() {
var query = new google.visualization.Query('http://davidfirstapp.appspot.com');
query.setQuery('SELECT ac_current1, ac_voltage1 ORDER BY ac_current1 LIMIT 10');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
visualization = new google.visualization.LineChart(document.getElementById('visualization'));
visualization.draw(data, {legend: 'bottom'});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="height: 400px; width: 400px;"></div>
</body>
</html>
You cant query your own webpage and somehow expect it to connect to the datastore. Your webpage contains your own html output that you defined. Read more about appengine / web applications and how the datastore works.
You need to do the datastore query from the frontend, not the browsers js. Build a table and pass it to the browser where it builds the datatable and chart.
We have implemented google +1 buttons on our site and they have served reliably for some time. However we recently noticed that the buttons are not serving reliably. We rarely see them appear in their designated spaces.
For example on this page: Sample Page : you'll see a gray box of social buttons to left of the page. In it, there is SUPPOSED to be a Google +1 button.
We've requested the button with this code:
<div id="social-google" class="social">
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<g:plusone size="medium"></g:plusone>
</div>
We've also tried this code:
<div id="social-google" class="social">
<!-- Place this tag where you want the share button to render. -->
<div class="g-plus" data-action="share" data-size="small" data-annotation="bubble"></div>
<!-- Place this tag after the last share tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
Occasionally we'll see a Google +1 button render but, more often than not, the space reserved for the button is apparently blank. When you examine things with firebug, you see that Google HAS attempted to render a button, but for some reason it has placed the button far above and left of the page boundaries.
Here is the top of the html Google generates for the button:
<div id="___plusone_0" style="position: absolute; width: 450px; left: -10000px;">
<iframe id="I0_1377554650466" width="100%" scrolling="no" frameborder="0" hspace="0 marginheight="0" marginwidth="0" style="position:absolute;top:-10000px;width:450px;margin:0px;border-style:none" tabindex="0" vspace="0" name="I0_1377554650466" src="https://apis.google.com/_/+1/fastbutton?bsv=o&usegapi=1&size=medium&hl=en-US&origin=http%3A%2F%2Fwww.comicbookresources.com&url=http%3A%2F%2Fwww.comicbookresources.com%2F%3Fpage%3Darticle%26id%3D47537&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps- ...
As you can see Google gave its generated ___plusone_0 div a left position of -10000px and gave the inner iFrame a top position of -10000px. So the button is there. It's just floating out in space. If I manipulate theses position settings (to 0px) the button becomes visible in its appropriate spot.
Any idea why this would happen? Any idea how we can fix this?
You can try adding the following CSS declaration to your stylesheet:
#___plusone_0, #___plusone_0 iframe {
position:static !important;
}
This is a hackaround, so don't depend on it in long term.
Based on an old thread in Drupal Issues.
During the last few days I'm suffering from this problem too. I have a page building app. One of the widgets is google plus: users can enter a url, and the app generates a button. (So there can be more, than 1 button on the page.) Then user saves the page and can see it on Facebook.
Recommendations and observations...
Double check the protocol of google api script. For example, if your website is on https and you are trying to load http://apis.google.com/js/plusone.js, your buttons will probably fail to render.
When I tested this issue on my server, I occasionally opened the app in 2 browser tabs at the same time. Google buttons didn't appear in the first tab, but they did in the second one!
My app requires user to be authorized on Facebook. When I opened the app without authorization, the buttons were shown as expected. But when I logged in and refreshed the page - buttons disappeared.
When I opened the page on Facebook, buttons didn't appear, regardless of whether I was logged in or not.
I beg your pardon, if you think these notices have no sense, but they may save someone's time in future.
Workaround
Suppose, you're parsing the following code:
<!-- google button will be added into this div -->
<div class="googlePlus" data-href="http://google.com"></div>
jQuery function, which parse all .googlePlus divs.
$('.googlePlus').each(function () {
var $googleDiv = $(this);
// check, if button is already parsed
if (!$googleDiv.children().length) {
// add temporary id to the parent div
var $id = 'googlePlus-' + new Date().getTime();
$div.attr({
'id': $id
});
// create, add and render btn (IE compatible method)
var gPlusOne = document.createElement('g:plusone');
gPlusOne.setAttribute('href', $googleDiv.attr('data-href'));
document.getElementById($id).appendChild(gPlusOne);
gapi.plusone.go($id);
// function, correcting css styles
if (!$.isFunction($.fn.fixGooglePlus)) {
$.fn.fixGooglePlus = function () {
$(this).children('div').children('iframe').addBack().css({
position: 'static',
width: 106,
height: 24
});
}
}
// run function, until css is fixed
var $timer = setInterval(function () {
$googleDiv.fixGooglePlus();
if ($googleDiv.find('iframe').css('position') == 'static') {
clearInterval($timer);
$googleDiv.removeAttr('id');
}
}, 100);
} // button hasn't been parsed
});
Put the button code in a a new HTML file and put that file in an iframe. Compared to #U-D13's answer, it's less susceptible to changes by Google.
I`m using panoramio api to show some pictures about a destination. Unfortuanatly for some destinations they dont have any images.
How could i test if panoramio doesnt have any results so i can display something else.
I tried replacing it usig livequery:
$('#div_attr_ex_photo').find('.panoramio-wapi-empty-img').livequery(function(){
//replace panoramio with something
})
This work, but only if i click, or press a button ( probably when any event occures ). Can`t imagine why...
Any other method that does the job is welcome.
It is very simple just go to panoramio website and then open World Map from panoramio website.Then go to specified location whichs latitude and longitude required.
Then you found latitude and longitude in address bar for example in this address.
http://www.panoramio.com/map#lt=32.739485&ln=70.491211&z=9&k=1&a=1&tab=1&pl=all
lt=32.739485 =>latitude
ln=70.491211 =>longitude
this Panoramio JavaScript API widget create a bounding box around a lat/long pair and then returning all photos with in those bounds.
Another type of Panoramio JavaScript API widget in which you can also change background color with example and code is here.
It does not show in composing mood.It show after publishing.
<div dir="ltr" style="text-align: center;" trbidi="on">
<script src="https://ssl.panoramio.com/wapi/wapi.js?v=1&hl=en"></script>
<div id="wapiblock" style="float: right; margin: 10px 15px"></div>
<script type="text/javascript">
var myRequest = {
'tag': 'kahna',
'rect': {'sw': {'lat': -30, 'lng': 10.5}, 'ne': {'lat': 50.5, 'lng': 30}}
};
var myOptions = {
'width': 300,
'height': 200
};
var wapiblock = document.getElementById('wapiblock');
var photo_widget = new panoramio.PhotoWidget('wapiblock', myRequest, myOptions);
photo_widget.setPosition(0);
</script>
</div>
wkhtml doesn´t repeat table elements "th" on every page like it should. So I thought it could be possible to simply use the --header-html option and add the table headers manually this way. But I don´t want them on the first page, since there are table headers already, plus some other first page stuff... I found some JS solution, but its too much complicated for me, since I know just the very basics of JS... Any ideas?
Did you try the JS solution? It's actually not that complicated. I just did a test with a long html file that contained a table that is split into many different pages and I managed to remove the headers from page 1 and 3 using this header file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
function subst() {
var vars={};
var x=document.location.search.substring(1).split('&');
for (var i in x) {var z=x[i].split('=',2);vars[z[0]] = unescape(z[1]);}
var x=['frompage','topage','page','webpage','section','subsection','subsubsection'];
for (var i in x) {
var y = document.getElementsByClassName(x[i]);
for (var j=0; j<y.length; ++j) y[j].textContent = vars[x[i]];
if(vars['page'] == 1){ // If page is 1, set FakeHeaders display to none
document.getElementById("FakeHeaders").style.display = 'none';
}
if(vars['page'] == 3) { // If page is 3, set FakeHeaders display to none
document.getElementById("FakeHeaders").style.display = 'none';
}
}
}
</script>
</head>
<body style="border:0;margin:0;" onload="subst()">
<table style="border-bottom: 1px solid pink; width: 100%; margin-bottom:5px;" id="FakeHeaders">
<tr>
<th>Your awesome table column header 1</th>
<th>Column 2</th>
<th style="text-align:right">
Page <span class="page"></span>/<span class="topage"></span>
</th>
</tr>
</table>
</body>
</html>
They key points to not there is that the table "headers" are contained in a table that has the ID "FakeHeaders". The javascript function subst() is run when the body is loaded and during the function it checks if the current page is 1 or if the current page is 3 and if it is, the FakeHeaders is set invisible. You will need to play with the margins and CSS to get it to look like you want but this Should work.
This is a known problem with wkhtmltopdf and most likely it won't be fixed any time soon, see issue 566 in the issue tracker. I see the JavaScript option as the only usable workaround, but you can try playing around with divs or manually splitting the tables if your input html, style and page sizes/margins are very predictable - but be warned, it will be really annoying.
If you can split the first page alone as a separate html, you can do this by using 'cover' in WKHTMLTOPDF.
PDFKit.new(url, :header_html => header_url, :cover => cover_url).
I faced similar problem in which I had used WKHTMLTOPDF header/footer and I wanted to remove them from the cover page. The issue was that the maximum height of header/footer was still appearing on all pages including the cover page.
The solution that clicked my mind and saved the day was that I generated two WKHTMLTOPDF files, one with header/footer on all pages and the other one without any header/footer. I then picked cover page from WKHTMLTOPDF generated file without header/footer and rest of the pages from the other WKHTMLTOPDF generated file with header/footer on all pages. I used PDF Merger library in PHP to merge selected pages of two WKHTMLTOPDF generated 'PDF' files to generate single PDF file with cover page and header/footer on rest of the pages.
<script type="text/javascript">
var pdfInfo = {};
var x = document.location.search.substring(1).split('&');
for (var i in x) { var z = x[i].split('=',2); pdfInfo[z[0]] = unescape(z[1]); }
function getPdfInfo() {
var page = pdfInfo.page || 1;
if(page != 1) {
document.getElementById('pHeader').style.display = 'none';
}
}
getPdfInfo();
</script>
For some reason, Nenotlep's answer didn't worked for me. It removed only page number..
So I created a class with a display: none; and simply added it. It worked this way.
function pagination() {
var vars = {};
var x = document.location.search.substring(1).split('&');
for (var i in x) {
var z = x[i].split('=', 2);
vars[z[0]] = unescape(z[1]);
}
var x = ['frompage', 'topage', 'page', 'webpage', 'section', 'subsection', 'subsubsection'];
for (var i in x) {
var y = document.getElementsByClassName(x[i]);
for (var j = 0; j < y.length; ++j) y[j].textContent = vars[x[i]];
if (vars['page'] == 1) {
var element = document.getElementById("pager");
element.classList.add("pager-hidden");
}
}
}
.pager {
font-size: 0.09375in;
padding-right: 1.00003in;
text-align: right;
letter-spacing: 0.01042in;
padding-bottom: 0.37501in;
}
.pager.pager-hidden {
display: none;
}
<body onload="pagination()">
<div class="pager" id="pager">
<div class="pager-pages">Page <span class="page"></span> / <span class="topage"></span></div>
</div>
</body>
The final goal is to display a few kml overlays on one map and set the transparency value by clicking on a control button for each kml layer (depending on how much layers there are).
My first idea was changing opacity/transparency directly by the div layer.. but I can't find any way to address the div where the kml layer is shown in the map.
Does someone know a way to address the div where the KML is inserted by the KmlLayer(..)?
Now I'm trying to find a way to do it via the KmlLayer Object..
but so far no luck either..
Any ideas how to handle this?
The Code is:
(function() {
window.onload = function(){
var myLatlng = new google.maps.LatLng(48.1497, 11.5795);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var georssLayer = new google.maps.KmlLayer('somemap.kml',({'suppressInfoWindows': true}));
georssLayer.setMap(map);
}
})();
To the best of my knowledge it is not possible via standard google api but you can do this using jquery or some other library. KML images are just part of the DOM so if you can find the nodes you can manipulate their properties.
If you have multiple KML files you will probably need to name your images so that the name reflects which KML image belongs to. so if you have KML1 prepend KML1 to all your image names in that KML and search for that string using jQuery selector.
Here is an example using jquery which targets all images (for searches on substrings see http://api.jquery.com/attribute-contains-selector/):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: KmlLayer KML</title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".b_opacity").click(function(){
//this will find all the images in the map canvas container. Normally you would want to target specific images by the value of src
$("#map_canvas").find("img").css("opacity","0.4")
})
})
function initialize() {
var chicago = new google.maps.LatLng(41.875696,-87.624207);
var myOptions = {
zoom: 11,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var ctaLayer = new google.maps.KmlLayer('http://code.google.com/apis/kml/documentation/KML_Samples.kml');
ctaLayer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 600px;height: 600px;"></div>
<input type="button" value="dim the lights" class="b_opacity">
</body>
</html>
NOTE: please bear in mind that the css property opacity does not work in IE you have to use filter:alpha(opacity=40) for IE or you can use jQuery .fade() method.