Massive Picture Mosaic

[Lucian Apetrei]

Hello lads,

I am working on a very cool charitable project that will be using leaflet.js and I really need your help. I'm hoping you will like this project.

Any help or any recommendations you might have to get some help on this would be awesomesauce.

I am a front-end designer so my programming skills are not very good, I am using leaflet to visualize a very large mosaic.

The final mosaic, if the project is successful will be made out of hundreds of thousands of pictures, the pictures will be sent by a lot of users, many of them will hopefully donate some money that will be given to animal shelters or animal rescue organizations.

What I need is for someone who understands how leaflet works very well to help me implement some features using the API cuz I am kinda' bad at understanding that programming language.

1. First of all, I am using the zoomify tile layer to display the image pyramid exported with zoomify.

Here is an example of a similar project: http://www.meowmosaic.com/

Now bear with me :D - I only need some features for this project, don't loose yourself in the details of that website.

2. Second, I need to mention that all the final zoom tiles (the base of the pyramid) is made out of 300x300 images and there could be up to 500k images or more (I am hoping much more, even though I am struggling with the technical details on this side, cuz it has never been done before at this scale as far as I know).

3. Third mention would be that when the mosaic is rendered I will only know where each picture went when it's finished, I can export a text list of coordinates by cell (what column and what row), also the name/path to the picture (example: https://www.dropbox.com/s/mlnbwba8ch7d250/final-2-project.txt).

So here's what I need:

- A marker for all of the pictures, when the marker is clicked it has to display a tooltip with basic info (an ID, name, country, city, short description) - this will be stored in a database.

- To change the coordinate system into a raster/static image type.

- To implement a search feature that will "zoom in" perfectly centered onto the marker after it has been searched by ID (this will probably be a sql query) - this way the search will be accurate and find the marker without problems, I can customize the marker with CSS so that it will look like the respective picture is highlighted.

That's all I need, I hope somebody can find the time to give me some guidance for this project, I am available for any clarification or any questions you might have, can also talk with you on skype, and I promise you will be given proper credit for this project, so far I am alone on it so if you want to contribute you should know that I intend to cover all the project cost from the donations, so if money is required to motivate you, you don't need to worry :)

If you want to get involved more I may be able to motivate you somehow, especially if you are from the US, because the project is international but the subject of the mosaic is from the US, it involves a certain degree of " a lot of exposure" for anyone working on this project if the owners of the subject will agree to allow us to use it's image. This is why I need contacts from the U.S.

P.S. We might also set a new Guineese World Record for the largest photo mosaic ever made.

Cheers and Kudos!

[Sylvio Ruiz]

Hello Lucian,

I suggest you learn about projections in Leaflet.

Understanding how to customize the projection, you can easily adapt your mosaic to be mapped by the Leaflet.

There is a nice tutorial here : http://omarriott.com/aux/leaflet-js-non-geographical-imagery/

Regards;
Sylvio

[Lucian Apetrei]

Thank you for the help.

I am unsure how I can fit the tiles I have with that, that said, there are some things in there that I need.

You see my mosaic is generated by zoomify, I can't generate them any other way from the software I use to make the mosaic, unless anyone knows a tile cutter that can process .PSB format.

[Sylvio Ruiz]

Hello again Lucian,

You can use ImageMagick, to resize, cut, compact and generate your tiles in several formarts, including optimized png.

ImageMagick supports over 100 images formats, including PSB format.

ImageMagick has support for read, process, or write mega-, giga-, or tera-pixel image sizes.

Web:
http://www.imagemagick.org/script/index.php

Formats:
http://www.imagemagick.org/script/formats.php

Large Image Support
http://www.imagemagick.org/script/architecture.php#tera-pixel

PHP and ImageMagick
http://www.php.net/manual/en/book.imagick.php

Regards;
Sylvio

[Lucian Apetrei]

Ok so I looked into it.

It appears that the renaming of the tiles is done with ruby and since my experience with ruby is -1 it's a total fail for me :)

I don't even know what to install to run the ruby script. I also want to mention that the generating/saving/processing of the entire mosaic is done locally on my laptop, so I am really unsure how I can pass that step of the tutorial.

Any ideas?

[Lucian Apetrei]

At the end of the tutorial by Oliver there is this mention:

Hit refresh and hopefully you'll see a zoomable map. Leaflet seems to behave strangely if your map tiles don't cover the whole map view port, so if one of your zoom levels has a particularly small tile set (something in the order of 512px wide combined), then you may have to disable that zoom level.

Indeed this is a big problem that I can't find any solution to on the internet so I think I am not going to set any map bounds. I will just leave the bounds to zoomify, unless anyone came up with a solution and would be kind enough to share.

Since I am unable to make use of that ruby script to create correctly named tiles I am still using the plugin: TileLayer.Zoomify

I have managed to convert the coordinate system, it works.

Now, I have to implement markers, tooltips and all that and I need to find a way to store them in a database and call them on a query.

Also need a search and there is a plugin for that, even though I remember not being able to pan and zoom at the marker location when I was trying it out.

Pfff, this stuff is hard :D

[Lucian Apetrei]

I still need to create a simple form that can add a marker to a DB and that also has a detailed tooltip. There will be hundreds of thousands of markers but only the one you search for will be displayed. The tooltip's content will also be submitted through that form. Once the marker is stored in the DB I need a way to search for any marker (by it's ID) and zoom+pan to it while displaying the marker and it's tooltip.

I googled for hours and can't find a simple practical example for this.

Please help!

[Lucian Apetrei]

More info for this project, if anyone can help: http://stackoverflow.com/questions/21356067/leaflet-how-do-i-store-and-retrieve-search-for-markers-using-a-mysql-databas

I have also attached an example of the txt file containing location by row+column and file name/location, the file I mentioned in the question above (the link).

Thanks.