PDA

View Full Version : photoshop google tile cutter script not working



kips
01-28-2014, 05:29 PM
Hello,


I found a script online that will cut my image into tiles in photoshop to be used in the google maps style.

everything worked great there the tiles were put into a folder and an index.html was made everything works great in my browser but when I put the html code into my web page all that happens is a blank spot saying loading tiles.

here is my INDEX.HTML


<!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>


HERE (https://www.dropbox.com/sh/3mi2aqmrizqvfcx/hrsN3cE6-j) is my files

hender
01-30-2014, 03:22 AM
I've got the same issue
can anyone help us?

jscheuer1
01-30-2014, 08:54 AM
I'd try an iframe.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

kips
01-30-2014, 01:19 PM
I'd try an iframe.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.


That is the code,I don't even know how to get it working on my site, do I have to upload the folder with all the tiles and the index.html somewhere ? where in the code do I link to my tiles ?

all I have done at this point is process the script in photoshop it then spat out all the tiles and a index.html which is posted in my first post.

jscheuer1
01-30-2014, 02:45 PM
You do need to upload all of the files required in order to get it to work, yes.

You said it worked as just index.html:


everything worked great there the tiles were put into a folder and an index.html was made everything works great in my browser

As long as that works, if you were to upload all of those files to their own folder(s) just like it is on the local machine, it should be fine. Then putting that index page inside of an iframe on your other page where you want it to appear should also work.

kips
02-06-2014, 05:59 PM
Ill try it out, Been a long time since I built a webpage from a cpanel host forget what to do, have an account at atspace.com but just trying to figure out how and where I put my html and scripts in etc. Lacking the experience in setting up websites through one of them hosts