02.04.2014, 16:52
(
Последний раз редактировалось ikkentim; 29.06.2018 в 10:17.
Причина: They blocked this word? RLY???
)
1. What is SanMap?
SanMap is a basic tool for combining the power of the G𝗈𝗈gle 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 G𝗈𝗈gle 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 G𝗈𝗈gle 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.
2.1.2.1 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.
2.1.2.2 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.
2.1.2.3 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)
2.1.2.4 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:
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:
- Create the g𝗈𝗈gle maps instance using SanMap.createMap:
- Done! Go to the G𝗈𝗈gle 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 (Ian-Albert.com)
[image] aerial imagery of San Andreas (Ian-Albert.com)
[osm] OpenSanAndreasMap (cl4ptr4p)
3 Download
Download - Show Example - View on GitHub
4 FAQ
What is going on? My markers also appear on the left and right of the map!
Because planet earth is a sphere, and G𝗈𝗈gle 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 G𝗈𝗈gle 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
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 G𝗈𝗈gle Maps API, please search on G𝗈𝗈gle.
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 G𝗈𝗈gle 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 g𝗈𝗈gle.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: Excuse all the ******* links but because of BS reasons I can't say ******/gooogle
SanMap is a basic tool for combining the power of the G𝗈𝗈gle 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 G𝗈𝗈gle 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 G𝗈𝗈gle 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.
2.1.2.1 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.
2.1.2.2 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.
2.1.2.3 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 {
/* ... */
}
- 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 g𝗈𝗈gle.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 g𝗈𝗈gle.maps.LatLng to GTA:SA coordinates.
*
* @method getPosFromLatLng
* @param {Object} latLng The LatLng to convert..
* @return {Object} An Object containing the GTA:SA coordinates.
*/
SanMap.getPosFromLatLng(latLng);
/**
* 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);
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 */
});
Код:
var map = SanMap.createMap(document.getElementById('map-canvas'), {'Map': mapType});
2.3 Map files
Here are a couple of map files to use with SanMap.
[image] GTA: San Andreas map (Ian-Albert.com)
[image] aerial imagery of San Andreas (Ian-Albert.com)
[osm] OpenSanAndreasMap (cl4ptr4p)
3 Download
Download - Show Example - View on GitHub
4 FAQ
What is going on? My markers also appear on the left and right of the map!
Because planet earth is a sphere, and G𝗈𝗈gle 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 G𝗈𝗈gle 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);
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 G𝗈𝗈gle Maps API, please search on G𝗈𝗈gle.
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 G𝗈𝗈gle 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 g𝗈𝗈gle.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: Excuse all the ******* links but because of BS reasons I can't say ******/gooogle
