I have a Google Fusion Table containing a land parcels layer. Each parcel is assigned an ARN number. I am trying to create a search box where one can type in the ARN number and it will select and hopefully zoom to that parcel. I'm new to java script and am unsure as to why my search box is not working. The Fusion table has a 'geometry' column containing the spatial information and 'ARN' column is a 'number' field containing the ARN numbers. Here is my code.
function changeMapl0() {
var searchString = document.getElementById('search-string-l').value.replace(/'/g, "\\'");
layer.setOptions({
query: {
select: 'geometry',
from: 'tableID',
where: "'ARN' CONTAINS IGNORING CASE '" + searchString + "'"
}
});
}
<body>
<div style="margin-top: 10px;">
<label>Enter Roll Number</label><input type="text" id="search-string-l">
<input type="button" onclick="changeMapl0()" value="Search">
</div>
</body>
Any help would be appreciated.
Thanks;
Matt
You would probably want to do something like this, you will have to call a zoom2query function. You will want to probably want to calculate the lat and long of the centroid of parcel for zoom functionality, make sure to call you geometry column column on the map so you don't have the points.
function changeMap() {
var searchString = document.getElementById('search').value.replace("'", "\\'");
if(searchString == "") {
var query="SELECT 'Lat' FROM " + tableid;
}
else {
var query="SELECT 'Lat' FROM " + tableid + " WHERE 'PARCEL_ID' = '" + searchString + "'";
}
// layer.setQuery(query);
if(searchString == "") {
var query="SELECT 'Lat','Long' FROM " + tableid;
}
else {
var query="SELECT 'Lat','Long' FROM " + tableid + " WHERE 'ARN' = '" + searchString + "'";
}
zoom2query(query);
}
var infowindow = new google.maps.InfoWindow();
function zoom2query(query) {
// zoom and center map on query results
//set the query using the parameter
document.getElementById("query").innerHTML = query;
var queryText = encodeURIComponent(query);
var query = new google.visualization.Query('https://www.google.com/fusiontables/gvizdata?tq=' + queryText);
//set the callback function
query.send(zoomTo);
}
function zoomTo(response) {
if (!response) {
alert('no response');
return;
}
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
numRows = response.getDataTable().getNumberOfRows();
numCols = response.getDataTable().getNumberOfColumns();
var lat = response.getDataTable().getValue(0,0);
var lng = response.getDataTable().getValue(0,1);
var zoom_level = 19;
var location = new google.maps.LatLng(lat,lng);
map.setCenter(location);
map.setZoom(zoom_level);
}
Here is an example of what I have done, we have RP numbers but mine zooms to the parcel
https://googledrive.com/host/0B0J_A50xWBAqNHZqVlUxSkNUbWs/Shoshone.html
Related
I have created a chart with a subchart with the C3.js library. I used:
subchart:{
show:true
onbrush: function (domain) {
test = chart.internal.filterByXDomain(chart.data(),domain);
},
}
How can I generate a dinamic table with the values into the object "test"?
You can build the HTML and set it to one of the elements
...
onbrush: function (domain) {
var test = chart.internal.filterByXDomain(chart.data(), domain);
var table = '<table><tr><th>x</th><th>y</th></tr>';
test[0].values.forEach(function(e) {
table += '<tr><td>' + e.x + '</td><td>' + e.value + '</td></tr>'
})
table += '</table>';
document.getElementById("range").innerHTML = table;
}
where you have a an element with ID range
Fiddle - http://jsfiddle.net/e3esfsd6/
I want to parse the below mentioned RSS in order to get the title, description, image and date. Currently i'm able to get the all other details except image. Im using google api feed to parse the rss. Please can anyone me in this context.
RSS:https://news.google.com/news/feeds?cf=all&ned=in&hl=en&q=cricket&output=rss
// Google Feed API: https://developers.google.com/feed/
// Inspiration: http://designshack.net/articles/javascript/build-an-automated-rss-feed-list-with-jquery/
function parseFeed(url, container) {
$.ajax({
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=5&callback=?&q=' + encodeURIComponent(url),
dataType: 'json',
success: function (data) {
// log object data in console
console.log(data.responseData.feed);
// append feed link and title in container
$(container).append('<span class="iconicstroke-rss-alt"></span>');
$(container).append('<h1 class="feed">' + data.responseData.feed.title + '</h1>');
// for each entry... *
$.each(data.responseData.feed.entries, function (key, value) {
// * create new date object and pass in entry date
var date = new Date(value.publishedDate);
// var thumbnail = entry.mediaGroups[0].contents[0].url;
// * create months array
var months = new Array(12);
months[0] = 'January';
months[1] = 'February';
months[2] = 'March';
months[3] = 'April';
months[4] = 'May';
months[5] = 'June';
months[6] = 'July';
months[7] = 'August';
months[8] = 'September';
months[9] = 'October';
months[10] = 'November';
months[11] = 'December';
// * parse month, day and year
var month = date.getMonth();
var day = date.getDate();
var year = date.getFullYear();
// * assign entry variables
var title = '<h3 class="title">' + value.title + '</h3>';
var time = '<p class="time">' + months[month] + ' ' + day + ', ' + year + '</p>';
var snippet = '<p class="snippet">' + value.contentSnippet + '</p>';
var img = '<p class="snippet">' + value.thumbnail + '</p>';
var entry = '<div class="entry">' + title + time + snippet + '</div>';
// * append entire entry in container
$(container).append(entry);
});
},
// if there's an error... *
error: function (errorThrown) {
// * log error message in console
console.log(errorThrown);
// * show error message
alert('Houston, we have a problem.');
}
});
}
$(document).ready(function () {
parseFeed('https://news.google.com/news/feeds?pz=1&cf=all&ned=en&hl=in&q=aishwarya%20rai&output=rss', '#csstricks');
});
Just add this to your script
var content = document.createElement("content");
content.innerHTML = value.content;
var images = "";
$(content).find('img').each(function() {
images += this.outerHTML;
});
var img = '<p class="snippet">' + images + '</p>';
Same answer as here: https://stackoverflow.com/a/26369373/989257
Codepen example: http://codepen.io/janih/pen/JdPMZX
I am developing an app where I use 2 API's a.k.a Instagram API and Google Map API. Using AJAX, I get the first set of Images filtered by a tag name. In the 1st set we receive 20 images. Among the received images, the images that have the latitude and longitude info (geotagged images) are displayed on the map.
Now the first time when my page loads, I cannot see the map. But when I press the load more button to get the next set of images, the Map works fine showing my previous images too.
Here is the code for what happens on page load:
$( window ).load(function() {
$.ajax({
type: "GET",
url: "https://api.instagram.com/v1/tags/nyc/media/recent?client_id=02e****",
dataType:'JSONP',
success: function(result) {
onAction(result, 2, tag);
instaMap(result, 2, from);
}
});
});
These are the functions being called:
/**
* [initialize description]
* Initialize the map with markers showing all photos that are geotagged.
*/
var initialize = function(markers) {
var bounds = new google.maps.LatLngBounds(),
mapOptions = {
scrollwheel: false,
mapTypeId: 'roadmap',
center: new google.maps.LatLng(22.50, 6.50),
minZoom: 2
},
gmarkers = [],
map,
positions,
markCluster;
markers = remDuplicate(markers);
// Info Window Content
var infoWindowContent = [];
for (var j = 0; j < markers.length; j++ ) {
var content = [
'<div class="info_content">' +
'<h3>' + markers[j][2] + '</h3>' +
'<a href="' + markers[j][3] + '" target="_blank">' +
'<img src="' + markers[j][4] + '" style="z-index:99999">' + '</a>' +
'</div>'
];
infoWindowContent.push(content);
}
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
// Display multiple markers on a map
var oms = new OverlappingMarkerSpiderfier(map);
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
positions = new google.maps.LatLng(markers[i][0], markers[i][1]);
marker = new google.maps.Marker({
position: positions,
map: map,
animation:google.maps.Animation.BOUNCE,
title: markers[i][2]
});
oms.addMarker(marker);
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.close();
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
map.setCenter(marker.getPosition());
};
})(marker, i));
gmarkers.push(marker);
}
google.maps.event.addListener(map, 'click', function() {
infoWindow.setMap(null);
});
markCluster = new MarkerClusterer(map, gmarkers);
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
map.setZoom(2);
google.maps.event.removeListener(boundsListener);
});
};
/**
* [onAction]
* OnAction() function helps in loading non-geotagged pics.
*
* #param {[type]} result [Result retruned from the Instagram API in json format]
* #param {[type]} likey [hearts the user has entered as per which the posts will be filtered]
*/
var onAction = function (result, likey, tag) {
$('.load-pics').remove();
if (result.pagination.next_url) {
paginate = removeURLParameter(result.pagination.next_url, 'count');
}
$.each(result, function(key, value) {
if (key === 'data') {
$.each(value, function(index, val) {
liked = val.likes.count;
link = val.link;
imgUrl = val.images.low_resolution.url;
locations = val.location;
if (liked >= likey) {
if (locations === null) {
output = '<li class="img-wrap">' + '<div class="main-img">' +
'<a href="' + link + '" target="_blank">' +
'<img src="' + imgUrl + '" ><span class="hover-lay"></span></a>' +'<p>' +
'<span class="heart"></span><span class="likes-no">' + liked + '</span>' +
'<span class="comment-box"></span><span class="comment-no">' +
val.comments.count + '</span> ' + '</p>' + '</div>' +
'<div class="img-bottom-part">'+ '' + '<div class="headin-hastag">' +
'by ' + '<h2>Sebastien Dekoninck</h2>#hello <span>#kanye</span> #helloagain #tagsgohere</div>'
+'</div></li>';
$('#instafeed').append(output);
}
}
});
}
});
if ($('#instafeed').children().length === 0) {
alert('There are no pics with ' + likey + ' likes or #' + tag + ' was not found.');
} else {
// $('.not-geo').remove();
// $('#instafeed').before('<button class="not-geo">Click To See Images That Are Not Geotagged <img src="assets/imgs/down.png" ></button>');
}
$('#instafeed').append('<div class="load-pics"><button id="show-more">Show more <span></span></button> </div>');
};
/**
* [instaMap]
* instaMap() will be the function which will deal with all map based functionalities.
*/
var instaMap = function(result, likey, from) {
$('.load-mark').remove();
if (result.pagination.next_url) {
pagiMap = removeURLParameter(result.pagination.next_url, 'count');
}
$.each(result, function(key, value) {
if (key === 'data') {
$.each(value, function(index, val) {
liked = val.likes.count;
link = val.link;
imgUrl = val.images.low_resolution.url;
locations = val.location;
if (liked >= likey) {
if (locations && locations.latitude !== null) {
tempArr = [
locations.latitude,
locations.longitude,
val.user.username,
val.link,
val.images.low_resolution.url
];
mark.push(tempArr);
}
}
});
}
});
if (mark.length) {
initialize(mark);
$('.map-parent-wrapper').append('<div class="load-mark"><button id="show-mark">See More </button></div>');
} else {
alert('No geotagged pics found in the retrieved set. Click see more');
$('.map-parent-wrapper').append('<div class="load-mark"><button id="show-mark">See More </button></div>');
}
};
I have created a See More button to retrieve the next set of images and load those on the Map. When clicking see more, everything seems to work fine. Not sure why it's happening so. Console.log does not show any error. Also, all the values I feed does flow appropriately. I even tried clearing cache. Not sure, why it's happening.
If instaMap is the function which is going to handle all your map based functionality, it has to be the one that loads map in your $( window ).load function ();
Otherwise, if you want Google maps to load on initial window load you need to put below in there:
google.maps.event.addDomListener(window, 'load', initialize);
I am developing a web app with Django and i have this ajax where i'm refreshing some images from the db in order to display them in a template.
function refreshUploadedImages() {
var inputs = ['Designer Name', 'Color', 'Fabric', 'Type', 'Tag', 'Subtag'];
$.getJSON('/admin/image-uploader/images', function(data) {
$('#uploadedFiles').empty();
for (uiid in data) {
ui = data[uiid];
var div = $('<div>');
div.data('id', ui.id);
// image
var image = new Image();
image.src = ui.url
image.width = 180;
div.append($('<div>').append(image));
// list
var ul = $('<ul>')
div.append(ul)
// inputs
for (input in inputs) {
ul.append(
$('<li>').append(
$('<label>').append(
$('<span>').append(document.createTextNode(inputs[input] + ':'))
).append($('<input>'))));
}
$('#uploadedFiles').append(div);
div.append('<li><input type="button" class="delete-img-btn" id = <<ui.id>> img-id=image.id value="Delete"/></li>');
}
$(window).trigger('uploadedImagesRefresh');
});
$(function(){
//
$('.delete-img-btn').live('click', function() {
//asign the image id from the button attribute 'img-id'
var id= $(this).attr('img-id');
//The data to be send via ajax the server will recieve 2 POST variables ie. 'action' and 'id'(which is the img id)
var data={
'action':'/admin/image-uploader/',
'pk' : id,
'success':refreshUploadedImages
};
//The ajax request.
vary = $('.delete-img-btn').attr('id');
$.post("/admin/image-uploader/delete/"+vary , data);
});
});
}
My problem is, in this line
div.append('<li><input type="button" class="delete-img-btn" id = <<ui.id>> img-id=<<<image.id>>> value="Delete"/></li>');
I want to assign id a variable ui.id i.e (id = <<ui.id>> ) which is defined somewhere outside the div.append. Can you help me on how to do it please.
Is this all you're trying to do?
div.append(
'<li><input type="button" class="delete-img-btn" id="'
+ ui.id + '" img-id="'
+ image.id + '" value="Delete"/></li>');
image.id isn't defined though.
I have a javascript that must generate in runtime.The text of script is generate in controller class :
private string mapString
{
get
{
Locations loc = new Locations();
string appPath = Request.ApplicationPath;
loc.ReadXml(Path.Combine(Request.MapPath(appPath) + "\\App_Data", "Locations.xml"));
StringBuilder sb = new StringBuilder();
for (int i = 0; i < loc.Specfications.Count; i++)
{
sb.Append("var myLatLng" + i.ToString() + "= new google.maps.LatLng(" + loc.Specfications[i].Y.ToString() + "," +
loc.Specfications[i].X.ToString() + ");");
sb.Append(" var beachMarker" + i.ToString() + " = new google.maps.Marker({position: myLatLng" + i.ToString() + ",map: map,icon: image,title:'" + loc.Specfications[i].Title + "'});");
....
...
...
ViewData["MapString"] = mapString;
When I use it in script tag :
<script type="text/javascript">
function initialize() {
#Server.HtmlDecode(ViewData["MapString"].ToString())
}
</script>
It dosen't return a true text and it retruns something like this:
contentString0 = '<table width="100%" style="font-family: tahoma; text-align: right; font
**update : The site didn't show my question correctly ,I want to show "'<" but it show "'<"
but it must return :
contentString0 ='
you see that it convert "'<" to "'<" .
But when I use : #Server.HtmlDecode(ViewData["MapString"].ToString()) out of script tag ,all things is OK.
You may want to do it this way, which I think is going to be more flexible than generating code in your controller :
Controller action :
public JsonResult GetCoords()
{
// your code here - im putting a generic result you may
// need to put some logic here to retrieve your location / locations
var result = new { lon = "51.0000", lat = "23.0000" };
return Json(result, JsonRequestBehavior.AllowGet);
}
in your view add :
<script type="text/javascript">
$(document).ready(function () {
$.getJSON('/YourController/GetCoords', function (jsonData) {
var lon = jsonData.lon;
var lat = jsonData.lat;
yourGoogleMapFunction(lon, lat);
});
});
</script>