Google Maps concept with your own creations

[Phrenic]

Hey there,

Something I've been looking for for a while is a way to add my own maps into one whole world. Then I'd like to make a website so I can quickly zoom onto a city to see a district map I've made. This helps me get a better overview and would be nice for other people as well.

As this seems like the forum with the more experienced people on cartography, would anyone know of a way to create this?

Friendliest Regards, your fellow lurker

[Phrenic]

Good amount of people viewing, no answers I guess more peopl are interested in this concept.

Thus I've asked some webdevelopers about it and they've pointed me to this website. I will be delving into this but would like to share this for others to experiment:
http://blog.mikecouturier.com/2011/0...ng-google.html

[Bogie]

Looks interesting, a bit over my head though.

Might get more interest if you posted some examples of what you are doing.

[Phrenic]

Wow, actually got it to work although it's clearly a work in progress and my map is not great.

http://www.rodiv.nl/map/

To make this you need a big map, the one i'm using was 8000+px by 8000+px
Probably possible to do more, I removed controls as I didn't understand how they worked.

[johnvanvliet]

this already dose it

https://marble.kde.org/

and is a default part of the KDE desktop install on linux Operating Systems

kde can but built in Cygwin and used on windows
QT applications can also be built on windows in Visual studio or in MinGW

[Phrenic]

this already dose it

https://marble.kde.org/

and is a default part of the KDE desktop install on linux Operating Systems

kde can but built in Cygwin and used on windows
QT applications can also be built on windows in Visual studio or in MinGW

It sounds good, but I don't really have an idea of what you're saying. KDE, QT applications, Cygwin and MinGW are completly unknown terms to me.

Anyway, If people are interested, the example above is a simple HTML with a folder that contains the images. At the moment I'm looking at easy ways to edit parts of the map. This way it doesn't have to load the 32000+px by 32000+px map. Also, This can be as big as you want.

[johnvanvliet]

A full globe map should be a "power of 2 " in size
and a 2:1 width to height
this is NORMAL for using a 3d card

so for a full globe at 32k
32768x 16384
or 64 k
65536 x 32768


the KDE desktop is a Linux DE
BUT being QT it is cross platform
as in it also builds on Microsoft Windows and Apples Mac

the code will build in Microsoft's Visual Studio
-- a NON free and rather expensive compiler IDE from Microsoft
( there is a FREE to use TERMINAL text ONLY version -- no gui)

MinGW builds Linux programs ( or cross platform code using gcc ) on windows and builds Microsoft Windows *.exe and .dll's
there is a IDE " bloodshot's - DevC++"

[Phrenic]

It seems that I need more technical knowledge for your solution. I have basic HTML knowledge and some PHP..

[markem]

Er....allow me to unscramble your brain. :-)

Linux = Linus Torvaldus' Operating System which is open source and comes in many-many-many flavors. Like Windows - it has both a graphical interface as well as a shell or command interface.
QT = A programming language based on C++ that is cross platform compatible. So you can write something in Linux/Windows/iOS and then recompile it for the other OSs. QT is one of the really big ways in which programs are being released on various systems and OSs quickly.
KDE Desktop is one of the many-many-many graphical interfaces that runs under Linux.
Cygwin is a Linux OS that runs under Windows. So you can have both Windows and Linux up and running.

If you know HTML and PHP you can write a similar program to what the Google Maps does. PHP has GD built in to it. That is how you break the map up. Read it in and copy each section to a new GD variable and then send that back to the user by writing it out to a temp file with a unique id name. You really need to know Javascript and jQuery in order to really have a map you can move around and to access various things that jQuery allows you to access.

The best way to do a map is to create a Tic-Tac-Toe of images. This is because GD will only handle a certain sized map ( something like 2048x2048 ). Anything larger and GD croaks. So you'd first want to load your map into Photoshop and then cut it up into the tic-tac-toe grid. Once you have that you can then load all of the maps in because you make nine GD instances with one part of the map in each variable. Once you have that loaded you are ready to display the part of the map the person wants to see. You do this by using GD's built-in functions to copy sections of the map. You just copy what you need plus one or two extra sections around what the person is going to see, and the rest of the squares you just either don't show or you leave blank. What you want to do is to be able to slide from point A to point B. This is where jQuery comes in. Actually, jQuery's UI bundle. It has a simple function called DRAGGABLE. You call this function on the entire table that is displaying your map and you can then grab it and drag it whereever you want it to go.

So first - cut up the big map into smaller maps.
Second - you are displaying a table. With jQuery you can insert new rows or columns and remove older ones. So as the person scrolls around you add rows/columns in that direction and remove rows/columns from the other direction.
You MUST create unique ids for each of the cells in the table. This is easy to do because the center of the map is (0,0). So cell_0_0 would be the center cell of the map. Negative numbers are just "cell_-1_-1" and so forth. When the person stops dragging you just update the cells by grabbing the sections off of your map and plugging them in to the cell with the same coordinates.
Last, you update where you are currently at and you are through.

You face a somewhat steep learning curve to learn Javascript and jQuery (and jQuery UI). But there are a ton of places you can go to in order to get help or documentation. Luckily for you - your program should not be all that big since you are just wanting to zoom-in (which makes the size of the sections you get smaller) or zoom-out (which makes the size of the sections you get larger) or move the map around (a single call to jQuery's DRAGGABLE function followed by and update of what you are seeing).

Last, but not least, your entire table should be contained within a <DIV> statement where you set the style to not allow for overflows. The reason for this is because otherwise, when you drag the map, it will cause the scrollbars to appear which isn't something you want I think.

Why haven't I done this yet? Hackers attacked my set of laptops last year and I have spent the last year repairing the damage they caused. Then last week the hackers struck again. I hadn't gotten to fixing my own laptop and they jumped back on to it. I managed to shut the thing down and am now in the process of backing up my laptop before I wipe and reinstall the OS. I have a 500GB hard drive with over 400GB of stuff on my system. I started it backing up to a 2TB external hard drive last Monday. It is only about 1/4 of the way through doing the backup. So to put this another way - been a bit busy and will be a bit busy for a while still. But I have plans on making a website with various things in it and one of them is to make something like Roll20 except you can upload your maps and do the zoom-in/out as well as to create your various locations so you can play your RPG game over the internet.

Anyway - have fun working on this. You really do only need HTML, PHP, Javascript, and jQuery to do this. Later!

[markem]

I talked with some friends and they suggested using the Fireman's Code as a way to cut up the map and they also suggested having three types of maps. The three types being your largest (zoomed all the way in) map, a medium map (where the users start from) and a small map (completely zoomed out).

The Fireman's Code is how Firefighters know where, in a building, a fire is located. It start off with what floor the fire is on. (So a number - maybe you can use it for what you are looking at since you want an overall map and smaller areas (like dungeons) to zoom in to.) Anyway, you then cut the map up into four quadrants and you label them A,B,C, and D. If these are too large to fit into GD you cut each of these up into quadrants and you label them 1,2,3, and 4. If these are too big you just repeat using A,B,C, and D and then 1,2,3, and 4. What you wind up with is each quadrant having a unique name like 1a4c3.jpg (or gif, png, or whatever).


There is also a program called ImageMagick that can make it easier for you to do this. If you install ImageMagick then you can call it from PHP and it will handle just about any size of image you want. Use it to cut the really large image up into the quadrants. ImageMagick is also very quick and it can do various things like rotate, lighten, darken, and apply a lot of special effects to the image.