|
|
(354 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: 4,
| + | |
- | 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.62,33.4);
| + | // 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'),
| + | </style> |
- | mapOptions);
| + | |
- | map.mapTypes.set('moon', moonMapType);
| + | |
- | map.setMapTypeId('moon');
| + | |
- | | + | |
- | var marker = new google.maps.Marker({
| + | |
- | position: new google.maps.LatLng(-89.62,33.4),
| + | |
- | map: map,
| + | |
- | title:"Fragotown"
| + | |
- | });
| + | |
- | | + | |
- | var marker = new google.maps.Marker({
| + | |
- | position: new google.maps.LatLng(86,0),
| + | |
- | map: map,
| + | |
- | title:"86,0"
| + | |
- | });
| + | |
- | var marker = new google.maps.Marker({
| + | |
- | position: new google.maps.LatLng(84,0),
| + | |
- | map: map,
| + | |
- | title:"84,0"
| + | |
- | });
| + | |
- | var marker = new google.maps.Marker({
| + | |
- | position: new google.maps.LatLng(80,0),
| + | |
- | map: map,
| + | |
- | title:"80,0"
| + | |
- | });
| + | |
- | var marker = new google.maps.Marker({
| + | |
- | position: new google.maps.LatLng(60,0),
| + | |
- | map: map,
| + | |
- | title:"60,0"
| + | |
- | });
| + | |
- | var marker = new google.maps.Marker({
| + | |
- | position: new google.maps.LatLng(40,0),
| + | |
- | map: map,
| + | |
- | title:"40,0"
| + | |
- | });
| + | |
- | var marker = new google.maps.Marker({
| + | |
- | position: new google.maps.LatLng(20,0),
| + | |
- | map: map,
| + | |
- | title:"20,0"
| + | |
- | });
| + | |
- | var marker = new google.maps.Marker({
| + | |
- | position: new google.maps.LatLng(0,0),
| + | |
- | map: map,
| + | |
- | title:"0,0"
| + | |
- | });
| + | |
- | var marker = new google.maps.Marker({
| + | |
- | position: new google.maps.LatLng(-10,0),
| + | |
- | map: map,
| + | |
- | title:"-10,0"
| + | |
- | });
| + | |
- | var marker = new google.maps.Marker({
| + | |
- | position: new google.maps.LatLng(-20,0),
| + | |
- | map: map,
| + | |
- | title:"-20,0"
| + | |
- | });
| + | |
- | var marker = new google.maps.Marker({
| + | |
- | position: new google.maps.LatLng(-30,0),
| + | |
- | map: map,
| + | |
- | title:"-30,0"
| + | |
- | });
| + | |
- | var marker = new google.maps.Marker({
| + | |
- | position: new google.maps.LatLng(-40,0),
| + | |
- | map: map,
| + | |
- | title:"-40,0"
| + | |
- | });
| + | |
- | var marker = new google.maps.Marker({
| + | |
- | position: new google.maps.LatLng(-50,0),
| + | |
- | map: map,
| + | |
- | title:"-50,0"
| + | |
- | });
| + | |
- | var marker = new google.maps.Marker({
| + | |
- | position: new google.maps.LatLng(-60,0),
| + | |
- | map: map,
| + | |
- | title:"-60,0"
| + | |
- | });
| + | |
- | var marker = new google.maps.Marker({
| + | |
- | position: new google.maps.LatLng(-70,0),
| + | |
- | map: map,
| + | |
- | title:"-70,0"
| + | |
- | });
| + | |
- | var marker = new google.maps.Marker({
| + | |
- | position: new google.maps.LatLng(-80,0),
| + | |
- | map: map,
| + | |
- | title:"-80,0"
| + | |
- | });
| + | |
- | var marker = new google.maps.Marker({
| + | |
- | position: new google.maps.LatLng(-85,0),
| + | |
- | map: map,
| + | |
- | title:"-85,0"
| + | |
- | });
| + | |
- | var marker = new google.maps.Marker({
| + | |
- | position: new google.maps.LatLng(-86,0),
| + | |
- | map: map,
| + | |
- | title:"-86,0"
| + | |
- | });
| + | |
- | var marker = new google.maps.Marker({
| + | |
- | position: new google.maps.LatLng(-87,0),
| + | |
- | map: map,
| + | |
- | title:"-87,0"
| + | |
- | });
| + | |
- | var marker = new google.maps.Marker({
| + | |
- | position: new google.maps.LatLng(-88,0),
| + | |
- | map: map,
| + | |
- | title:"-88,0"
| + | |
- | });
| + | |
- | var marker = new google.maps.Marker({
| + | |
- | position: new google.maps.LatLng(-89,0),
| + | |
- | map: map,
| + | |
- | title:"-89,0"
| + | |
- | });
| + | |
- | var marker = new google.maps.Marker({
| + | |
- | position: new google.maps.LatLng(-89.8,0),
| + | |
- | map: map,
| + | |
- | title:"-89.8,0"
| + | |
- | });
| + | |
- | }
| + | |
- | | + | |
- | // 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;
| + | |
- | }
| + | |
- | | + | |
- | // repeat across x-axis
| + | |
- | if (x < 0 || x >= tileRange) {
| + | |
- | x = (x % tileRange + tileRange) % tileRange;
| + | |
- | }
| + | |
- |
| + | |
- | return {
| + | |
- | x: x,
| + | |
- | y: y
| + | |
- | };
| + | |
- | }
| + | |
- |
| + | |
- | // Add a move listener to restrict the bounds range | + | |
- | // GEvent.addListener(map, "move", function() {
| + | |
- | // checkBounds();
| + | |
- | // });
| + | |
- | | + | |
- | // The allowed region which the whole map must be within
| + | |
- | // var allowedBounds = new GLatLngBounds(new GLatLng(0,0), new GLatLng(16,32));
| + | |
- |
| + | |
- | // If the map position is out of range, move it back
| + | |
- | // function checkBounds() {
| + | |
- | | + | |
- | // Perform the check and return if OK
| + | |
- | // if (allowedBounds.contains(map.getCenter())) {
| + | |
- | // return;
| + | |
- | // }
| + | |
- | | + | |
- | // It`s not OK, so find the nearest allowed point and move there
| + | |
- | // var C = map.getCenter();
| + | |
- | // var X = C.lng();
| + | |
- | // var Y = C.lat();
| + | |
- | | + | |
- | // var AmaxX = allowedBounds.getNorthEast().lng();
| + | |
- | // var AmaxY = allowedBounds.getNorthEast().lat();
| + | |
- | // var AminX = allowedBounds.getSouthWest().lng();
| + | |
- | // var AminY = allowedBounds.getSouthWest().lat();
| + | |
- | | + | |
- | // if (X < AminX) {X = AminX;}
| + | |
- | // if (X > AmaxX) {X = AmaxX;}
| + | |
- | // if (Y < AminY) {Y = AminY;}
| + | |
- | // if (Y > AmaxY) {Y = AmaxY;}
| + | |
- | //alert ("Restricting "+Y+" "+X);
| + | |
- | // map.setCenter(new GLatLng(Y,X));
| + | |
- | // }
| + | |
| | | |
| + | <script> |
| + | $('.map_canvas').css('width', '100%').css('width', '+=1px'); |
| </script> | | </script> |
- |
| |
- | <body onload="initialize()">
| |
| <center> | | <center> |
- | <div style="box-shadow: 2px 2px 5px #999999;border: 1px solid black;width: 97%; height: 585px;background-image:url('/wiki/images/1/1f/Background.jpg');" id="map_canvas">
| + | <div> |
- | </div>
| + | <div style="border:33px solid transparent;border-image: url(/wiki/images/d/d9/Mapborder.png) 36 round;z-index:9999999999;"> |
| + | <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> |