TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

User

Welcome to TinyPortal. Please login or sign up.

Stats

Members
Stats
  • Total Posts: 196,004
  • Total Topics: 21,330
  • Online today: 500
  • Online ever: 8,223 (February 19, 2025, 04:35:35 AM)
Users Online
  • Users: 0
  • Guests: 107
  • Total: 107

Mapping Function

Started by carver, March 05, 2008, 07:35:52 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Print
Go Down Pages1
User actions

carver

March 05, 2008, 07:35:52 PM
Guys, Anyone have an idea on how this is done or where they might offer something like this we could use in a block? I have search about in Google looking for this feature but did not see anything like it.

Says it is a "simple Java Script" over the google map. It allows you to highlite a route on the map, and save it. as in the attached picture.
The link below gives you a list of maps with instructions, member etc for Tennessee.


http://www.motowhere.com/listpaths/country/254/region/164


It is something I would love to offer on one of my sites..

Thanks

Carver

thefley

#2
April 01, 2008, 02:49:44 AM Last Edit: April 01, 2008, 07:49:12 PM by thefley
Quote from: carver on March 05, 2008, 07:35:52 PM
Guys, Anyone have an idea on how this is done or where they might offer something like this we could use in a block? I have search about in Google looking for this feature but did not see anything like it.

Says it is a "simple Java Script" over the google map. It allows you to highlite a route on the map, and save it. as in the attached picture.
The link below gives you a list of maps with instructions, member etc for Tennessee.


http://www.motowhere.com/listpaths/country/254/region/164


It is something I would love to offer on one of my sites..

Thanks

Carver
same here I was looking at it and trying to see how it works in google



G6Cad

#3
April 01, 2008, 07:38:32 AM
Please edit and repost your code and use the codetags
When you post code in the forum with out the codetags, the code render wrongly and with that comes errors  :)

thefley

#4
April 01, 2008, 07:55:19 PM Last Edit: April 01, 2008, 08:17:13 PM by thefley
sorry about that, I did miss that didn't I....    but as the first post stated he would like to know how to get this to work.   you can see it running on the page http://www.motowhere.com/maps/createnew/  I have my google  key and have played around with googles but could not get it set up like this one.  I am not trying to steal his work, I think we would just like to know how to make the same google map work on our site with drag and drop routing.

Code Select
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Create Route at MotoWhere.com</title>

<meta name="description" content="MotoWhere enables motorcyclists to discover the best places to ride.  Be it offroad, twisty mountain passes, or long distance cruising, MotoWhere puts the best riding on the map - worldwide." />
<meta name="keywords" content="motorcycle roads, motorcycle trails, dirt bike trails, motorbike roads, motorcycle touring, motorbike touring, motorbike maps, dirt bike maps" />


<link rel="stylesheet" type="text/css" href="/css/global.1168315098.css" />
<link rel="stylesheet" type="text/css" href="/css/print-style.1168315098.css" media="print" />

<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=YOUR KEY HERE"></script>
<script type="text/javascript" src="/jsb/bikely.1168315104.js"></script>

<script type="text/javascript">
/***********************************************
* Chrome CSS Drop Down Menu- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>


</head>
<body onunload="GUnload()" id="wapp_maps">
     <div id="headerline">
    <h1 id="lblRoutetitle">
            <a id="btnFave" href="javascript://">&nbsp;</a>
   
        </h1>
    <h1 class="homehead"><a href="/"><img src="/logo-moto.gif" alt="MotoWhere" /></a></h1>
    </div>
   
       

    <div id="mapnavbar">
    <form id="controls" action="./" method="post" onsubmit="return false;">
<div class="chromestyle" id="chromemenu">
<span id="savestatus">
<img src="/indicator.gif" alt="" id="saveindicator" />
<span id="savemsg">Your route has been saved.</span>
</span>

<span id="frmRouteRatings">
<img src="/indicator.gif" alt="" id="icoRatingProgress" /><select name="rateroute" id="selRateRoute">
<option value="-1">Rate This Route:</option>
</select>

</span>
   

<ul>

<li><a id="btnMenuShow" rel="showmenu">Show</a></li>

<li><a id="btnMenuMy" rel="mymenu">My MotoWhere</a></li>
<li><a id="btnMenuCreate" rel="createmenu">Create Route</a></li>
<li><a id="btnMenuShare" rel="sharemenu">Share</a></li>
<li><a id="btnMenuFind" rel="findmenu">Find</a></li>
<li><a href="/forum/categories/" rel="forummenu">Forum</a></li>
<li><a rel="helpmenu">Help</a></li>

</ul>
</div>
   
    <input type="hidden" id="txtLng" /><input type="hidden" id="txtLat" /><input type="hidden" id="txtZoom" />
    </form>
   
    </div>
<div id="map">
    <span style="font: normal 36pt arial;text-align: center; width: 98%;">
    <noscript>You need JavaScript enabled to view this map<br /><br /><br /></noscript>
    Loading Map ... </span>
</div>

    <div id="status">
    <ul id="crmaptabs">
    <li id="hidetabs"><a href="javascript://" id="tabbtnHide" title="Show / Hide these panels">^</a></li>
    <li><a href="javascript://" id="tabbtnLocate">Locate</a></li>
    <li><a href="javascript://" id="tabbtnDraw">Draw</a></li>
    <li><a href="javascript://" id="tabbtnDescribe">Describe</a></li>
    <li><a href="javascript://" id="tabbtnExplore">Explore</a></li>
    </ul>
    <div id="statustab">
   



<div class="info" id="iLocate">
<h3>Find your starting point</h3>

<p>Use the city finder below to identify where your route begins:</p>

<form id="locator" action="null" onsubmit="return false;">   
<p id="searchtool"><label for="citysearch">Find a city: </label><input type="text" id="citysearch" value="" />
<img src="/indicator.gif" alt="S" id="searchindicator" style="display: none" />
<input type="submit" value="Go" id="gosearch" class="SFbutton" /></p>
</form>

<div id="citysearchresults">
</div>


<p>Then, start plotting your route on the map:</p>
<p class="centerbutton"><a href="javascript://" id="btnStartDrawing" class="SFbutton">Start Drawing »</a></p>

</div>

<div class="info" id="iDraw">

<h3>Draw Your Route</h3>

<div id="buttonbarholder">

<div id="drawbuttonbar">
<a
href="javascript://" id="btnStopDraw" title="Stop drawing" class="SFbutton"><img src='/drawico/media_pause.gif' alt="" /></a><a
href="javascript://" id="btnStartDraw" title="Start drawing" class="SFbutton"><img src='/drawico/media_play.gif' alt="" /></a><a
href="javascript://" id="btnSaveWork" class="SFbutton" title="Save"><img src='/drawico/disk_blue.gif' alt="" /></a><a
href="javascript://" id="btnDelPoint" class="SFbutton" title="Delete current point"><img src='/drawico/selection_delete.gif' alt="" /></a><a
href="javascript://" id="btnDeleteAll" class="SFbutton" title="Delete all points"><img src='/drawico/garbage.gif' alt="" /></a><a
href="javascript://" id="btnInsertBefore" class="SFbutton" title="Insert a point before the current point"><img src='/drawico/insert_before.gif' alt="" /></a><a
href="javascript://" id="btnInsertAfter" class="SFbutton" title="Insert a point after the current point"><img src='/drawico/insert_after.gif' alt="" /></a><a
href="javascript://" id="btnAddWPT_photo" class="SFbutton" title="Add a photo"><img src='/drawico/camera2.gif' alt="" /></a>

</div>

<div style="clear: both"></div>
</div>


<input type="checkbox" id="chkFollowTheRoad" checked="checked" /> <label for="chkFollowTheRoad">Auto-follow the road</label>

<div id="iDrawNav"></div>

<div id="metacontainer">
<form action="index.php" method="post" id="metaform" onsubmit="return false;">
<p><label for="suburb">Now in:</label><input type="text"  id="suburb" name="suburb" value="" />
<span class="hint">When you reach a new suburb / region, enter its name here.</span>
</p>
<p><label for="notes">Notes</label><textarea id="notes"  name="notes" rows="3" cols="10"></textarea>
<span class="hint">Make note of interesting things along the way; e.g. traffic hazards, things to see, etc.</span>
</p>
</form>
</div>

<p class="centerbutton"><a href="javascript://" id="btnEndDrawing" class="SFbutton">Describe Route »</a></p>
</div>
   
   
<div class="info" id="iDescribe">

<h3>Describe Your Route</h3>

<form action="null" onsubmit="return false;" id="routesettings" class="flyoutform">
<p><label for="routename">Name this route:</label><br />
<input type="text" name="routename" id="routename" />
</p>


<!-- <p><label for="routedesc">Brief Description (optional):</label><br />
<textarea name="routedesc" id="routedesc" rows="3" cols="25"></textarea>
</p> -->

<p>
This route is: <br />
<input type="radio" name="isvisible" id="rs_invis" value="0" /> <label for="rs_invis">Private / Under construction</label> <br />
<input type="radio" name="isvisible" id="rs_vis" value="1" /> <label for="rs_vis">Public / Visible to all</label> <br />
</p>


<div id="routetags"><strong>Tags:</strong>
(click all that apply)<br />
<a class="off" href="javascript://" onclick="tagger.tag(this);" id="tag_23" >On Road</a>
<a class="off" href="javascript://" onclick="tagger.tag(this);" id="tag_35" >High traffic</a>
<a class="off" href="javascript://" onclick="tagger.tag(this);" id="tag_36" >Safe</a>
<a class="off" href="javascript://" onclick="tagger.tag(this);" id="tag_37" >Unsafe</a>
<a class="off" href="javascript://" onclick="tagger.tag(this);" id="tag_38" >Urban</a>
<a class="off" href="javascript://" onclick="tagger.tag(this);" id="tag_40" >Poor visibility</a>
<a class="off" href="javascript://" onclick="tagger.tag(this);" id="tag_41" >High-enforcement</a>
<a class="off" href="javascript://" onclick="tagger.tag(this);" id="tag_42" >Low-enforcement</a>
<a class="off" href="javascript://" onclick="tagger.tag(this);" id="tag_43" >Poor surface</a>
<a class="off" href="javascript://" onclick="tagger.tag(this);" id="tag_44" >Good surface</a>
<a class="off" href="javascript://" onclick="tagger.tag(this);" id="tag_34" >Low traffic</a>
<a class="off" href="javascript://" onclick="tagger.tag(this);" id="tag_39" >Good visibility</a>
<a class="off" href="javascript://" onclick="tagger.tag(this);" id="tag_24" >Offroad</a>
<a class="off" href="javascript://" onclick="tagger.tag(this);" id="tag_25" >Scenic</a>
<a class="off" href="javascript://" onclick="tagger.tag(this);" id="tag_26" >Twisty</a>
<a class="off" href="javascript://" onclick="tagger.tag(this);" id="tag_27" >Smooth</a>
<a class="off" href="javascript://" onclick="tagger.tag(this);" id="tag_28" >Rough</a>
<a class="off" href="javascript://" onclick="tagger.tag(this);" id="tag_29" >Easy</a>
<a class="off" href="javascript://" onclick="tagger.tag(this);" id="tag_30" >Intermediate</a>
<a class="off" href="javascript://" onclick="tagger.tag(this);" id="tag_31" >Difficult</a>
<a class="off" href="javascript://" onclick="tagger.tag(this);" id="tag_32" >Rural</a>
<a class="off" href="javascript://" onclick="tagger.tag(this);" id="tag_45" >Excellent surface</a>
<div style="clear: both"></div>
</div> 

<p class="centerbutton"><button id="btnSave" accesskey="s" type="button" name="save" class="SFbutton">Save Route »</button> </p>

</form>


</div>
   


<div id="curpoint">
<form action="index.php" method="post" id="navform" onsubmit="return false;">

<p class="whichpoint">
<span id="pointsnav">
<a id="btnPFirst" class="SFbutton" title="First Point">&laquo;</a>
<a id="btnPPrev" class="SFbutton" title="Previous Point">&lt;</a>
<a id="btnPNext" class="SFbutton" title="Next Point">&gt;</a>
<a id="btnPLast" class="SFbutton" title="Last Point">&raquo;</a>
</span>
Point <span id="valPoint">0</span> of <span id="valPointOf">0</span>
</p>

<p id="calipercontainer">
<span id="calipers">
</span>
<br />
<span id="unitselector">
<input type="radio" name="distunits" value="km" id="unitskm" />km
<input type="radio" name="distunits" value="mi" id="unitsmi" />mi
</span>
</p>
</form>
</div>

</div> <!-- statustab -->

   
<div id="iLocateHelp" class="infohelp" style="display: none">
<p>Submitting a route to MotoWhere is a simple 3 step process.</p>

<p>Look out for the <img src="/css/icons/helpme.gif" /> icon - click it to open and close these help boxes.</p>

<p>Note the map controls to the right of the screen - use these to zoom in and out &amp; change the type of
map shown.</p>

<p>Click and drag the map to navigate around it.</p>

</div>

<div id="iDrawHelp" class="infohelp" style="display: none">
<p>Plot your route by clicking on the map to mark points along the way.</p>

<p>Move points by clicking + dragging them.  Insert &amp; delete points using the toolbar to the left.</p>

<p>Hold your mouse over the toolbar buttons to see what they do.</p>
<p>Save your path <strong>regularly</strong> during its construction -
just click the <img src="/drawico/disk_blue.gif" /> button.</p>

<p>Click the <strong>Describe Route</strong> button when you've finished drawing and move onto the final step.</p>
</div>

<div id="iDescribeHelp" class="infohelp" style="display: none">
<p>Give your route a meaningful title - this will help other people find it.</p>

<p>Decide whether you want to <strong>share your route</strong> publically - or keep it to yourself.</p>

<p>Keep it private if it's still under construction, but otherwise - share the love!</p>

<p>Choose some <strong>tags</strong> that best characterize this route - this will help us sort and categorize it.</p>
</div>


</div> <!-- status -->








<script type="text/javascript">
// <![CDATA[
function AlbassInit() {
new CycleRoutes({"mode":"new","firsttimer":true,"getelevations":false});
new ImagePreloader(['/dot.gif','/css/button-gradient.gif','/indicator.gif','/css/heart.gif','/css/heart_add.gif','/css/heart_off.gif','/css/heart_out.gif','/css/pointnotes.png','/css/pointnotes_s.png']);
cssdropdown.startchrome('chromemenu');
ProtoTip.attachTooltipBehavior(); } //SycuseAddEvent(window, "load", AlbassInit, false);
FastInit.addOnLoad(AlbassInit);
//]]>
</script>

   


<div id="showmenu" class="dropmenudiv hasicons">
<a id="btnResetView" href="javascript://" title="Click to return to the 'entire route' zoom level">Whole Route</a>
<a id="btnElevation" href="javascript://" title="Click to view an elevation graph">Elevation Profile</a>

</div>

<div id="helpmenu" class="dropmenudiv">
<a href="/tutorial">Tutorials</a>
<a href="/contact">Contact Us</a>
<a href="/termsofuse">Terms of Use</a>
</div>

<div id="createmenu" class="dropmenudiv">
<a href="/maps/createnew/">Draw Route</a>
<a href="/gpximport">Import Route</a>
</div>

<div id="mymenu" class="dropmenudiv">
<a href="/my_routes">My routes</a>
<a href="/listpaths/faves/1">Favorites</a>
<a href="/login/logout/1/returnto/%253Bmaps%253Bcreatenew%253B">Logout</a>
</div>




<div id="sharemenu" class="dropmenudiv hasicons">
<a href="#" rel="SBdelicious" id="btnDelicious">Add to del.icio.us</a>
<a href="#" rel="SBdigg" id="btnDigg">Digg this</a>
<a href="#" rel="SBreddit" id="btnReddit">Add to Reddit</a>


</div>

<div id="findmenu" class="dropmenudiv">
<form action="/" method="get" id="frmMenuSearch">
<input type="text" name="srchkey" id="txtInMenuSearch" />
<input type="submit" id="btnInMenuSearch" class="SFbutton" value="Go" />
<input type="hidden" name="run" value="listpaths" />
</form>
<a href="/listpaths">Advanced Search</a>
<a href="http://www.stepwhere.com/" title="Find Running, Walking &amp; Hiking trails on StepWhere.com">Running &amp; Hiking trails</a>
</div>

<div id="forummenu" class="dropmenudiv">
<a id="btnCommentOnRoute" href="javascript://">Comment on this route</a>
</div>

<div id="tplUploadTemplate" style="display: none">
<form action="/rpc/do/fileupload" enctype="multipart/form-data" method="post" id="frmUploadFile" target="uploadtargetframe">
<p>File: <input type="file" name="uploadfile" /></p>
<input type="submit" value="Upload" name="btnUploadFile" />
</form>
</div>


</body>
</html>

garry

#5
April 01, 2008, 09:11:33 PM
That is neat  and if you figure it out Id love to know also

JPDeni

#6
April 01, 2008, 10:08:13 PM
There is a javascript that the page uses which does not seem to be freely available. I tried to access it directly, but it looks like they have some security set up to prevent that. (I wasn't trying to take their script. I just wanted to look at it to see if there was information about the source.)

Without that javascript, you can't do what you want to do. If you can find it and it's available for others to use, I'll be glad to help you implement it into a block.

thefley

#7
April 01, 2008, 10:12:08 PM Last Edit: April 01, 2008, 10:15:42 PM by thefley
Quote from: JPDeni on April 01, 2008, 10:08:13 PM
There is a javascript that the page uses which does not seem to be freely available. I tried to access it directly, but it looks like they have some security set up to prevent that. (I wasn't trying to take their script. I just wanted to look at it to see if there was information about the source.)

Without that javascript, you can't do what you want to do. If you can find it and it's available for others to use, I'll be glad to help you implement it into a block.
it looks like most of it comes from google maps where you can ad way point and drag them around and the auto fit to the roads...(that is all from google maps API.   I just do not know how to build it like he has.  google has some demos how to build them with the many diff codes but I am dumb as a rock as I have tried it many times and have had no luck.


http://code.google.com/apis/maps/signup.html

JPDeni

#8
April 01, 2008, 10:15:31 PM
Well, there is a javascript file that is not google --
Code Select

<script type="text/javascript" src="/jsb/bikely.1168315104.js"></script>


I looked at the Google site -- not closely, I'll admit -- and didn't find what you mention. Possibly you could give a link to it so that others can benefit.

thefley

#9
April 02, 2008, 02:18:18 AM Last Edit: April 02, 2008, 02:21:42 AM by thefley
Quote from: carver on March 05, 2008, 07:35:52 PM
Guys, Anyone have an idea on how this is done or where they might offer something like this we could use in a block? I have search about in Google looking for this feature but did not see anything like it.

Says it is a "simple Java Script" over the google map. It allows you to highlite a route on the map, and save it. as in the attached picture.
The link below gives you a list of maps with instructions, member etc for Tennessee.


http://www.motowhere.com/listpaths/country/254/region/164


It is something I would love to offer on one of my sites..

Thanks

Carver
I have been reading the "how to" on google and you can see where googe will let you set the way points and drag the lines from way point A and B around to make another rout via same points.  etc...    I was able to follow some directions and make this simple map for my site and the added functions of moving zooming and setting the GPS point.   but I am having problems adding the functions like adding the way points that can be added by others and moved around...  it is all there in google but I am not good at any kind of coding.  maybe someone here can look or is up to google speed. 

http://code.google.com/apis/maps/documentation/


Code Select
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YOUR KEY HERE"
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(36.112362, -95.862579), 7);
        map.addControl(new GLargeMapControl());
        map.addControl(new GScaleControl());
        map.addControl(new GMapTypeControl());
        map.addControl(new GOverviewMapControl());
      }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 600px; height: 600px"></div>
  </body>
</html>



have we started this thread in the wrong area?
Print
Go Up Pages1
User actions

This website is proudly hosted on Crocweb Cloud Website Hosting.