WebMapLite and iPhone

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

WebMapLite and iPhone

Manuel Meyer-5
Hey,

I am trying to write a prototype-like website, that will be easy  
accesible for mobil devices.
I am testing on an iPhone.
With the following code it works quite good. I make use of the  
iPhone's ontouchstart event for the navigation. But I dont have a good  
idea how to attach this for the infoWindow.
Is there a way to emulate click events, when a ontouchstart event was  
fired on a marker?
Or any other Idea?

thanks, Manuel

<html>
     <head>
      <meta http-equiv="Content-Type" content="text/html;  
charset=utf-8"/>
      <meta name="apple-mobile-web-app-capable" content="yes" />
         <meta name="apple-touch-fullscreen" content="YES" />
      <meta name="viewport" content="width=device-width,initial-
scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
         <title>weimar mobil</title>
         <style type="text/css" media="screen">
             body{
                 top:0;
                 left:0;
                 right:0;
                 bottom:0;
                 padding:0;
                 margin:0;
              }
         </style>
         <script type="text/javascript" src="http://tile.cloudmade.com/wml/0.2/web-maps-lite.js 
"></script>
         <script type="text/javascript" src="/mw/sitemedia/js/
jquery.js"></script>
     </head>

     <body>
       <div id="content">
         <div id="map" style="height:100%; width: 100%;" ></div>
         <script type="text/javascript">
             var cloudmade = new CM.Tiles.CloudMade.Web({key: 'MY-
KEY'});
             var map = new CM.Map('map', cloudmade);
             map.enableDragging();
             map.enableDoubleClickZoom();
             var rightS = new CM.Size(200, 0);
             var leftS  = new CM.Size(-200,0);
             var downS  = new CM.Size(0,-200);
             var upS    = new CM.Size(0, 200);

             var center = new CM.LatLng({{ location.latitude }},  
{{ location.longitude }}) //comes from the db
             map.setCenter(center, {{ location.zoom }} );


             $('#map').append(
                    '<img id="upButton" onclick="map.panBy(downS);"    
ontouchstart="map.panBy(downS);" class="control" src="/mw/sitemedia/
img/cstm-pan-top.png" />'+
                    '<img id="downButton" onclick="map.panBy(upS);"    
ontouchstart="map.panBy(upS);"   class="control" src="/mw/sitemedia/
img/cstm-pan-bottom.png" />'+
                    '<img id="rightButton"onclick="map.panBy(rightS);"  
ontouchstart="map.panBy(rightS);"class="control" src="/mw/sitemedia/
img/cstm-pan-right.png" />'+
                    '<img  id="leftButton" onclick="map.panBy(leftS);"  
ontouchstart="map.panBy(leftS);" class="control" src="/mw/sitemedia/
img/cstm-pan-left.png" />'
                    );

             $('#map #upButton').css({ position:'absolute', zIndex:
2000000, top: 0,     left:'45%'});
             $('#map #rightButton').css({ position:'absolute', zIndex:
2000000, top: '45%', right:0});
             $('#map #downButton').css({ position:'absolute', zIndex:
2000000, bottom: 0,  left:'45%'});
             $('#map #leftButton').css({ position:'absolute', zIndex:
2000000, top:'45%',  left:0});


             var m18 = new CM.Marker(new CM.LatLng(50.97487259765326,  
11.329865455627441), {
                 title:"m18",
             });

             map.addOverlay(m18);
             CM.Event.addListener(m18, 'click', function(){
                 m18.openInfoWindow('<h3>M18</h3><p>Das sch&ouml;nste  
Studentencafe</p>', options = { maxWidth: 180});
             });

         </script>
         </div>
     </body>
</html>
_______________________________________________
Dev site list
[hidden email]
http://lists.cloudmade.com/listinfo/dev
Reply | Threaded
Open this post in threaded view
|

Re: WebMapLite and iPhone

Manuel Meyer-5

A paste bin seems to be a better idea for displaying the code:

http://dpaste.com/18768/

> Hey,
>
> I am trying to write a prototype-like website, that will be easy
> accesible for mobil devices.
> I am testing on an iPhone.
> With the following code it works quite good. I make use of the
> iPhone's ontouchstart event for the navigation. But I dont have a good
> idea how to attach this for the infoWindow.
> Is there a way to emulate click events, when a ontouchstart event was
> fired on a marker?
> Or any other Idea?
>
> thanks, Manuel

_______________________________________________
Dev site list
[hidden email]
http://lists.cloudmade.com/listinfo/dev
Reply | Threaded
Open this post in threaded view
|

Re: WebMapLite and iPhone

Vladimir Agafonkin
Manuel,

It looks like a bug in WML - the click event is device-independent and should be working on touches, something apparently broke this before the WML 0.2 launch. We will look into this. Meanwhile, you can use marker._image property to access the actual img element used for the marker to attach events on it.

On Wed, Mar 25, 2009 at 1:14 AM, Manuel Meyer <[hidden email]> wrote:

A paste bin seems to be a better idea for displaying the code:

http://dpaste.com/18768/

> Hey,
>
> I am trying to write a prototype-like website, that will be easy
> accesible for mobil devices.
> I am testing on an iPhone.
> With the following code it works quite good. I make use of the
> iPhone's ontouchstart event for the navigation. But I dont have a good
> idea how to attach this for the infoWindow.
> Is there a way to emulate click events, when a ontouchstart event was
> fired on a marker?
> Or any other Idea?
>
> thanks, Manuel

_______________________________________________
Dev site list
[hidden email]
http://lists.cloudmade.com/listinfo/dev



--
Vladimir Agafonkin
Front-End Architect, CloudMade
+380 93 745 44 61

_______________________________________________
Dev site list
[hidden email]
http://lists.cloudmade.com/listinfo/dev
Reply | Threaded
Open this post in threaded view
|

Re: WebMapLite and iPhone

Manuel Meyer-5
Hey,

If I try to access marker._image the returned value is 'undefined'

i.e. in alert(marker._image);

I am not very deep into js-programming – so maybe i understood you  
wrong. Or is that the bug?

Manuel

> Manuel,
>
> It looks like a bug in WML - the click event is device-independent  
> and should be working on touches, something apparently broke this  
> before the WML 0.2 launch. We will look into this. Meanwhile, you  
> can use marker._image property to access the actual img element used  
> for the marker to attach events on it.
>
> On Wed, Mar 25, 2009 at 1:14 AM, Manuel Meyer <[hidden email]
> > wrote:
>
> A paste bin seems to be a better idea for displaying the code:
>
> http://dpaste.com/18768/
>
> > Hey,
> >
> > I am trying to write a prototype-like website, that will be easy
> > accesible for mobil devices.
> > I am testing on an iPhone.
> > With the following code it works quite good. I make use of the
> > iPhone's ontouchstart event for the navigation. But I dont have a  
> good
> > idea how to attach this for the infoWindow.
> > Is there a way to emulate click events, when a ontouchstart event  
> was
> > fired on a marker?
> > Or any other Idea?
> >
> > thanks, Manuel
>
> _______________________________________________
> Dev site list
> [hidden email]
> http://lists.cloudmade.com/listinfo/dev
>
>
>
> --
> Vladimir Agafonkin
> Front-End Architect, CloudMade
> +380 93 745 44 61

_______________________________________________
Dev site list
[hidden email]
http://lists.cloudmade.com/listinfo/dev
Reply | Threaded
Open this post in threaded view
|

Re: WebMapLite and iPhone

Vladimir Agafonkin
Manuel, access the image after the marker has been added to the map with addOverlay..

On Wed, Mar 25, 2009 at 4:56 PM, Manuel Meyer <[hidden email]> wrote:
Hey,

If I try to access marker._image the returned value is 'undefined'

i.e. in alert(marker._image);

I am not very deep into js-programming – so maybe i understood you wrong. Or is that the bug?

--
Vladimir Agafonkin
Front-End Architect, CloudMade
+380 93 745 44 61

_______________________________________________
Dev site list
[hidden email]
http://lists.cloudmade.com/listinfo/dev
Reply | Threaded
Open this post in threaded view
|

Re: WebMapLite and iPhone

Manuel Meyer-5
YEAAHHH!
Thanks!!

> Manuel, access the image after the marker has been added to the map  
> with addOverlay..
_______________________________________________
Dev site list
[hidden email]
http://lists.cloudmade.com/listinfo/dev