My Question (UPDATED): How do I get my keyword to change in the API URL Search Query based off of an AJAX Call (having a scope problem here) ?
I connected a leaflet map to an an API to plot Wikipedia articles with geocoordinates. An example URL looks like: http://api.infochimps.com/encyclopedic/wikipedia/dbpedia/wikipedia_articles/search?g.radius=10000&g.latitude=30.3&g.longitude=-97.75&f.q=park&apikey=api_test-W1cipwpcdu9Cbd9pmm8D4Cjc469
So far so good. But I am stuck on how to implement an AJAX call that would allow the user to search for a new query term and reload the map. When I click the search box, the keyword alerts that the keyword is the text in the search box. But the map does not update based on the new keyword.
So I have as a JS script:
var map;
var pointsLayer;
var markerMap = {};
var keyword; //instantiating keyword for global scope
$(document).ready(function(){
map = new L.Map('mapContainer');
var url = 'http://{s}.tiles.mapbox.com/v3/mapbox.mapbox-streets/{z}/{x}/{y}.png';
var copyright = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade';
var tileLayer = new L.TileLayer(url, {attribution:copyright});
//var startPosition = new L.LatLng(42.33143, -83.04575);//detroit
var startPosition = new L.LatLng(41.883333, -87.633333);//chicago
//var startPosition = new L.LatLng(40.7143528, -74.0059731);//new york
map.on('load', function(){
keyword = 'history'; //setting keyword to history on first load
requestUpdatedPoints();
keyword = ''; //clearing keyword after first load
});
map.setView(startPosition, 13).addLayer(tileLayer);
map.on('moveend', function(){
requestUpdatedPoints();
});
//////////////
/// WRONG ADDITION OF ADDING KEYWORD SEARCH?
//////////////
$('a#submitSearch').on('click', function(e, keyword){
e.preventDefault();
//keyword = '';
keyword = $('input#keyword').val(); //setting keyword to whatever is in the search box
alert(keyword); //did it set it?
requestUpdatedPoints(keyword); //send in new AJAX call with new keyword
location.reload();
});
});
function requestUpdatedPoints(keyword){
$.ajax({
type: 'GET',
url: 'http://api.infochimps.com/encyclopedic/wikipedia/dbpedia/wikipedia_articles/search?g.radius=100000&g.latitude=41.883333&g.longitude=-87.633333&f.q='+this.keyword+'&apikey=api_test-W1cipwpcdu9Cbd9pmm8D4Cjc469',
dataType: 'jsonp',
//data: JSON.stringify(data),
contentType: 'application/json; charset=utf-8',
success: function(result){
for( var i=0; i<result.results.length - 1; i++ ){
console.log("adding " + result.results[i].wikipedia_id + " to the map")
var marker = L.marker([result.results[i].coordinates[1], result.results[i].coordinates[0]]).addTo(map);
marker.bindPopup('<a href="'+result.results[i].url+'" target="_blank">'+result.results[i].wikipedia_id+'</a>');
}
},
error: function(){
alert('check your error log.');
}
});
}
the HTML is:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
<script type="text/javascript" src="./map.js"></script>
</head>
<body>
<h1>WikiMap</h1>
<div id="mapContainer"></div>
<div id="infoContainer">
<div id="search">
<form id="searchForm">
<label>Keyword:</label>
<input type="text" id="keyword" name="keyword" placeholder="search by keyword"/>
<a id="submitSearch" href="#">search</a>
</form>
</div>
</div>
</body>
</html>
My Question (UPDATED): How do I get my keyword to change in the API URL Search Query based off of an AJAX Call (having a scope problem here) ?
I’ve finally figured that my layout is poor for accomplishing what I want to get done. Even if the keyword is updating, the map.on() load function is reverting everything back to the beginning. I’ve decided to use Backbone.js to help me organize my data flows.