Skip to content
This repository was archived by the owner on May 25, 2019. It is now read-only.

Commit e9c6b11

Browse files
douglasduteildouglasduteil
committed
[FT] Update demo (buggy...)
1 parent fd24f49 commit e9c6b11

4 files changed

Lines changed: 197 additions & 167 deletions

File tree

‎demo/demo.html‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
2+
<script>
3+
requirejs(['core/demo.js']);
4+
</script>
5+
6+
<!-- Le loading
7+
================================================== -->
8+
9+
<div id="map-l" class="loadingAnimation" >
10+
<div class="bowl_ringG">
11+
<div class="ball_holderG">
12+
<div class="ballG">
13+
</div>
14+
</div>
15+
</div>
16+
</div>
17+
18+
<!-- Le directive
19+
================================================== -->
20+
21+
<section id="map" ng-non-bindable ng-controller="MapCtrl">
22+
<div class="page-header">
23+
<h1>Google Maps</h1>
24+
</div>
25+
<div class="well">
26+
<div class="row">
27+
<div class="span3">
28+
<h4>Click to add a marker!</h4>
29+
<p>{{zoomMessage}}</p>
30+
<ul>
31+
<li ng-repeat="marker in myMarkers">
32+
<a class="btn" ng-click="myMap.panTo(marker.getPosition())">
33+
Pan to Marker {{$index}}
34+
</a>
35+
</li>
36+
</ul>
37+
38+
<!-- this is the confusing part. we have to point the map marker directive
39+
at an existing google.maps.Marker object, so it can hook up events -->
40+
<div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
41+
ui-event="{'map-click': 'openMarkerInfo(marker)'}">
42+
</div>
43+
44+
<div ui-map-info-window="myInfoWindow">
45+
<h1>Marker</h1>
46+
Lat: <input ng-model="currentMarkerLat">, Lng: <input ng-model="currentMarkerLng">
47+
<a class="btn btn-primary" ng-click="setMarkerPosition(currentMarker, currentMarkerLat, currentMarkerLng)">Set Position</a>
48+
</div>
49+
</div>
50+
51+
<!--Giving the div an id="map_canvas" fix problems with twitter bootstrap affecting
52+
google maps-->
53+
<div id="map_canvas" ui-map="myMap" class="span8 map"
54+
ui-event="{'map-click': 'addMarker($event)', 'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }"
55+
ui-options="mapOptions">
56+
</div>
57+
</div>
58+
</div>
59+
<h3>How?</h3>
60+
<p class="alert alert-info"><i class="icon-info-sign"></i> Remember that you can pass a variable containing an object to <code>ui-event</code></p>
61+
<pre class="prettyprint linenums" ng-non-bindable>
62+
&lt;h4&gt;Click to add a marker!&lt;/h4&gt;
63+
&lt;p&gt;{{zoomMessage}}&lt;/p&gt;
64+
&lt;ul&gt;
65+
&lt;li ng-repeat=&quot;marker in myMarkers&quot;&gt;
66+
&lt;a ng-click=&quot;myMap.panTo(marker.getPosition())&quot;&gt;Pan to Marker {{$index}}&lt;/a&gt;
67+
&lt;/li&gt;
68+
&lt;/ul&gt;
69+
70+
&lt;!-- this is the confusing part. we have to point the map marker directive
71+
at an existing google.maps.Marker object, so it can hook up events --&gt;
72+
&lt;div ng-repeat=&quot;marker in myMarkers&quot; ui-map-marker=&quot;myMarkers[$index]&quot;
73+
ui-event=&quot;{&#x27;map-click&#x27;: &#x27;openMarkerInfo(marker)&#x27;}&quot;&gt;
74+
&lt;/div&gt;
75+
76+
&lt;div ui-map-info-window=&quot;myInfoWindow&quot;&gt;
77+
&lt;h1&gt;Marker&lt;/h1&gt;
78+
Lat: &lt;input ng-model=&quot;currentMarkerLat&quot;&gt;, Lng: &lt;input ng-model=&quot;currentMarkerLng&quot;&gt;
79+
&lt;a ng-click=&quot;setMarkerPosition(currentMarker, currentMarkerLat, currentMarkerLng)&quot;&gt;Set Position&lt;/a&gt;
80+
&lt;/div&gt;
81+
82+
&lt;!-- Giving the div an id="map_canvas" fix problems with twitter bootstrap affecting
83+
google maps --&gt;
84+
&lt;div id=&quot;map_canvas&quot; ui-map=&quot;myMap&quot; class=&quot;map&quot;
85+
ui-event=&quot;{&#x27;map-click&#x27;: &#x27;addMarker($event)&#x27;, &#x27;map-zoom_changed&#x27;: &#x27;setZoomMessage(myMap.getZoom())&#x27; }&quot;
86+
ui-options=&quot;mapOptions&quot;&gt;
87+
&lt;/div&gt;
88+
89+
&lt;script&gt;
90+
$scope.myMarkers = [];
91+
92+
$scope.mapOptions = {
93+
center: new google.maps.LatLng(35.784, -78.670),
94+
zoom: 15,
95+
mapTypeId: google.maps.MapTypeId.ROADMAP
96+
};
97+
98+
$scope.addMarker = function($event) {
99+
$scope.myMarkers.push(new google.maps.Marker({
100+
map: $scope.myMap,
101+
position: $event.latLng
102+
}));
103+
};
104+
105+
$scope.setZoomMessage = function(zoom) {
106+
$scope.zoomMessage = &#x27;You just zoomed to &#x27;+zoom+&#x27;!&#x27;;
107+
console.log(zoom,&#x27;zoomed&#x27;)
108+
};
109+
110+
$scope.openMarkerInfo = function(marker) {
111+
$scope.currentMarker = marker;
112+
$scope.currentMarkerLat = marker.getPosition().lat();
113+
$scope.currentMarkerLng = marker.getPosition().lng();
114+
$scope.myInfoWindow.open($scope.myMap, marker);
115+
};
116+
117+
$scope.setMarkerPosition = function(marker, lat, lng) {
118+
marker.setPosition(new google.maps.LatLng(lat, lng));
119+
};
120+
&lt;/script&gt;
121+
122+
&lt;style&gt;
123+
.map {
124+
height: 400px;
125+
width: 600px;
126+
}
127+
&lt;/style&gt;
128+
</pre>
129+
</section>

‎demo/demo.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
2+
$("#map").hide();
3+
requireCss('assets/css/demos.css');
4+
5+
requirejs(
6+
{
7+
paths: {
8+
'ui.map': "build/ui-map"
9+
},
10+
shim: {
11+
'ui.map': { deps: [
12+
'https://rawgithub.com/angular-ui/ui-utils/master/modules/event/event.js',
13+
'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'
14+
] }
15+
}
16+
},
17+
['ui.map'],
18+
function () {
19+
20+
angular.module('doc.ui-map', ['ui.map', 'prettifyDirective'])
21+
.controller('MapCtrl', ['$scope', function ($scope) {
22+
23+
$scope.myMarkers = [];
24+
25+
$scope.mapOptions = {
26+
center: new google.maps.LatLng(35.784, -78.670),
27+
zoom: 15,
28+
mapTypeId: google.maps.MapTypeId.ROADMAP
29+
};
30+
31+
$scope.addMarker = function($event) {
32+
$scope.myMarkers.push(new google.maps.Marker({
33+
map: $scope.myMap,
34+
position: $event.latLng
35+
}));
36+
};
37+
38+
$scope.setZoomMessage = function(zoom) {
39+
$scope.zoomMessage = 'You just zoomed to '+zoom+'!';
40+
console.log(zoom,'zoomed');
41+
};
42+
43+
$scope.openMarkerInfo = function(marker) {
44+
$scope.currentMarker = marker;
45+
$scope.currentMarkerLat = marker.getPosition().lat();
46+
$scope.currentMarkerLng = marker.getPosition().lng();
47+
$scope.myInfoWindow.open($scope.myMap, marker);
48+
};
49+
50+
$scope.setMarkerPosition = function(marker, lat, lng) {
51+
marker.setPosition(new google.maps.LatLng(lat, lng));
52+
};
53+
}])
54+
;
55+
e$ = $("#map");
56+
e$.removeAttr("ng-non-bindable");
57+
58+
angular.bootstrap(e$[0], ['doc.ui-map']);
59+
e$.show();
60+
$("#map-l").slideUp();
61+
62+
63+
}
64+
);

‎demo/index.html‎

Lines changed: 0 additions & 166 deletions
This file was deleted.

‎gruntFile.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,10 @@ module.exports = function (grunt) {
6060
copy: {
6161
main: {
6262
files: [
63-
{src: ['demo/demo.html'], dest: 'out/demos.html', filter: 'isFile'}
63+
{src: ['<%= meta.view.repoName %>.js'], dest: 'out/build/<%= meta.view.repoName %>.js', filter: 'isFile'},
64+
{src: ['demo/demo.html'], dest: 'out/demos.html', filter: 'isFile'},
65+
{src: ['demo/demo.css'], dest: 'out/assets/css/demos.css', filter: 'isFile'},
66+
{src: ['demo/demo.js'], dest: 'out/core/demo.js', filter: 'isFile'}
6467
]
6568
},
6669
template : {

0 commit comments

Comments
 (0)