Skip to content
This repository has been archived by the owner on Jan 10, 2020. It is now read-only.

Commit

Permalink
WIP : integrating v1 stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
@tdurand
tdurand committed Feb 24, 2012
1 parent 0367655 commit ea2c48e
Show file tree
Hide file tree
Showing 4 changed files with 339 additions and 556 deletions.
230 changes: 63 additions & 167 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,9 @@
<meta name="author" content="">

<!-- Le styles -->
<link href="less/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="libs/chosen.css" />
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/chosen.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
Expand All @@ -26,44 +22,6 @@
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<style type="text/css" media="all">
#map_canvas img {
max-width:none;
}

body {
height: 100%;
width: 100%;
position: absolute;
}

.container-fluid,.span12.map-hack,
.row-fluid.map-hack,.content { height: inherit; }

.container-fluid,.span12.map-hack,
.row-fluid.map-hack,.sidebar { height:inherit; }

div.lines {
overflow: auto;
height:60%;
}

.map {
height:75%;
}

.chzn-select {
width:100%;
}

/* Overthrow CSS:
Enable overflow: auto on elements with overthrow class when html element has overthrow class too */
.overthrow-enabled .lines {
overflow: auto;
-webkit-overflow-scrolling: touch;
}

</style>
</head>

<body>
Expand Down Expand Up @@ -92,9 +50,10 @@
<div class="row-fluid">
<div class="span2">-</div>
<div class="span10">
<div class="">
<h4><label>Escolhe uma linha :</label></h4>
<p><select data-placeholder="Escolhe uma linha" class="chzn-select"></select></p>
<div id="listlines">
<p><strong>Escolhe uma linha :</strong> <select data-placeholder="Escolhe uma linha" class="chzn-select">
<option value="">Carregando...</option>
</select></p>
</div>
</div>
</div>
Expand All @@ -108,74 +67,11 @@ <h4>Itinerario:</h4>
</i>
Addicionar ponto
</button></p>
<h4>Linhas:</h4>
<div class="lines">
<table class="table table-striped table-bordered table-condensed listlines">
<tr>
<td>38 - Parangaba Papicu</td>
</tr>
<tr>
<td>30 - Parangaba Papicu Via 13 Maio</td>
</tr>
<tr>
<td>29 - Parangaba Nautico</td>
</tr>
<tr>
<td>38 - Parangaba Papicu</td>
</tr>
<tr>
<td>30 - Parangaba Papicu Via 13 Maio</td>
</tr>
<tr>
<td>29 - Parangaba Nautico</td>
</tr>
<tr>
<td>38 - Parangaba Papicu</td>
</tr>
<tr>
<td>30 - Parangaba Papicu Via 13 Maio</td>
</tr>
<tr>
<td>29 - Parangaba Nautico</td>
</tr>
<tr>
<td>38 - Parangaba Papicu</td>
</tr>
<tr>
<td>30 - Parangaba Papicu Via 13 Maio</td>
</tr>
<tr>
<td>29 - Parangaba Nautico</td>
</tr>
<tr>
<td>38 - Parangaba Papicu</td>
</tr>
<tr>
<td>30 - Parangaba Papicu Via 13 Maio</td>
</tr>
<tr>
<td>29 - Parangaba Nautico</td>
</tr>
<tr>
<td>38 - Parangaba Papicu</td>
</tr>
<tr>
<td>30 - Parangaba Papicu Via 13 Maio</td>
</tr>
<tr>
<td>29 - Parangaba Nautico</td>
</tr>
<tr>
<td>38 - Parangaba Papicu</td>
</tr>
<tr>
<td>30 - Parangaba Papicu Via 13 Maio</td>
</tr>
<tr>
<td>29 - Parangaba Nautico</td>
</tr>
</table>
</div>
<div id="listmarkers"></div>
<h4>Linhas relativas:</h4>
<div id="listlinestable" class="lines">

</div>
</div>
<div class="span10 content">
<div id="map_canvas" class="map"></div>
Expand All @@ -190,62 +86,62 @@ <h4>Linhas:</h4>
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,drawing"></script>
<script type="text/javascript" src="js/distancewidget.js"></script>
<script type="text/javascript" src="libs/chosen.jquery.js"></script>
<script type="text/javascript" src="js/overthrow.js"></script>
<script type="text/javascript" charset="utf-8">



function init() {
var myLatlng = new google.maps.LatLng(-3.71969,-38.52562);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var options = {
map: map,
distance: 0.5, // Starting distance in km.
maxDistance: 2500, // Twitter has a max distance of 2500km.
color: '#000000',
fillColor: '#5599bb',
fillOpacity: '0.3',
activeColor: '#5599bb',
sizerIcon: new google.maps.MarkerImage('img/resize-off.png'),
activeSizerIcon: new google.maps.MarkerImage('img/resize.png')
}

var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT,
drawingModes: [google.maps.drawing.OverlayType.MARKER]
},
markerOptions: {
draggable : true
},
});
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,drawing"></script>

google.maps.event.addListener(drawingManager, 'markercomplete', function(marker) {
new DistanceWidget(marker,options);
});
<script type="text/javascript" src="libs/icanhaz.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="libs/underscore-min.js" charset="utf-8"></script>
<script type="text/javascript" src="libs/backbone-min.js" charset="utf-8" ></script>
<script type="text/javascript" src="libs/chosen.jquery.min.js"></script>
<script type="text/javascript" src="libs/bootstrap.js"></script>
<script type="text/javascript" src="libs/overthrow.js"></script>

drawingManager.setMap(map)
<script type="text/javascript" src="js/distancewidget.js"></script>
<script type="text/javascript" src="js/intersection.js"></script>
<script type="text/javascript" src="js/arrows.js"></script>
<script type="text/javascript" src="js/main.js"></script>

<script id="lineList" type="text/html">
<p><strong>Escolhe uma linha :</strong> <select data-placeholder="Escolhe uma linha" class="chzn-select">
{{#table}}
{{#rows}}
<option value="{{num}}">{{label}}</option>
{{/rows}}
{{/table}}
</select></p>
</script>

$(".addmarker").live("click",function() {
drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER);
});

}
<script id="lineListTable" type="text/html">
<table class="table table-striped table-bordered table-condensed listlines">
{{#table}}
{{#rows}}
<tr>
<td><span num="{{num}}">{{label}}</span></td>
</tr>
{{/rows}}
{{/table}}
</table>
</script>

<script id="markerList" type="text/html">
<ul>
{{#models}}
<li><button class="button icon remove danger" onClick="busMap._markerList.removeByIndex({{index}})">Ponto {{num}}</button></li>
{{/models}}
</ul>
</script>

<script type="text/javascript">

google.maps.event.addDomListener(window, 'load', init);
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-26151767-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>
</body>
Expand Down
Loading

0 comments on commit ea2c48e

Please sign in to comment.