Need help getting my custom tiles to load
72 views
Skip to first unread message
Brad C
Jul 1, 2010, 11:14:05 PM7/1/10
to Google Maps JavaScript API v3
Well this has been a nightmare...
I've been wanting to do this for about a year now but it's been a
daunting task to say the least. Recently I've been re-reading guides
about Custom Maps. What I'm wanting to do is to host a gaming map
I've made in Photoshop for a fansite I run, darkmatters.org. For the
past two years I've been using Maplib but I'd like to have more
control.
I've cut my map using the (http://mapki.com/wiki/
Automatic_Tile_Cutter) and uploaded it with a file naming such as;
"http://www.darkmatters.org/forums/bradstuff/Map/2_304_304.jpg". All
the images are in the same folder and go up to zoom 7_. So I guess
that's 6 zooms total? Though I'm not sure why I chose zoom 2-7 I'm
happy to work with that if it can work. I'm guessing that it doesn't
really matter.
For the moment this is what I have:
http://www.darkmatters.org/forums/bradstuff/Map/TestMap.html
And this is one of my maps on Maplib. Similar map graphically.
Identical in total width and height:
http://www.maplib.net/fullmap.php?id=4184&lat=-53.2&lng=35.3&z=9
Actual size of map: 9945x9945 pixels
Any suggestions would be so very much appreciated. I've been trying
for some time and have read tons from google, mapki and elsewhere to
no avail.
Help!
I've been wanting to do this for about a year now but it's been a
daunting task to say the least. Recently I've been re-reading guides
about Custom Maps. What I'm wanting to do is to host a gaming map
I've made in Photoshop for a fansite I run, darkmatters.org. For the
past two years I've been using Maplib but I'd like to have more
control.
I've cut my map using the (http://mapki.com/wiki/
Automatic_Tile_Cutter) and uploaded it with a file naming such as;
"http://www.darkmatters.org/forums/bradstuff/Map/2_304_304.jpg". All
the images are in the same folder and go up to zoom 7_. So I guess
that's 6 zooms total? Though I'm not sure why I chose zoom 2-7 I'm
happy to work with that if it can work. I'm guessing that it doesn't
really matter.
For the moment this is what I have:
http://www.darkmatters.org/forums/bradstuff/Map/TestMap.html
And this is one of my maps on Maplib. Similar map graphically.
Identical in total width and height:
http://www.maplib.net/fullmap.php?id=4184&lat=-53.2&lng=35.3&z=9
Actual size of map: 9945x9945 pixels
Any suggestions would be so very much appreciated. I've been trying
for some time and have read tons from google, mapki and elsewhere to
no avail.
Help!
Chad Killingsworth
Jul 2, 2010, 9:28:46 AM7/2/10
to Google Maps JavaScript API v3
Well step one is your tile urls are returning 404 errors. Try:
http://www.darkmatters.org/forums/bradstuff/Map/2_2_1.jpg
That's why your map is displaying empty tiles.
Chad Killingsworth
http://www.darkmatters.org/forums/bradstuff/Map/2_2_1.jpg
That's why your map is displaying empty tiles.
Chad Killingsworth
Brad C
Jul 4, 2010, 9:36:06 PM7/4/10
to Google Maps JavaScript API v3
Aha!
That was very helpful Chad. Thanx! It turned out that my tiles were
all named improperly. They were all there but their naming started in
the hundreds. "2_304_304.jpg for example. As soon as I re-cut them
with the proper naming/numbering it all loaded perfectly. I'm most
pleased!
I'm having trouble getting an overlay to work with it though. At the
moment I have a custom base maptype set up but now I'd like to add
another custom map of mine onto the custom base map. As an overlay I
guess is what is needed...
Here's what I have for now:
http://www.darkmatters.org/forums/bradstuff/Map/TestMap.html
Here's the map I'd like to Overlay:
http://www.darkmatters.org/forums/bradstuff/Map/Sacred%202%20Dungeon%20Map.html
And here's my feeble attempt at doing it as well as the code below the
link, haha:
http://www.darkmatters.org/forums/bradstuff/Map/Sacred%202%20Overlay%20Map.html
I'll be working on this non stop until I get it but any tips would be
very much appreciated. :)
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Sacred 2 Ice & Blood Interactive Map of Ancaria</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(75, -115);
var myOptions = {
zoom: 2,
center: myLatlng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
mapTypeIds: ['S2map, dungeons']
}
}
var map = new google.maps.Map(document.getElementById("map"),
myOptions, {backgroundColor: '#f0e0be'});
var S2mapOptions = {
getTileUrl: function(coord, zoom) {
return "http://www.darkmatters.org/forums/bradstuff/Map/
MainMap/"+zoom+"_"+coord.x+"_"+coord.y+".jpg";
},
tileSize: new google.maps.Size(256, 256),
isPng: false
};
var S2map = new google.maps.ImageMapType(S2mapOptions);
S2map.name = "Main Map";
S2map.maxZoom = 7;
S2map.minZoom = 2;
map.mapTypes.set('S2map', S2map);
map.setMapTypeId('S2map');
var dungeonOptions = {
getTileUrl: function(coord, zoom) {
return "http://www.darkmatters.org/forums/bradstuff/Map/
Dungeons/"+zoom+"_"+coord.x+"_"+coord.y+".jpg";
},
tileSize: new google.maps.Size(256, 256),
isPng: false
};
var dungeons = new google.maps.ImageMapType(dungeonOptions);
dungeons.name = "dungeons";
dungeons.mapTypes.set('dungeon', dungeons);
dungeons.setMapTypeId('dungeon');
dungeons.overlayMapTypes.push(dungeons);
}
</script>
</head>
<body style="background-color: #f0e0be;margin:0px; padding:0px;"
onload="initialize()">
<div id="map" style="background-color: #f0e0be; width: 100%; height:
100%; position: relative; overflow: hidden; z-index: 0;"></div>
</body>
</html>
On Jul 2, 9:28 am, Chad Killingsworth
That was very helpful Chad. Thanx! It turned out that my tiles were
all named improperly. They were all there but their naming started in
the hundreds. "2_304_304.jpg for example. As soon as I re-cut them
with the proper naming/numbering it all loaded perfectly. I'm most
pleased!
I'm having trouble getting an overlay to work with it though. At the
moment I have a custom base maptype set up but now I'd like to add
another custom map of mine onto the custom base map. As an overlay I
guess is what is needed...
Here's what I have for now:
http://www.darkmatters.org/forums/bradstuff/Map/TestMap.html
Here's the map I'd like to Overlay:
http://www.darkmatters.org/forums/bradstuff/Map/Sacred%202%20Dungeon%20Map.html
And here's my feeble attempt at doing it as well as the code below the
link, haha:
http://www.darkmatters.org/forums/bradstuff/Map/Sacred%202%20Overlay%20Map.html
I'll be working on this non stop until I get it but any tips would be
very much appreciated. :)
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Sacred 2 Ice & Blood Interactive Map of Ancaria</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(75, -115);
var myOptions = {
zoom: 2,
center: myLatlng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
mapTypeIds: ['S2map, dungeons']
}
}
var map = new google.maps.Map(document.getElementById("map"),
myOptions, {backgroundColor: '#f0e0be'});
var S2mapOptions = {
getTileUrl: function(coord, zoom) {
return "http://www.darkmatters.org/forums/bradstuff/Map/
MainMap/"+zoom+"_"+coord.x+"_"+coord.y+".jpg";
},
tileSize: new google.maps.Size(256, 256),
isPng: false
};
var S2map = new google.maps.ImageMapType(S2mapOptions);
S2map.name = "Main Map";
S2map.maxZoom = 7;
S2map.minZoom = 2;
map.mapTypes.set('S2map', S2map);
map.setMapTypeId('S2map');
var dungeonOptions = {
getTileUrl: function(coord, zoom) {
return "http://www.darkmatters.org/forums/bradstuff/Map/
Dungeons/"+zoom+"_"+coord.x+"_"+coord.y+".jpg";
},
tileSize: new google.maps.Size(256, 256),
isPng: false
};
var dungeons = new google.maps.ImageMapType(dungeonOptions);
dungeons.name = "dungeons";
dungeons.mapTypes.set('dungeon', dungeons);
dungeons.setMapTypeId('dungeon');
dungeons.overlayMapTypes.push(dungeons);
}
</script>
</head>
<body style="background-color: #f0e0be;margin:0px; padding:0px;"
onload="initialize()">
<div id="map" style="background-color: #f0e0be; width: 100%; height:
100%; position: relative; overflow: hidden; z-index: 0;"></div>
</body>
</html>
On Jul 2, 9:28 am, Chad Killingsworth
<chadkillingswo...@missouristate.edu> wrote:
> Well step one is your tile urls are returning 404 errors. Try:http://www.darkmatters.org/forums/bradstuff/Map/2_2_1.jpg
>
> That's why your map is displaying emptytiles.
>
> Chad Killingsworth
>
> On Jul 1, 10:14 pm, Brad C <scho...@gmail.com> wrote:
>
> > Well this has been a nightmare...
>
> > I've been wanting to do this for about a year now but it's been a
> > daunting task to say the least. Recently I've been re-reading guides
> > aboutCustomMaps. What I'm wanting to do is to host a gaming map
> Well step one is your tile urls are returning 404 errors. Try:http://www.darkmatters.org/forums/bradstuff/Map/2_2_1.jpg
>
> That's why your map is displaying emptytiles.
>
> Chad Killingsworth
>
> On Jul 1, 10:14 pm, Brad C <scho...@gmail.com> wrote:
>
> > Well this has been a nightmare...
>
> > I've been wanting to do this for about a year now but it's been a
> > daunting task to say the least. Recently I've been re-reading guides
> > I've made in Photoshop for a fansite I run, darkmatters.org. For the
> > past two years I've been using Maplib but I'd like to have more
> > control.
> > I've cutmymap using the (http://mapki.com/wiki/
> > past two years I've been using Maplib but I'd like to have more
> > control.
> > Automatic_Tile_Cutter) and uploaded it with a file naming such as;
> > "http://www.darkmatters.org/forums/bradstuff/Map/2_304_304.jpg". All
> > the images are in the same folder and go up to zoom 7_. So I guess
> > that's 6 zooms total? Though I'm not sure why I chose zoom 2-7 I'm
> > happy to work with that if it can work. I'm guessing that it doesn't
> > really matter.
>
> > For the moment this is what I have:http://www.darkmatters.org/forums/bradstuff/Map/TestMap.html
>
> > And this is one ofmymaps on Maplib. Similar map graphically.
> > "http://www.darkmatters.org/forums/bradstuff/Map/2_304_304.jpg". All
> > the images are in the same folder and go up to zoom 7_. So I guess
> > that's 6 zooms total? Though I'm not sure why I chose zoom 2-7 I'm
> > happy to work with that if it can work. I'm guessing that it doesn't
> > really matter.
>
> > For the moment this is what I have:http://www.darkmatters.org/forums/bradstuff/Map/TestMap.html
>
William
Jul 4, 2010, 10:13:09 PM7/4/10
to Google Maps JavaScript API v3
there's no need to set the base map type with an overlay, and you add
it to the map:
//dungeons.mapTypes.set('dungeon', dungeons);
//dungeons.setMapTypeId('dungeon');
map.overlayMapTypes.push(dungeons);
(also include opacity: 0.5 in the options)
...
it to the map:
//dungeons.mapTypes.set('dungeon', dungeons);
//dungeons.setMapTypeId('dungeon');
map.overlayMapTypes.push(dungeons);
(also include opacity: 0.5 in the options)
...
Brad C
Jul 4, 2010, 10:38:36 PM7/4/10
to Google Maps JavaScript API v3
Oh thanx fir the reply William. Which options do I put that opacity
in? I have myOptions, S2mapOptions and dungeonOptions.
Cheers!
P.s.
Changed file names a bit...
Here's what I have for now:
http://www.darkmatters.org/forums/bradstuff/Map/TestMap.html
Here's the map I'd like to Overlay:
http://www.darkmatters.org/forums/bradstuff/Map/Sacred%202%20Dungeon%20Map.html
And here's my feeble attempt at doing it as well as the code below the
link, haha:
http://www.darkmatters.org/forums/bradstuff/Map/Sacred%202%20Overlay%20Map.html
in? I have myOptions, S2mapOptions and dungeonOptions.
Cheers!
P.s.
Changed file names a bit...
Here's what I have for now:
http://www.darkmatters.org/forums/bradstuff/Map/TestMap.html
Here's the map I'd like to Overlay:
http://www.darkmatters.org/forums/bradstuff/Map/Sacred%202%20Dungeon%20Map.html
And here's my feeble attempt at doing it as well as the code below the
link, haha:
http://www.darkmatters.org/forums/bradstuff/Map/Sacred%202%20Overlay%20Map.html
Brad C
Jul 4, 2010, 10:45:36 PM7/4/10
to Google Maps JavaScript API v3
Ooops, ok. I just realized I asked the wrong question after following
your advice William. Which worked perfectly for your intended advice
I might add, haha.
What I'm really wanting is to be able to provide the main map as the
default base map and the Dungeon map as an optional map that would be
loaded only if a user clicks a button. Kinda like being able to
switch between Google's Roadmap and satelite maps They each have
their own buttons which I think is so perfect for what I'm hoping to
do.
I hope I was able to make some sense there!
I have been dabbling with the mapTypeIds variable but to no avail.
The few times I was able to make a change all I was able to do was to
make a map button that said something like "Not Defined", hehe.
Doh...
On Jul 4, 10:38 pm, Brad C <scho...@gmail.com> wrote:
> Oh thanx fir the reply William. Which options do I put that opacity
> in? I have myOptions, S2mapOptions and dungeonOptions.
>
> Cheers!
>
> P.s.
> Changed file names a bit...
>
> Here's what I have for now:http://www.darkmatters.org/forums/bradstuff/Map/TestMap.html
>
> Here's the map I'd like to Overlay:http://www.darkmatters.org/forums/bradstuff/Map/Sacred%202%20Dungeon%...
your advice William. Which worked perfectly for your intended advice
I might add, haha.
What I'm really wanting is to be able to provide the main map as the
default base map and the Dungeon map as an optional map that would be
loaded only if a user clicks a button. Kinda like being able to
switch between Google's Roadmap and satelite maps They each have
their own buttons which I think is so perfect for what I'm hoping to
do.
I hope I was able to make some sense there!
I have been dabbling with the mapTypeIds variable but to no avail.
The few times I was able to make a change all I was able to do was to
make a map button that said something like "Not Defined", hehe.
Doh...
On Jul 4, 10:38 pm, Brad C <scho...@gmail.com> wrote:
> Oh thanx fir the reply William. Which options do I put that opacity
> in? I have myOptions, S2mapOptions and dungeonOptions.
>
> Cheers!
>
> P.s.
> Changed file names a bit...
>
> Here's what I have for now:http://www.darkmatters.org/forums/bradstuff/Map/TestMap.html
>
>
> And here's my feeble attempt at doing it as well as the code below the
> link, haha:http://www.darkmatters.org/forums/bradstuff/Map/Sacred%202%20Overlay%...
> And here's my feeble attempt at doing it as well as the code below the
William
Jul 4, 2010, 11:05:55 PM7/4/10
to Google Maps JavaScript API v3
oh I see what you are saying now, then both layers are base map types.
// when constructing the map, remove the mapType control
// (to be added later when the map types are defined)
var myOptions = {
zoom: 2,
center: myLatlng,
mapTypeControl: false
}
// define the dungeons base map type
var dungeons = new google.maps.ImageMapType(dungeonOptions);
dungeons.name = "Dungeons";
dungeons.maxZoom = 7;
dungeons.minZoom = 2;
map.mapTypes.set('dungeons', dungeons);
// add the mapType control with the new layers:
map.setOptions({
}
});
....
// when constructing the map, remove the mapType control
// (to be added later when the map types are defined)
var myOptions = {
zoom: 2,
center: myLatlng,
}
// define the dungeons base map type
var dungeons = new google.maps.ImageMapType(dungeonOptions);
dungeons.maxZoom = 7;
dungeons.minZoom = 2;
map.mapTypes.set('dungeons', dungeons);
// add the mapType control with the new layers:
map.setOptions({
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
mapTypeIds: ['S2map', 'dungeons']
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
}
});
....
Brad C
Jul 4, 2010, 11:26:23 PM7/4/10
to Google Maps JavaScript API v3
William my friend. You have just made my day. Thank you!
http://www.darkmatters.org/forums/bradstuff/Map/Sacred%202%20Overlay%20Map.html
This is soooo cool. I've been working on this map with Photoshop for
near a year and it's such a treat to be able to host it myself in this
way. No doubt the fans of this game will enjoy the map. :)
I've been doing a lot of reading on the whole background color thing
the past day or so... Would I be right to assume that changing the
background color around the map is not an option? It seems that no
one is able to do this but it doesn't make sense because the
MapOptions object specification does include a backgroundColor...
http://www.darkmatters.org/forums/bradstuff/Map/Sacred%202%20Overlay%20Map.html
This is soooo cool. I've been working on this map with Photoshop for
near a year and it's such a treat to be able to host it myself in this
way. No doubt the fans of this game will enjoy the map. :)
I've been doing a lot of reading on the whole background color thing
the past day or so... Would I be right to assume that changing the
background color around the map is not an option? It seems that no
one is able to do this but it doesn't make sense because the
MapOptions object specification does include a backgroundColor...
William
Jul 5, 2010, 1:06:31 AM7/5/10
to Google Maps JavaScript API v3
On Jul 5, 1:26 pm, Brad C <scho...@gmail.com> wrote:
> the MapOptions object specification does include
> a backgroundColor...
>
yeah just put it in the mapOptions like this:
> the MapOptions object specification does include
> a backgroundColor...
>
var myLatlng = new google.maps.LatLng(75, -115);
var myOptions = {
center: myLatlng,
backgroundColor: '#f0e0be'
}
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
var map = new google.maps.Map(document.getElementById("map"),
...
Brad C
Jul 5, 2010, 10:41:28 PM7/5/10
to Google Maps JavaScript API v3
That did the trick! :D
And here's the finished product which I've placed on my wiki:
http://www.sacredwiki.org/index.php5/Sacred_2:Map_of_Ancaria
I can't thank you enough William.
Cheers!
And here's the finished product which I've placed on my wiki:
http://www.sacredwiki.org/index.php5/Sacred_2:Map_of_Ancaria
I can't thank you enough William.
Cheers!
Reply all
Reply to author
Forward
0 new messages