I have the following code. How to convert lonlat value to GPS used values in degrees?
UPDATE: I'm not sure that I use correct vocabulary, but currently lonlat is equal to something like this '2698.98978 1232.8998'. I want to conver to degrees, e.g. '41.2987 2.1989'.
lonlat is a variable. Please see in the code.
<html>
<head>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
function init(){
map = new OpenLayers.Map('map');
base_layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(base_layer);
map.zoomToMaxExtent();
map.events.register('click', map, handleMapClick);
}
function handleMapClick(evt)
{
var lonlat = map.getLonLatFromViewPortPx(evt.xy);
// use lonlat
alert(lonlat);
}
</script>
</head>
<body onload="init()">
Hello Map.<br />
<div id="map"></div>
</body>
</html>
You shouldn't use the getLonLatFromViewPortPx but the getLonLatFromPixel method like this:
var lonlat = map.getLonLatFromPixel(evt.xy);
This will give you the correct coordinates without any transforms.
Related
I am trying get all coordinates of India. I have tried with http://maps.google.com/maps/api/geocode/json?sensor=true&address=India.
In this i am getting only bounds of southEast, northWest.
But i need complete list of all coordinates which will exactly match india polygon.
I have tried with twitter API. But its giving rectangular area coordinates of the country like below.
I need exact polygon coordinates. Any suggestion?
You can make use of natural earth data fusion table for countries. It's public table & downloadable. Here is a demo. I used a temp API key in demo which I'll remove after some time.
HTML:
<html>
<head>
<title>Google Maps API v3 : Fusion Tables Layer</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
</script>
</head>
<body onload="initialize()">
<div id="map" style="width: 530px; height:230px">
</div>
<div id="datadiv"></div>
</body>
</html>
Javascript:
function initialize()
{
map = new google.maps.Map(document.getElementById('map'),
{
center: new google.maps.LatLng(22.7964,79.5410),
zoom: 4,
mapTypeId: 'roadmap'
});
layer = new google.maps.FusionTablesLayer({query: {
select: '\'wkt_4326\'',
from: '1uKyspg-HkChMIntZ0N376lMpRzduIjr85UYPpQ',
where:'sov_a3=\'IND\''
}});
debugger
layer.setMap(map);
getData('1uKyspg-HkChMIntZ0N376lMpRzduIjr85UYPpQ');
}
function getData(table) {
// Builds a Fusion Tables SQL query and hands the result to dataHandler()
var queryUrl = 'https://www.googleapis.com/fusiontables/v1/query?sql=';
var queryUrlParams = '&key=GET_YOUR_API_KEY_FROM_GOOGLE&jsonCallback=?'; // ? could be a function name
var query = "SELECT * FROM " + table + " where sov_a3='IND'";
var queryurl = encodeURI(queryUrl + query + queryUrlParams);
//Get fusion table data
$.get(queryurl,showData);
}
function showData(d) {
debugger
var data = d.rows[0];
$("#datadiv").html(data);
}
In this i am posting a question in which i am using a java script and PHP code and sending back the timestamp using the time function of the PHP. let have the code,
<?php
session_start();
echo time();
?>
<html>
<head>
<title>my app</title>
<script type="text/javascript" src="jquery-2.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(this).mousemove(function(){
var time_=new Date();
var time=<?php echo time();?>;
alert(time);
$.post('loggout.php',{input: time});
});
});
</script>
</head>
<body>
<h2>we are on the main_session</h2>
</body>
</html>
now the problem is that when i move the mouse than the mousemove event gets into action and displays the value of the var time. but every time it displays the same value. the value only changes when i reload the page. so please let me know the reason behind it and how to make this dynamic
This is because the PHP is only run once - when the page loads. So the Javascript time variable gets filled with the time returned by PHP and then never changes.
If you're happy to get the client-side time, just use this:
var time = time.getTime();
Instead of var time=<?php echo time();?>;
Otherwise, you can use AJAX to send a query that'll run some PHP, return the time, and put it into the variable.
For example, you could try something like this:
$.get('getTime.php', function(data) {
time = data;
});
And in getTime.php, just echo the time.
This is because PHP is back-end programing language and once your page loaded timestamp written to code and can't be dynamic. But you can send JS timestamp:
var time = Math.round(+new Date() / 1000);
( + will convert date Object to integer )
or
var time = Math.round(new Date().getTime() / 1000);
division by 1000 needed because JS use milliseconds.
See Date reference at MDN.
put this javascript code anywhere in your php file.
<script type="text/javascript">
var currenttime = '<?php echo date("F d, Y H:i:s"); ?>' //PHP method of getting server date
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
var serverdate=new Date(currenttime)
function padlength(what){
var output=(what.toString().length==1)? "0"+what : what
return output
}
function displaytime(){
serverdate.setSeconds(serverdate.getSeconds()+1)
var datestring=montharray[serverdate.getMonth()]+" "+padlength(serverdate.getDate())+", "+serverdate.getFullYear()
var timestring=padlength(serverdate.getHours())+":"+padlength(serverdate.getMinutes())+":"+padlength(serverdate.getSeconds())
document.getElementById("servertime").innerHTML=timestring
}
window.onload=function(){
setInterval("displaytime()", 1000);
}
</script>
add span or div where you want to show current time. no need to reload page.
<span id="servertime"></span>
here i was making a sample program in php.In which i included the java script and used the date but i am getting the same date every time.let have a look on the code.
<?php
?>
<html>
<head>
<title>my app</title>
<script type="text/javascript" src="jquery-2.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var time1=new Date();
var time_stack=new Array();
var time;
$(this).mousemove(function(){
time=time1.getSeconds();
alert(time1);
});
});
</script>
</head>
<body>
<h2>we are on the main_session</h2>
</body>
</html>
now the problem is that when i move the mouse than i get an alert box popping out and the date which is being displayed is same all time.Please let me know the problem
Try this
$(document).ready(function(){
$(this).mousemove(function(){
var time1=new Date();
time=time1.getSeconds();
alert(time);
});
});
Hope it will help
Hi, You should assign value for time1 variable in the mousemove() function. Use like this:
$(this).mousemove(function(){
var time1 = new Date();
var time_stack = new Array();
var time;
time = time1.getSeconds();
alert(time1);
});
This is because time1 is evaluated only once when the page loads, on every mouse event you just get the seconds from when it was initialized
The variable time1 never changes, the Date object is the same, so you always get the same time ?
You have to either update the Date on each mousemove, or just get a new Date object :
<html>
<head>
<title>my app</title>
<script type="text/javascript" src="jquery-2.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(this).mousemove(function(){
var time1 = new Date();
console.log( time1.getSeconds() );
});
});
</script>
</head>
<body>
<h2>we are on the main_session</h2>
</body>
</html>
FIDDLE
The Date object your instancing isn't a stop watch that will get the current time when you call a method on it. You need to instances a new Date object in your event handler.
alert(new Date().getSeconds());
There is a misprint:
alert(time), not time1 and try this:
$(this).mousemove(function(){
var time1=new Date();
time=time1.getSeconds();
alert(time);
});
I really am a JS noob - I have never really used itbefore and am struggling using the marker clusterer google provide. I have rad the documentation
here is the code
<script src="http://localhost/wheredidmytweetgo/js/markercluster.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(
document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(
new GLatLng( 56.65622649350222, -19.86328125), 2);
var mc = new MarkerClusterer(map);
function createMarker(point, text, title) {
var marker =
new GMarker(point,{title:title});
GEvent.addListener(
marker, "click", function() {
marker.openInfoWindowHtml(text);
});
return marker;
}
<?php
foreach ($cluster_location as $location) {
?>
var marker = createMarker(
new GLatLng(<?php echo $location ?>),
'Marker text <?php echo $location ?>',
'Example Title text <?php echo $location ?>');
map.addMarker(marker);
<?php }
?>
}
}
cluster location is just an array of lat and longs - My code is working fine when just using the add.overlay however there are too many to make the map readable hence the need for clustering. I do load the clustering JS which I have I have included.
I create the clusterer object and pass in map as defined.
var markers = [];
//create array
I know I can create a JS array and pass this in to
var mc = new MarkerClusterer(map, markers);
But I simply dont have the JS knowledge to create an array at this time (I intend to learn) and the Google documentation advises you can iterate and add one at a time using addMarker
Hi Tom - Thanksfor the info - I have tried doing what you advised and have came up with the below:
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://localhost/wheredidmytweetgo/js/markercluster.js">
</script>
<script type="text/javascript">
function initialize() {
var center = new google.maps.LatLng(37.4419, -122.1419);
var map = new google.maps.Map(document.getElementById('map'), {
'zoom': 13,
'center': center,
'mapTypeId': google.maps.MapTypeId.ROADMAP
});
var markers = [];
<?php foreach ($cluster_location as $location) { ?>{
var marker = new google.maps.Marker({'position': <?php echo $location;?>});
markers.push(marker);
}
<?
}
?>
var markerCluster = new MarkerClusterer(map, markers);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<h3>A simple example of MarkerClusterer (100 markers)</h3>
<p>
Compiled |
Standard version of the script.
</p>
<div id="map-container"><div id="map"></div></div>
</body>
</html>
But my map still loads empty. I'm using literally the most basic google provided code now and just loading my own markers in. I know my markers positioning should be okay because when I go to view my page source I can see
{
var marker = new google.maps.Marker({'position': 40.0994425,-74.9325683});
markers.push(marker);
});
for each marker. any more help would really be appreciated!
Please check the examples on google maps utilities library page (link).
But basically to add instance of an object (a marker) to an array you have to define the array first so you need to do the var markers = []; above the loop where you create the markers. And then as you create the markers you have to add them to the markers array by calling the push method of an array (while you are at it go to MDN and read about arrays! if you want to learn it's good time to start there - there is a tutorial about JS there as well (link).
So inside of the foreach loop afer you've defined a marker just add it to the array markers.push(marker); This will make the markers available for the MarkerCluster initialization.
In a longer term when you figure out javascript a bit better you'll probably want to replace this part with either passing data as JSON object to the DOM so methods can handle it or even better - have the data for markers be retrieved with ajax query. But one step at a time I guess :)
Maybe try the fun interactive tutorials at the www.codecademy.com? They are quite basic but seems like that's exactly what you need
EDIT:
var marker,
markers = [];
<?php foreach ($cluster_location as $location) { ?>
marker = new google.maps.Marker({'position': <?php echo $location;?>});
markers.push(marker);
<? } ?>
The values don't seem to be coming out and showing up on the page. It should be creating divs that pop up with the google_color and the background set to the hex value.
The app is suppose to take pixel image data and match it to my swatch library known as formatted_colors.js, which is an array. The array looks like this:
var colors = [];
colors["000000"] = "black"; colors["100000"] = "black"; colors["200000"] = "black";
Maybe I'm not suppose to use the .each function? Although it is a loop.
Here is a snippet:
<div class="rounded_color" hex="<?php echo $css_color ?>" xy="<?php echo $x.$y ?>"></div>
<div id="<?php echo $x.$y ?>"></div>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script src="formatted_colors.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//iterate through pixels and match rounded color to array in formatted_colors.js
$(document).ready(function() {
$(".rounded_color").each(function(){
var google_color = getColor($(this).attr("hex")); // finds a match of "hex" value in formatted_colors.js and return name to google_color
$('#'+$(this).attr("hex")).html(google_color); // set the div's html to name which is google_color
alert('#'+$(this).attr("id")); //testing if value is there, but shows #undefined
$('#'+$(this).attr("hex")).css('background-color:', google_color);
})
// get name of color function from formatted_colors.js
function getColor(target_color){
if (colors[target_color] == undefined) { // not found
return "no match";
} else {
return colors[target_color];
}
} // end getColor function
}) // end ready function
</script>
Sorry, I'm new to this so I'm not sure what to do exactly now.
Here is my entire code: http://pastebin.com/HEB3TWZP
Thanks in advance!
You don't need to concatenate #. this is the current element in the iteration.
Also you might want to do something like var $this = $(this); Cleans up your code and you aren't recreating the jQuery object over and over again within the same iteration.