maps inside moai ??

Social Media Widgets / In-App Purchases / HTTP

Moderators: ezraanderson, scottwb

maps inside moai ??

Postby Ziai » Wed Apr 30, 2014 5:51 am

asking here because not sure where would it be more appropriate to ask.

so, would it be possible to use any api for maps and geolocation (lets say google maps api) within our beloved moai?
yes? please pm at least! :)
no? perhaps any alternatives?

thanks a lot guys.
Ziai
 
Posts: 14
Joined: Sun Dec 01, 2013 11:58 pm

Re: maps inside moai ??

Postby ezraanderson » Wed Apr 30, 2014 10:54 am

~
Yes, you can add any API to MOAI that you want. MOAI has Location built in, but you would have to add the map features yourself.
Dead Dark: A roguelike, zombie apocalypse survival game
My Website | My Facebook | My Twitter | My Games on Itunes | My Games on Android
User avatar
ezraanderson
 
Posts: 1094
Joined: Wed Nov 21, 2012 2:24 pm
Location: Canada

Re: maps inside moai ??

Postby ezraanderson » Fri May 02, 2014 11:25 am

~

the location sample is here

the URL would be something like this :
"http://overpass.osm.rambler.ru/cgi/xapi_meta?*[bbox=11.5,48.1,11.6,48.2]"

I am not sure what data is coming back but look at this example

edit: You might have to base64 encode the url parameters

If you have any more questions just ask :)
Dead Dark: A roguelike, zombie apocalypse survival game
My Website | My Facebook | My Twitter | My Games on Itunes | My Games on Android
User avatar
ezraanderson
 
Posts: 1094
Joined: Wed Nov 21, 2012 2:24 pm
Location: Canada

Re: maps inside moai ??

Postby ibisum » Mon May 05, 2014 1:05 am

I implemented a map in MOAI. I did it thus:

1. Backend formulates a .GPX file containing the details. GPX is awesome.
2. GPX file is transmitted to MOAI host.
3. GPX is parsed, a local TMX file is created from the relevant layers.
4. The TMX file is loaded with the Hanappe framework (TMXMapView).
5. Customizations to the control are all done at the TMXMapView level.

Works okay, not as refined as all the plug-n-play components that many developers are used to .. but certainly functional.

I've planned to release this back into the Hanappe community, but its not ready yet.. either way, thought I'd at least let you know there is a path to using maps in MOAI.
;
--
Email: ibisum@gmail.com
IRC: torpor on FreeNode, see you in the #moai channel
Got a MOAI snippet? Please consider adding it to http://moaisnippets.info/
User avatar
ibisum
 
Posts: 1503
Joined: Mon Oct 17, 2011 1:11 am
Location: Vienna, Austria

Re: maps inside moai ??

Postby Ziai » Tue May 06, 2014 12:19 am

ezraanderson wrote:~
I am not sure what data is coming back but look at this example


and that's where the gap 'code wise' opens.
what we are downloading is a map data.. an xml, with all the details you would get on a map.. not an image.
so. :?: who could converert .osm into somthing moai could display?
Ziai
 
Posts: 14
Joined: Sun Dec 01, 2013 11:58 pm

Re: maps inside moai ??

Postby Ziai » Tue May 06, 2014 12:30 am

1. Backend formulates a .GPX file containing the details. GPX is awesome.
from what it looks .GPX is for navigation.. what about actual map? who's providing you that?

3. GPX is parsed, a local TMX file is created from the relevant layers.
TMX - that's the map.. right? what are those relevant layers?

4. The TMX file is loaded with the Hanappe framework (TMXMapView).
is it posible with basic Moai SDK or I'll have to rewrite my project with Hannape in order to have what you are suggesting/implementing.

Not expecting plug-n-play. I am blessed to get confirmed that it's even visible! ;)
Is it really just few folks in entire community who needs MAPs to be implemented? :|
Ziai
 
Posts: 14
Joined: Sun Dec 01, 2013 11:58 pm

Re: maps inside moai ??

Postby ibisum » Tue May 06, 2014 1:14 am

The backend for our app creates a standard GPX file with all the information we need for the map region - waypoints, routes, etc. We parse the GPX file, create our *own* bounding box based on the waypoint cloud collected from the GPX, and from this we then create a set of tiles that must be downloaded (we can use any one of multiple sources - OSM, OpenVKarte, mapquest, etc.) from the map provider at a certain zoom level. These are standard .png files. After the tile images are downloaded and stored to a local cache folder, we can formulate a TMX file (TileMap) from the GPX file which uses these map images in the background layer (standard TMX feature).

Waypoints are then also parsed from the GPX and turned into addressable icons in the Tilemap file.

A sample gpx file, edited for brevity:

Code: Select all
  1.  

  2. <gpx>

  3.   <metadata>

  4.     <desc>hiq-gpx 0.1</desc>

  5.   </metadata>

  6.   <wpt lat="47.45154869999999647234290023334324359893798828125" lon="9.8201617999999992747461874387226998805999755859375">

  7.     <type>JOURNEYSTART</type>

  8.   </wpt>

  9.   <wpt lat="47.45403999999999911096892901696264743804931640625" lon="9.8205200000000001381295078317634761333465576171875">

  10.     <type>JOURNEYEND</type>

  11.   </wpt>

  12.   <rte>

  13.     <name>ROUTE_FROM_GOAL</name>

  14.     <wpt lat="47.336521148681640625" lon="9.62407016754150390625">

  15.       <name>Kirlastraße, Götzis</name>

  16.     </wpt>

  17.     <wpt lat="47.33657073974609375" lon="9.6273097991943359375">

  18.       <name>Kirlastraße</name>

  19.     </wpt>

  20.  

  21. .. etc

  22.  

  23.     <trk/>

  24.   </rte>

  25.   <rte>

  26.     <name>DETAILED_ROUTE_TO_GOAL</name>

  27.     <wpt lat="47.33652000000000015234036254696547985076904296875" lon="9.624069999999999680539986002258956432342529296875"/>

  28.     <wpt lat="47.33655999999999863803168409503996372222900390625" lon="9.6242000000000000881072992342524230480194091796875"/>

  29.     <wpt lat="47.3365900000000010550138540565967559814453125" lon="9.624430000000000262616595136933028697967529296875"/>

  30. .. etc

  31.  

  32.     <wpt lat="47.3348800000000125010046758688986301422119140625" lon="9.629720000000002499973561498336493968963623046875"/>

  33.     <wpt lat="47.3349800000000158206603373400866985321044921875" lon="9.629740000000001742819222272373735904693603515625"/>

  34.  

  35.   </rte>

  36.  

  37. </gpx>

  38.  



.. which becomes this TMX file:

Code: Select all
  1.  

  2.  

  3. <map version='1.0' tileheight='256' height='5' tilewidth='256' orientation='orthogonal' width='5'>

  4.     <tileset firstgid='1' tilewidth='64' name='mapicons' tileheight='64'>

  5.         <image height='512' source='assets/MAPICONS.png' width='512'/>

  6.     </tileset>

  7.     <tileset firstgid='65' tilewidth='64' name='mapatlas' tileheight='64'>

  8.         <image height='1024' source='assets/MAPATLAS.png' width='1024'/>

  9.     </tileset>

  10.     <tileset firstgid='321' tilewidth='256' name='1432|2156' tileheight='256'>

  11.         <image height='256' source='.//mapCache/openstreetmap/12/standard-z12-x2156-y1432.png' width='256'/>

  12.         <properties>

  13.             <property name='tilename' value='1432|2156'/>

  14.         </properties>

  15.     </tileset>

  16.     <tileset firstgid='322' tilewidth='256' name='1432|2157' tileheight='256'>

  17.         <image height='256' source='.//mapCache/openstreetmap/12/standard-z12-x2157-y1432.png' width='256'/>

  18.         <properties>

  19.             <property name='tilename' value='1432|2157'/>

  20.         </properties>

  21.     </tileset>

  22.     <tileset firstgid='323' tilewidth='256' name='1432|2158' tileheight='256'>

  23.         <image height='256' source='.//mapCache/openstreetmap/12/standard-z12-x2158-y1432.png' width='256'/>

  24.         <properties>

  25.             <property name='tilename' value='1432|2158'/>

  26.         </properties>

  27.     </tileset>

  28.     <tileset firstgid='324' tilewidth='256' name='1432|2159' tileheight='256'>

  29.         <image height='256' source='.//mapCache/openstreetmap/12/standard-z12-x2159-y1432.png' width='256'/>

  30.         <properties>

  31.             <property name='tilename' value='1432|2159'/>

  32.         </properties>

  33.     </tileset>

  34.     <tileset firstgid='325' tilewidth='256' name='1432|2160' tileheight='256'>

  35.         <image height='256' source='.//mapCache/openstreetmap/12/standard-z12-x2160-y1432.png' width='256'/>

  36.         <properties>

  37.             <property name='tilename' value='1432|2160'/>

  38.         </properties>

  39.     </tileset>

  40.     <tileset firstgid='326' tilewidth='256' name='1433|2156' tileheight='256'>

  41.         <image height='256' source='.//mapCache/openstreetmap/12/standard-z12-x2156-y1433.png' width='256'/>

  42.         <properties>

  43.             <property name='tilename' value='1433|2156'/>

  44.         </properties>

  45.     </tileset>

  46.     <tileset firstgid='327' tilewidth='256' name='1433|2157' tileheight='256'>

  47.         <image height='256' source='.//mapCache/openstreetmap/12/standard-z12-x2157-y1433.png' width='256'/>

  48.         <properties>

  49.             <property name='tilename' value='1433|2157'/>

  50.         </properties>

  51.     </tileset>

  52.     <tileset firstgid='328' tilewidth='256' name='1433|2158' tileheight='256'>

  53.         <image height='256' source='.//mapCache/openstreetmap/12/standard-z12-x2158-y1433.png' width='256'/>

  54.         <properties>

  55.             <property name='tilename' value='1433|2158'/>

  56.         </properties>

  57.     </tileset>

  58.     <tileset firstgid='329' tilewidth='256' name='1433|2159' tileheight='256'>

  59.         <image height='256' source='.//mapCache/openstreetmap/12/standard-z12-x2159-y1433.png' width='256'/>

  60.         <properties>

  61.             <property name='tilename' value='1433|2159'/>

  62.         </properties>

  63.     </tileset>

  64.     <tileset firstgid='330' tilewidth='256' name='1433|2160' tileheight='256'>

  65.         <image height='256' source='.//mapCache/openstreetmap/12/standard-z12-x2160-y1433.png' width='256'/>

  66.         <properties>

  67.             <property name='tilename' value='1433|2160'/>

  68.         </properties>

  69.     </tileset>

  70.     <tileset firstgid='331' tilewidth='256' name='1434|2156' tileheight='256'>

  71.         <image height='256' source='.//mapCache/openstreetmap/12/standard-z12-x2156-y1434.png' width='256'/>

  72.         <properties>

  73.             <property name='tilename' value='1434|2156'/>

  74.         </properties>

  75.     </tileset>

  76.     <tileset firstgid='332' tilewidth='256' name='1434|2157' tileheight='256'>

  77.         <image height='256' source='.//mapCache/openstreetmap/12/standard-z12-x2157-y1434.png' width='256'/>

  78.         <properties>

  79.             <property name='tilename' value='1434|2157'/>

  80.         </properties>

  81.     </tileset>

  82.     <tileset firstgid='333' tilewidth='256' name='1434|2158' tileheight='256'>

  83.         <image height='256' source='.//mapCache/openstreetmap/12/standard-z12-x2158-y1434.png' width='256'/>

  84.         <properties>

  85.             <property name='tilename' value='1434|2158'/>

  86.         </properties>

  87.     </tileset>

  88.     <tileset firstgid='334' tilewidth='256' name='1434|2159' tileheight='256'>

  89.         <image height='256' source='.//mapCache/openstreetmap/12/standard-z12-x2159-y1434.png' width='256'/>

  90.         <properties>

  91.             <property name='tilename' value='1434|2159'/>

  92.         </properties>

  93.     </tileset>

  94.     <tileset firstgid='335' tilewidth='256' name='1434|2160' tileheight='256'>

  95.         <image height='256' source='.//mapCache/openstreetmap/12/standard-z12-x2160-y1434.png' width='256'/>

  96.         <properties>

  97.             <property name='tilename' value='1434|2160'/>

  98.         </properties>

  99.     </tileset>

  100.     <tileset firstgid='336' tilewidth='256' name='1435|2156' tileheight='256'>

  101.         <image height='256' source='.//mapCache/openstreetmap/12/standard-z12-x2156-y1435.png' width='256'/>

  102.         <properties>

  103.             <property name='tilename' value='1435|2156'/>

  104.         </properties>

  105.     </tileset>

  106.     <tileset firstgid='337' tilewidth='256' name='1435|2157' tileheight='256'>

  107.         <image height='256' source='.//mapCache/openstreetmap/12/standard-z12-x2157-y1435.png' width='256'/>

  108.         <properties>

  109.             <property name='tilename' value='1435|2157'/>

  110.         </properties>

  111.     </tileset>

  112.     <tileset firstgid='338' tilewidth='256' name='1435|2158' tileheight='256'>

  113.         <image height='256' source='.//mapCache/openstreetmap/12/standard-z12-x2158-y1435.png' width='256'/>

  114.         <properties>

  115.             <property name='tilename' value='1435|2158'/>

  116.         </properties>

  117.     </tileset>

  118.     <tileset firstgid='339' tilewidth='256' name='1435|2159' tileheight='256'>

  119.         <image height='256' source='.//mapCache/openstreetmap/12/standard-z12-x2159-y1435.png' width='256'/>

  120.         <properties>

  121.             <property name='tilename' value='1435|2159'/>

  122.         </properties>

  123.     </tileset>

  124.     <tileset firstgid='340' tilewidth='256' name='1435|2160' tileheight='256'>

  125.         <image height='256' source='.//mapCache/openstreetmap/12/standard-z12-x2160-y1435.png' width='256'/>

  126.         <properties>

  127.             <property name='tilename' value='1435|2160'/>

  128.         </properties>

  129.     </tileset>

  130.     <tileset firstgid='341' tilewidth='256' name='1436|2156' tileheight='256'>

  131.         <image height='256' source='.//mapCache/openstreetmap/12/standard-z12-x2156-y1436.png' width='256'/>

  132.         <properties>

  133.             <property name='tilename' value='1436|2156'/>

  134.         </properties>

  135.     </tileset>

  136.     <tileset firstgid='342' tilewidth='256' name='1436|2157' tileheight='256'>

  137.         <image height='256' source='.//mapCache/openstreetmap/12/standard-z12-x2157-y1436.png' width='256'/>

  138.         <properties>

  139.             <property name='tilename' value='1436|2157'/>

  140.         </properties>

  141.     </tileset>

  142.     <tileset firstgid='343' tilewidth='256' name='1436|2158' tileheight='256'>

  143.         <image height='256' source='.//mapCache/openstreetmap/12/standard-z12-x2158-y1436.png' width='256'/>

  144.         <properties>

  145.             <property name='tilename' value='1436|2158'/>

  146.         </properties>

  147.     </tileset>

  148.     <tileset firstgid='344' tilewidth='256' name='1436|2159' tileheight='256'>

  149.         <image height='256' source='.//mapCache/openstreetmap/12/standard-z12-x2159-y1436.png' width='256'/>

  150.         <properties>

  151.             <property name='tilename' value='1436|2159'/>

  152.         </properties>

  153.     </tileset>

  154.     <tileset firstgid='345' tilewidth='256' name='1436|2160' tileheight='256'>

  155.         <image height='256' source='.//mapCache/openstreetmap/12/standard-z12-x2160-y1436.png' width='256'/>

  156.         <properties>

  157.             <property name='tilename' value='1436|2160'/>

  158.         </properties>

  159.     </tileset>

  160.     <layer height='5' name='mapTiles' width='5'>

  161.         <data>

  162.             <tile gid='321'/>

  163.             <tile gid='322'/>

  164.             <tile gid='323'/>

  165.             <tile gid='324'/>

  166.             <tile gid='325'/>

  167.             <tile gid='326'/>

  168.             <tile gid='327'/>

  169.             <tile gid='328'/>

  170.             <tile gid='329'/>

  171.             <tile gid='330'/>

  172.             <tile gid='331'/>

  173.             <tile gid='332'/>

  174.             <tile gid='333'/>

  175.             <tile gid='334'/>

  176.             <tile gid='335'/>

  177.             <tile gid='336'/>

  178.             <tile gid='337'/>

  179.             <tile gid='338'/>

  180.             <tile gid='339'/>

  181.             <tile gid='340'/>

  182.             <tile gid='341'/>

  183.             <tile gid='342'/>

  184.             <tile gid='343'/>

  185.             <tile gid='344'/>

  186.             <tile gid='345'/>

  187.         </data>

  188.     </layer>

  189.     <objectgroup name='ROUTE_FROM_GOAL' visible='0'>

  190.         <object y='777' x='352' name='Kirlastraße, Götzis' gid='7' height='64' visible='1' width='64'/>

  191.         <object y='777' x='361' name='Kirlastraße' gid='2' height='64' visible='1' width='64'/>

  192. ..etc

  193.     </objectgroup>

  194.     <objectgroup visible='1' opacity='1' name='pois'>

  195.         <object y='282' type='JOURNEYSTART' name='13926' gid='12' height='64' visible='1' x='923' width='64'/>

  196.         <object y='272' type='JOURNEYEND' name='13924' gid='13' height='64' visible='1' x='924' width='64'/>

  197.     </objectgroup>

  198. </map>

  199.  



.. this has been edited for clarity (the files get large at times) but all the basics are there - a careful inspection will reveal the basics of the transforms that are needed in the GPX->TMX process.

This TMX file is then loadable directly with the Hanappe TMXMapView component, which gives us a usable control that can then be extended for other features (live updates, navigation/scrolling, etc.)

My implementation is customer-proprietary at the moment, but I hope that gives you a head-start to doing your own version. We may release this back to the Hanappe framework as an additional module - but that will have to wait until after we're done with the project we're using this on ..
;
--
Email: ibisum@gmail.com
IRC: torpor on FreeNode, see you in the #moai channel
Got a MOAI snippet? Please consider adding it to http://moaisnippets.info/
User avatar
ibisum
 
Posts: 1503
Joined: Mon Oct 17, 2011 1:11 am
Location: Vienna, Austria


Return to Advertising + Networking + IAPs

Who is online

Users browsing this forum: No registered users and 1 guest

cron

x