kipslacher Posted March 14, 2014 Share Posted March 14, 2014 (edited) 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.jpgand 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 needany and all help would be appreciated Edited March 14, 2014 by kipslacher Quote Link to comment https://forums.phpfreaks.com/topic/286964-custom-map-image-like-google-maps/ Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.