SA-MP Forums

Go Back   SA-MP Forums > SA-MP Scripting and Plugins > Filterscripts > Tools and Files

Thread Tools Display Modes
Prev Previous Post   Next Post Next
Old 02/04/2014, 04:52 PM   #1
ikkentim's Avatar
Join Date: Jan 2010
Location: Kampen, The Netherlands
Posts: 1,069
Reputation: 188
Default SanMap - San Andreas in Go0gle Maps

1. What is SanMap?
SanMap is a basic tool for combining the power of the Go0gle Maps JS(v3) API and the GTA: San Andreas map. SanMap contains some simple tools to convert map images or OpenStreetMaps files into tiles. SanMap also provides some JavaScript functions for using these tiles with the Go0gle Maps API. Here is a simple example!

2. How to use it?
To setup SanMap you need to take a few simple steps:
1) Render map tiles using the TileCutter tool. For step-by-step instructions, see chapter 2.1.
2) Upload them to your webhost (or copy them to your local webserver).
3) Configure SanMap to use the rendered tiles. Check the example code in chapter 2.2 for more details on configuring your web application.
4) Now you can use the Go0gle Maps API to add markers and all sorts of cool stuff.

2.1 Rendering tiles
There are two types of file you can convert to tiles: images and OpenStreetMaps.

If you are looking for map images or OSM files, check chapter 2.3.

2.1.1 Images
- To convert images to tiles, open TilerCutter.exe (located in the TileCutter folder)
- Select the image you want to convert by clicking on the "Browse..." button next to the "input image" field.
- Select the folder you want to save the tiles to by clicking on the "Browse..." button next to the "output folder" field.
- You can select either GDI or Imagemagick to process the image. GDI is a library provided by Microsoft. It works quite fast, but does not work with large images. ImageMagick is fast as well and works with large images.
- Select the zoom levels you want to generate tiles for. Usually you want to keep "min zoom level" on 0 and set "max zoom level" to the highest possible. TileCutter provides a sensible maximum zoom level based on the image you have selected and the target size you selected.
- Click "Start" to start processing the image.

2.1.2 OpenStreetMaps
Rendering tiles based on OpenStreetMaps is a little more tricky. Below, I've split it up in a few parts. Understanding how the rendering system works (an optional read, feel free to skip)
TileCutter's OSM rendering system is made in such a way that it works with OpenSanAndreasMap without hassle.
TileCutter assumes that the origin(the center) of the map is at the latitude/longitude coordinates (0, 0) and that the map is square. To render tiles, the tool zooms in on a specific location with a carefully calculated zoom level. To know where to zoom in at, the tool needs to know the latitude/longitude size of the map. This size is the distance from the left of the map to the right of the map and the distance form the top of the map to the bottom of the map, since the map is assumed to be square.

There is one flaw in the tool, and a solution for it as well. The library used for rendering these tiles (OsmSharp) used a float based zoom level and is made for use with the earth, on which the lat/lon range from -90 to 90 and -180 to 180. Because the map of San Andreas is much, much smaller than the world, you need to zoom in with some precision to cut the tiles neatly. But since the zoom level is float based, there is not enough precision available in the zoom level. To solve this, you can let TileCutter re-size the map before rendering it by a given factor. After re-sizing, there is enough precision available.

The .OSM file merely contains some geographical data. To give it a nice look, you need to provide a .MAPCSS file as well. Some example .MAPCSS files are available here. Setting up the file system
- Locate your .OSM file and create a new file with the same name, but with the extension ".osm.mapcss".
- For example, if you have the file "C:/mapping/sanandreas.osm", you need to create the file "C:/mapping/sanandreas.osm.mapcss".
- In this file, you can write the map style sheet. You can copy the contains of one of these files if you are lazy. Modifying your .MAPCSS file
MapCSS is a CSS-like stylesheet. The documentation of MapCSS is available here. The zoom level you use in the .mapcss is not the same as the zoom level you provide in the TileCutter tool! Assuming you are using 100 as the value for "preprocessor resize factor", You need to add 7 to the zoom level to get the zoom level to use in your .mapcss file. e.g. If you want to write mapcss for zoom level 2, use zoom 9 (2 + 7)
way|z-9 {
    /* ... */
} Rendering
- To convert *.OSM to tiles, open TilerCutter.exe (located in the TileCutter folder)
- Select the file you want to convert by clicking on the "Browse..." button next to the "input image" field.
- Select the folder you want to save the tiles to by clicking on the "Browse..." button next to the "output folder" field.
- As "processor" select Open Street Maps.
- Select the zoom levels you want to generate tiles for. Usually you want to keep "min zoom level" on 0 and set "max zoom level" to 5, 6 or 7.
- Click "Start" to start processing the file.

2.2 Using the JS library
SanMap.js provides three functions:
 * Creates an instance of go0gle.maps.Map with the provided map types.
 * @method createMap
 * @param {Object} canvas The element to draw the map on.
 * @param {Number} mapTypes The map types available in the map control.
 * @param {Number} zoom The initial zoom level.
 * @param {Object} center The intial center point to focus on.
 * @param {Boolean} repeating Whether the map should repeat horizontally.
 * @param {String} defaultMap The default map type.
 * @return {Object} The newly created Map.
SanMap.createMap(canvas, mapTypes, zoom, center, repeating, defaultMap);// zoom, center, repeating and defaultMap are optional

 * Converts GTA:SA coordinates to an instance of go0gle.maps.LatLng.
 * @method getLatLngFromPos
 * @param {Number} x The GTA:SA x-coordinate.
 * @param {Number} y The GTA:SA y-coordinate.
 * @return {Object} The newly created LatLng.
SanMap.getLatLngFromPos(x, y);

 * Converts an instance of go0gle.maps.LatLng to GTA:SA coordinates.
 * @method getPosFromLatLng
 * @param {Object} latLng The LatLng to convert..
 * @return {Object} An Object containing the GTA:SA coordinates.

 * Set the properties of the map coordinate system.
 * @method setMapSize
 * @param {Number} width The width of the map.
 * @param {Number} y The GTA:SA y-coordinate.
SanMap.setMapSize = function (width, height, offsetx, offsety);
Below is some example code:
The full example is bundled with the binaries in web/index.html
- Load the javascript (<script src="js/SanMap.min.js"></script>)
- Create one or more map types:
var mapType = new SanMapType(0/*minZoom*/, 1/*maxZoom*/, function (zoom, x, y) {
    return x == -1 && y == -1 
    ? "tiles/map.outer.png" /* A tile displayed everywhere outside the boundaries of the world */
    : "tiles/map." + zoom + "." + x + "." + y + ".png";/* Where the tiles are located */
- Create the go0gle maps instance using SanMap.createMap:
var map = SanMap.createMap(document.getElementById('map-canvas'), {'Map': mapType});
- Done! Go to the Go0gle Maps API documentation for information about adding markers and various other neat things.

2.3 Map files
Here are a couple of map files to use with SanMap.
[image] GTA: San Andreas map (
[image] aerial imagery of San Andreas (
[osm] OpenSanAndreasMap (cl4ptr4p)

3 Download
Download - Show Example - View on GitHub

What is going on? My markers also appear on the left and right of the map!
Because planet earth is a sphere, and Go0gle Maps was initially made for use with said planet, the map repeats on the horizontal axis. Because this looks quite awkward with a small map, such as San Andreas, you can disable this behavior by setting the "repeating" argument in "SanMap.createMap" to false (which it is be default). However, this only replaces the repeating map tiles by "outside-of-boundaries" tiles. All the Go0gle Maps logic assumes the map is repeating over and over and over again. This means that if you place a marker in the middle of the map, it will also appear far to the left and far to the right outside the boundaries of the map. There is a solution for this I want to implement at some point but it is very complicated. It would mean the the TileCutter needs to generate extra ocean around the map, so that the map is much bigger and repeats less often. This would also mean that the coordinates converter needs to be updated.

I have made my own custom map, can I still use SanMap?
Yes, but you'll need to create your own satellite image or create your own OSM file. SanMap will not be able to help you do this. (I hope I can write a tool to help you do this at some point, if ever I have time) Make sure your satellite image is square! After you have done this, you can simply use the TileCutter tool as normal on your image/OSM file. In your javascript, you need to use the following function
SanMap.setMapSize(width, height, offsetx, offsety);
When you have created your own OSM file/map image, you need to find the coordinates of the corners of the map (top left + bottom right will do) to calculate the width, height, offsetx and offsety. By default the width and height are 6000.0 and offsetx and offsety are 0.

Say you have added an island on the right of the map and the coordinates of the top left are (XY: -3000.0, 3000.0) and of the bottom right are (XY: 4000.0, -3000.0) then the width of the map is (difference between -3000.0 and 4000.0) 7000.0 and the height is (difference between -3000.0 and 3000.0) 6000.0.

To calculate offsetx and offsety, you need to find the offset between the center of the map and the center of the original map. In the above map this would be (XY: 1000.0, 0.0), so offsetx would be 1000.0 and offsety would be 0.0.

What is JavaScript?
Seriously, if you do not know what JavaScript is, or how to use it, this tool is not for you. If you have questions about JavaScript or the Go0gle Maps API, please search on Go0gle.

How can I draw X or how can I display Y?
SanMap is not a tool for drawing this! SanMap is purely for initializing the map! After initializing, you can use the full Go0gle Maps API. Click here to check out the documentation!

5 Changelog
Version 1.5.1
- Added support for custom maps using SanMap.setMapSize in javascript.

Version 1.5
- Removed command line based imagemagick processors.
- Added wrapper based imagemagick processor.

Version 1.4
-The "max zoom" option is limited based in the input image selected.
-Offsets between tiles have been fixed.
-TileCutter can not render and cut *.OSM files based on OsmSharp. The layout/design of the rendering is based on mapcss.
-Updated SanMap.js with more documentation and better options.
-Fixed crashes when using ImageMagick on 32 bit systems.

Version 1.3
-Rewrote Tilecutter.exe (previously named SanMap.exe). It now has a GUI so you don't have to bother with command line parameters.

Version 1.2
-Improved SanMap.exe; the use of ImageMagick is much quicker now!
-Minor bug fixes.

Version 1.1
-Added a method to convert go0gle.maps.LatLng objects to SA coordinates. (SanMap.getPosFromLatLng)
-Allowed {x,y} objects in SanMap.getLatLngFromPos.
-Added tile {-1,-1} for tiles outside the boundaries. (see index.html for an example)
-Added comments to index.html.
-Improved SanMap.exe to allow the use of ImageMagick to allow bigger images.
-I shall update the example website soon.

Version 1.0
-Initial release.

Thanks to
- cl4ptr4p for creating OpenSanAndreasMap, it's really awesome!
- Ian Albert for his work on the satellite map.
- xivk for he's work on OsmSharp.

EDIT: Because this forum is full of shit I had to replace all links to ****** developers documentation with links, and occurences of the work ****** with Go0gle. What the fuck is up with this forums these days?
Tim Potze

GAMEDEV | Part-time developer working on Parkitect. | Steampage
LSRES | A SA:MP server from the past, and hopefully, back in the future.
SampSharp | Plugin for writing SA:MP gamemodes in C#. | Topic Website Github
SanMap | San Andreas in Go0gle Maps! | Topic Github Sample

Last edited by ikkentim; 07/09/2017 at 02:29 PM. Reason: They blocked this word? RLY???
ikkentim is offline   Reply With Quote

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
[Off] ****** Maps Troll Panico622 Português/Portuguese 15 26/08/2012 02:37 AM
****** Maps payton326 Everything and Nothing 1 17/09/2011 01:11 PM
****** Maps > San Andreas Maps? BMUK Help Archive 4 10/02/2010 04:26 PM
[HTML][GMA] San Andreas map (****** maps api) kacperoo Help Archive 2 11/04/2009 09:34 PM

All times are GMT. The time now is 06:25 AM.

Powered by vBulletin® Version 3.8.6
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.