Skip navigation
All Places > PI Developers Club > Blog > 2013 > September
2013

On my last blog post, I have shown you how to display your current latitude and longitude of your page using HTML5 and Java Script. This time I will show you not only how to point to your current location to a map but also how to insert images related to some points of interest. As you will realize, mapping technology is becoming less complicated, more accessible and easier to use.  For this blog post, I will use Bing Maps but there are other web map services as Google Maps, Yahoo! Maps, MapQuest and Esri that could be used as alternative.

Create a Bing Maps Account

 

 

To use Bing Maps Keyes with Bing Maps API, a Bing Maps account is required. Your Bing Maps Account lets you create Bing Maps Keys to use with the Bing Maps APIs.  Remember that setting up an account is free for developers. Below is the procedure:

  1. Go to the Bing Maps Account Center and sign in.
  2. Under “My Account” category, click on “Create or view keys”.

    7462.1.jpg
  3. Fill the gaps, click on “Submit” and follow the next steps to generate the trial key, which will expire after three months.

6303.2.jpg

Adding a Map

 

 

You will add a map to the page which was built on the last blog post. Please visit it to refer to the code snippet which will be our starting point. Add a div which is where the map will be displayed in:

 

 

 
<div id = "map" style = 'width:800px; height:600px;'>
</div>

 

 

 Add the reference to the Ajax script of Bing Map API which is used to manipulate the map.

 

 

 
<script type = "text/javascript"
src = "http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
</script>

 

 

Declare at the top of the script element for the map object:

 

 

 
var map = null;

 

 

Modify the showLocation(), which is a JavaScript function, adding the following lines:

 

 

 
// Save the current location
var lat = pos.coords.latitude;
var long = pos.coords.longitude;

// Create the map
map = new Microsoft.Maps.Map(document.getElementById("map"),
{ credentials:
" < use your key here > " });

// Center it on the current location
map.setView({ zoom: 18, center: new Microsoft.Maps.Location(lat, long) });

Remember to enter your Bing Maps key where it is written < use your key here >.

 

Open this web page on your browser. A map of your current position will be shown and it should be similar to the screenshot below:

 

 

 

4135.3.jpg

Adding pushpins and custom images

 

 

In order to display a pushpins on the map, you need first to center it o the current location, create a pushpin object and add it to the map’s entities collection. To add a default pushpin, refer to the code snippet below:

 

 

 
// Center it on the current location
map.setView({ zoom: 18, center: new Microsoft.Maps.Location(lat, long) });

// Mark the current location
var pushpin = new Microsoft.Maps.Pushpin
(new Microsoft.Maps.Location(lat, long), null);
map.entities.push(pushpin);

 

 

Now, you will indicate where OSIsoft headquarters is located in San Leandro and where the Grand Hyatt hotel is located, the event location for vCampus Live! 2013. Instead of using pushpins, you will use custom images instead.  First of all, please create a folder called images which should contain two images (OSIsoft_logo.jpg and vCampus_Live_2013.jpg). You can download the images here. One question to be answered is how to get the coordinates of some places? There are many tools that can help you but one option is through Google Maps. There is an article from Google which provides clear instructions about how to get the coordinates of a given location.

 

Using Google Maps, I have found out that the latitude of OSIsoft, LLC is 37.723377 and its longitude is 122.162654.  The latitude of the Grand Hyatt in San Francisco is 37.789777 and its longitude is -122.407443. Therefore, this information will be stored on an array called places, just below the declaration of the map variable.

 

 

 
var places = [
        { lat: 37.723377, long: -122.162654, icon: 'images/OSIsoft_logo.jpg', width: 135, height: 50 },
        { lat: 37.789777, long: -122.407443, icon: 'images/vCampus_Live_2013.jpg', width: 170, height: 26 },

 

 

Note that it was also stored the path, width and height of the image on the array. Those properties are required when adding those images to the map.

 

As most of you are probably not located in California, the current latitude and longitude detected by your browser will be overridden (through redefining the lat and long variables) to display the region of California, where our custom images were added. Therefore, the code snippet below should be added on the showLocation() function:

 

 

 
// Override these for testing purposes
lat = 37.75;
long = -122.28;

 

 

There are two Java Script functions below markObjects() and markObject(). For each location, there is an object with 5 properties (latitude, longitude, icon, width and height) under places[] array. The markObject() will be responsible for adding the image to the map related to the object. The markObjects() function will call markObject() for every object in the array. This way, all locations with coordinates stored inside the array will be added to the map.

 

  

 
        function markObjects() { 
            for (var i=0; i < 2; i++){
                markObject(places
)
            }
        }

 
        function markObject(location) {
            var pushpinOptions = { icon: location.icon, width: location.width, height: location.height };
            var pushpin = new Microsoft.Maps.Pushpin
            (new Microsoft.Maps.Location(location.lat, location.long), pushpinOptions);
            map.entities.push(pushpin);
        }

 

 

Finally, the function markObject() should be the last method to be called from the showLocation(), after adding the default pushpins.

 

Open your web page and you should see where OSIsoft, LLC is located as well as the Grand Hyatt hotel, close to the Union Square. On the end of this blog post, you can find the complete solution in case you are not certain in any of the steps of this blog post.

 

 

 

 

 

7242.4.jpg

 

 

 

I hope you find this blog post about Mapping in HTML5 using Bing Maps interesting and I want to read your feedbacks concerning this topic.  Would it be interesting writing another blog post related to “Mapping using Google Maps”?

Appendix : Source code

Please refer to the code snippet below for the complete solution.

 

 

 
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Bing Map</title>
</head>
<body>
    <div style='width: 800px; height: 50px;'>
        <span id='lbl'></span>
    </div>
    <div id='map' style='width: 800px; height: 600px;'>
    </div>
    <script
        type='text/javascript'
        src='http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0'>
    </script>
    <script type='text/javascript'>
        var lbl = document.getElementById('lbl');
        var map = null;
        var places = [
        { lat: 37.723377, long: -122.162654, icon: 'images/OSIsoft_logo.jpg', width: 135, height: 50 },
        { lat: 37.789777, long: -122.407443, icon: 'images/vCampus_Live_2013.jpg', width: 170, height: 26 },
      
        ];
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showLocation, errorHandler,
            {
                maximumAge: 100,
                timeout: 6000,
                enableHighAccuracy: true
            });
        }
        else {
            alert('Geolocation not suported');
        }
                
        function showLocation(pos) {
            lbl.innerHTML =
            'Your latitude: ' + pos.coords.latitude +
            ' and longitude: ' + pos.coords.longitude +
            ' (Accuracy of: ' + pos.coords.accuracy + ' meters)';

            // Save the current location
            var lat = pos.coords.latitude;
            var long = pos.coords.longitude;
            // Override these for testing purposes
            lat = 37.75;
            long = -122.28;

            // Create the map
            map = new Microsoft.Maps.Map(document.getElementById('map'),
            {
                credentials:
                'Your key'
            });
            // Center it on the current location
            map.setView({ zoom: 12, center: new Microsoft.Maps.Location(lat, long) });

            // Mark the current location
            var pushpin = new Microsoft.Maps.Pushpin
            (new Microsoft.Maps.Location(lat, long), null);
            map.entities.push(pushpin);

            // Display the OSIsoft HQ and Gran Hyatt locations
            markObjects();
        }

        function errorHandler(e) {
            if (e.code === 1) { // PERMISSION_DENIED
                lbl.innerHTML = 'Permission denied. - ' + e.message;
            } else if (e.code === 2) { //POSITION_UNAVAILABLE
                lbl.innerHTML = 'Make sure your network connection is active and ' +
                'try this again. - ' + e.message;
            } else if (e.code === 3) { //TIMEOUT
                lbl.innerHTML = 'A timeout ocurred; try again. - ' + e.message;
            }
        }

        function markObjects() {  
            for (var i=0; i < 2; i++){
                markObject(places
)
            }
        }

        function markObject(location) {
            var pushpinOptions = { icon: location.icon, width: location.width, height: location.height };
            var pushpin = new Microsoft.Maps.Pushpin
            (new Microsoft.Maps.Location(location.lat, location.long), pushpinOptions);
            map.entities.push(pushpin);
        }
    </script>
</body>
</html>

 

 

 

While at work recently, I needed to get a PI system up and running in short order.  Usually I have to send a request to our IT staff get a VM created and then take it from there. This time I decided to give Azure a try.  We have been doing a lot with cloud technology, but for some reason I had never tried to actually deploy a PI system. Well time to change that. After a couple of hours with relatively few issues, I had a PI system deployed! I was surprised with how straight forward it was.

 

Since then I have done several installations and have the time down to about 30 minutes. Ten minutes to get the VM created, ten minutes to get PI installed, and ten more to get security configured.

 

I have created a video to demonstrate how to do this; you can find the link below.

 

The basic process is as follows:

  1. Spin up a VM in Azure
  2. Download and Install AF
  3. Download and Install PI
  4. Configure firewall Ports
  5. Create a PI User and PI Trust for my dev machine
  6. Configure my PI connection and AF connection on my dev machine

That is all there is to it!  I hope you enjoy the video!

 

 http://www.youtube.com/watch?v=DzxajdmiuSA 

 

Note: This installation is only met for demonstration purposes and is NOT intended to be a production deployment of a PI System. It is good for testing and development purposes only.

 

Lonnie

 

 

Filter Blog

By date: By tag: