HomeMottie's Help SiteResourcesSupport Tickets
Sign Up! • Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Voodoo Tech and Scripter's Den of Scriptniquity > Star Trek Online (STO) Map
Mottie (MVP) 4/13/2010 1:37 PM EST : Star Trek Online (STO) Map link
GuildPortal MVP
Mottie
Posts: 3872
Zomgawsh Poster
Add a Star Trek Online (STO) Map to your site

This script will add an online map to your guild web site. I saw some other maps out there, but they seemed kind of clunky, so I made this one more as an experiment. This map has pretty much the same functionality as google maps (except for the markers). Check it out on my test-site2: STO Map tab.

Note: I have tried to update the original map image to correct spelling and location errors, so please check it for errors and message me if you find any.



Using the Map
  1. Selecting a Location

    • Click on any of the side control headers - "Sector Blocks", "Sectors", "Systems/Locations" or "Starbases".
    • A list under the header will appear, click on any of those locations and the map in the center column will automatically scroll to that location.
    • The selected location will be positioned in the center.

  2. Using the Map
    • You can click and grab the map around as desired.
    • If you double click on any point in the map, it will move to the center.
    • If you click drag, then release (kind of like throwing the map), it will slide in that direction.
    • Using the mouse wheel will zoom in or out on the image. You may see a bit of flickering, but that's only because the script tries to re-center the map.

  3. Other Controls

    • You can sort the location list alphabetically or by faction by clicking on the [ alpha ] or [ faction ] sort buttons at the top of the control panel
    • In either case, the names for each section will be alphabetized.
    • You can manually zoom the map using the [ - ] or [ + ] buttons at the bottom of the control panel.
    • The [ X ] sets the zoom level to 100%.
Adding/Customizing the Map
  1. Add Widgets

    • You will need to add two Free Form Text/HTML type widgets to your page.
    • Add one in the side column and one in the center column.
    • It would be best if you only had two columns on the page.

  2. Center "Map" widget

    • Add the following to the center Free Form Text/HTML widget
      <div id="map">
        <img       data-zoom="65" width="6011" height="3857" src="http://www.axiomfiles.com/Files/262592/bigmap.jpg" />
      </div>
    • Make sure the editor is in [ ‹› HTML ] mode.

  3. Side "Control" widget

    • Add the following to the side (left or right) widget, make sure the editor is in Raw/Script mode (link in the upper right corner)
    • The CSS is at the top, you can adjust the colors as you desire (in blue).
    • Don't bother changing the width of the map as it is automatically adjusted to fit in the center widget; but you can adjust the height.
      <style type="text/css">
      /* Overall map */
      #map {
       width: 600px;
       height: 600px;
       cursor: url("http://www.axiomfiles.com/Files/262592/openhand.cur");
       border: 1px solid #555;
       overflow: hidden;
      }
      /* margin around the map so all sectors will center max-width and max-height set to clear image size
       * restrictions just for the map image, the 300px margin allows you to center on a location thats
       * at the edge of the map
       */
      #map img { border:none; margin: 300px; max-width: 20000px; max-height: 20000px; }
      a { color: #ddd; }

      /* Info bar under map (contains help and zoom buttons */
      #info button, .sorter button { background: #444; color: #ddd; font-weight: bold; }
      #key th { text-align: left; border: #777 0px solid; border-bottom-width: 1px; }

      /* Scroll drag */
      .gr { cursor:url(http://www.axiomfiles.com/Files/262592/openhand.cur), url(http://www.axiomfiles.com/Files/262592/closedhand.cur), default; }

      /* sort buttons */
      .sorter { text-weight: normal; font-size: 12px; padding: 2px; }
      .sorter button { font-size: 10px; }

      /* Accordion - IE fixes */
      * #data, #data ul { margin: 0; padding: 0; }
      * html #data li { margin-bottom: -1px; }
      * html #data a { height: 100%; margin: 2px auto; }

      /* Accordian menu - some list and link styling */
      #data ul { width: 175px; max-height: 350px; overflow-y: auto; overflow-x: hidden; list-style-type: none; margin: 0 10px; cursor: pointer; text-indent: 0; }
      #data li { border: 0; margin: 2px 5px; list-style-type: none; position: static; }
      #data a { display: block; border: transparent 2px solid; padding: 0 0 0 22px; }
      #data a:hover { display: block; background: #333333; border: #333333 2px solid; }
      #data div { background: #333333; margin-left: 0; }
      #data h5 { width: 100%; font-size: 16px; padding: 5px; margin: 0; line-height: 20px; cursor: pointer; }
      h5:hover { background: #333333; border: 0; }
      h5.selected { background: #00496c; }

      /* faction coloring */
      .fac { display: block; float: left; width: 0; height: 0; margin: 6px 0 3px 4px; line-height: 2em; }
      .car { border: #8b5308 6px solid; }
      .fed { border: #0080ff 6px solid; }
      .kli { border: #ff0000 6px solid; }
      .rom { border: #7bb87d 6px solid; }
      .bor { border: #8bf80a 6px solid; }

      /* multiple faction coloring */
      .fed.rom { border: 6px solid; border-color: #7bb87d #7bb87d #0080ff #0080ff; }
      .car.fed { border: 6px solid; border-color: #0080ff #0080ff #8b5308 #8b5308; }
      .fed.kli { border: 6px solid; border-color: #0080ff #ff0000 #ff0000 #0080ff; }
      </style>

      <script src="      http://www.axiomfiles.com/Files/262592/sto-maplist-min.js" type="text/javascript"></script>
      <script src="      http://www.axiomfiles.com/Files/262592/sto-scripts-min.js" type="text/javascript"></script>
      <div class="sorter"> sort:
       <button class="tooltip" title="Sort the List Alphabetically" rel="100">alpha</button>
       <button class="tooltip" title="Sort the List by Faction" rel="100">faction</button>
      </div>
      <br>
      <div id="data"></div>
      <hr>
      <div id="info">
       <button class="zoom down tooltip" title="Zoom Out" rel="75">-</button>
       Zoom: <span class="zoomval">100</span>%
       <button class="zoom up tooltip" title="Zoom In" rel="75">+</button>
       <button class="zoom reset tooltip" title="Reset Zoom to 100%" rel="100">X</button>
      </div>
      <br>
      <div id="key">
       <table width="100%">
        <tr>
         <th colspan="4">Key:</th>
        </tr>
        <tr>
         <td><span class="fac bor"></span></td><td>Borg</td>
         <td><span class="fac car"></span></td><td>Cardassian</td>
        </tr>
        <tr>
         <td><span class="fac fed"></span></td><td>Federation</td>
         <td><span class="fac kli"></span></td><td>Klingon</td>
         </tr>
        <tr>
         <td><span class="fac rom"></span></td><td>Romulan</td>
        </tr>
       </table>
      </div>
>>help-site<<
Top • Bottom

Admins Online
There are   members online.
GuildPortal Home • Frequently Asked Questions • Videos • Recent Updates • Support • Terms of Use • Privacy Policy
GuildPortal™ Axiom Shift, LLC.  All Rights Reserved. All game-related trademarks are properties of their respective owners. Several adorable monkeys were harmed during the creation of this site, and for that, we are wholly unapologetic.
So-and-so has logged on!
%title%
%message%