I suggested an issue and the author closed it on Github, but I am still left with no conclusion. Longitudes range from -180 to 180. But sometimes, Leaflet returns longitudes like 474.2578215 from getBounds(), which then of course nothing gets returned in my database.
I was told: It's intended behavior. That happens when you zoom too far out and/or drag the map to another copies of the world, and getBounds longitudes are not wrapped by default. You can use LatLng wrap method to get what you want though — e.g. bounds.getSouthWest().wrap().
Ok. So I added the wrap method in there, and the correct data is returned, but now no markers will show up on the map. This is probably due to the marker locations not being within that high number range (what leaflet thinks is the coordinates of the boundaries...)
I'm not sure that zooming or dragging is the cause of the issue. The problem persists when refreshing the page, where the user does no zooming or dragging events have occurred. I have the zoom limited in the init with: minZoom: 6, maxZoom: 13.
I should also note, that this code (unchanged) used to work just fine. Here is my code:
$(document).ready(function(){ initmap(); });
var map;
var plotlist;
var plotlayers=[];
function initmap(){
// set up the map
map = new L.Map('map');
//get our map
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='© OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 6, maxZoom: 13,
attribution: osmAttrib});
map.setView(new L.LatLng(<?=$slat;?>, <?=$slng;?>),9);
map.attributionControl.setPrefix('');
map.addLayer(osm);
getGameMarkers();
map.on('moveend', onMapMove);
}
function onMapMove(e){
getGameMarkers();
}
function getGameMarkers(){
var center = map.getCenter();
var zoo = map.getZoom();
var bounds = map.getBounds();
console.log(bounds);
var min = bounds.getSouthWest().wrap();
var max = bounds.getNorthEast().wrap();
$.ajax({type: "GET", url: "./ajax/markers.php", dataType: "json", data: "clat="+center.lat+"&clng="+center.lng+"&zoom="+zoo+"&minlat="+min.lat+"&minlng="+min.lng+"&maxlat="+max.lat+"&maxlng="+max.lng+cookiestr,
success: function(data){
if (data.showmap == 1) {
plotlist = data.map_data;
removeMarkers();
for (i=0;i<plotlist.length;i++) {
var iconic = String(plotlist[i].icon);
var plotmark = new L.marker([plotlist[i].lat,plotlist[i].lng], {icon: L.icon({iconUrl: iconic, iconSize: [32, 32]}) }).bindPopup(plotlist[i].html);
map.addLayer(plotmark);
plotlayers.push(plotmark);
}
$("#content").html(data.html);
}else {
$("#map_content").show();
$("#map_content").html(data.main_content);
$("#content").html(data.side_content);
}
}
});
}
The wrap() functions give the correct coordinates, and the DB returns the correct plots. But for some reason, they don't display. Here are the plots returned (the map_data portion):
map_data: [{lat:36.672825, lng:-76.541748, icon:./img/avicon3.png,…},…]
0: {lat:36.672825, lng:-76.541748, icon:./img/avicon3.png,…}
1: {lat:36.901314, lng:-76.041870, icon:./img/avicon2.png,…}
2: {lat:37.101192, lng:-76.264343, icon:./img/avicon3.png,…}
3: {lat:37.300274, lng:-75.673828, icon:./img/avicon3.png,…}
4: {lat:37.348328, lng:-76.830139, icon:./img/avicon3.png,…}
5: {lat:37.2481003, lng:-76.1194000, icon:./img/bicon3.png,…}
6: {lat:37.0298691, lng:-76.3452225, icon:./img/ricon.png,…}
7: {lat:37.6087608, lng:-77.3733063, icon:./img/ricon.png,…}
8: {lat:37.7440300, lng:-77.1316376, icon:./img/ricon.png,…}
9: {lat:37.5917015, lng:-77.4207993, icon:./img/bicon2.png,…}
10: {lat:37.5206985, lng:-77.3783112, icon:./img/ricon.png,…}
11: {lat:37.3306999, lng:-77.3227615, icon:./img/ricon.png,…}
12: {lat:37.1228981, lng:-75.9063034, icon:./img/bicon2.png,…}
No errors in console, and as I said, sometimes it all works (when getBounds doesn't return a crazy big LON). So what in the heck am I doing wrong, and more importantly, how do I solve it?
This is due to worldCopyJump being set to false by default. Setting it to true, and the markers will display correctly, as the world won't overlap.
I was seeing a similar thing, except I was processing a map click event via a callback as event.latlng.lng. Adding worldCopyJump: true did not fix this issue for me - I was still seeing longitude values greater than 180.
In the end, I called the wrap() method to the latlng object:
event.latlng.wrap().lng
which fixed the problem.
I've never experienced those incorrect bounds, but wouldn't programmaticly limiting them serve as at least temporary solution?
As for markers not showing - does it happen when you are moving the map? If so it is quite likely caused by 'moveend' events overlapping. I don't know how many points are there on average but if data download doesn't finish and add markers the next call of 'moveend' will delete all existing markers and start replacing them (also it will override 'plotlist' which migth cause errors later on). You could try adding them to global list after all operations are finished and markers are drawn or you could move only markers not in new set.
On sidenote - why not use geojson to create those layers? With 'pointToLayer' and 'onEachFeature' you could customize markers/popups and have one layer at the end, rather then long list of markers.
'worldCopyJump': true work for me.
Can see this link.
<!DOCTYPE html>
<html lang="en">
Lat: <p id="LatClick"> </p><br>
Lng: <p id="LOnClick" > </p><br>
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.1/dist/leaflet.css" />
<meta name="referrer" content="never">
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 80%;
}
.lorem {
font-style: italic;
color: #AAA;
}
</style>
</head>
<body>
<div id="map" ></div>
<script src="https://unpkg.com/leaflet#1.0.1/dist/leaflet.js"></script>
<script>
var map = L.map('map',{'worldCopyJump': true});
map.setView([31.623116,84.497856], 8); L.tileLayer( 'http://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png', { maxZoom: 18}).addTo(map);
//var marker = L.marker([31.2, 97]).addTo(map);
var theMarker={};
map.on('click', function(e){
var coord = e.latlng;
var lat = coord.lat;
map.removeLayer(theMarker);
var lng = coord.lng;
theMarker=L.marker([lat,lng]).addTo(map);
document.getElementById("LatClick").innerHTML = lat;
document.getElementById("LOnClick").innerHTML = lng;
});
</script>
</body>
</html>
Related
I'm having a script to view polygons on google maps, but I want to change my polygon coordinates when I click on hyperlink. This the script which I'm using:
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY_IS_HERE&libraries=geometry,places&ext=.js" ></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<div id="map_canvas" ></div>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map_canvas {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
var map;
var bounds = new google.maps.LatLngBounds();
// your POLYGON
var polygonStr = "POLYGON (24.935955 42.32732, 24.943297 42.3268, 24.944593 42.322991, 24.94438 42.317172, 24.940584 42.317919, 24.936224 42.320232, 24.933244 42.322896, 24.927394 42.327057, 24.934312 42.328296, 24.93242 42.326795)";
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(42.156801, 24.749468),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
drawPoly(polygonStr);
map.fitBounds(bounds);
}
function drawPoly(multipolygonWKT) {
var polylines = [];
var toReturn = [];
multipolygonWKT = multipolygonWKT.replace("POLYGON ", "");
var formattedValues = multipolygonWKT.replace("))", "");
formattedValues = formattedValues.replace("((", "");
var linesCoords = formattedValues.split("), (");
for (i = 0; i < linesCoords.length; i++) {
polylines[i] = [];
var singleLine = linesCoords[i].split(", ");
for (j = 0; j < singleLine.length; j++) {
var coordinates = singleLine[j].split(" ");
var latlng = new google.maps.LatLng(parseFloat(coordinates[1]), parseFloat(coordinates[0]));
bounds.extend(latlng);
polylines[i].push(latlng);
}
}
toReturn.push(
new google.maps.Polygon({
map: map,
paths: polylines,
strokeColor: 'red',
strokeOpacity: 1,
strokeWeight: 2,
zIndex: 1
}));
return toReturn;
}
google.maps.event.addDomListener(window, "load", initialize);
</script>
</body>
</html>
When I try to call the file with a hyperlink with new coordinates nothing hapens for example 'file:///C:\Users\Desktop\MyfileName.html?q="POLYGON (here I put my new coordinates)" My idea is to change the coordinates which are in the script with the new one from my hyperlink. Is that possible? If it is possible how? Almost forgot to say that the file is on my computer and I want to open it from where it is.
EDIT:
Here is some more info about what I want to do.I have created an attribute in the program which I use - Geomedia and I can create a hyperlink with coordinates of the drawn polygon. enter image description here I want when I click link to have the polygon opened in google maps. I tryed to make the hyperlink directly to google , but I couldn't find how to configure the url. I mean that for a single place there is "?q=" , but I didn't find how tell google it is a polygon , so I go ahead and start searching for alternative way. I found the script which is fine if I ad the coordinates manually it's working , but I need to make it work with the given hyperlink. I think that there should be a way to do it , but my javascript skills are very low so please be patient when trying to tell me how to do it :).
NEW EDIT: I'm totaly stuck with this and I realy need some help , bacause I tryed a lot of different examples and functions and still no progres. I'm doing something wrong and I can't get it to work. Probably I must give up since even here I can't get a helpfull soliution.At least if someone can give me a link to an example where I can see how is made and how to modify my file it will be nice.
in order to acess to the coordinates in the hyperlink, you must extract them, for exampl you can use php, so you polygone will be like this:
var polygonStr = <?php print($_GET['q']) ?>;
If you want what is after the "?", you might use
var search = window.location.search
Then if you have something like ?"POLYGON (1.8,2.5)" you might use
var regexp = /\"POLYGON \(([\d\.]+)\,([\d\.]+)\)\"/gi
var coords = regexp.exec(search);
then, parseFloat(coords[1]) and parseFloat(coords[2]) have your coordonates. Use them where you used to have your coordonates
I have been trying to display a marker on the map when I click on a Button of my JavaFX application. So what happens is when I click on that button, I write the position in a JSON file, this file will be loaded in the html file that contains the map. The problem is that it works perfectly when I open the html page in the browser, but nothing happens in the JavaFX's web view, and I don't know why !
This is the html file:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
/*#map {
height: 100%;
}*/
#map{width:100%;height:100%;margin:auto;}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
var marker;
// Multiple Markers
var markers = [];
var pos = {lat: 46.662388, lng: 0.3599617};
var itinerary_markers = [];
function initMap() {
var currentLat, currentLng;//Latitude et longtitude courante
$.ajax({
url: 'https://maps.googleapis.com/maps/api/geocode/json?address=My+ADDRESS&key=MY_KEY',
async: false,
dataType: 'json',
success: function (data) {
currentLat = data.results[0].geometry.location.lat;
currentLng = data.results[0].geometry.location.lng;
}
});
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: currentLat, lng: currentLng},
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
/*MARQUEUR*/
$.ajax({
async: false,
url: 'test.json',
data: "",
accepts:'application/json',
dataType: 'json',
success: function (data) {
for (var i = 0; i < data.hydrants.length; i++) {
markers.push( data.hydrants[i]);
}
}
});
var posi = new google.maps.LatLng(markers[0].Lat, markers[0].Lng);
marker = new google.maps.Marker({
position: posi,
map: map,
//title: markers[i][0]
title: markers[0].Name
});
}
</script>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap&language=fr"
async defer></script>
</body>
</html>
When I click the button, I fill the JSON file (which works perfectly) and then I execute this to refresh the webview:
this.webView.getEngine().load(getClass().getResource("/data/index.html").toString());
As I said before, when I open the file on the browser I see the expected result, but I don't know what is the problem with the JavaFX.
If there is a better way to do this please tell me.
EDIT:
I found a solution to the problem by sending directly the data (the GPS coordinates) from JavaFX to Javascript using the executeScript() method, so I don't need a json file as bridge between the two platforms.
So this is an example of how the code looks like:
eng.executeScript("updateMarker(" + lat + ", " + lng + ")");//eng is a WebEngine instance
And here is the Javascript:
/*The initial latitude and longtitude*/
var currentLat = the latitude;
var currentLng = the longtitude;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: currentLat, lng: currentLng},
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var posi = new google.maps.LatLng(currentLat, currentLng);
marker = new google.maps.Marker({
position: posi,
map: map,
visible: false
});
}
/*The method that is I call from JavaFX*/
function updateMarker(_lat, _lng){
marker.setPosition({lat: _lat, lng: _lng});
map.setCenter(new google.maps.LatLng(_lat, _lng));
marker.setVisible(true);
}
Thank you for your comments and answers, and a special shootout to reddit.
If I had to guess - one of two things is happening:
Either A) your javaFX is not supporting cross site ajax calls or B) it is not waiting for the asynchronous ajax response/something else is going wrong.
So let's do some testing together. Firstly can we clean this up to nest the ajax calls? Then can you add in some console.log statements to find out what each is sending back? If you miss some output we know where it's going wrong and that'll help us fix things.
Note I've changed success to the 'done' additions because success is a bit out of date, and everything is nested to eliminate the question around whether any blanks are being sent in to the next calls (synchronicity issues):
$.ajax({
url: 'https://maps.googleapis.com/maps/api/geocode/json?address=My+ADDRESS&key=MY_KEY',
async: false,
dataType: 'json'
}).done(function(data) {
currentLat = data.results[0].geometry.location.lat;
currentLng = data.results[0].geometry.location.lng;
console.log(currentLat);
console.log(currentLng);
// Multiple Markers
var markers = [];
var pos = {lat: 46.662388, lng: 0.3599617};
var itinerary_markers = [];
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: currentLat, lng: currentLng},
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
console.log(map);
/*MARQUEUR*/
$.ajax({
async: false,
url: 'test.json',
data: "",
accepts:'application/json',
dataType: 'json'
}).done(function(data) {
for (var i = 0; i < data.hydrants.length; i++) {
markers.push( data.hydrants[i]);
}
console.log(markers);
var posi = new google.maps.LatLng(markers[0].Lat, markers[0].Lng);
console.log(posi);
var marker = new google.maps.Marker({
position: posi,
map: map,
//title: markers[i][0]
title: markers[0].Name
});
console.log(marker);
}).fail(function(jqXHR, testStatus){
console.log(textStatus);
});
}).fail(function(jqXHR, testStatus){
console.log(textStatus);
});
Here is a link on getting the console.log output in to System.out in Java if this is an issue:
JavaFX 8 WebEngine: How to get console.log() from javascript to System.out in java?
...Also hello from reddit.
In the line:
this.webView.getEngine().load(getClass().getResource("/data/index.html").toString());
I would try double-checking the path to the file is correct. Reading other answers on StackOverflow, it looks like this is supposed to be relative to the package root and either with or without the leading '/'. i.e. getResource("data/index.html"). But, then again, maybe you would already be seeing errors related to getResource()...
My next go to, for debugging purposes, would be to comment out the part where you write the JSON and just manually write some good JSON and just try to get it to show up in the webView. The fewer moving parts, the better. If you can get it to work with your pre-written JSON then you can assume it is some problem with the JSON you are writing with Java and then it being loaded to the HTML.
Edit: I dug a bit deeper. This could be totally wrong again but maybe you can try manually calling the initMap() function from Java that your web browser normally calls onload. How to call a JavaScript function from a JavaFX WebView on Button click? has some more details. Try this.webView.getEngine().executeScript("initMap()"); after you edit the JSON with your button.
Edit 2 As an aside, too, it might make sense to split initMap into an initMap and updateMap function for making the map to begin with and then setting the markers on the map. Though this is hardly breaking anything.
If your mouse-wheel is used to zoom the map out or in and the marker appears, then you are experiencing the same issue that I did.
Try manually zooming the mapview to restore the markers. I also had to employ this technique when displaying a route from the Directions Service, otherwise the waypoint markers were not displaying correctly.
This is the code in my Javafx controller class to do so:
KeyFrame kf1 = new KeyFrame(Duration.seconds(0.75), e -> map.setZoom(map.getZoom() - 1));
KeyFrame kf2 = new KeyFrame(Duration.seconds(1.5), e -> map.setZoom(map.getZoom() + 1));
Timeline timeline = new Timeline(kf1, kf2);
Platform.runLater(timeline::play);
This was using GMapsFX, which is just a thin Java wrapper around javascript engine calls on a JavaFX WebView. Hopefully it helps.
This question is related to this question: Updating Leaflet Marker Position Every x Seconds with JSON. Only I want to project the map created with Leaflet onto a 3D globe with WebGLEarth. Normally you can combine Leaflet and WebGLEarth by replacing L.map, L.marker and so on with WE.map, WE.marker in your original Leaflet code.
I would like to have the current location of the International Space Station projected on my 3D globe, so I replaced the L.marker in the update_position function of this code...
var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg';
var subDomains = ['otile1','otile2','otile3','otile4'];
var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 11, subdomains: subDomains});
var map = new L.Map('map', {layers : [cloudmade]}).fitWorld();
var iss;
function update_position() {
$.getJSON('http://open-notify-api.herokuapp.com/iss-now.json?callback=?', function(data) {
console.log(data);
var latitude = data["iss_position"]["latitude"];
var longitude = data["iss_position"]["longitude"];
if (!iss) {
iss = L.marker([latitude,longitude]).bindPopup("I am the ISS").addTo(map);
}
iss.setLatLng([latitude,longitude]).update();
setTimeout(update_position, 1000);
});
}
update_position();
DEMO
...by WE.marker. Unfortunately, the updating of the position doesn't work anymore on my 3D globe, whereas it did work on the 2D map.
I tried adding
setInterval(update_position,2000);
just above update_position();, then the marker gets updated a few times (~5) and then suddenly stops. If I interact with my mouse on the globe by panning, the marker gets updated to its current position and gets updated a few times afterwards, and eventually stops again.
Main Question:
Does anyone know how to fix this so that I have a continuous marker update?
Additional Question:
Ideally I would like the International Space Station track to look like https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=CZML.html&label=Showcases, with a colored path the station travelled in its last orbit around the earth. Any tips on how to do this?
Thanks in advance!
[Edit 23-1-2015:
I managed to update it continuously by making a new variable for iis, namely iis2. Why this works is not clear to my. Unfortunately, all 'old' markerpositions don't dissapear, so I get a blurred marker track.
var iss;
var iis2;
function update_position() {
$.getJSON('http://open-notify-api.herokuapp.com/iss-now.json?callback=?', function(data) {
console.log(data);
var latitude = data["iss_position"]["latitude"];
var longitude = data["iss_position"]["longitude"];
if (!iss) {
iss2 = WE.marker([latitude,longitude]).bindPopup("I am the ISS").addTo(map);
}
iss2.setLatLng([latitude,longitude]).update();
});
}
update_position();
setInterval(update_position,1000);
]
remove the marker
var iss;
var iis2;
function update_position() {
$.getJSON('http://open-notify-api.herokuapp.com/iss-now.json?callback=?', function(data) {
console.log(data);
map.removeLayer(iss2);
var latitude = data["iss_position"]["latitude"];
var longitude = data["iss_position"]["longitude"];
if (!iss) {
iss2 = WE.marker([latitude,longitude]).bindPopup("I am the ISS").addTo(map);
}
iss2.setLatLng([latitude,longitude]).update();
});
}
update_position();
setInterval(update_position,1000);
I use the following block of JavaScript to try to show a WMS layer. I'm using OpenLayers 2.8.
The map's base layer (Openstreetmap) shows correctly, it zooms to the correct area, the "pyramid" layer is shown in the layer switcher, but no request to its WMS service is ever made (so the fact that the URL, styles and params are dummies shouldn't matter -- it never even attempts to get them).
OpenLayers does try to get a WMS layer once I pan or zoom far enough so that the Gulf of Guinea is in view (but all my data is in the Netherlands). This suggests a projection problem (WGS84's (0, 0) point is there), but I don't understand why OpenLayers doesn't even try to fetch a map layer elsewhere. My data is in EPSG:3857 (Web Mercator) projection.
/*global $, OpenLayers */
(function () {
"use strict";
$(function () {
$(".map").each(function () {
var div = $(this);
var data_bounds = div.attr("data-bounds");
console.log("data_bounds: " + data_bounds);
if (data_bounds !== "") {
var map = new OpenLayers.Map(div.attr("id"), {
projection: "EPSG:3857"});
var extent = JSON.parse(data_bounds);
var bounds = new OpenLayers.Bounds(
extent.minx, extent.miny,
extent.maxx, extent.maxy);
map.addLayer(
new OpenLayers.Layer.OSM(
"OpenStreetMap NL",
"http://tile.openstreetmap.nl/tiles/${z}/${x}/${y}.png",
{buffer: 0}));
map.addLayer(
new OpenLayers.Layer.WMS(
"pyramid", "http://rasterserver.local:5000/wms", {
layers: "test",
styles: "test"
}, {
singleTile: true,
isBaseLayer: false,
displayInLayerSwitcher: true,
units: 'm'
}));
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToExtent(bounds);
}
});
});
})();
Edit: the 'data_bounds' console print prints (with some added formatting):
data_bounds: {
"minx": 582918.5701295201,
"miny": 6923595.841021758,
"maxx": 821926.9006116659,
"maxy": 7079960.166533174
}
It zooms to the correct region in the north of the Netherlands, so I don't think the problem is there.
Since posting, I found out that if I don't use the OSM layer, and instead use the WMS layer as baselayer, it works. So perhaps there's some incompatibility with a OSM baselayer and a WMS layer added to it? But then I don't get that it does seem to do something near WGS84 (0, 0).
I eventually managed to fix this by giving the map an explicit maxExtent:
var extent = JSON.parse(data_bounds);
var bounds = new OpenLayers.Bounds(
extent.minx, extent.miny,
extent.maxx, extent.maxy);
var map = new OpenLayers.Map(div.attr("id"), {
projection: "EPSG:3857",
maxExtent: bounds
});
Oddly enough this doesn't limit the user's ability to pan and zoom around the world, but it does make the overlay work...
I'm building a Qt app with Python where you can point and click at a (google) map and get the coordinates of the location. The map is shown through a QWebView loading a simple HTML page and the user can create markers by clicking. Screenshot of the widget after clicking on the map.
However, I'm having trouble to retrieve the just-clicked location coordinates back to Qt (so that I can use them as variables -- and, for example, show them in the QLineEdits on the topleft corner above, as current location of the marker).
This is the relevant part of the HTML file:
<script type="text/javascript">
var map;
function initialize() {
var local = new google.maps.LatLng(-23.4,-40.3);
var myOptions = {
zoom: 5,
center: local,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'rightclick', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
var marker = new google.maps.Marker({
position: location,
map: map
});
map.setCenter(location);
}
function dummyTxt() {
return 'This works.';
}
</script>
I've been trying with evaluateJavaScript, but was not able to retrieve the coordinates. I tried to created a function to access the position with marker.getPosition(), but with no luck. The dummy below works though..
newplace = QWebView.page().mainFrame().evaluateJavaScript(QString('dummyTxt()'))
>>> print newplace.toString()
This works.
Any suggestions on how to get the coordinates back to Qt?
Edit:
Here is the code that worked for me:
def update_geo(self):
# Capture coordinates of the last marker on the map.
mark = self.map.page().mainFrame().evaluateJavaScript('document.getElementById("markerlocation").value').toString()
# Convert string to list of floats, stripping parentheses.
marker = str(mark).strip('()').split(', ')
decimals = [float(c) for c in marker]
Full source in https://github.com/nelas/veliger/blob/master/veliger.py#L2374
I found a work around to make it work but I'm not pretty sure that it will be the right approach. Anyway, this is what I did:
Create a hidden input in the body section of your html document to save the position data of the marker:
<body>
(...)
<input id="locationData" type="hidden">
(...)
</body>
In the javascript code, save the position of the marker in the hidden input every time it's created:
function placeMarker(location) {
(...)
document.getElementById("locationData").value = marker.position;
(...)
}
In your Qt code, read the value of the hidden input with the instruction:
webView->page()->mainFrame()->findFirstElement("#locationData").evaluateJavaScript("this.value").toString();
I hope it helps!
Source: http://opendocs.net/qt/4.6/webkit-formextractor.html