PDA

View Full Version : Dragging by mouse on a openStreet map, displayed on a Qt widget, using Leaflet API.



TheIndependentAquarius
11th October 2012, 13:03
The map is displayed on a `Qt` widget.
In the following `Javascript` code, I have written `dragging: true`, but still I can't **"pan"** the map through the **"mouse"**.

**I have noticed that this problem occurs ONLY when this code is executed w.r.t a Qt's widget, never when it is executed in a browser!**



<!DOCTYPE html>
<html>
<head>
<title>Leaflet Quick Start Guide Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
</head>

<body onload="displayMapAndClick ()" topmargin="0" leftmargin="0">
<div id="map" style="width: 600px; height: 600px"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>

<script>
var map;
var centerPoint;
var arrayCenterPoints = new Array ();
var arrayFileNames = new Array ();
var arrayCorners = new Array ();
var arrayList = new Array ();

function displayMapAndClick ()
{
map = L.map ('map',
{
dragging: true
}).setView ([51.505, -0.09], 13, true);

L.tileLayer('http://{s}.tile.cloudmade.com/24c8d683cff74bffa7f00e59cd858e00/997/256/{z}/{x}/{y}.png',
{
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
maxZoom: 13,
}).addTo (map);

selectCenterPoint ();
}

function selectCenterPoint ()
{
var popup = L.popup();

function onMapClick (e)
{
popup
.setLatLng (e.latlng)
.setContent ("You clicked the map at: " + e.latlng.toString())
.openOn (map);

map.panTo (e.latlng);
L.marker (e.latlng).addTo (map).bindPopup ("<b>Center point: </b>" + "<br>" + e.latlng + "<br />").openPopup ();
centerPoint = e.latlng;
}
map.on ('click', onMapClick);
}

----------

What else info do I need to present here?