Created
June 3, 2013 19:57
-
-
Save lucastorri/5700876 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| tbody tr:hover { | |
| background-color: rgb(236, 235, 225); | |
| } | |
| #map { | |
| height: 700px; | |
| width: 1200px; | |
| margin-top: 20px | |
| } | |
| .full-width { | |
| width: 1200px; | |
| } | |
| #controls { | |
| width: 1200px; | |
| } | |
| #all-info { | |
| margin-top: 30px; | |
| } | |
| .to-center { | |
| margin: auto; | |
| } | |
| .highlighted { | |
| background-color: rgb(255, 165, 0); | |
| } | |
| .highlighted a { | |
| color: #fff; | |
| font-weight: bold; | |
| } | |
| .highlighted a:hover { | |
| color: #fff; | |
| } | |
| .sold { | |
| background-color: #777; | |
| } | |
| #places-json { | |
| width: 530px; | |
| } | |
| </style> | |
| <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"> | |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script> | |
| <script type="text/javascript" src="http://api.maps.nokia.com/2.2.1/jsl.js?with=all" charset="utf-8"></script> | |
| <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> | |
| <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script> | |
| <script type="text/javascript"> | |
| nokia.Settings.set("appId", "L3N2QeDgpNS-FzGtQbJg"); | |
| nokia.Settings.set("authenticationToken", "YMLTqiLU83nBNQneCmTeqg"); | |
| resp = function() { | |
| console.log(arguments); | |
| } | |
| var map; | |
| var container; | |
| var click = nokia.maps.dom.Page.browser.touch ? "tap" : "click"; | |
| var infoBubbles = new nokia.maps.map.component.InfoBubbles(); | |
| function addressToPosition(address, callback) { | |
| nokia.places.search.manager.geoCode({ | |
| searchTerm: address, | |
| onComplete: function(data) { | |
| var pos = data.location.position; | |
| callback({lat: pos.latitude, lon: pos.longitude, adr: data.name}); | |
| } | |
| }); | |
| } | |
| function Ctrl($scope, $timeout) { | |
| var markers = []; | |
| $scope.highlighted; | |
| $scope.autoscroll = true; | |
| $scope.start = function() { | |
| (function(places) { | |
| $scope.places = places; | |
| $scope.original = angular.copy(places); | |
| $scope.placeIds = Object.keys(places); | |
| var processed = 0; | |
| $scope.placeIds.forEach(function(k, i) { | |
| var place = places[k]; | |
| place.id = k; | |
| place.index = i+1; | |
| place.extra.area = parseFloat(place.extra.area.replace(/\s*m²/, '').replace(',', '.')); | |
| place.extra.rooms = parseFloat(place.extra.rooms.replace(',', '.')); | |
| place.extra.rentCost = parseFloat(place.extra.rentCost.replace(/ EUR.*/, '')); | |
| place.extra.totalCost = parseFloat(place.extra.totalCost.replace(/ EUR.*/, '').replace('=', '')); | |
| addressToPosition(place.extra.address, function(pos) { | |
| place.position = pos; | |
| var marker = new nokia.maps.map.StandardMarker( | |
| [pos.lat, pos.lon], | |
| { text: i+1 } | |
| ); | |
| marker.addListener(click, function(evt) { | |
| infoBubbles.openBubble(pos.adr + | |
| '<div>' + | |
| '<a target="_blank" href="'+$scope.url(k)+'"/>Site</a><p>'+ | |
| 'Rent: ' + place.extra.rentCost + ', ' + | |
| 'Total: ' + place.extra.totalCost + ', ' + | |
| 'Rooms: ' + place.extra.rooms + ', ' + | |
| 'Area: ' + place.extra.area + | |
| '</p></div>', | |
| marker.coordinate); | |
| $scope.highlight(place, true); | |
| $scope.$apply() | |
| }); | |
| place.marker = marker; | |
| container.objects.add(marker); | |
| $scope.center(); | |
| }); | |
| }); | |
| })({"61345026":{"attachments":{},"note":"","numberOfAttachments":0,"realEstate":{"id":61345026,"realEstateType":0,"title":"Großzügige helle Wohnugn mit Balkon"},"realEstateVisited":"false","realtorContacted":"false","extra":{"address":"Martin-Opitz-Str. 413357 Berlin, Wedding (Wedding)","area":"76,63 m²","floor":"6","floors":"6","rentCost":"452,12 EUR","rooms":"3,00","totalCost":"=747,35 EUR"}},"67151154":{"attachments":{},"note":"","numberOfAttachments":0,"realEstate":{"id":67151154,"realEstateType":0,"title":"++Nahe Alex++ Helle Neubauwohnung 4. OG++Moll-/Ecke Keibelstrasse++"},"realEstateVisited":"false","realtorContacted":"false","extra":{"address":"Mollstrasse 1a10178 Berlin, Mitte (Mitte)","area":"74,00 m²","floor":"4","floors":"11","rentCost":"619,00 EUR","rooms":"3,00","totalCost":"=799,00 EUR"}},"67981226":{"attachments":{},"note":"","numberOfAttachments":0,"realEstate":{"id":67981226,"realEstateType":0,"title":"2 Zimmer - Laminat - EBK - mod. Fenster - Top-to-Bottom-Fenster - ca. 93 m² - 799 warm - PROVISION"},"realEstateVisited":"false","realtorContacted":"false","extra":{"address":"Gethsemanestraße 610437 Berlin, Prenzlauer Berg (Prenzlauer Berg)","area":"93,00 m²","floor":"","floors":"","rentCost":"649,00 EUR","rooms":"2,00","totalCost":"=799,00 EUR (weitere Kosten möglich)"}},"67981236":{"attachments":{},"note":"","numberOfAttachments":0,"realEstate":{"id":67981236,"realEstateType":0,"title":"2 Zimmer - Dachgeschoss - Laminat - EBK - mod. gefl. W-Bad - mod.Fenster - ca. 76 m² - 779 warm -"},"realEstateVisited":"false","realtorContacted":"false","extra":{"address":"Gethsemanestraße 610437 Berlin, Prenzlauer Berg (Prenzlauer Berg)","area":"75,00 m²","floor":"","floors":"","rentCost":"650,00 EUR","rooms":"2,00","totalCost":"=779,00 EUR (weitere Kosten möglich)"}},"68006170":{"attachments":{},"note":"","numberOfAttachments":0,"realEstate":{"id":68006170,"realEstateType":0,"title":"! Wohnung zu vermieten !"},"realEstateVisited":"false","realtorContacted":"false","extra":{"address":"Danziger Straße 1410435 Berlin, Prenzlauer Berg (Prenzlauer Berg)","area":"72,00 m²","floor":"","floors":"","rentCost":"800,00 EUR","rooms":"3,00","totalCost":"=800,00 EUR (weitere Kosten möglich)"}},"68057861":{"attachments":{},"note":"","numberOfAttachments":0,"realEstate":{"id":68057861,"realEstateType":0,"title":"*Sehr schöne, sanierte 2,5 Zimmer Wohnung, nur an WG zu vermieten!* "},"realEstateVisited":"false","realtorContacted":"false","extra":{"address":"Rügener Strasse 113355 Berlin, Wedding (Wedding)","area":"85,75 m²","floor":"1","floors":"6","rentCost":"492,21 EUR","rooms":"2,50","totalCost":"=782,21 EUR"}},"68061502":{"attachments":{},"note":"","numberOfAttachments":0,"realEstate":{"id":68061502,"realEstateType":0,"title":"Top 2 Zi. in Prenzl' Berg - mod. gefl. Wannenbad - EBK - Laminat - Balkon - 675 warm - Provision!"},"realEstateVisited":"false","realtorContacted":"false","extra":{"address":"10439BerlinDie vollständige Adresse der Immobilie erhalten Sie vom Anbieter.","area":"73,79 m²","floor":"2","floors":"5","rentCost":"562,00 EUR","rooms":"2,00","totalCost":"=675,00 EUR"}},"68114881":{"attachments":{},"note":"","numberOfAttachments":0,"realEstate":{"id":68114881,"realEstateType":0,"title":"Erstbezug nach Sanierung: 2 Zimmer Altbau Wohnung in der Eulerstraße. Dielen, Wannenbad, EBK."},"realEstateVisited":"false","realtorContacted":"false","extra":{"address":"Eulerstr. 1013357 Berlin, Wedding (Wedding)","area":"71,00 m²","floor":"1","floors":"4","rentCost":"640,00 EUR","rooms":"2,00","totalCost":"=785,00 EUR"}},"68125882":{"attachments":{},"note":"","numberOfAttachments":0,"realEstate":{"id":68125882,"realEstateType":0,"title":"2 Zimmer zwischen Prenzlberg und Pankow"},"realEstateVisited":"false","realtorContacted":"false","extra":{"address":"Hallandstraße 1213189 Berlin, Pankow (Pankow)","area":"66,58 m²","floor":"1","floors":"4","rentCost":"565,00 EUR","rooms":"2,00","totalCost":"=707,00 EUR"}},"68141296":{"attachments":{},"note":"","numberOfAttachments":0,"realEstate":{"id":68141296,"realEstateType":0,"title":"Erstbezug nach Sanierung am beliebten Helmholtzplatz"},"realEstateVisited":"false","realtorContacted":"false","extra":{"address":"Raumerstr. 3210437 Berlin, Prenzlauer Berg (Prenzlauer Berg)","area":"57,60 m²","floor":"3","floors":"5","rentCost":"690,00 EUR","rooms":"2,00","totalCost":"=799,00 EUR"}},"68167033":{"attachments":{},"note":"","numberOfAttachments":0,"realEstate":{"id":68167033,"realEstateType":0,"title":"Mitten im Kiez: Traumhaft, hell und ruhig"},"realEstateVisited":"false","realtorContacted":"false","extra":{"address":"Danziger Straße10407 Berlin, Prenzlauer Berg (Prenzlauer Berg)","area":"55,00 m²","floor":"4","floors":"5","rentCost":"400,00 EUR","rooms":"2,00","totalCost":"=537,00 EUR"}},"68190664":{"attachments":{},"note":"","numberOfAttachments":0,"realEstate":{"id":68190664,"realEstateType":0,"title":"Voll sanierte 2-Zimmer Wohnung mitten im Prenzlauer Berg zu vermieten"},"realEstateVisited":"false","realtorContacted":"false","extra":{"address":"Danziger Str. 610435 Berlin, Prenzlauer Berg (Prenzlauer Berg)","area":"70,28 m²","floor":"3","floors":"","rentCost":"598,00 EUR","rooms":"2,00","totalCost":"=789,00 EUR"}},"68192578":{"attachments":{},"note":"","numberOfAttachments":0,"realEstate":{"id":68192578,"realEstateType":0,"title":"BESICHTIGUNGEN SONNTAG 10.02.2013 13-16 UHR!!! Schöne helle Dachgeschosswohnung in Berlin-Wedding!"},"realEstateVisited":"false","realtorContacted":"false","extra":{"address":"Osloer Str. 1313359 Berlin, Wedding (Wedding)","area":"67,35 m²","floor":"5","floors":"5","rentCost":"539,00 EUR","rooms":"2,00","totalCost":"=686,82 EUR"}},"68250634":{"attachments":{},"note":"","numberOfAttachments":0,"realEstate":{"id":68250634,"realEstateType":0,"title":"Topsanierte, ruhige Altbau-Wohnung mit Balkon in begehrter Lage nahe Ringbahn!"},"realEstateVisited":"false","realtorContacted":"false","extra":{"address":"Meyerheimstrasse 210439 Berlin, Prenzlauer Berg (Prenzlauer Berg)","area":"63,00 m²","floor":"2","floors":"4","rentCost":"690,00 EUR","rooms":"3,00","totalCost":"=820,00 EUR"}},"68282542":{"attachments":{},"note":"","numberOfAttachments":0,"realEstate":{"id":68282542,"realEstateType":0,"title":"Grüne Stadt Nachmietersuche 2 Zimmer"},"realEstateVisited":"false","realtorContacted":"false","extra":{"address":"Margarete-Walter-Straße 1010407 Berlin, Prenzlauer Berg (Prenzlauer Berg)","area":"52,31 m²","floor":"1","floors":"","rentCost":"525,00 EUR","rooms":"2,00","totalCost":"=650,00 EUR"}},"68328932":{"attachments":{},"note":"","numberOfAttachments":0,"realEstate":{"id":68328932,"realEstateType":0,"title":"3 Zimmer im obersten Geschoss im Winskiez"},"realEstateVisited":"false","realtorContacted":"false","extra":{"address":"Marienburger Str. 3-410405 Berlin, Prenzlauer Berg (Prenzlauer Berg)","area":"75,03 m²","floor":"6","floors":"6","rentCost":"633,25 EUR","rooms":"3,00","totalCost":"=848,25 EUR"}},"68333084":{"attachments":{},"note":"","numberOfAttachments":0,"realEstate":{"id":68333084,"realEstateType":0,"title":"Nachmietersuche Maisonette 2 Zimmer"},"realEstateVisited":"false","realtorContacted":"false","extra":{"address":"Marienburger Straße 3010405 Berlin, Prenzlauer Berg (Prenzlauer Berg)","area":"66,39 m²","floor":"3","floors":"","rentCost":"625,00 EUR","rooms":"2,00","totalCost":"=785,00 EUR"}},"68346336":{"attachments":{},"note":"","numberOfAttachments":0,"realEstate":{"id":68346336,"realEstateType":0,"title":"Ecke Kollwitzstraße - mit Südbalkon!"},"realEstateVisited":"false","realtorContacted":"false","extra":{"address":"Metzer Straße10405 Berlin, Prenzlauer Berg (Prenzlauer Berg)","area":"61,00 m²","floor":"1","floors":"","rentCost":"598,00 EUR","rooms":"3,00","totalCost":"=798,00 EUR"}},"68353816":{"attachments":{},"note":"","numberOfAttachments":0,"realEstate":{"id":68353816,"realEstateType":0,"title":"2 ruhige Zimmer in der Marienburger Str."},"realEstateVisited":"false","realtorContacted":"false","extra":{"address":"Marienburger Str. 3-410405 Berlin, Prenzlauer Berg (Prenzlauer Berg)","area":"53,58 m²","floor":"1","floors":"6","rentCost":"452,21 EUR","rooms":"2,00","totalCost":"=617,21 EUR"}}}); | |
| } | |
| $scope.url = function(pid) { | |
| return 'http://www.immobilienscout24.de/expose/' + pid; | |
| } | |
| $scope.center = function() { | |
| map.zoomTo(container.getBoundingBox()); | |
| } | |
| $scope.clear = function(dontCenter) { | |
| if ($scope.highlighted) { | |
| container.objects.remove($scope.highlighted); | |
| container.objects.add($scope.highlighted.original); | |
| $scope.highlighted = undefined; | |
| } | |
| dontCenter || $scope.center(); | |
| } | |
| $scope.highlight = function(place, dontCenter) { | |
| $scope.clear(dontCenter); | |
| container.objects.remove(place.marker); | |
| var highlighted = new nokia.maps.map.StandardMarker( | |
| [place.marker.coordinate.latitude, place.marker.coordinate.longitude], | |
| { text: place.marker.text, brush: { color: 'orange' } } | |
| ); | |
| highlighted.index = place.index; | |
| highlighted.original = place.marker; | |
| container.objects.add(highlighted); | |
| $scope.autoscroll && $("html, body").animate({ scrollTop: 0 }, "slow"); | |
| $scope.highlighted = highlighted; | |
| } | |
| $scope.remove = function(pid) { | |
| var place = $scope.places[pid]; | |
| for (var i = 0; i < $scope.placeIds.length; i++) { | |
| var p = $scope.places[$scope.placeIds[i]]; | |
| if (p.index == place.index) { | |
| $scope.placeIds.splice(i, 1); | |
| break; | |
| } | |
| } | |
| container.objects.remove(place.marker); | |
| delete $scope.places[pid]; | |
| delete $scope.original[pid]; | |
| } | |
| } | |
| $(function() { | |
| map = new nokia.maps.map.Display(document.getElementById('map'), { | |
| components:[ | |
| new nokia.maps.map.component.ViewControl(), | |
| new nokia.maps.map.component.PublicTransport(), | |
| new nokia.maps.map.component.TypeSelector(), | |
| new nokia.maps.map.component.Behavior(), | |
| new nokia.maps.map.component.ZoomBar(), | |
| new nokia.maps.map.component.Overview(), | |
| new nokia.maps.map.component.ScaleBar(), | |
| new nokia.maps.map.component.ContextMenu(), | |
| new nokia.maps.map.component.DistanceMeasurement(), | |
| new nokia.maps.map.component.Traffic(), | |
| infoBubbles] | |
| }); | |
| container = new nokia.maps.map.Container(); | |
| map.objects.add(container); | |
| }); | |
| </script> | |
| <body ng-app ng-controller="Ctrl" ng-init="start()"> | |
| <div class="to-center row"> | |
| <div> | |
| <div id="map" class="to-center full-width"></div> | |
| <div id="controls" class="to-center text-right"> | |
| [ | |
| <a ng-click="autoscroll = !autoscroll">autoscroll {{ autoscroll && 'on' || 'off' }}</a> | |
| | | |
| <a ng-click="center()">center</a> | |
| | | |
| <a ng-click="clear()">clear</a> | |
| ] | |
| </div> | |
| </div> | |
| <div id="all-info" class="to-center full-width text-center"> | |
| <table class="sortable table-condensed table-bordered to-center full-width"> | |
| <caption>Places</caption> | |
| <thead> | |
| <tr> | |
| <th class="sorttable_numeric">#</th> | |
| <th class="sorttable_nosort">Title</th> | |
| <th class="sorttable_numeric">Rent(€)</th> | |
| <th class="sorttable_numeric">Total(€)</th> | |
| <th class="sorttable_numeric">Area(m²)</th> | |
| <th class="sorttable_numeric">Rooms</th> | |
| <th class="sorttable_nosort">Floors</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr ng-repeat="pid in placeIds"> | |
| <td class="text-right" ng-class="{true:'highlighted', false:''}[highlighted.index == places[pid].index]"> | |
| <a ng-click="highlight(places[pid])">{{places[pid].index}}</a> | |
| </td> | |
| <td><a ng-href="{{url(pid)}}" ng-click="highlight(places[pid])" target="_blank">{{places[pid].realEstate.title}}</a></td> | |
| <td>{{places[pid].extra.rentCost | currency}}</td> | |
| <td>{{places[pid].extra.totalCost | currency}}</td> | |
| <td>{{places[pid].extra.area | number:2}}</td> | |
| <td>{{places[pid].extra.rooms | number:1}}</td> | |
| <td>{{places[pid].extra.floor || '?'}} / {{places[pid].extra.floors || '?'}}</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <a href="#serialized-places" role="button" class="btn" data-toggle="modal">+</a> | |
| </div> | |
| <!-- Modal --> | |
| <div id="serialized-places" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true"> | |
| <div class="modal-header"> | |
| <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> | |
| <h3 id="modalTitle">Serialized places</h3> | |
| </div> | |
| <div class="modal-body"> | |
| <textarea id="places-json" rows="30">{{original}}</textarea> | |
| </div> | |
| <div class="modal-footer"> | |
| </div> | |
| </div> | |
| <body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment