Display static map using ImageOverlay

121 views

Skip to first unread message

C Loftis

unread,

Jun 18, 2013, 1:42:20 PM6/18/13

to leafl...@googlegroups.com

BACKGROUND

I am writing a mobile app (PhoneGap) that needs to work in disconnected mode (i.e., no Wi-Fi/3G/4G). All maps will be stored locally on the device (maps will created by in-house GIS software).

I have had a hard time getting Leaflet to display a static map and report lat/lng coords on click.

My sample code is attached (see below). When the sample code is executed, the map is not displayed, but when I click on the page, I see the popup flying off the page. I can drag the map to locate the popup but the lat/lng cords being reported are obviously incorrect.

Interestingly, when I set "bounds = null" (line 04), my ImageOverlay is shown correctly (top, left corner of the map in the top, left corner of the page) but the map does not respond to clicks because the image bounds are not set (I get this error in the console: E/Web Console(13029): Uncaught TypeError: Cannot call method 'getNorthWest' of null at file:///android_asset/www/js/leaflet.js:6).

QUESTIONS:

Why do the popup scroll/fly off the page when I click on the map? How can I display a static map from local resources that I can geo-reference? Taking a step back, am I taking the best approach to display a static image over a map?

Thanks for your attention to my questions.

00<!DOCTYPE html>

00<html>

00<head>

00 <title>My test map</title>

00 <meta charset="utf-8" />

00 <meta name="format-detection" content="telephone=no" />

00 <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

00 <link rel="stylesheet" type="text/css" href="../css/jquery.mobile-1.3.1.css" />

00 <link rel="stylesheet" type="text/css" href="../css/leaflet.css" />

00

00 <script type="text/javascript" charset="utf-8" src="../js/jquery-1.9.1.js"></script>

00 <script type="text/javascript" charset="utf-8" src="../js/jquery.mobile-1.3.1.js"></script>

00 <script type="text/javascript" charset="utf-8" src="../js/underscore-min.js"></script>

00 <script type="text/javascript" charset="utf-8" src="../js/backbone-min.js"></script>

00 <script type="text/javascript" charset="utf-8" src="../js/leaflet.js"></script>

00 <script type="text/javascript" charset="utf-8" src="../cordova-2.7.0.js"></script>

00 <script type="text/javascript">

00 $(document).ready(function () { // DOM loaded

00 $(document).on("deviceready", onDeviceReady);

00 console.log('--DOM loaded');

00 });

00 function onDeviceReady() {

00 console.log('--onDeviceReady');

00 }

00 </script>

00 <style>

00 body {

00 padding: 0;

00 margin: 0;

00 }

00 html, body, #map {

00 height: 100%;

00 }

00 </style>

00</head>

01<body>

02 <div id="map" data-role="page" style='height:100%; width:100%'></div>

03 <script type="text/javascript">

04 var bounds = [[35.898295,-78.870796], [35.911087,-78.860303]];

05 var map = new L.Map('map')

06 .setView(new L.LatLng(35.904691,-78.8655495), 0)

07 .addLayer(new L.ImageOverlay("../img/campus.png", bounds));

08 var popup = L.popup();

09 function onMapClick(e) {

10 console.log('map onclick!');

11 popup.setLatLng(e.latlng).setContent("You clicked the map at " + e.latlng.toString()).openOn(map);

12 }

13 map.on('click', onMapClick);

14 </script>

15</body>

16</html>

Reply all

Reply to author

Forward

0 new messages