Help: Google Map Programmers

[Cegaiel]

The map pack 3.5 addon, that some of you may have, I also maintain the markers in a database. With this data, I could easily implement a Google Map page, with flexible search options, and have markers display on a Google Map page, based on search criteria (ie search for a name, search for a particular resource, mob name, etc). My vision is the Map Pack Addon, viewable/searchable via webpage...

I have a generic version (that I would very much like to implement) at http://istariareference.com/istariamap.asp (It works perfectly, except for one major fail, that is preventing me from implementing the database). The coordinates are not displaying correctly. I am asking if anyone can help. I need to convert the current source code to adjust/offset the coordinates. Until this problem is solved, it can not be implemented... Currently there is only one marker defined, Dalimond Pad, this is an example.

Currently the page is showing the NW corner of that map as -4232, 8192 and the SE corner as 1404, 3844.

I am stumped. I need to figure out how to make the NW corner show 13500,41000 and the SW corner show 31500,13000.


You will find a commented out line in the source:
//map.setCenter(new GLatLng(22576,21980,true), 1, G_GAME_MAP);
This would make the coordinates show correctly, except the map will not display if you use it.

I am currently using:
map.setCenter(new GLatLng(0, 0, true), 1, G_GAME_MAP);

As you move the mouse around the map, you can see the coordinates in real time (upper right corner).

The full source code can be obtained by visiting the above link. View Source Code in the browser. That is the full source (there are no other include files).

If you can find a solution please email me [email protected] or post here..

If you need a server to experiment on, let me know, I can give you a FTP login to experiment on...

[Pharaxes]

I cannot help with the programming, but I wonder how it works. Is it only one picture and its just zoomed? or can you chose different tiles for different zoom levels? My istaria map might be outdated maybe, but it's as high res as it can be I'd say

[Steelclaw]

Google maps is really designed to work with latitude/longitude coordinates and a spherical map. There's some support here and there for unbounded Cartesian coordinates, though it doesn't work everywhere. (As of 3-4 years ago, you couldn't reliably mark out a poly region using Cartesian coordinates, as those functions would wrap input at (modulo 360) - 180).

See this page for a working single-point marker implementation:
http://bristugo.com/freeplotsgmap

The magic starts around line 107 in the source.

If I had to do it all over again, I'd probably look at a different app, like Leaflet, which will directly support a flat coordinate system. (e.g. L.CRS.Simple)

[Cegaiel]

@Pharaxes

Google Maps use 256x256 tiles, cut from a larger image. I took the 127 images from the game folder \Resources\Interface\Maps\Istaria\Terrain and put them together. Instead of painfully copy/pasting them, I simply displayed them in a table and took a screenshot of it. Here is how the 127 Istaria game images look like in a table: http://istariareference.com/maptest.asp and thats how I created my one large image (link also on that page). You can see the version I made, which simply is the image the game uses anyways (but pieced together). This image came out to be 2304x3584.

Based on that image size, Zoom Level 1 on Google Maps uses 1 tile, Zoom 2= 5 tiles, Zoom 3 = 21 tiles, Zoom 4 = 85 tiles, Zoom 5 = 341 tiles, Zoom 6 = 1365, Zoom 7 = 5461. Each tile is always 256x256. I just changed my Google Map page, from Zoom level 5 to Zoom Level 6, so now it zooms in a tad more than when I first posted.

I then used a free program called GMap Image Cutter to quickly make the tiles (from the large image, available on above link). Simply load an image, pick Zoom Level and click Start. The program also generates a generic html file to view the google map, too, but it doesn't suit my needs (but its there to play around with if interested).

So to answer your question, basically you need one large image, then chopped up into 256x256 tiles. The farther in you zoom in, the more tiles you need, that will be displaying on the map. Most people use Zoom 5 as the max, I believe. I now have the Google Test Map set to Zoom 6 now and uploaded the other tiles.

[Cegaiel]

@Steelclaw

Yes, I think the Cartesian is the correct solution. Problem is, I kind of copied/pasted another map code, from another game I did a while back and the coordinates issue is wrong, due to image size or whatever. I found this other day, a post about setting NW/SE corners of a map. But I can't quite figure out how to implement it in my existing code.

Believe me, I looked and studied that code on that link for your google map for a very long time and played around with it (before I even started this thread). I had considered asking your permission (or Ranqthas is the name on gmaphz.js , is that you?). That code already works as is. I could probably make that work instead. However, I couldn't figure out how to add a marker. Example, I uncommented the line: manager.addMarker(new GMarker(new GLatLng(22576,21980,true),{title: "Ranq's lair!"}),4); in function load() on the main page. But a marker didn't display. Or was it because I dont have the image file locally, which is where I tested it? How could I use that google map on bristugo.com, without using markermanagerhz.js? I mean where on the main map code, could I insert a manual marker? For example, here is a copy/paste version of the bristugo.com google map at http://istariareference.com/map.asp .. If you view Source Code, you can see I uncommented these lines, but no marker appears:

// ranq's lair
manager.addMarker(new GMarker(new GLatLng(22576,21980,true),{title: "Ranq's lair!"}),4);
manager.refresh();
jmark();


Your version already fixes the coordinates issue that I'm having, and would use that (assuming I have your permission and I can figure out where to add manual markers).

I see your page, just pushes the icons on the page via markermanagerhz.js. I dont want to push the icons in that method. Instead I would like to have a query via a form, and from there, I would have the page manually add one or more marker code on the page, dynamically.

Any ideas?

Also, if I could have permission to use your code, my images would not be the same as yours. Would you be willing to zip me up your http://tiles.bristugo.com/istaria/ tiles and email that to me? [email protected]

[Steelclaw]

@Steelclaw
I had considered asking your permission (or Ranqthas is the name on gmaphz.js , is that you?). That code already works as is. I could probably make that work instead. However, I couldn't figure out how to add a marker.

Example, I uncommented the line: manager.addMarker(new GMarker(new GLatLng(22576,21980,true),{title: "Ranq's lair!"}),4); in function load() on the main page. But a marker didn't display. Or was it because I dont have the image file locally, which is where I tested it?

You'll also need to disable the marker manager and marker tracking. Otherwise the marker manager will override the map's normal marker interface.

var mgrOptions = {borderPadding: 50, maxZoom: 5, trackMarkers: true };
manager = new MarkerManager(map,mgrOptions);

I see your page, just pushes the icons on the page via markermanagerhz.js. I dont want to push the icons in that method. Instead I would like to have a query via a form, and from there, I would have the page manually add one or more marker code on the page, dynamically.

The plot search map uses JSON and AJAX to dynamically update the contents of the marker manager. The marker manager will decide what markers to display given the map's zoom level and visible region. I strongly recommend that you adopt the same approach, as your map will cause your visitors' web browser to fall over if you try to add more than a few dozen markers without a manager. Otherwise, see above about removing the manager.

Also, if I could have permission to use your code, my images would not be the same as yours. Would you be willing to zip me up your http://tiles.bristugo.com/istaria/ tiles and email that to me? [email protected]

You can go ahead and use the code in gmaphz.js, just please attribute my work. Markermanagerhz.js is Google's code released under the Apache 2.0 license, so you don't really need my permission there.

As for the images on tiles.bristugo.com, you can continue to reference that URL until you get a bit more comfortable with the javascript.

I also ask that you not use my work for financial gain, or in a manner that charges players for access.

[Cegaiel]

Thanks for the reply, Steelclaw and your permission. I don't really know what else to do. I think this is going to be a bust for now. Perhaps the problem is that you're on Apache and I'm on IIS (Windows Server). I've played around with umpteen variations of the code. After several days and hours, I still have not gotten a single marker to display on my end. You're using PHP (which I'm clueless about, sad, I know) and I use .asp (Visual Basic).


Since your post, I tried:
var mgrOptions = {borderPadding: 50, maxZoom: 5, trackMarkers: false };
manager.addMarker(new GMarker(GLatLng(22576,21980,true),{title: "Ranq's lair!"}),4);
manager.refresh();


Still doesn't show anything on my end. But I'll continue here and there to play around with it.

What is an example of the string your plotsearch.php pushes? ie what is an example of the output/string/data that php pushes out?

I'm still really trying to get my map: http://istariareference.com/istariamap.asp to work. Well its all ready to go, if the coordinates was displaying correctly, I could implement a database/marker display routine so easily. But as of now, the coordinates are so far off.

Problem is I did a copy/paste of a map i implemented a year or two ago, and forget why I did, what I did in the code. It suits the map of another game just perfectly. And yes, the coordinates that show up in ruler matches that game perfectly. That game does have negative and postive coordinates just as it shows. Likewise, when you add a marker with the coords, it shows up in the right spot. The coordinates on the ruler, is just a real time representation of the x/y coordinates you're currently hovering.

Its probably some of the math functions in there. I'm really about to give up on this. I'm sure its fairly simple to someone who really knows the Google Map API very well, unlike me. I just know enough to be dangerous. I'll probably just break down and when I have some extra cash, go to one of those freelancer programmer sites and hire someone to figure out whats wrong in my code, and get it to display the correct coordinates.

[Dacurly]

I am no Google maps guy, but I do like math so I took a look at the numbers. First thing I noticed is your map is 10532 units wide by 16384 units high ( that's just using the pointer on your map so could be off some.) Then I checked the Istaria Map and it is 18000 units wide by 28000 high. So the first thing you need to do is re-size (if it is possible) your map so it is the same width and height as the istaria map. Then it would just be some math to get the x,y coordinates displayed right.

[Cegaiel]

I made a little progress tonight (in the right direction? I dont know ) and uploaded a new page, see http://istariareference.com/istariam...oc=14222,18235 . Resizing the image is not the issue. If you resize it, then x,y will increase in direct proportion and the offsets would still be wrong, but just propotioned off the newly resized image. So resizing the image is not the solution, its still the javascript math/formulas. The map I currently use is an exact copy of the game map in the game's resources folder.

Line 157: I changed this.pixelsPerDegree.push(c*256/16384); TO this.pixelsPerDegree.push(c*256/28000); That seemed to adjust the scaling almost perfectly. So now, even though the coordinates are still wrong, but in a different way, at least the scale is correct.

So now, its showing NW corner as 5000,0 and SW corner as 23000, 28000. So now the ruler is showing it at 18000 wide and 28000 long. Which matches the scale correctly and the Istaria Map's x/y's length, just like in the game.

Whenever, I figure out the math, for the correct lines, the Dalimond pad (off in the black) should move and line up with Marker #1. Thats the general area, where that pad icon should be showing @ 27000, 27000.


If anyone wants to take a crack at it, then you could just simply just visit this page: http://istariareference.com/map/ista...oc=14222,18235 . Right click the page, and View Source. Hightlight all the code, copy into Notepad. Save as anything.htm on your hard drive, then double click it the saved .htm file. It SHOULD display with whatever you change, in your web browser.

The goal is to have the map show NW corner show 13500,41000 and the SW corner show 31500,13000. (18000 wide, 28000 long) on the ruler.

The lines I've been playing with, and think might help is:
Line 233-234 and 244-245 (var c, d, e)

Stay tuned for more...

[Dacurly]

I think i got it try this

var d = (pixel.x/this.pixelsPerDegree[zoom]) + 8500;
var e = 41000 - (pixel.y/this.pixelsPerDegree[zoom]);

Hope this works

[Cegaiel]

I think i got it try this

var d = (pixel.x/this.pixelsPerDegree[zoom]) + 8500;
var e = 41000 - (pixel.y/this.pixelsPerDegree[zoom]);

Ding Ding, winner winner chicken dinner!

Well that was 50% of the solution. That fixed the ruler to show the correct coordinates. But the actual markers were still off.

After playing around with it a while, I found the other half of the solution:

var c = Math.round((latlng.lat() - 8500) * this.pixelsPerDegree[zoom]);
var d = Math.round((41000 - latlng.lng()) * this.pixelsPerDegree[zoom]);

After implementing those lines, everything seems to work perfectly now. I still have to tweak it a bit, but the Google API map code seems to be fixed

So the hard part is done now. Now that all of the x/y coordinates (ruler and marker locations) are lining up, I can now go forward and start integrating the database of marker locations and add some search type queries, etc.

I also need to go back in and update the predefined coordinates (of where you hover certain areas on the map, the ruler tells you what you are currently hovering.

So thanks again! Check back and refresh the future Istaria Map Page to check on progress (dont forget to always manually refresh the page on subsequent visits). When its all said and done, there will be a new link on istariareference.com to the Map page.

[Steelclaw]

Grats! Good job you two!

[Cegaiel]

I have beta version up and running, just needs a little bit of tweaking. But it is working and I have also put a link on the main webpage for it. The map pack marker database is now integrated and there are about 4900 entries in there.

I still need to find a way to add/show area labels (ie like the in game map, the Points of Interest type of labels). Not sure if I can add them with a trick, such as a new overlay or if I might have to manually add text to the original map in Photoshop, and then recut the tiles again.

You can basically search for marker(s) the same way as you would in game with Map Pack. You would search the exact same way as in Map pack (same search terms you normally use). Example search terms: Cobalt, Portal, Minnows, Warrior Trainer, Julie, Giant Ice Beetle, etc.

Anything that displays in Map Pack, is also searchable and displayable on the Google Map. All using the same markers/icons as in map pack.

There is also also a seperate feature to input multiple coordinates and display markers for those locations, on the map.

Also, note while you move mouse around the map, it will show the area you're hovering (in the ruler toolbar - upper right corner, bottom box). I've added quite a bit of those in, but will probably find a few more to add. I'm even adding the most smallest area, such a Tombs, Lakes, Towers, Dead Pool, Kion Volcano, blighted areas, small islands, etc. You'll have to zoom in the map a little bit to find those small areas and before they will display (easy to skip over them zoomed out). So its not just big areas that display in ruler bar, its small ones, too

Check it out: http://istariareference.com/istariamap.asp

[Dacurly]

Great job Cegaiel, works really well

[Cegaiel]

Well, as some may have noticed Google Map API v2 has been discontinued on November 19th. Since then the map page has become broken. The v2 map is now backed up at http://istariamapbak.asp . As you see the map is broke here and of course markers do not appear. You can view source in the browser.

I made a stripped down version which replaced the old one (for now): http://istariareference.com/istariamap.asp

Basically the map there is just for show, it does nothing. You can still use the search feature, but thats it.


Until I can fix one tiny issue, I can't move on to have it show markers again.
The map on that page is simply inserted from http://istariareference.com/googlemap.asp This is the actual page I'm working on and needs fixed.

If you were to view the source (googlemap.asp) in your browser and copy/paste it into notepad and save it as anything.htm on your hard drive (and double click it in My Computer/Explorer) it should launch and show you the map locally. So this would be a good way if you want to try to play around with the code on your local end. The tile images URL are hard coded so they would still display to you.

By the way, the image/tile file names look like: t.jpg, tq.jpg, tqqqqrt.jpg, tqqsqrs.jpg, etc. That is the variable "f" (ie http://istariareference.com/images/tiles/2/"+f+".jpg)


Here is my tiny issue (that I can't seem to get fixed)

Currently this map (googlemap.asp) uses these coordinates:

Upper Left: 85.00, -115.00 (not exact, rounded)
Lower Right: -85.00, 115.00 (not exact, rounded)

It is using these coordinates because it thinks its a standard world map (not a custom map), so thus using standard (GPS type) latitude, longitude coordinates. The old map I had this figured out, but migrating it to v3 has been unsuccessful.

We need the Upper Left to be 13500,41000 and the Lower Right to be 31500,13000

So now, I'm just attempting to start over from the basics and build the map back up again.


The answer lies in here: https://developers.google.com/maps/d...es#Projections

Projection.fromLatLngToPoint()
Projection.fromPointToLatLng()


An example I found, shows top left corner being forced to 0,0 and bottom right forced to 50,50
http://jsfiddle.net/yV6xv/79/

But this shows the moon and I'm unable to figure out to incorporate that into the code I currently have.

In the above page, you can click on the map (in right pane) and it will show the coordinates as you click it.
You can also click on my googlemap.asp page and see it do same thing.

So the goal is when you click the upper right corner of the map, it should popup a box and say 13500,41000 and clicking the bottom right corner would popup a box that say 31500,13000.

So if anyone can help out, I'd send you some fruitcake for Christmas, or a card with some cash inside

[Cegaiel]

Since I have not been able to find help on other sites, I'm willing to try something unconventional.

Since I can't get the map to behave the way I want it to, maybe as a temporary solution I can convert the game coordinates to something the map will recognize.

So this would call for someone who is good with math. So I'm looking for some math formulas now instead of actual code.
I've been trying different things, but unsuccessful thus far.

This is the test map in question:
http://istariareference.com/googlemap.asp - Ok, here is some additional info to this map. As started in previous posts, you could click View, Source in your web browser, copy/paste the code into Notepad and save as anything.html and double click that on your computer to view after playing with code (if you wish and a little computer savy). And of course hit Refresh if you change something.

First, you can click anywhere on the map and it will popup a box to the google coordinates of the location you clicked.
Also note the coordinates that popup are reversed (I do not know how to transpose it, but beware of that fact).
In the game, the first number is when you move mouse from left to right. Second number in game is moving mouse up and down.
Again, beware when the alert box popups, the 2nd number represents left to right movement and 1st number represents up and down.



Ignore black background, we just want blue water or actual land...
Note these numbers may be off by a small fraction amount, this was the closest I could figure out


Moving left to right:
Left edge of the map is -115.06
Center is 0
Right edge of map is 115.06
So from left to right, it thinks the map is 230.12 coordinates wide (2nd number if you click on map)

Moving top to bottom:
Top edge of map is 85.05
Center is 0
Bottom edge is -85.05
So from top to bottom, it thinks the map is 170.1 coordinates wide (2nd number if you click on map)


The actual game map is 18000 coordinates left to right and 28000 coordinates top to bottom.
Left edge in game is 13500 and right edge is 31500
Top edge in game is 41000 and bottom edge is 13000

The center of the actual game map would be 22500,27000 (Google map is 0,0)


Ok, now look at the 2 markers on the map.
One is for Storm Wisp at 18492,26468 (Google Map: -7,-52)
Second is for Center of map at 22500,27000 (Google Map: 0,0)



Now that I have given some additional info above, here is the math formulas help I need:
Based on the two markers above, what math formula would convert those to the Google Map coordinates?

I could also do seperate formulas to convert, such as if the first coordinate is between 13500 and 22500 it would be a negative number, 22500 to 31500 would be a positive number. That type of thing I could perform on the page in the background, that would be easy to implement. So with that in mind, it is not important if your formula correctly gets the negative or postive right. Just the actual number for starters is fine.

But as a starting point, anyone have any ideas to some formulas I could experiment with? I'm not sure if this can be done, since it moves from negative to 0 (center) then from 0 to positive.

[Cegaiel]

Never mind, I've officially given up with Google Map API v3. This is just too frustrating. I think it would be more fun to grind glass shards with my bare hands

I've decided to just scrap Google Map and use Open Layers. It's open source, free and works beautifully. I'm going to use Map Tiler program to create the tiles I need and generate the basic html.

In just 15 minutes, I've been able to actually create something that works: Click for Example (Use mousewheel to zoom in/out)

Until I can register this $25 program (hopefully within a month), it will have annoying watermarks on the map tiles. It also won't zoom in and out as far as I want it to, until I register it as well.

As you can see the coordinates also match up as it should (coordinates display at bottom right corner of page)!

So, now I can move forward and start writing some code to dynamically insert the map pack markers into the Istaria Map, using the Open Layers format.

Hopefully the map will be back up and working 100% this week. And the annoying watermarks will be gone once I can register the program.

[Cegaiel]

Istaria Map is now functional again. If you've visited this page recently you will want to clear your browser cache before revisting.

The migration from Google Map API to OpenLayers API was successful. However, it still needs minor tweaking. The function of when you hover or click a marker has not been implemented yet, but soon... Other than that, I was not able to break it, all the old functions and custom searches seems to work correctly. But I will still keep playing with it over the next few days and update accordingly.

I'm really liking this map now. I've increased the maximum zoom from 6 to 7 since MapTiler tiles are more seamless than the GMapCutter I was using before (you could see the tile borders slightly on max zoom of 6; 7 would be extremely undesirable with GmapCutter). MapTiler is 100% seamless and no borders are noticeable at all at 7 (It could even go to 8 without consequences).

The OpenLayers API and MapTiler program is very flexible. I have always dreamed about adding other maps, such as New Trismus, Doom, Skalkaar, Spirit Isle, etc. But that was not possible with Google Map API (at least with my expertise level or should I say novice level >< ).

I now have the tools to actually create these extra maps, and very easily. I have plans to implement some of these extra maps, in the future.

This update came sooner than expected. Gunder Firebeard @ Order surprised us today with a $25 dollar PayPal donation which let me purchase/unlock the MapTiler program sooner than expected and let me get down to business.

So on behalf of myself and the community, Woo hoo! and Thanks

If you're on Order, please show Gunder some extra love whenever possible

By the way, the Example in previous post is now updated with non-watermarked tiles, so you won't see the 'Maptiler.com" watermarks in the images....

[The Traveller]

Looks great, nice job

[Cegaiel]

Just finished a huge update. Since working with OpenLayers is so easy and generating the tiles, with the correct directory/file name structure, is equally as easy with MapTiler, figured what the heck.

The entire Map Pack collection is now available online from one interface. There is now a total of 27 maps. Since its integrated using the actual map pack database, I might have to change the name of the page to "Map Pack 3.7 online"

But if you're new or old player and don't have map pack installed, this is about the closest to see what its like.
You can change the maps with the pulldown menu. Since the city, dungeon maps, etc don't have too many markers, they will ALL load automatically (except Istaria map, too many - that you still have to search for something). For example: New Trismus map will show all markers. If you enter a search term, only the relevant markers would display then. This would be a good page to direct a new player asking for locations.

To recap these are the maps included with Map Pack and also available for viewing online at http://istariareference.com/istariamap.asp

Direct Links:

• Aughundell
• Balit's Island
• Chiconis
• Dalimond
• Drakul
• Dralk
• Dralnok's Doom (Dungeon)
• Isle of Drowned
• Feladan
• Fiery Rift
• Helian's Tomb (Dungeon)
• Isle of Battles
• Kion
• Kirasanct
• Mahagra
• New Brommel
• New Koraelia
• New Rachival
• New Trismus
• New Vassarak
• Rift (for ARoP)
• Skalkaar Island
• Spirit Island
• Sslanis
• Tazoon
• Tomb of Ashlander Vandus (Dungeon)

Curious about Map Pack 3.7 Addon for the game?
Map Pack 3.7 Thread
Download Map Pack 3.7