| <div class = "row"> |
| <div class = "col-xs-12"> |
| <h1>Metronet Map</h1> |
| <div map-lazy-load="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3rQOp26I5a21VQhwLal8Z1x3XGHjXfm4"> |
| <ng-map |
| default-style="false" |
| class="metronet" |
| id="foobar" |
| center="0,0" |
| disable-default-u-i="true" |
| map-type-id="ROADMAP" |
| zoom-control="true" |
| min-zoom="2" |
| styles="{{vm.mapStyles}}" |
| > |
| <!--Markers--> |
| <marker |
| ng-repeat="uni in vm.unis" |
| id="marker-{{uni.id}}" |
| position="{{uni.latlng.toString()}}" |
| icon="{{vm.MapConfig.marker}}" |
| on-click="vm.showUni(uni)" |
| > |
| </marker> |
| |
| <!--Marker Info Window--> |
| |
| <info-window id = "uni-info"> |
| <div class = "marker-info"> |
| <h4>{{vm.current_uni.name}}</h4> |
| <p> |
| <b>LatLng: </b>{{vm.current_uni.latlng.toString()}}<br/> |
| <b>Cpe id: </b>{{vm.current_uni.cpe_id}}<br/> |
| <b>Tenant: </b>{{vm.current_uni.tenant}}<br/> |
| </p> |
| <button ng-show="vm.canCreateEline" ng-click="vm.createConnection(vm.current_uni)()">Create connection</button> |
| <button ng-show="!vm.canCreateEline && !uni.eline_start" ng-click="vm.finishConnection(vm.current_uni)">Finish connection</button> |
| </div> |
| </info-window> |
| |
| <!--Connections--> |
| |
| <shape |
| ng-repeat="eline in vm.elines" |
| name="polyline" |
| id="eline-{{eline.id}}" |
| path="{{eline.path}}" |
| stroke-color="{{vm.colorLine(eline.backend_status)}}" |
| stroke-opacity="1.0" |
| stroke-weight="5" |
| on-click="vm.elinePanel({{eline}}, true)" |
| > |
| </shape> |
| |
| </ng-map> |
| |
| </div> |
| Changes may not display until page refresh. |
| </div> |
| </div> |
| <!--"https://maps.googleapis.com/maps/api/js?key=AIzaSyA3rQOp26I5a21VQhwLal8Z1x3XGHjXfm4"--> |