<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40"><head><meta http-equiv=Content-Type content="text/html; charset=us-ascii"><meta name=Generator content="Microsoft Word 12 (filtered medium)"><style><!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal;
font-family:"Calibri","sans-serif";
color:windowtext;}
span.EmailStyle18
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]--></head><body lang=EN-US link=blue vlink=purple><div class=WordSection1><p class=MsoNormal><span style='color:#1F497D'>I’ve found that simply upgrading Openlayers adds better mobile touch capabilities. The change to the compiled.js was unnecessary (so far).<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>Testing with an android galaxy tab 10.1 using its standard web browser and wifi:<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>General observation: everything lays out nicely. Items intended for clicking are probably about 25-50% too small for fingers but everything does work. Toolbar icons work, drop down (tool drawer) works and items are selectable, catalog tabs work, services load in tables correctly. Noticed that the catalog does not have a scroll bar along the right side but the catalog tab contents div supports touch drag scroll capability.<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>Tools that work:<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>Back, Forward, Zoom to Full Extent, Search Tools Drawer and Search services<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>Tools that are not necessary (not sure if they work or not):<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>Pan (hand), Zoom in/out (magnifying glass), Print<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>Tools that don’t work (they don’t seem to activate – standard touch capabilities of the map seem to override tool needs to interactive with the map):<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>Select, Clear (may work?), Rulers, Sketch tools (seemed selecting the individual sketch tools did not initialize and the drawer hung open, couldn’t sketch on the map), any custom tool that required identifying a location on the map did not work.<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>Catalog worked but the line items are a bit small. Folders work – open/close. Layers can be turned on and off. Tabs can be navigated.<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>Jump to and Scale tools work.<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>Map zoom and pan tool works.<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>Inset open close button works.<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>Map touch: point-drag-pan, double tap zoom in, pinch zoom out, unpinch zoom in all works.<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>Because of the way mobile browsers work, double tapping or point dragging any of the non-map portions of the web page can cause the whole page to slide or zoom in and out.<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>I think getting the identify and identify like tools working is my highest priority need. Interface button scale and omitting some unnecessary tools is easy html and css. That would get a barebones working mobile (tablet) Geomoose.<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'>A larger effort might try to incorporate in slide-in catalog and tool bars (out of my scope of know). Bob – great suggestions.<o:p></o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='color:#1F497D'><o:p> </o:p></span></p><div><div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'><p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'> Reynolds, Michael J. (DOT) [mailto:mike.reynolds@state.mn.us] <br><b>Sent:</b> Tuesday, June 28, 2011 3:00 PM<br><b>To:</b> Geomoose Support<br><b>Subject:</b> [Geomoose-users] GeoMoose Mobile OpenLayers Control TouchNavigation<o:p></o:p></span></p></div></div><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>I was wondering if anyone has created a good Mobile Touch version of Geomoose. Is there a good way to do this?<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>I took a quick chop at it. With a version of Goemoose 2.2. Downloaded the newest OpenLayers 2.11-rc1 to the htdocs folder.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Modified the index.html to load the openlayers.js from this new version’s folder.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>In the compiled.js file I made the following change:<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal style='text-autospace:none'><b><span style='font-size:10.0pt;font-family:"Courier New";color:#7F0055'>function</span></b><span style='font-size:10.0pt;font-family:"Courier New";color:black'> configureMap () {</span><span style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p><p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;font-family:"Courier New";color:black'> CONFIGURATION.scales = CONFIGURATION.scales.sort().reverse();</span><span style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p><p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;font-family:"Courier New"'><o:p> </o:p></span></p><p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;font-family:"Courier New";color:black'> </span><b><span style='font-size:10.0pt;font-family:"Courier New";color:#7F0055'>var</span></b><span style='font-size:10.0pt;font-family:"Courier New";color:black'> options = {</span><span style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p><p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;font-family:"Courier New";color:black'> maxExtent : OpenLayers.Bounds.fromArray(CONFIGURATION.max_extent),</span><span style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p><p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;font-family:"Courier New";color:black'> controls : [</span><b><span style='font-size:10.0pt;font-family:"Courier New";color:#7F0055'>new</span></b><span style='font-size:10.0pt;font-family:"Courier New";color:black'> OpenLayers.Control.PanZoomBar(), </span><b><span style='font-size:10.0pt;font-family:"Courier New";color:#7F0055'>new</span></b><span style='font-size:10.0pt;font-family:"Courier New";color:black'> OpenLayers.Control.ScaleJumper({target: </span><span style='font-size:10.0pt;font-family:"Courier New";color:#2A00FF'>'scale-jumper'</span><span style='font-size:10.0pt;font-family:"Courier New";color:black'>}), </span><b><span style='font-size:10.0pt;font-family:"Courier New";color:#7F0055'>new</span></b><span style='font-size:10.0pt;font-family:"Courier New";color:black'> OpenLayers.Control.TouchNavigation({dragPanOptions: {enableKinetic: </span><b><span style='font-size:10.0pt;font-family:"Courier New";color:#7F0055'>true</span></b><span style='font-size:10.0pt;font-family:"Courier New";color:black'> }})],</span><span style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p><p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;font-family:"Courier New";color:black'> units: CONFIGURATION.ground_units,</span><span style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p><p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;font-family:"Courier New";color:black'> projection: </span><b><span style='font-size:10.0pt;font-family:"Courier New";color:#7F0055'>new</span></b><span style='font-size:10.0pt;font-family:"Courier New";color:black'> OpenLayers.Projection(CONFIGURATION.projection),</span><span style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p><p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;font-family:"Courier New";color:black'> displayProjection: </span><b><span style='font-size:10.0pt;font-family:"Courier New";color:#7F0055'>new</span></b><span style='font-size:10.0pt;font-family:"Courier New";color:black'> OpenLayers.Projection(CONFIGURATION.projection),</span><span style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p><p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;font-family:"Courier New";color:black'> fractionalZoom: CONFIGURATION.fractional_zoom</span><span style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p><p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;font-family:"Courier New";color:black'> }</span><span style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Specifically I added “<span style='color:black'>, </span><span style='color:#7F0055'>new</span><span style='color:black'> OpenLayers.Control.TouchNavigation({dragPanOptions: {enableKinetic: </span><span style='color:#7F0055'>true</span><span style='color:black'> }})” to the controls array.<o:p></o:p></span></p><p class=MsoNormal><span style='color:black'><o:p> </o:p></span></p><p class=MsoNormal>The site seemed to load up just fine.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>The map panel now responds to touch gestures:<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Double tap / reverse pinch = zoom in<o:p></o:p></p><p class=MsoNormal>Pinch = zoom out<o:p></o:p></p><p class=MsoNormal>Point drag = pan<o:p></o:p></p><p class=MsoNormal>Zoom to extent tool works.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Some of the navigation tools are not necessary now (magnifying glass, pan?) <o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>The Identify tool does not work. I think the way I added in the Touch Navigation or the existing geomoose tool management doesn’t allow the identify click to override the touch navigation on the map div.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Our goal is to make our Geomoose site compatible with Ipad/Safari devices and Android devices.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>I don’t know what this breaks. Does it break anything?<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Anyone already pave this ground?<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Michael Reynolds<o:p></o:p></p><p class=MsoNormal>(651) 775-5915<o:p></o:p></p><p class=MsoNormal>Traffic Engineering - Data Management <o:p></o:p></p><p class=MsoNormal>MnDot - Metro District<o:p></o:p></p><p class=MsoNormal>USNG: 15TVK8708484276<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p></div></body></html>