Saturday 20 June 2015

Creating and publishing simple web maps using Microsoft Bing maps


Things to note
- To have access to Microsoft Bing maps, user should have a Microsoft user account or Hotmail account.
-  Bing maps is the Microsoft equivalent of Google maps engine.
- To practice along, create a Microsoft or Hotmail account if you did not have one previously.

Task
To create and publish to the web a simple map from dataset captured by the User.

Procedure
Sign into Bing maps with Microsoft or Hotmail account username and password.  Click My places (red boxed) and a My places editor window will pop up (green box).

Capture-1
Select a file to import by clicking on browse. A list is similar to a working folder. Similar layers can be imported into the same List.
Capture-8
For the demo, the polygon layer called BufferDam2 is imported in. This message appears when the import is successful.
Capture-9

The imported file is seen as a blue polygon (red boxed) and is named Placemark1 by default.
Capture-11

To change the base map to an imagery, Click on dropdown button beside Bird’s eye (red boxed)
Capture-12

Viola! The base map is now an imagery and the imported layer can be seen clearly now.
Capture-13

Click on the feature and an Info-window will pop up. Click on Edit in the Info-window.
Capture-15

Edit pushpin properties box opens. Here changes can be made and even images added.
Capture-16

For the demo, see the result of the editing done on the pop-up window.
Capture-17

Other Options are to click on Actions > Export > Select KML, GPX or even GeoRSS.
Capture-19

To Publish the map online, Click on Share (red boxed).
Capture-20

The Share this map window, user has options –LINK and EMBED IN A WEBPAGE. For the demo, we select the EMBED IN A WEBPAGE. Select Customize and preview to work on the map.
Capture-21

Here MAP SIZE, MAP OPTIONS, MAP STYLES and MAP LINKS can be customized to suit the webpage. For the demo, Large size is selected and Draggable map is selected.
Capture-22

For MAP STYLES- Aerial with labels was selected, and all options under MAP LINKS checked.
Capture-24

Click on the Generate code (red boxed) and a html code is generated. Copy the code.
Capture-26

Paste the code into the HTML code for the web page.
Capture-28

and here is the Bing map embedded as a web map on the webpage.
Capture-29

No comments:

Post a Comment