addMarker problem/advice

Solar2D General Questions/Discussion
#1

i create a mark on a native map.

then i create a markerListener so when i press the pin will show the title and subtitle.

the problem is that i want to go to another function but only if the user press the popup title/subtitle not when i press the pin.

is there any listener for the popup? if not any suggestions?

one thing that i thought about is calling the function only the second time i press the pin, but people don’t press the pin 2x they press the pin then press the popup if they want to go somewhere else…i wan’t to respect that.

regards,

Carlos.

#2

I have exactly the same problem! Please somebody step forward and explain this  :slight_smile:

#3

i doubt maps will be updated in the near future. i asked other questions related to maps still with 0 answers. you can vote for this and other features, like i did.

my advice to you is implement yourself a html/javascript version with your needs and insert it on corona.

#4

You mean in a WebView ?

#5

yes using native.newWebView()

create your html using google api to create pins and other stuffs you want then use:

webView:request( “localfile.html”, system.ResourceDirectory )

to run it. it’s the best option for now, since corona sucks in maps.

i even found a bug, that i reported that was never corrected. if you create and delete marks, some times takes only 2 or 3 create and delete marks to crash my app, other times takes more than 10…i suspect that removing and creating with those all animations going on are not well removed and created.

#6

Thanks. It’s a bad habit from Coronas side that they keep on releasing half-baked stuff like this and then ignores the feedback from the users.

I’ll check out the google maps javascript api pages and see if I get any wiser (shouldn’t be too hard (to get any wiser I mean)).

https://developers.google.com/maps/documentation/javascript/

#7

I implemented Weather Underground radar imagery over top of a Google Map through a webView. It was fairly easy to do, but I’m also javascript savvy and understand how Google’s objects works. I have pinch-zoomable weather radar with animated GIFs for the radar.

Basically have a multi-line Lua string that holds my HTML, Javascript and CSS in several variables. Then when the scene loads, I fill in the other variables (latitude, longitude, etc) and write out an index.html file to system.TemoraryDirectory and ship that puppy into a webView designed to fit between the navbar and tabbar. Javascript then fetches the Weather Underground animated GIF for that Lat, Long and ZoomLevel and overlays it on the map.

I do have to detect zoom changes or x, y changes and refetch the radar data for the new map setup.

local header = [[\<!DOCTYPE html\> \<html\> \<head\> \<title\>Google Maps JavaScript API v3 Example: Map Simple\</title\> \<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"\> \<meta charset="utf-8"\> \<style\> html, body, #map\_canvas { margin: 0; padding: 0; height: 100%; } \</style\> \<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXX"\>\</script\> \<script\> var map; var radarOverlay; var mapBounds; var API\_calls = 0; var rateLimitTimer;]] local body = [[function initialize() { var myLatLong = new google.maps.LatLng(latitude, longitude); var mapOptions = { zoom: 8, center: myLatLong, mapTypeId: google.maps.MapTypeId.ROADMAP, zoomControl: false, scaleControl: false, panControl: false, streetViewControl: false, overviewMapContro: false }; map = new google.maps.Map(document.getElementById('map\_canvas'), mapOptions); google.maps.event.addListener(map, 'idle', function() { API\_calls++; if (API\_calls \> 9) { // rate limit return(true); } var center = map.getCenter(); var bounds = map.getBounds(); var zoom = map.getZoom(); ne = bounds.getNorthEast(); sw = bounds.getSouthWest(); var URL = 'http://api.wunderground.com/api/XXXXXXXXXXXXXXXX/animatedradar/image.gif?num=5&delay=50&maxlat=' + ne.lat() + '&maxlon=' + sw.lng() + '&minlat=' + sw.lat() + '&minlon=' + ne.lng() + '&width=' + screenWidth + '&height=' + screenHeight + '&rainsnow=1&smooth=1&noclutter=1'; if (radarOverlay) { radarOverlay.setMap(null); } radarOverlay = new google.maps.GroundOverlay( URL, bounds ); radarOverlay.setMap(map); }); rateLimitTimer = setInterval(function () { API\_calls--; if (API\_calls \< 0) { API\_calls = 0; } }, 15000); } google.maps.event.addDomListener(window, 'load', initialize); \</script\> \</head\> \<body\> \<div id="map\_canvas"\>\</div\> \</body\> \</html\>]] function scene:show( event ) local sceneGroup = self.view params = event.params if event.phase == "will" then local path = system.pathForFile( "radar.html" , system.TemporaryDirectory ) local fp = io.open( path, "w" ) if fp then fp:write(header) fp:write("var latitude = " .. tostring( myData.latitude ) .. ";\n") fp:write("var longitude = " .. tostring( myData.longitude ) .. ";\n") fp:write("var screenWidth = " .. tostring( display.contentWidth) .. ";\n") fp:write("var screenHeight = " .. tostring( display.contentHeight - 50) .. ";\n") fp:write(body) fp:close() end else webView = native.newWebView( display.contentCenterX, display.contentCenterY - 25, display.contentWidth, display.contentHeight - 50 ) local path = system.pathForFile( "radar.html" , system.TemporaryDirectory ) local fp = io.open( path, "r" ) -- make sure I can access the file I just created if fp then fp:close(); webView:request( "radar.html", system.TemporaryDirectory ) else webView:request( "radar.html", system.ResourceDirectory ) end end end

Rob

#8

Thanks for the code, Rob  :slight_smile:

Creating html code on the fly like this was inventive. I think I may be able to do something similar. I need to add a variable number of markers, dependent on user filter settings. Maybe I have a database of 1000 markers. The user may apply misc filters so that, say, 50 of them are visible. When the user applies a filter, I have to recreate a local file like above, adding the markers.

But how fast is such an implementation compared to what I do today (having a map and just adding and removing markers)? Will the user experience be smooth? I also note that you recreate a newWebView for each scene:show. I guess this is the way to do it since you (of all people) do it, but will a recreate/file create/load operation like this feel smooth to the user?

Guess the only way to know is to actually DO it… :smiley:

#9

It’s pretty fast. In my case getting the GIF from Weather Underground is a bit pokey, but that’s the nature of what I’m doing. An animated gif that screen size with multiple frames is a big file to download.

But creating the HTML processing some data points out of a database should be pretty quick, and if you’re going to a scene, you can hide some of the work by doing part of it in the “will” phase (setup the HTML, fetch the data, etc.) and then when the scene is on screen create the webView. There is no network traffic since the HTML is local so it’s a next frame kind of update. That said, you’re still hitting Google Maps web service for the tiles. You’re going to be limited to how fast your network connect and their servers are. But the native.newMapView()'s would suffer a similar fate.

Rob

#10

Ok, Rob, I’ve now successfully generated an html file and markers using your “formula” above.

It’s does not have all functionality yet, but it’s probably a solution for my “advance marker usage”. Advanced being this functionality:

  • Click once on a marker  = popup info

  • Click once more = go to a new web page

The app I’m struggling with is a kind of a “panorama app” showing my drone panoramas.

The panoramas are made with PTGUI, which also exports the panoramas to a “web format” (meaning a html file, some javascript and the image files themselves). An example is this:

http://www.allthumbsdev.com/BorgPanorama/panos/2daf1273f2747d6aeb019dcd02a6a3d0/pano.html

Now, the challenge is to show these panoramas within a webview to hide the URL. Before playing with the “realtime html assembly” solution above he app worked like this:

The main screen consisted of a top menu and a newMapView filling the rest of the screen. The mapView was populated with markers, each for a panorama position. Then, when such a marker was tapped I opened up the corresponding panorama html file in  a separate scene with a webview. When the Android back button was pressed, I simply closed webview scene and returned to the main screen with the mapView.

This works absolutely brilliantly and looks about like this:

https://www.youtube.com/watch?v=2v8LQMObLWQ

But using a webview for both the map and the panorama is challenging, especially when it comes to the “back” handling. I can only see two solutions:

  1. Recode the panorama html file so that it includes a back button which can be pressed

  2. Somehow handle the back button press from within the app itself. If the back button is pressed I can

  a] call the back() method on the webview

  b] Load the local map URL  in the webview

I’m hoping to avoid 1 since these files are generated by the panorama program and I really don’t want to mess with those files…

But both 2a and 2b depends on knowing if it is the map or if it is the pano that is showing in the webview and how can I know  that? Is there some way of communicating back to the app that a marker has been tapped?

It’s been a very long day and I might have overlooked something very obvious, but currently I don’t see how I can solve this with the one-the-fly html assembly thing.

#11

Another issue I have with the Google Maps Javascript API solution is the zoom levels. Using native: newMap I could use map:setRegion() to show the region containing my selected markers and not much more. With the Google API it is much more difficult and probably impossible to get something similar, because it operates with integer zoom levels. 

#12

Found the solution to my problem with determining what was showing in the webview myself. Turns out I can use the webListener to keep track of the url which is shown in the webview… Obvious if you know about it  :smiley:

So now I just check the first letters for “file”, which means that the webview is showing the base map page and I can take actions from there.

local function webListener( event ) if event.url then if (string.sub(event.url, 1, 4) == "file") then composer.webViewShowsMap = true else composer.webViewShowsMap = false end end end webView = native.newWebView( \_CENTER\_X, \_CENTER\_Y, \_FULL\_W, \_FULL\_H) webView:addEventListener( "urlRequest", webListener )
#13

Not to hijack this thread, I’ve moved any further the discussion (about my “personal” issues) here:

https://forums.coronalabs.com/topic/63305-panorama-app-my-webview-challenges-and-some-solutions/

#14

@rob, in your example you put 

https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXX

the key you created on  google api console was server, android, ios or web?

web keys seems unsecured. i can’t put a web site as a refer because i’m requesting from an app not a website so everyone will be able to use my key if they find it.

android and ios keys will give me 2 different keys so the statistics will be divided for the same app and i need to code more to check what device the user is using to call the correct key.

server looks the best option. i can create a .php that accept parameters and inside the .php i will execute the call to google server, and i can limite the use of that call from my server only.

what’s your experience in this?

regards,

Carlos.

#15

It’s being used in a webView not using a native SDK, so web is what makes sense.

Rob

#16

web makes senses but when you create the key in google account, it asks an internet address so the requests can only be made from that address, even if anyone gots the key they can’t use it. since i’m using in my app i don’t have an address so “anyone” can use my key. the methods i saw, the one that looks more appropriate is android and ios. i can put the package name there so only my app can use the key. the problem is that i need to do 2 keys and make if statments in my code to check if its android or ios to put the correct key.

#17

I have exactly the same problem! Please somebody step forward and explain this  :slight_smile:

#18

i doubt maps will be updated in the near future. i asked other questions related to maps still with 0 answers. you can vote for this and other features, like i did.

my advice to you is implement yourself a html/javascript version with your needs and insert it on corona.

#19

You mean in a WebView ?

#20

yes using native.newWebView()

create your html using google api to create pins and other stuffs you want then use:

webView:request( “localfile.html”, system.ResourceDirectory )

to run it. it’s the best option for now, since corona sucks in maps.

i even found a bug, that i reported that was never corrected. if you create and delete marks, some times takes only 2 or 3 create and delete marks to crash my app, other times takes more than 10…i suspect that removing and creating with those all animations going on are not well removed and created.