How to maximize Map viewing effectiveness

This article will be about how to view maps in size 6656x3840px per page or bigger.

First I did some testing on my old Firefox 32.0.1 and then I installed new Firefox 47 to reflect the difference.

Fist I set my display to maximum size.  I was able to get 26x15 images of 256 px per size is 390 images per 256px is 6656x3840px per page view. With two displays up to 780 images per one shot! You are limited only by your internet connection and possibly browser performance. To speed up viewing in Firefox, change your cache from disk to RAM. Maybe also using latest Firefox version would help, however now I use old Firefox 32.0.1.

Recently I have managed to display 34x19 images per one monitor. It is still possible to display more if I use ctrl+- (control plus minus sign). It takes 11-12 seconds to load one screen on FF 32.0.1 but on FF 47 is took about 6 seconds or less. However in the case when I enabled development tools the time increased about 2x and the map can even freeze! If you add more images to your display using ctrl+- then you screen most likely will freeze. It happened two times so I give up.

However after few screens of viewing in the Firefox 32.0.1 window freezed because of not enough RAM memory. I do not use disk storage so maybe this is the problem? When I closed the maps.cz application 700MB has been freed. It seems like viewing at 34x19 images per screen is not that good as 26x15 which is slower but secure for 3.5GB RAM on Windows XP. It should be about 40MB of images so I guess the problem is in Firefox performance. Event that the newer version has better performance it is not great still.

First you need to get good monitor and card which is able to display resolution at least 1920x1080px per display/monitor.

Then you go to Windows display settings. I use Windows XP so I go to Desktop->settings->advanced->display->custom->75% to change DPI. I select 75% of the normal size.

You need to restart your computer to get everything as small as possible (a CD with Windows was requested) and then you run browser, go to maps. Enable Development tools usually by ctrl+shift+i or use Tools menu. Then you inspect page with rectangle tool which is placed in the top left corner of Development tools. First you get rid of svg tag (delete it) and then you can inspect the images. You can see the size of images so you can simply calculate how many they are there.

Then in Firefox browser I open a map site like mapy.cz. First I need to display the site as normal not in maximized view. If you are in maximized view you need to go down with F11. Then I use ctrl+scroll down to get smaller characters and images. The result is that the map images are so small that you can display huge map size 6656x3840px. If you need to grab the images, there are plugins for Firefox which you can install. Then you can grap the screenshot - very simple or you can save all the images if you want. They are already saved on your disk when you are viewing them, but you can save them to stay permanently on your disk using Save Images. If you have two displays installed, you can even save 780 images for one shot! You can buy some old cheap display in bazaar (online). You just need to look for some old crappy display which is cheap because you don't need to watch the display when you are downloading images in Firefox browser. You can set your browser in that way that is will be expanded from one screen to another. Next, one can create viewing script with Autohotkey (often referred as AHK) which will run in your PC and will view your images automatically. You could even create 3 windows of the same map so you could watch wider area. With smaller height you can fit one map on both screens in the way, that what you see in the first browser window on top right, you can continue watching in the middle left corner and what is in the middle right corner, you will continue watching in the bottom left corner.

So then you will watch the map(s) from down to bottom. This way you could get width
19968px. Now imagine a software which can join the saved images into one huge image. Cool.


Where to download images?

To maximize viewing in Firefox browser simply disable Disk cache in Tools - Settings - Advanced Settings in a Net tab. Check Do not use management of Memory. Notice this text is translated from check version of Firefox.

Speed, speed, speed, give me what I need!

With a good internet connection about 8MB/s you can view the map source very fast. The speed which I can reach with one monitor on mapy.cz is rather slow. I can view one display per 11-12 seconds. This could be because the mapy.cz send a lot of data with slow speed.

Cca 1m-1.5km/30s which is about 2km in zoom 20 (the highest details).

Whilst with myapp.htm which is Google Maps API v3 on my computer, I can view 4km per 1 minute (240km per hour), e.g cca 6s per one display at zoom 20. Which means that maps.cz is really slow.

Of sure, if Firefox will manage to increase its performance during next years than we could use multithreading and other technologies to get better performance. Hopefully we could get at least 1km per one display width in full zoom of level 20. Now with simple plugin we can save images, rename them and with some good software we can create complete map.

Rozdělení programu / programů

Uvažuji o možnosti že bych místo jednoho programu vytvořil tři samostatné programy.

Jeden by se mohl jmenovat "Map analyzer" a jeho cílem by bylo procházet mapy z internetového zdroje a analyzovat jejich obsah. To by byl první krok k přípravě textur. Tímto by se dalo zjistit co jednotlivé čtverce (obrázky) obsahují a kde přesně. Například tvary - čtverce a obdélníky baráků, silnice, ulice, tráva, lesy, lesní cesty. Výhoda by byla v tom že výsledek který by se uložil do souboru by nezabíral mnoho místa, mohl by však zabírat třeba jeden gigabyte dat (hrubý odhad).

Pokud bych zvládl tuto fázi, pak by měl přijít na řadu program, který by opět oprocházel internetový zdroj a pokusil by se z něj udělat 1. masky a 2. textury (to by bylo minimálně na dvě fáze - stahování, analýza, filtrování a uložení).

S hotovýma texturama už by se pak dalo dělat ledasco např. výroba scenérií pro hru, simulátor, apod. a na to by byl zase třeba třetí program.

Zatím jsem však ve fázy, že se teprve učím jak abalyzovat a graficky zpracovávat obraz, takže teprve uvidím jak to vyjde.

Hromadné stahování obrázků: Save images, Firebug

Visit page of tutorials (see menu) / Navštivte stránku s návody (v menu)

On this page you can find tutorials.

Na této stránce naleznete důležité návody, které se týkají získávání zdrojů dat pro práci s mapami. V prvním tutoriálu vám ukážu jak v prohlížeči Firefox používat vývojářský nástroj k určení zdrojových souřadnic x,y,z na Mapách Google. Tato informace je třeba pokud chcete použít plugin Save images, abyste mohli pomocí regulárního výrazu přejmenovat obrázek na smysluplný název souboru.

Learn how to use Firebug and Development tools in this short tutorial (video/animation).

Click to enlarge / Kliknutím zvětšete.
You can save this image/animation to your PC.

Je to animace, obrázek (5MB), který si můžete jednoduše uložit do počítače.

Další animace by se měla týkat používání pluginu Save Images k uložení obrázků, a zejména k vytvoření regulárního výrazu, který sedne na Mapy Google (png).

Související odkazy

Hromadné stahování obrázků: Save images, Firebug

How to create MyAPI.html - Google maps Javascript API v3

Jak vytvořit mapku MyAPI.html - Google maps Javascript API v3

Aktuální informace k vývoji

Mám v plánu začít novou koncepci programu. Na pomoc jsem si vzal knihovnu pro práci s grafikou. Práce s programem podle nové koncepce by byla jednodušší. Stručně shrnu co člověk (program) musí udělat aby mohl získat textury v několika provedeních.

1. prohlížet zdroj obrazů (mapu)
2. analyzovat mapu a vytáhnout z ní potřebné informace.
    (takto je třeba postupovat od nejmenšího přiblížení až po největší).
    mezi tyto získané informace patří i pomocné masky nebo vektory, které
    nám (tj. programu) řeknou kde se nachází, silnice, řeky, baráky, stromy, hřiště apod.
    Řeknou nám jak jsou na mapě orientovány nebo jaký mají rozměr
3. uložit do databáze získané informace
4. znovu prohlížet mapový zdroj (tentokrát ortofoto)
    program se musí připojit k databázi informací (masky a vektory), načíst tyto data
    a pomocí nich vytvořit grafické verze - odvozeniny textur
    např. jarní, podzimní, zimní a noční textury
5. tyto data je třeba uložit do databáze obrazů (pravděpodobně těch databází bude více
    v závislosti na tom kolik chcete verzí)

Při bližším pohledu na tento proces zjistíme jak by program měl fungovat:
1. Prohlížení obrazů bude probíhat na vašem prohlížeči Mozilla Firefox.
    Pomocí doplňku Save Images počítač přejmenuje obrázky tak, aby bylo možné
    vyčíst jakou oblast si právě prohlížíte a správně ji uložit do databáze.
    K prohlížení se bude používat script Autohotkey-L, tento program je také třeba
    nainstalovat na vašem počítači. Script si budete muset nakonfigurovat podle toho
    co chcete prohlížet.
2. Analýza obrazů tedy jednotlivých úrovní map by měla probíhat na základě
    informací o barvách uložených v xml souborech. xml soubor vy měl využívat
    jednoduchou strukturu, která popisuje o jakou vrstvu se jedná, případně o jakou
    mapu se jedná.
    Dále popisuje rozsah jednotlivých barev ve formátu HSL pro jednotlivé tvary.
    Např. Silnice může být bílá, budova šedá, tráva světle zelená apod. To se definuje
    v souborech xml.
    Spuštění programu tedy bude vyžadovat zadat xml soubor nebo adresář se soubory.
    Před analýzou si budete muset ověřit jestli vzorech dat odpovídá tomu co chcete
    z obrazu zjistit.
3. Na uložení informací budete potřebovat dost velký disk
4. Prohlížení zdroje ortofoto musíte začít přesně v tom stejném místě jako jste prohlíželi
    obecnou mapu s popisky. Před každým spuštěním by bylo vhodné zadat o jaké
    přiblížení se má jednat, program pak může překontrolovat jestli načtené data sedí s tím
    co očekáváte.
5. Na uložení rastrových dat bude třeba velmi mnoho místa na disku. Měli byste mít k
    tomu určený samostatný disk několik s kapacitou několik Terabyte.

Další zpracování pomocí programu na výrobu scenérií pro hru by bylo možné, ale byla by to samostatná kapitola. Program by měl zahrnovat mechanismus na slučování obrazů do čtverců (Lodů) a jejich uložení jako bmp. Program by mohl spustit vývojářskou pomůcku s určitými parametry, respektive by mohl vygenerovat soubor s těmito parametry potřebnými k sestavení scenérie. Na samostatnou scenérie byste pak potřebovali další disk.

Nakonec bych chtěl vysvětlit proč zpracovávání informací musí probíhat zezhora dolů jako když prohlížíte pyramidu po úrovních.

 

 Je to nutné z důvodu zvýšení efektivity, výkonu a ušetření času. Protože by bylo velmi obtížné analyzovat obraz v ultra vysokém rozlišení, musí se každý analyzovaný obrázek nejdříve několikrát zmenšit abych mohl předběžně zjistit co se v něm nachází a lokalizovat tak plochy, které mají být podrobeny bližšímu ohledání v obrazu s vyšším rozlišením.

Zároveň díky tomu, že tento procesu budeme mnohokrát opakovat se bude prodlužovat čas na zpracování a budeme získávat zkušenost z programem. Zatímco první spuštění není nic časově náročného, další spuštění již bude znamenat několik vteřin navíc. S každým spuštěním se čtyřnásobí čas zpracování. S pokračujícími detaily tak může zanalyzování celé ČR trvat několik dnů - nicméně pro velmi vysoké detaily bych nejspíš postupoval po řádcích nebo naopak po sloupcích, takže je možné jeden den či noc prohlížet několik sloupců, a další den či noc prohlížet další sloupce atd. I kdyby to mělo trvat měsíc, dříve nebo později bude výsledku dosaženo.

Výsledky budou záviset na tom jak jste nadefinovali vzorky barev (barvové rozsahy) v souborech xml. Vzorky je třeba definovat pro oba druhy map, jak normální tak pro ortofoto (letecké snímky).

Grafické akce by měly být předdefinovány programem, vy byste mohli ovlivnit jen např. míru kontrastu apod. Případně jaký druh textur chcete vygenerovat.

Uplatnit analýzu lze pouze na těch zdrojích, jejichž webová aplikace má zdroj obrázků v takovém tvaru, který umožňuje přejmenování (abychom mohli získat tři čísla z,y,x). Viz zde.

Související odkazy

Hromadné stahování obrázků: Save images, Firebug

How to create MyAPI.html - Google maps Javascript API v3

Jak vytvořit mapku MyAPI.html - Google maps Javascript API v3

Použití Firebugu a Google Maps API v3

Pokud jste si ještě nepřečetli můj článek o Google Maps API v3, tak jedná se o jednoduchou webovou stránku, kterou si zřídíte na svém PC.

English:
Google Masp API v3 is simple page you can create on you PC or remote machine.

Podívejte se na tento odkaz:

English:

Watch this example:

http://www.w3schools.com/googleapi/

Vytvoření takové mapky je velice snadné. Vlastně jen zkopírujete kód a dáte si to kam chcete. Upravíte souřadnice a už jedete. Pojmenujte si stránku např. MyAPI.htm.

English:
To create the map is very easy. You just copy a code and configurate coordinates. Name the html file e.g. MyAPI.htm.

Výhoda je v tom, že mapa je velmi rychlá může být úplně přes celou obrazovku

English:

The advantage is your map is very fast and it is extended our your full screen.

Pro plný výkon kliněte na popisek typu mapy vlevo nahoře : Satelitní a odškrtněte štítky.

English:
For best performance click on Label Satelit/Ortophoto in upper left screen and turn off Labels.

V prohlížeči Firefox je inspektor struktury webových stránek zvaný Firebug. Aktivujte ho stisknutím kláves ctrt+shift+I.

English:
In browser Firefox you can find Web inspection tool (a tool for web development) called Firebug. You will display it using hotkey ctrl+shift+I or from Tool menu.

V levém horním rohu spodního okna se vám zobrazí ikona obdelníku. Klikněte na to.
Tímto nástrojem najíždějte na jednotlivé části okna. Když kliknete v dolní části se vám zobrazí v jakém místě struktury (DOM) se nachází html prvek na který jste klikli. Smazat ho lze tak, že zmáčknete klávesu Delete/Del.

English:
In upper left corner of the bottom window you can see small rectangle.Click on it to be marked. Now you can inspect DOM elements of web page. Where you go with mouse cursor, you will si highlighted the element of the page you are checking. Clikc on it so go to this place in DOM tree / structure of the objects. If you press Delete, then you delete it.

Procházení stromu - struktury objektů lze provádět tak, že klikáte na jednotlivé elementy. Tak se můžete dozvědět z čeho se skládá stránka. Můžete například odhalit skryté obrázky, které nejsou běžným způsobem dostupné. Pomocí nabídky kliknutím na pravé tlačítko myši, můžete vyvolat místní nabídku.

English:
Browsing of the tree - you can do it so that you click on the small arrows on left side and the DOM items will expand. You can then see hiden information and access e.g. hidden images. You can even find out x and y postion or zoom level of the map. To find out what I mean checkout this page. This information is hidden in the link near IMG tag.

Ze skrytých informací u satelitních obrázků (tag IMG) můžete vyčíst informace jako pozice obrázku x,y a velikost přiblížení neboli zoom.

Shrnutí

Nástroj Firebug je opravdu užitečný. Spolu s dalšími nástroji jako SaveImages se dají obrázky uložit pod vhodným číselným názvem. Obrázky si pak seřadíte a pospojujete a máte na světě mapu pro vlastní použití.

English:

The Firebug tool is very usefull. Commonly with plugin SaveImages they are powerfull tool. You can save images with coresponding number names and after you display them in ordered list, then you can joint them to nice map for personal use.