Kyle Mulka's Blog

As a follow up to my previous tutorial on how to use your own custom map tiles in Google Maps, here’s the code (function) you need to convert Google tile x, y, and zoom into a suitable WMS URL. Just stick this code in the getTileURL(x, y, zoom) or getOverlayURL(x, y, zoom) functions and tweek some of the parameters to your needs.


var baseURL = "http://localhost/cgi-bin/mapserv?"; //begining of the WMS URL ending with a "?" or a "&".
var format = "image/jpeg"; //type of image returned
var layers = "example_layer"; //WMS layers to display
var styles = ""; //styles to use for the layers
var srs = "EPSG:4326"; //projection to display. Don't change unless you know what you are doing.
var ts = this.tileSize;
var ul = this.getLatLng(x*ts,(y+1)*ts, zoom);
var lr = this.getLatLng((x+1)*ts,y*ts, zoom);
var bbox = ul.x + "," + ul.y + "," + lr.x + "," + lr.y;
var url = baseURL + "version=1.1.1&request=GetMap&Layers=" + layers + "&Styles=" + styles + "&SRS="+ srs +"&BBOX=" + bbox + "&width=" + ts +"&height=" + ts + "&format=" + format + "&transparent=true";
return url;

This was just too cool not to post. Its a flash interface to the arial imagery of Google Maps and MSN Virtual Earth. It has smooth scrolling and rotation. Here ya go: Flash Earth

Here’s the (censored) source code I use to cache WMS requests. It’s pretty straight forward as long as you have the PEAR Cache_Lite package. Feel free to use the source code however you want. I’d appreciate a link back to my site, but I don’t require it.

WMS Cache Source Code

A few things to note:

• lifeTime is measured in seconds.
• min/max X/Y are specific to the images I serve. The ones there are for Ann Arbor, MI.
• transparent.png is just a 2×2 png image which is transparent. This shows up for requests outside the box that my WMS serves.
• You will probably have to change the url with localhost in it to be whatever WMS server your images are coming from.

Now, on my Google Maps Page, direct from The Iowa Environmental Mesonet, comes IEM Weather Maps!

I’m currently working on a way to use OGC‘s WFS (Web Feature Service) to plot points, polygons, etc. onto Google Maps. I’ve got it to work pretty well for simple points, polylines, and polygons. Give this a try:

WFS Example

I’ll explain a little of how this works. First, it loads the Google Map. Then, it takes the lat/long bounds of the Google Maps, adds a buffer region around the bounds and sends a request for the bounds plus the buffer region to the WFS url. When the request comes back, it clears the map of overlays and marks all of the points in the WFS response XML on the map. It does this cycle every time you change the map type in the upper right.

So, its not complete yet, but it works well for what it is supposed to do right now.

Future Plans:

• DONE – Draw WFS Polygons as GPolylines.
• Tile (similar to Google image tiles) and cache WFS responses (which are just XML files)
• Put attributes of Points into info windows

UPDATE: Worked a little more on it, and it works much better in IE. Something is screwy with my version of FF: 1.0.3.

UPDATE 2: So, maybe it wasn’t a problem with Firefox, but instead a problem of extra space that I wasn’t expecting in the XML input. So, I put in some code to trim the space around the polyline coordinates, and it works much better in FF. I’m still having problems with getting the information I want into the info windows. Javascript just does not have a friendly way to parse XML. I’ll have to learn some more about that. If anyone can help me, that would be great.

By popular request here is a tutorial on how to use the Google Maps API to put in your own maps (tiles). You can put in transparent tiles over the Google Tiles, put your tiles under the Google road tiles (from Hybrid mode), put transparent tiles over your own base tiles, or simply replace Google’s tiles all together. Your choice.

Warning: For this tutorial I assume you know how to make a function that returns the correct image URL for each tile based on Google’s numbering system. I explain how to use a WMS service to generate tiles for you here.

Problem

There has been a crazy amount of people using the Google Maps API to integrate their own data into a Google Maps type application. This has been accomplished by mainly using Google’s Overlays. Initially Google documented the Marker type and the Polyline type. However, if you shove a ton of these overlays on a single map, your browser gets bogged down very quickly. Here lies a problem. JavaScript has limitations with speed. It just can’t do things that fast. There are many solutions. One, outlined below, uses image tiles, either pre-rendered like Google or rendered on-the-fly via a server-side script.

Requirements

To implement this solution here’s what you need:

• Access to a web server
• A Google Maps API Key
• A unique URL for each tile of your custom map. (images themselves or by using a server-side scripting language)
• A JavaScript function that maps Google’s x, y, and zoom coordinates along with possible other parameters (tile size, etc) to that URL

You could make a bunch of tiles, but if you know what you are doing it would be a lot easier if you set up a WMS service and possibly a caching system like I have done. I’ll explain the details of this later. Subscribe to my Google Maps Blog via RSS or HTML for updates.

Before you start

1. learn the basics of the Google Maps API.
2. Figure out the URL to your custom map tiles and the function to map them

In the code

1. Create a new Gmap object with some standard controls like so

var map = new GMap(document.getElementById("map")); //associate the Gmap object with your div with an id of map

2. Create a new map spec based on one of the existing ones.

Here, we use a special function which will copy all of the properties of one of the mapTypes to your new map type.

// Copy Object Function from http://mapki.com/index.php?title=Add_Your_Own_Custom_Map
function copy_obj(o) {
var c = new Object(); for (var e in o) { c[e] = o[e]; } return c;
}
var umType = copy_obj(map.mapTypes[2]); //currently set to the hybrid mode, but could change


3. Tell the spec if you want an overlay or not

umType.hasOverlay = function () {return true;};

4. Tell the spec what URL(s) to use

There are two function which tell Gmaps where images are located: getTileURL and getOverlayURL. Since you copied an existing mapType, these function will already be defined, and if you want to stick with the default, just don’t override the function. But, if you want to override both the tiles and the overlay tiles, define the following functions like so.

umType.getTileURL = function (x, y, zoom){
//put your function code here which returns the URL to the image you want as your base
};
umType.getOverlayURL = function (x, y, zoom){

//put your function code here which returns the URL to the image you want overlayed
};

5. Add the map spec to the list

map.mapTypes.push(umType);

6. Set the map type to be the current map type if you wish

map.setMapType(umType);

7. Put some controls on your map if you wish

map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

8. Focus your map on the University of Michigan Campus… hehe… GO BLUE!

map.centerAndZoom(new GPoint(-83.7381362915039, 42.27702299695707), 2); //University of Michigan Campus

That’s about it. Leave comments if you have questions. More details about the function that I use to get images will be coming later this week.

Update: Here is how to get the Google Maps interface to take images from WMS.

© 2005 Kyle Mulka

Cross-posted to the Google Maps API discussion group (click here):

There has been a lot of discussion on a large amount of overlays on a single Google map. Different hacks have approached this problem in different ways. Many sites do not even deal with it because they can’t, don’t know how, or don’t want to.

The capability to display a huge amount of overlays I believe should be handled somehow by the Google Maps tool itself. However, since most, if not all of Google Maps is written in JavaScript this may be a problem. The JavaScript would have to load a large file and then query it. For JavaScript, this would take a long time if the file was large.

I’m going to explain a solution which is derived from what I’ve seen on a few different sites, and what I think would be the best. It uses PHP and MySQL, but I’m sure you could substitute in other technologies like ASP and Access, or JSP and Oracle for example. What would be an even better thing to do would be to figure out how to get a real GIS map server (Google it) to interact with Google’s native overlays, but for those of you who just need a simple solution, here it goes.

You would use PHP along with a MySQL table full of Overlay information. Then, the JavaScript would call a PHP function with the current bounds of the map which is represented by two points. It doesn’t matter how you call the function, just find a way. Then, PHP would use these two points to make a MySQL query on your table of points and only return those in the specified bounds back to the JavaScript. Then, the JavaScript would clear the map of markers and then redraw only the ones which are returned by your server (the ones that are currently in bounds).

I would appreciate questions and comments as I go ahead and implement this solution. Maybe someone has already done exactly this and open sourced their code. If so, I would love to hear about it to save me time.

-Kyle Mulka
http://maps.kylemulka.com

Update:

I forgot to discuss the problem of having too many overlays within a given bounds. That is kind of important. Oops. For example, if you are zoomed out all the way, your JavaScript will be handed all of the overlays in the world, and this will not help performance AT ALL for higher zoom levels. So, I’ll outline a general solution to this problem.

You need to organize overlays into groups. Visually, on a map, without knowing anything about the underlying data, I see only one general solution. If anyone has any others, I’d love to listen.

You would have an algorithm which reduces the number of overlays to display by automatically grouping overlays based on location. There are tons of ways to do this. I think the easiest way would be to split up the given bounds into four squares, then check each square to see if there are still to many markers in that square. If a square still has too many markers, simply divide that square into another four squares and count again. All of this information could be calculated ahead of time and stored in a database for painless and fast retrieval when queried. This is almost exactly what Google does with its map tiles. Each zoom level simply divides each tile (a square) into four smaller squares and displays the new four tiles. This is how Google Maps itself is so fast. They can simply save all of these tiles in a database or as image files for absolutely painless retrieval. There is almost no processing required on the server. It is extremely scalable.

Another improvement to this system may be to use the same system that Google uses to keep track of tiles. The tiles are cached on your computer, and when you go one way on a map, then go back, it doesn’t have to query the server for those tiles. It would be nice if you could some how cache the marker information in the browser as well.

-Kyle Mulka
http://maps.kylemulka.com

For anyone who knows what AJAX is, maybe you will find this somewhat amuzing like I did.

Ajax, ON, Canada

UofM people, have you noticed that on Google Maps East University extends further north past Ulrich’s between East Hall and West Hall? I’ll bet it was like that like 10 years ago or something. Can anyone confirm that? Here’s a route I made to a non-existant address on a street that doesn’t extend that far north:
Apartment to Old East U.

I’ve been working a little more with Google Maps at work and I found this nifty little javascript library called TPhoto. Basically, it lets me overlay any image I want on top of Google Maps using the sGoogle Maps API. This shall be useful!