|
|
(158 intermediate revisions not shown) |
Line 1: |
Line 1: |
| <html> | | <html> |
- | <title>Fragoria Map</title>
| |
- | <link rel="stylesheet" href="/maps/documentation/javascript/examples/default.css" />
| |
| <link rel="stylesheet" href="/maptiles/noimageshadow.css"> | | <link rel="stylesheet" href="/maptiles/noimageshadow.css"> |
- | <script src="/maptiles/js?v=3.exp&sensor=false"></script>
| |
| | | |
- | <script> | + | <script type="text/javascript" src="/maptiles/js?v=3.exp&sensor=false"></script> |
- | var moonTypeOptions = {
| + | <script type="text/javascript" src="/mapdata/markerwithlabel.js"></script> |
- | getTileUrl: function(coord, zoom) {
| + | <script type="text/javascript" src="/wiki/skins/common/fmap.js"></script> |
- | var normalizedCoord = getNormalizedCoord(coord, zoom);
| + | |
- | if (!normalizedCoord) {
| + | |
- | return null;
| + | |
- | }
| + | |
- | var bound = Math.pow(2, zoom);
| + | |
- | return '/maptiles/' + zoom + '/' + normalizedCoord.y + '_' + normalizedCoord.x + '.jpg';
| + | |
- | },
| + | |
- | tileSize: new google.maps.Size(256, 256),
| + | |
- | maxZoom: 3,
| + | |
- | minZoom: 1,
| + | |
- | radius: 1738000,
| + | |
- | name: 'Fragoria'
| + | |
- | };
| + | |
| | | |
- | var moonMapType = new google.maps.ImageMapType(moonTypeOptions);
| + | <style> |
- | | + | .maplabels { |
- | function initialize() {
| + | color: #000; |
- | var Fragotown = new google.maps.LatLng(-89.623848,33.001326);
| + | // font-family: 'Comic Sans MS', cursive, sans-serif; |
- | var mapOptions = {
| + | line-height: 1em; |
- | center: Fragotown,
| + | font-size: 13px; |
- | zoom: 4,
| + | text-shadow: 0px 0px 2px white; |
- | streetViewControl: false,
| + | font-weight: bold; |
- | mapTypeControlOptions: {
| + | border: 0px solid black; |
- | mapTypeIds: ['moon']
| + | background: transparent url('/wiki/images/e/eb/Backgroundgradient.png'); |
- | }
| + | background-size: 100% 100%; |
- | };
| + | background: radial-gradient(white, rgba(255, 255, 255, .6), rgba(255, 255, 255, .0), rgba(255, 255, 255, 0)); |
- | var map = new google.maps.Map(document.getElementById('map_canvas'),
| + | } |
- | mapOptions);
| + | </style> |
- | map.mapTypes.set('moon', moonMapType);
| + | |
- | map.setMapTypeId('moon');
| + | |
- | | + | |
- | // Bounds
| + | |
- | var strictBounds = new google.maps.LatLngBounds(
| + | |
- | new google.maps.LatLng(-89.957,-65),
| + | |
- | new google.maps.LatLng(65,65)
| + | |
- | );
| + | |
- | // Listen for the CENTER_CHANGED event
| + | |
- | google.maps.event.addListener(map, 'center_changed', function() {
| + | |
- | if (strictBounds.contains(map.getCenter())) return;
| + | |
- | // We're out of bounds - Move the map back within the bounds
| + | |
- | var c = map.getCenter(),
| + | |
- | x = c.lng(),
| + | |
- | y = c.lat(),
| + | |
- | maxX = strictBounds.getNorthEast().lng(),
| + | |
- | maxY = strictBounds.getNorthEast().lat(),
| + | |
- | minX = strictBounds.getSouthWest().lng(),
| + | |
- | minY = strictBounds.getSouthWest().lat();
| + | |
- | if (x < minX) x = minX;
| + | |
- | if (x > maxX) x = maxX;
| + | |
- | if (y < minY) y = minY;
| + | |
- | if (y > maxY) y = maxY;
| + | |
- | map.setCenter(new google.maps.LatLng(y, x));
| + | |
- | });
| + | |
- | // Limit the zoom level
| + | |
- | google.maps.event.addListener(map, 'zoom_changed', function() {
| + | |
- | if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
| + | |
- | });
| + | |
- | | + | |
- | setMarkers (map, greendungeons);
| + | |
- | infowindow = new google.maps.InfoWindow({
| + | |
- | content: "Loading..."
| + | |
- | });
| + | |
- | | + | |
- | | + | |
- | var FragotownMarker = new google.maps.Marker({
| + | |
- | position: new google.maps.LatLng(-89.623848,33.001326),
| + | |
- | map: map,
| + | |
- | draggable:true,
| + | |
- | optimized: false,
| + | |
- | title:"Fragotown"
| + | |
- | });
| + | |
- |
| + | |
- | //Report Coordinates
| + | |
- | google.maps.event.addListener(FragotownMarker, 'dragend', function(evt){
| + | |
- | document.getElementById('current').innerHTML = '(' + evt.latLng.lat().toFixed(6) + ',' + evt.latLng.lng().toFixed(6) + ')</p>';
| + | |
- | });
| + | |
- | google.maps.event.addListener(FragotownMarker, 'dragstart', function(evt){
| + | |
- | document.getElementById('current').innerHTML = '<p>Locating...</p>';
| + | |
- | });
| + | |
- | }
| + | |
- | | + | |
- | // Normalizes the coords that tiles repeat across the x axis (horizontally)
| + | |
- | // like the standard Google map tiles.
| + | |
- | function getNormalizedCoord(coord, zoom) {
| + | |
- | 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 = 2 << zoom;
| + | |
- | // repeat across y-axis (vertically)
| + | |
- | if (y < 0 || y >= tileRange) {
| + | |
- | // y = (y % tileRange + tileRange) % tileRange;
| + | |
- | return null;
| + | |
- | }
| + | |
- | // repeat across x-axis
| + | |
- | if (x < 0 || x >= tileRange) {
| + | |
- | // x = (x % tileRange + tileRange) % tileRange;
| + | |
- | return null;
| + | |
- | }
| + | |
- | return {
| + | |
- | x: x,
| + | |
- | y: y
| + | |
- | };
| + | |
- | }
| + | |
- |
| + | |
- | var greendungeons = [
| + | |
- | ['Dark Konungs Tomb',-89.128166,16.829451,2,'<img src="/wiki/images/b/b1/Tomb_boss.png" />'],
| + | |
- | ['Robbers Vault',-89.089905,47.766951,3,'<img src="/wiki/images/1/10/KZsmJ1.jpg" />'],
| + | |
- | ['Savage Dens',-89.221718,29.309920,4,'<img src="/wiki/images/thumb/3/32/EkNa_Savage-Dens.jpg/596px-EkNa_Savage-Dens.jpg" />'],
| + | |
- | ['Wolfs Lair',-89.931470,45.657576,5,'<img src="/wiki/images/e/e6/Lairboss.png" />'],
| + | |
- | ['Castle Pantry',-89.870076,-49.527971,6,'<img src="/wiki/images/5/56/NdiEH1.jpg" />'],
| + | |
- | ['Poisoned Spring',-89.848769,-88.551408,7,'<img src="/wiki/images/7/74/Springboss.png" />'],
| + | |
- | ['Robbers Camp',-88.900931,-51.901018,8,'<img src="/wiki/images/1/1e/Robberboss.png" />'],
| + | |
- | ['Underwater Temple Grandmothers Cave',-87.884290,-87.760393,9,'<img src="/wiki/images/5/54/%D0%9F%D0%BE%D0%B4%D0%B2%D0%BE%D0%B4%D0%BD%D1%8B%D0%B9_%D0%BC%D0%B8%D1%80.jpg" />'],
| + | |
- | ['Yard of the Red Witch',-82.335838,-100.152971,10,'<img src="/wiki/images/c/cc/Red_witch%27s1.jpg" /><br><img src="/wiki/images/6/64/Red_witch%27s2.jpg" /><br><img src="/wiki/images/c/c1/Red_witch%27s3.jpg" /><br><img src="/wiki/images/8/84/Red_witch%27s4.jpg" /><br><img src="/wiki/images/6/67/Red_witch%27s5.jpg" /><br><img src="/wiki/images/a/a6/Red_witch%27s6.jpg" /><br><img src="/wiki/images/3/39/Red_witch%27s7.jpg" />'],
| + | |
- | ['Abandoned Bonekeep',-62.927026,-64.293596,11,'<img src="/wiki/images/2/24/Bonekeep1.jpg" />'],
| + | |
- | ['White Worms Lair',24.423564,-113.072893,12,'<img src="/wiki/images/b/ba/WormLair_01.png" /><br><img src="/wiki/images/8/86/WormLair_02.png" /><br><img src="/wiki/images/f/f1/WormLair_03.png" />'],
| + | |
- | ['Winter Castle',32.450837,-79.059221,13,'Under Construction'],
| + | |
- | ['Gates of Night',65.319363,-104.108049,14,'<table style="background: transparent;"><tbody><tr><td></td><td></td><td></td></tr><tr><td><a href="/wiki/index.php/File:3-1.jpg" class="image" title="3-1.jpg"><img alt="" src="/wiki/images/thumb/c/c1/3-1.jpg/200px-3-1.jpg" width="200" height="196" border="0"></a><br><a href="/wiki/index.php/File:4-1.jpg" class="image" title="4-1.jpg"><img alt="" src="/wiki/images/thumb/a/a0/4-1.jpg/200px-4-1.jpg" width="200" height="196" border="0"></a></td><td><center><a href="/wiki/index.php/File:O_288_9_w10_ru.jpg" class="image" title="O 288 9 w10 ru.jpg"><img alt="" src="/wiki/images/thumb/e/e1/O_288_9_w10_ru.jpg/300px-O_288_9_w10_ru.jpg" width="300" height="510" border="0"></a></center></td><td><a href="/wiki/index.php/File:5-1.jpg" class="image" title="5-1.jpg"><img alt="" src="/wiki/images/thumb/d/d4/5-1.jpg/200px-5-1.jpg" width="200" height="196" border="0"></a><br><a href="/wiki/index.php/File:2-1.jpg" class="image" title="2-1.jpg"><img alt="" src="/wiki/images/thumb/9/90/2-1.jpg/200px-2-1.jpg" width="200" height="196" border="0"></a></td></tr><tr><td><a href="/wiki/index.php/File:O_290_9_w10_ru.jpg" class="image" title="O 290 9 w10 ru.jpg"><img alt="" src="/wiki/images/thumb/c/c7/O_290_9_w10_ru.jpg/200px-O_290_9_w10_ru.jpg" width="200" height="302" border="0"></a></td><td><a href="/wiki/index.php/File:O_291_9_m0_ru.jpg" class="image" title="O 291 9 m0 ru.jpg"><img alt="" src="/wiki/images/thumb/f/fa/O_291_9_m0_ru.jpg/300px-O_291_9_m0_ru.jpg" width="300" height="237" border="0"></a></td><td><a href="/wiki/index.php/File:O_289_9_w10_ru.jpg" class="image" title="O 289 9 w10 ru.jpg"><img alt="" src="/wiki/images/thumb/7/78/O_289_9_w10_ru.jpg/200px-O_289_9_w10_ru.jpg" width="200" height="302" border="0"></a></td></tr><tr><td><a href="/wiki/index.php/File:1-1.jpg" class="image" title="1-1.jpg"><img alt="" src="/wiki/images/thumb/9/98/1-1.jpg/200px-1-1.jpg" width="200" height="196" border="0"></a><br><a href="/wiki/index.php/File:1-2.jpg" class="image" title="1-2.jpg"><img alt="" src="/wiki/images/thumb/d/da/1-2.jpg/200px-1-2.jpg" width="200" height="196" border="0"></a></td><td><a href="/wiki/index.php/File:O_287_9_w10_ru.jpg" class="image" title="O 287 9 w10 ru.jpg"><img alt="" src="/wiki/images/thumb/3/35/O_287_9_w10_ru.jpg/300px-O_287_9_w10_ru.jpg" width="300" height="365" border="0"></a></td><td><a href="/wiki/index.php/File:1-3.jpg" class="image" title="1-3.jpg"><img alt="" src="/wiki/images/thumb/f/f5/1-3.jpg/200px-1-3.jpg" width="200" height="196" border="0"></a><br><a href="/wiki/index.php/File:1-4.jpg" class="image" title="1-4.jpg"><img alt="" src="/wiki/images/thumb/c/c7/1-4.jpg/200px-1-4.jpg" width="200" height="196" border="0"></a></td></tr></tbody></table>'],
| + | |
- | ['Prison of the Ancient Gods',67.329878,-103.844377,15,'<img src="/wiki/images/8/8f/Prison1.png" /><br><img src="/wiki/images/8/8f/Prison1.png" />']
| + | |
- | ];
| + | |
- |
| + | |
- | function setMarkers(map, locations) {
| + | |
- | var greendungeonimage = {
| + | |
- | url: '/wiki/images/f/f7/Greendungeonicon.png',
| + | |
- | size: new google.maps.Size(40, 40),
| + | |
- | origin: new google.maps.Point(0, 0),
| + | |
- | anchor: new google.maps.Point(20, 20)
| + | |
- | };
| + | |
- | var greendungeonshape = {
| + | |
- | coords: [0, 0, 0, 40, 40, 40 , 40, 0],
| + | |
- | type: 'poly'
| + | |
- | };
| + | |
- | for (var i = 0; i < locations.length; i++) {
| + | |
- | var greendungeon = locations[i];
| + | |
- | var greendungeonLatLng = new google.maps.LatLng(greendungeon[1], greendungeon[2]);
| + | |
- | var marker = new google.maps.Marker({
| + | |
- | position: greendungeonLatLng,
| + | |
- | map: map,
| + | |
- | icon: greendungeonimage,
| + | |
- | shape: greendungeonshape,
| + | |
- | title: greendungeon[0],
| + | |
- | html: greendungeon[4],
| + | |
- | optimized: false,
| + | |
- | zIndex: greendungeon[3]
| + | |
- | });
| + | |
- | var contentString = "Content";
| + | |
- | google.maps.event.addListener(marker, "click", function () {
| + | |
- | infowindow.setContent(this.html);
| + | |
- | infowindow.open(map, this);
| + | |
- | });
| + | |
- | }
| + | |
- | }
| + | |
- | | + | |
- | google.maps.event.addDomListener(window, 'load', initialize);
| + | |
| | | |
| + | <script> |
| + | $('.map_canvas').css('width', '100%').css('width', '+=1px'); |
| </script> | | </script> |
- |
| |
- | <body>
| |
| <center> | | <center> |
- | <div id="current"> </div> | + | <div> |
- | <div style="box-shadow: 2px 2px 5px #999999;border: 1px solid black;width: 97%; height: 610px;background-image:url('/wiki/images/1/1f/Background.jpg');" id="map_canvas">
| + | <div style="border:33px solid transparent;border-image: url(/wiki/images/d/d9/Mapborder.png) 36 round;z-index:9999999999;"> |
- | </div>
| + | <div style="border:1px solid black;border-radius: 18px;border: width: 100%; height: 530px;background-image:url('/wiki/images/1/1f/Background.jpg');margin: -23px -24px -24px -24px;" id="map_canvas"> |
| + | </div></div> |
| + | <div id="current"> </div> |
| + | <input type="button" value="Show All" onclick="showallMarkers();showallPolylines(999);"> |
| + | <input type="button" value="Road Stones" onclick="displayMarkers(100);showallPolylines(999);"> |
| + | <input type="button" value="Green Dungeons" onclick="displayMarkers(10);hideallPolylines();"> |
| + | <input type="button" value="Red Dungeons" onclick="displayMarkers(20);hideallPolylines();"> |
| + | <input type="button" value="Hide All" onclick="hideallMarkers();hideallPolylines();"> |
| </center> | | </center> |
- | </body>
| + | |
| </html> | | </html> |