Custom map image like google maps

kipslacher · March 14, 2014

I have a map in different formats one is a 4000 x 4000 pixel image of my fantasy world map, the other is the same map but broken up into tiles.

I am trying to figure out how I can get this into kml, cvs xml or whatever so I can make an interactive map from it.

I am wanting to put markers on towns, castles, portals and dungeons and then when them markers are clicked a image or swf file shows up showing a map of the town, castle, portal and dungeon.

I am then wanting to place routes from portals to where they lead and also put markers where bosses etc may be located on the map.

here is an image of the map

http://www3.picturep...img/6990271.jpg

and here is an example of what I am wanting to do, If you click the tullan and delfrase red markers you will see.

http://api.imapbuilder.net/1.0/map/31008/?s=b94931b49ca712edc9c8a8cc58b32337

I found this script but I am having trouble creating a free website and loading the stuff to use it

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Archlord World Map</title>
		<meta charset="utf-8" />
		<style>
			html, body {
				height: 100%;
				margin: 0;
				padding: 0;
			}
			#map {
				width:100%;
				height:100%;
				color: #CCC;
				background: #EFEFEF;
			}
			span.loading {
				display: block;
				text-align: center;
				font: 300 italic 72px/400px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
			}
		</style>
	</head>
	<body>
		<div id="map"><span class="loading">loading tiles...</span></div>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script>


			/*
			 * = PS_Bramus.GoogleMapsTileCutter Config
			 * ----------------
			 */

				var repeatOnXAxis = false; // Do we need to repeat the image on the X-axis? Most likely you'll want to set this to false



			/*
			 * Helper function which normalizes the coords so that tiles can repeat across the X-axis (horizontally) like the standard Google map tiles.
			 * ----------------
			 */

				function getNormalizedCoord(coord, zoom) {
					if (!repeatOnXAxis) return coord;

					var y = coord.y;
					var x = coord.x;

					// tile range in one direction range is dependent on zoom level
					// 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
					var tileRange = 1 << zoom;

					// don't repeat across Y-axis (vertically)
					if (y < 0 || y >= tileRange) {
						return null;
					}

					// repeat across X-axis
					if (x < 0 || x >= tileRange) {
						x = (x % tileRange + tileRange) % tileRange;
					}

					return {
						x: x,
						y: y
					};

				}


			/*
			 * Main Core
			 * ----------------
			 */

				window.onload = function() {

					// Define our custom map type
					var customMapType = new google.maps.ImageMapType({
						getTileUrl: function(coord, zoom) {
							var normalizedCoord = getNormalizedCoord(coord, zoom);
							if(normalizedCoord && (normalizedCoord.x < Math.pow(2, zoom)) && (normalizedCoord.x > -1) && (normalizedCoord.y < Math.pow(2, zoom)) && (normalizedCoord.y > -1)) {
								return zoom + '_' + normalizedCoord.x + '_' + normalizedCoord.y + '.jpg';
							} else {
								return 'empty.jpg';
							}
						},
						tileSize: new google.maps.Size(256, 256),
						maxZoom: 5,
						name: 'PS_Bramus.GoogleMapsTileCutter'
					});

					// Basic options for our map
					var myOptions = {
						center: new google.maps.LatLng(0, 0),
						zoom: 2,
						minZoom: 0,
						streetViewControl: false,
						mapTypeControl: false,
						mapTypeControlOptions: {
							mapTypeIds: ["custom"]
						}
					};

					// Init the map and hook our custom map type to it
					var map = new google.maps.Map(document.getElementById('map'), myOptions);
					map.mapTypes.set('custom', customMapType);
					map.setMapTypeId('custom');

				}
		</script>

	</body>
</html>

I am not very knowledgeable in this area but know enough html to be able to code the image inserts etc, If someone can help me to get the map up and running on a host site with 1 marker and route I could then do the rest of the 500+ markers routes I need

any and all help would be appreciated

Edited March 14, 2014 by kipslacher

Sign In

Custom map image like google maps

Recommended Posts

kipslacher

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information