Google Maps Integration

Version 6

    Orion Google Maps Hack Version 0.3, July 2012

    Andrew LaGrone, SCP#1368

     

    NOTE: There is a slightly updated, and modified version of this example here, including an instructional video on how to install: Google Maps in Orion NPM - How to Video

     

    Description: This package will let you integrate Google Maps into your Orion NPM web console. Below (and included in the zip) you can find installation instructions. Good luck & enjoy!!!

     

     

    !! Disclaimer - Use at your own risk !!

     

     

    I am offering the code as open source to the community to expand and share upon the body of work.

     

     

    !! Known Issues !!

     

     

    My intention is/was to take the path all the way down to the building/site level, however at this time the path stops at 'City.'

     

     

    At this release, the city needs to be entered as all one word (Ft_Worth, SanDiego, San_Antonio, etc).

     

     

    I had some trouble getting the maps to load into new browser windows in Internet Explorer, however this works just fine in Firefox and Chrome. If you don't use IE, the drill-down behavior can be changed to launch new browser windows when drilling down from map to map. Look for the HTML code that defines target=_parent and change to target=_blank. These can be found in the MyStateHack.aspx (Line 14), MyCityStateHack, and MyBuildingCityStateHack.aspx (the "menu" pages). I chose to stay within the iFrame for navigation simply to support IE along side your favorite Brand-X browsers. I've been told that this still doesn't work in IE.

     

     

     

     

    !! Requirements !!

     

     

    Your Orion server will need to have Internet access (maps.google.com, wunderground.com, weather.gov) to pull the map and weather data.

     

     

     

     

    !! Installation Procedure !!

     

     

    Deposit the ASP Pages into the inetpub directory on the Orion Server that is hosting your Orion Web Console, creating the folder GoogleHack:

      C:\inetpub\SolarWinds\Orion\GoogleHack\

     

     

      For each ASP page, locate and configure the database connection string.

     

     

      A DB Conn String looks like:

      oConn = New System.Data.SQLClient.SQLConnection ("server=SQLSERVER\INSTANCE; initial catalog=YOURDATABASE;uid=DATABASEUSER;pwd=DATABASEUSERPASSWORD")

     

     

    Open the Custom Properties Editor on the Orion server, and create Latitude, Longitude, Country, State, and City text properties for the Nodes table. Populate these properties.

     

     

      State: The Two letter state code is hard coded, so you will want to use same for your US states in Custom Properties. Just to show that I'm not entirely inflexible or consistent, our non-US sites received a three letter country code in place of the states.

     

     

      Country: MyHack.aspx uses Country to filter nodes for Country='US' - This may not be entirely necessary for you, and if no nodes exist outside of the US, remove AND Country='US' from the query (MyHack.aspx Line 20), and you can ignore using Country as a custom property.

     

     

    In the Orion Web Console page where you want to add the map, customize this page and add a Custom HTML Resource to the page. Below is an example iFrame:

     

     

      <iframe src="/Orion/GoogleHack/MyHack.aspx" width="100%" frameborder=0 height=600 scrolling=no align=center></iframe>

     

     

     

     

    !! Additional Notes & Hints !!

     

     

      !! -Custom Icons !!

      You can use custom icons instead of the default LEDs for status. I'm working on a more complicated use-case for this, but the path is defined in the code & it's worth mentioning because it's easy. For example, you'll see in MyHack.aspx (Line 78):

     

     

      var image_dir = '/Orion/images/StatusIcons/Small-';

     

     

      This can be manipulated into something like:

     

     

      var image_dir = '/Orion/images/StatusIcons/Small-Purple-Bunnies-';

     

     

      ...Assuming your icons all read like 'Small-Purple-Bunnies-Warning.jpg'

     

     

      !! -Finding your Lat & Long Values !!

     

     

      There are two ways I found to do this.

     

     

      1) use maps.google.com, then grab the link (like you see here: http://screencast.com/t/21QjuNvBa).

      https://maps.google.com/maps?q=austin,+tx&hl=en&sll=37.0625,-95.677068&sspn=48.15347,70.927734&t=h&hnear=Austin,+Travis,+Texas&z=11

     

     

      See the ll=37.0625,-95.677068? That's it!

     

     

      2) use http://itouchmap.com/latlong.html.

     

     

      !! -Weather On/Off or looping !!

     

     

      To change the weather portion from looping to static & back, just switch the commenting to the other link (Lines 186 & 187 from MyHack.aspx)

     

     

      To turn weather off, comment the weather section out (weather is currently enabled only on the first page because it gets too busy when you drill down). If you need an example of no weather, look at the MyStateMapHack.aspx. I've left the code in there in case I ever wanted to add it back. If you're feeling up to it, you can choose to either hard code the radar and map type, or pass it along to the next map.