Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Custom Map Markers With Buttons!
Started by TandG Aug 21 2013 09:31 AM

18 replies to this topic
mapview newmapview makers custom button
[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

TandG

[GLOBAL: userInfoPane.html]
TandG
  • Enterprise
  • PipPipPipPipPipPip
  • 386 posts
  • Jedi

Hi everyone,

 
 
I've seen a lot of posts on the forums recently asking about custom map markers and buttons on the pop up box. Therefore i thought id share this little test project that will allow you to use custom markers, buttons and have it all returned back to Corona. It's essentially just a HTML page with some javascript thats loaded in a webView or webPopup. Credit goes to jasonschroeder who posted the HTML creation in the code exchange, i simply expanded upon that and made it more customizable and (hopefully) easier to use.
 
It has its fair share of issues (only on the Android side), but if you guys use it and improve upon it then we should get a pretty decent project in the end! 
So far you can:
    - Add custom images for markers
    - Edit the popup box (Not easy currently, you'll need to know css etc)
    - A popup button that will close the map and return the markers index to corona
    - Change the zoom level
    - Allow the map to be draggable or not
    - Allow zooming or not
    - Change the map type (satellite, hybrid etc)
    - Allow styling (blue map, red roads etc, advanced)
    - Change the maps language (only really has an effect with "ja" for japanese)
    - Enable bouncing pins, but its pretty buggy currently!

 

 

 

Heres the project:

Attached File  MapTest.zip   14.66KB   151 downloads

 

 

And below are a few images to demonstrate the code:

Attached File  Screen-Shot-2013-08-21-at-15.27.46.jpg   46.79KB   311 downloadsAttached File  Screen-Shot-2013-08-21-at-12.53.59.jpg   49.56KB   409 downloadsAttached File  Screen-Shot-2013-08-21-at-15.36.15.jpg   55.63KB   305 downloads

 

 

 
Its not the fatest thing in the world, but its probably the best you can do without going to Enterprise (which is alot better and faster on iOS!).
I hope this helps someone! 
 
 
Best Regards,
 
Jamie Trinder
 

 



[TOPIC: post.html]
#2

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Pro
  • PipPipPipPipPipPip
  • 2,741 posts
  • Jedi

This is wonderful. Thanks for sharing. I have few ideas which I had to shelf until Corona SDK allowed me to do what you just did so perhaps I can pursue them now. Appreciate your contribution.



[TOPIC: post.html]
#3

TandG

[GLOBAL: userInfoPane.html]
TandG
  • Enterprise
  • PipPipPipPipPipPip
  • 386 posts
  • Jedi

Thanks and no problem. It could do with some improving, but my HTML and javascript skills are extremely limited :)



[TOPIC: post.html]
#4

TandG

[GLOBAL: userInfoPane.html]
TandG
  • Enterprise
  • PipPipPipPipPipPip
  • 386 posts
  • Jedi

Hi all,

 

Just a quick update to post the newer version of this code. Theres a few changes but the most important ones are:

  • Now adds a non-clickable marker to display the users current location (only updates once you re-open the map)
  • The map center is now also based off the users location
  • iOS styled info boxes
  • Each marker can now have different custom images (URL based)
  • The shadow image has been removed and now you just build it into your custom marker (just makes life easier!)

 

Heres a couple of images demonstrating the new style info boxes and the user location pin!

 

Attached File  screen1.jpg   31.9KB   138 downloads Attached File  screen2.jpg   36.02KB   163 downloads

 

And heres the downloadable project:

 

Attached File  CustomMapView.zip   10.78KB   101 downloads

 

 

A slight improvement on the previous version and i think the info boxes look a lot better now. Hopefully i'll figure out how to have the users location dynamically update soon, but i'm not holding my breath. Let me know if you think theres anything else needed for it :)

 

Best Regards,

 

Jamie Trinder



[TOPIC: post.html]
#5

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Pro
  • PipPipPipPipPipPip
  • 2,741 posts
  • Jedi

Daily # 1214 seems to introduce a new capability into this arena.



[TOPIC: post.html]
#6

TandG

[GLOBAL: userInfoPane.html]
TandG
  • Enterprise
  • PipPipPipPipPipPip
  • 386 posts
  • Jedi

Yes i saw that and got pretty excited!

 

But as far as i can tell without actually trying the code, it will only give you some information about the marker in a listener function. That doesn't actually help showing a button on the marker, or custom markers, but at least it gives us the ability to add extra buttons outside of the mapView when a pin is touched!

 

I'll test it out soon to see how it goes!



[TOPIC: post.html]
#7

OwenYang

[GLOBAL: userInfoPane.html]
OwenYang
  • Enterprise
  • PipPipPipPipPipPip
  • 160 posts
  • Jedi

Hi Tang

is it possible to click some button (not in that map), and the button related to the marker .

so it trigger a event then show title and subtitle on the map?



[TOPIC: post.html]
#8

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Corona Staff
  • 10,051 posts
  • Jedi

The new map markers support a Title and Subtitle field that shows in a little speech bubble above each pin point.  You can now also include custom images for those markers if you like.  When a pin is tapped, an event is fired that has some information about that pin.  You could during that event update another display with information about the pin that was tapped.



[TOPIC: post.html]
#9

OwenYang

[GLOBAL: userInfoPane.html]
OwenYang
  • Enterprise
  • PipPipPipPipPipPip
  • 160 posts
  • Jedi

@ Rob Miracle

i get a list of places from google place API

than i make a tableview list with these data

 

And generate several marks into MAP.

I wonder can i touch anyone on the list row then it goes to the marker directly instead of touching on the map.

 

Thanks



[TOPIC: post.html]
#10

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Corona Staff
  • 10,051 posts
  • Jedi

If you have the lat, long numbers you can center the map on that point and if the marker is there it will be centered.  But you won't get the speech bubble with the title and subtitle without tapping on the marker.



[TOPIC: post.html]
#11

OwenYang

[GLOBAL: userInfoPane.html]
OwenYang
  • Enterprise
  • PipPipPipPipPipPip
  • 160 posts
  • Jedi

@Rob Miracle

thanks, is there any way to show speech bubble without tapping?

there are so many markers on the map, so it's so difficult to tap on them if there is no bubble show up automatically.

 

anyway, any suggestion?



[TOPIC: post.html]
#12

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Corona Staff
  • 10,051 posts
  • Jedi

Not that I'm aware of.  This could be a good feature.  Please suggest it at http://feedback.coronalabs.com



[TOPIC: post.html]
#13

schroederapps

[GLOBAL: userInfoPane.html]
schroederapps
  • Pro
  • PipPipPipPipPipPip
  • 168 posts
  • Jedi

Just saw this post, referred by the "From the Forum" blog entry and wanted to say thanks to TandG for expanding on my old Code Exchange submission! Awesome to see it got some use (and some under-the-hood improvements!)



[TOPIC: post.html]
#14

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Pro
  • PipPipPipPipPipPip
  • 2,741 posts
  • Jedi

Yes i saw that and got pretty excited!

 

But as far as i can tell without actually trying the code, it will only give you some information about the marker in a listener function. That doesn't actually help showing a button on the marker, or custom markers, but at least it gives us the ability to add extra buttons outside of the mapView when a pin is touched!

 

I'll test it out soon to see how it goes!

 

@TandG, taking the thread back to your code... I was wondering if you have made any further progress. Can you kindly let us know if you have any additional insight? Thank you very much!!!



[TOPIC: post.html]
#15

TandG

[GLOBAL: userInfoPane.html]
TandG
  • Enterprise
  • PipPipPipPipPipPip
  • 386 posts
  • Jedi

Hey Ksan,

 

Unfortunately i haven't made any changes to the code in quite a while.. 

 

The above HTML code wasn't quick enough for the purposes we needed, so we shifted our efforts onto making some Enterprise maps that did. Hopefully i'll have some time to see if this can be expanded further in the future!

 

Thanks,

Jamie



[TOPIC: post.html]
#16

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Pro
  • PipPipPipPipPipPip
  • 2,741 posts
  • Jedi

Hi Jamie, 

 

Thanks for your response. How has your experience been with the Enterprise option? I assume you are using the native map object/services exposed to you by the underlying OS.

 

While looking at various options I came across a service called MapBox.com. They are used by a number of big names in the industry and do offer a REST API. A little expensive but interesting nonetheless. I was thinking about trying their service using REST API and webViews in Corona SDK. Just an idea at this stage. 

 

Regards & thanks,

Kerem



[TOPIC: post.html]
#17

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Pro
  • PipPipPipPipPipPip
  • 2,741 posts
  • Jedi

... we shifted our efforts onto making some Enterprise maps that did. ...

 

Hi Jamie, 

 

Still persevering with the CL implementation of the mapView but can't help wondering what can be achieved with an Enterprise license and access to native calls.

 

How hard was it for you to bridge the gap using Enterprise and native calls? Would you be interested in marketing your map component (ie plugin) to other Enterprise license holders? Too bad the plugin market is not live yet and we can't as Pro users take advantage of progress you make using the native calls but hopefully that day will come. 

 

Meanwhile any screenshots etc to whet the appetites would be so much appreciated. 

 

Thank you very much. Regards,

Kerem



[TOPIC: post.html]
#18

TandG

[GLOBAL: userInfoPane.html]
TandG
  • Enterprise
  • PipPipPipPipPipPip
  • 386 posts
  • Jedi

Hi Kerem,

 

It wasn't too bad bridging the gap, but i highly doubt we've done it the most optimal way. There was also a few head scratchers as we don't use native code but we got there in the end! We've stayed away from selling the code on for that main reason, a native coder could probably make something much better and more useable. Ours works for the purposes we require, but it's not something we can easily package. 

 

The most noticeable difference going the Enterprise route for us is the speed of the native Android maps. Its leaps and bounds faster than the current map view offered in the native.newMapView() cal, the ability to add buttons on to your marker popup boxes is particularly helpful as well. 

 

In a few large apps we've done the map view has to load 500-700 map markers at a time. Trying that with Coronas current implementation on Android just doesn't work, the whole app grinds to a halt. Doing it with native maps is fine, theres some slight lag while the markers appear but thats it!

 

Unfortunately i can't post screenshots of those apps as their white label and published under a marketing company, but hopefully the above explanation helps :)

 

Thanks,

 

Jamie



[TOPIC: post.html]
#19

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Pro
  • PipPipPipPipPipPip
  • 2,741 posts
  • Jedi

Hi Jamie, 

 

Thank you very much for taking the time to respond in detail. Much appreciated. I will consider your experience in making a decision eventually. I'm trying to stick with the Pro subscription that I have in the hope that the Plugin Market will come along sooner or later and allow us to engage willing and able devs to make plugins for us. The map solution would be a perfect example for the viability of this model. 

 

Glad you managed to make it work for you. I'm just not that confident of my native coding skills... yet...

 

Best regards,

Kerem




[topic_controls]
[/topic_controls]



Also tagged with one or more of these keywords: mapview, newmapview, makers, custom, button