[Javascript] Google maps achtige map viewer.

[esak]

Hallo,

Ik ben bezig met een project waar ik een map viewer nodig heb die eigenlijk hetzelfde werkt als google maps. Dus dat je met de muis over de map kan scrollen en dat hij steeds nieuwe stukken kaart inlaadt. Opzich is dit helemaal niet moeilijk en is mij ook gelukt. Maar nu komt het probleem:
Op het kaartje moeten ook huizen, bomen en andere objecten komen te staan. En al die objecten moeten klik baar zijn zodat er een menu te voorschijn komt. Oftewel elk object moet in een aparte div. Dit lukt ook allemaal maar vooral bij oudere browsers gaat het traag. Soms moet hij wel 1000 div`s verplaatsen waardoor het soms een fps lager dan 1 krijgt (vooral bij grotere resoluties(= meer kaart delen inladen)).
Zouden jullie weten hoe ik dit snel en goed werkend krijg?

Een voorbeeld van wat ik nu heb: [mbr]*weg*[/mbr]
Op dit moment werkt het nog redelijk goed. Maar vooral met de mensen me een hogere resolutie merken wel dat hij niet het hele scherm inlaadt met kaart delen. Ik heb dit nu sterk beperkt. Ook is hij af en toe nog een beetje buggy.

ps: Het script voor de map staat in [mbr]*weg*[/mbr] dus jullie niet naar het verkeerde script kijken .

[ Voor 22% gewijzigd door esak op 27-02-2011 12:06 ]

[Zeebonk]

Werkt bij mij gewoon smooth hoor. Ik kan alleen nergens op klikken, of althans, als ik ergens op klik gebeurt er niets

1280x800 op Chrome 9.0.597

[RobIII]

Voor jou geldt hetzelfde als wat ik pas nog hier zei in een verdomd soortgelijk topic

Ik zou eens beginnen, als je het sneller wil hebben, met enkel te (laten) renderen wat er daadwerkelijk binnen je viewport staat. Dat scheelt al een hele borrel op een slok (en nog slimmer: zie Cheatah's post hieronder)

En, for Pete's sake, als je wil dat anderen naar je script kijken zorg dan dat er op z'n minst commentaar in staat. Het is al ongelofelijk euh... on-slim... om commentaar voor jezelf achterwege te laten, laat staan als anderen naar je code moeten gaan staren.

[ Voor 65% gewijzigd door RobIII op 27-02-2011 11:53 ]

[Verwijderd]

Waarom zou je 1000 divs verplaatsen als je ook de hele viewport kunt verplaatsen?
En via JSON haal je nu 1 object tegelijk binnen, ik denk dat het verstandig is om het mogelijk te maken om een bulk binnen te halen. Misschien ook eens denken aan het gebruik maken van sprites? Dit leent zich daar perfect voor.

[esak]

Zeebonk schreef op zondag 27 februari 2011 @ 11:41:
Werkt bij mij gewoon smooth hoor. Ik kan alleen nergens op klikken, of althans, als ik ergens op klik gebeurt er niets

1280x800 op Chrome 9.0.597

Klopt, als het goed is moet het nu op elke pc wel redelijk smooth werken maar bij hogere resoluties zal hij niet de volledige map laden. En als hij dat wel zou doen zou het traag gaan.

RobIII schreef op zondag 27 februari 2011 @ 11:49:
Voor jou geldt hetzelfde als wat ik pas nog hier zei in een verdomd soortgelijk topic

Ik zou eens beginnen, als je het sneller wil hebben, met enkel te (laten) renderen wat er daadwerkelijk binnen je viewport staat. Dat scheelt al een hele borrel op een slok (en nog slimmer: zie Cheatah's post hieronder)

En, for Pete's sake, als je wil dat anderen naar je script kijken zorg dan dat er op z'n minst commentaar in staat. Het is al ongelofelijk euh... on-slim... om commentaar voor jezelf achterwege te laten, laat staan als anderen naar je code moeten gaan staren.

Daar heb je gelijk in. Ik heb verschillende test cases maar de best werkende versie leek mij het duidelijkst.
Verder zie ik geen gelijkenis met dat topic? Hij heeft een volledig ander probleem dan mij.

Verwijderd schreef op zondag 27 februari 2011 @ 11:50:
Waarom zou je 1000 divs verplaatsen als je ook de hele viewport kunt verplaatsen?
En via JSON haal je nu 1 object tegelijk binnen, ik denk dat het verstandig is om het mogelijk te maken om een bulk binnen te halen. Misschien ook eens denken aan het gebruik maken van sprites? Dit leent zich daar perfect voor.

Je bedoeld dit?
<div id='container'>
<div id='chunk0-0'></div>
<div id='chunk0-1'></div>
</div>
En dan de container div te verplaatsen? In dat geval is het vaak nog steeds te traag (zie deze test en dan in IE).

[Verwijderd]

Wat niet in beeld is moet je onzichtbaar maken of uit de DOM tree halen lijkt mij. Wanneer heb je 1000 elementen in beeld?

[esak]

Verwijderd schreef op zondag 27 februari 2011 @ 12:32:
Wat niet in beeld is moet je onzichtbaar maken of uit de DOM tree halen lijkt mij. Wanneer heb je 1000 elementen in beeld?

Normaal gesproken zou je niet meer dan 200 element in beeld hebben maar op sommige drukken plekken ook wel 1000. Dus op plekken waar enorm veel bomen bijvoorbeeld staan kan het best de 1000 elementen in beeld halen.

[RobIII]

esak schreef op zondag 27 februari 2011 @ 12:28:
Verder zie ik geen gelijkenis met dat topic? Hij heeft een volledig ander probleem dan mij.

De gelijkenis zat dan ook in 't linken naar een "complete website" i.p.v. een "testcase" en dat soort zaken; niet in de gelijkenis van 't probleem (hoewel 't toevallig ook om een "google maps clone" gaat ).

[Guillome]

Is zoiets groots gewoon niet niets voor HTML?
Waarom niet in Flash of wellicht silverlight(ken ik niet)?

[voodooless]

Ik heb geen idee of het echt veel uit gaat maken, maar probeer dit eens:

JavaScript:

var containerStyle;
var dragMove = function(e) {
            var page = e.page
            mouseX = page.x;
            mouseY = page.y;
            if(mousedown) {
                e.stop();
                count++;
                if(!containerStyle){
                    containerStyle = $('container').style;
                }
                containerStyle.top = mouseY + 'px'; //Verplaats de container div naar de positie van de muis.
                containerStyle.left = mouseX + 'px';
            }
        };

[BasieP]

hey... psst:
http://openlayers.org/

het wiel opnieuw uitvinden hoeft niet hoor. Openlayers kan je vrij veel in aanpassen, zodat je gewoon je eigen kaarten etc. kunt laten zien.

[esak]

voodooless schreef op maandag 28 februari 2011 @ 22:16:
Ik heb geen idee of het echt veel uit gaat maken, maar probeer dit eens:

JavaScript:

var containerStyle;
var dragMove = function(e) {
            var page = e.page
            mouseX = page.x;
            mouseY = page.y;
            if(mousedown) {
                e.stop();
                count++;
                if(!containerStyle){
                    containerStyle = $('container').style;
                }
                containerStyle.top = mouseY + 'px'; //Verplaats de container div naar de positie van de muis.
                containerStyle.left = mouseX + 'px';
            }
        };

Het blijft traag .

BasieP schreef op maandag 28 februari 2011 @ 22:18:
hey... psst:
http://openlayers.org/

het wiel opnieuw uitvinden hoeft niet hoor. Openlayers kan je vrij veel in aanpassen, zodat je gewoon je eigen kaarten etc. kunt laten zien.

Dit is maar een klein onderdeel van de map. Mogelijk moet het later nog isometrisch ondersteunen dus ik moet het wel helemaal zelf maken denk ik.

Ik ga kijken html het html5 element canvas. Als ik een filmpje op youtube moet geloven, moet dat wat ik wil zeer gemakkelijk gaan. Ik ga er de komende tijd mee experimenteren. Jullie horen nog wel of het gelukt is . In ieder geval bedankt voor de hulp.

[Guillome]

nm

[ Voor 99% gewijzigd door Guillome op 02-03-2011 00:00 ]

[BasieP]

esak schreef op dinsdag 01 maart 2011 @ 20:31:
Dit is maar een klein onderdeel van de map. Mogelijk moet het later nog isometrisch ondersteunen dus ik moet het wel helemaal zelf maken denk ik.

*kuch*
zoiets:
http://osm.kyblsoft.cz/3d...078&lon=14.31372&layers=B

ook leuk:
http://dev.openlayers.org...Layers/Projection-js.html
http://docs.openlayers.org/library/spherical_mercator.html

[ Voor 10% gewijzigd door BasieP op 02-03-2011 22:09 ]