Ein kleines „Getting Started“ für Bing Map API (AJAX).

Um in Websites Standortdaten visuell besser darstellen zu können, werden Kartendienste verwendet. In diesem Blog Beitrag wollen wir die Verwendung der Bing Maps API demonstrieren.

Wir werden eine Karte erstellen, Pushpins hinzufügen, diese mit Tooltips versehen, andere Elemente wie Shapes der Karte hinzufügen und uns ansehen, welche Objekte, Methoden und Settings uns die API zur verfügung stellt.

Voraussetzungen:

  • Gültiger Bing Maps API Key
  • Bing Map API Control (AJAX) einbinden

Bing Maps Key:

Kunde bei Microsoft Bing Maps:
Eine Key erhält man über das Bing Maps Parket, das man bei Microsoft Bing Maps abgeschlossen hat.

Als Entwickler:
Als Entwickler kann man sich auch einen Hotmail Account anlegen und über die Bing Maps Seite einen Key erstellen. Als Projekt URL können wir den Testserver oder einfach nur localhost angeben.

Wenn wir keinen gültigen Key angegeben, wird in der Karte ein Layer angezeigt, das wir derzeit ohne gültigen Key die API verenden.

Bing Map API Control (AJAX):
Jetzt können wir beginnen unser Projekt zu erstellen. Als Backend-Programmiersprachen können beliebige Sprachen (php , perl usw) verwendet werden.

Im Frontend wird mit Javascript auf die API zugegriffen. Dazu müssen wir das Bing Map API Control (AJAX) einbinden.

Path: http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=de-de

Script Code:

charset="UTF-8"
type="text/javascript"
src="http://ecn.dev.virtualearth.net/mapcontrol/
mapcontrol.ashx?v=7.0&mkt=de-de">

Nun können wir beginnen.

Create a simple Bing Map

[caption id=”attachment_3748” align=”aligncenter” width=”452”] Create a simple Bing Map[/caption]

Codebeispiel auf jsFiddle
http://jsfiddle.net/scandio/muYk7/

Um eine Karte zur erstellen, benötigen wir HTML, CSS und Javascript.

- HTML
Wir brauchen einen <div> als Rahmen (id=mapArea)
und
darin brauchen wir einen <div>, in dem die Karte eingefügt wird.

p>

Da die Karte von der API immer mit position=“absolute“ eingefügt wird, brauchen wir einen <div> mit position=“relative“ außen herum, andernfalls wird die Karte im kompletten Browser Fenster angezeigt und überlagert alle anderen Content-Elemente.

- CSS
Das Rahmen <div> braucht ein position=“relative“, damit die Karte im #map <div> nicht im gesamten Browser Fenster angezeigt wird.

p>
#mapArea { position : relative; margin:10px; width:500px; height:500px; }

- Javascript
Bei onLoad oder dom.ready wird die Map erstellt und dem <div> #map zugewiesen.

map = new Microsoft.Maps.Map(document.getElementById("map"),
 {
 credentials: 'AjMLK4tRnJFSdYcc1bC2BeXCOqjbpk...
               5UPD0iMj8MDu68vdSBcdcBjjyI65VogR‘,
 mapTypeId: Microsoft.Maps.MapTypeId.road,
 zoom: 11,
 showMapTypeSelector:true
 enableSearchLogo: false
 });
//set center
map.setView({center: new Microsoft.Maps.Location(48.150971, 11.538815)});

Jetzt haben wir unsere simple Karte erstellt. Im Javascript erstellen wir mit Microsoft.Maps.Map ein Kartenobjekt. Über die Angabe der id wird die Karte in dem div#map erzeugt. Wie wir sehen können, werden auch noch einige Default-Settings übergeben.

credentials:
Das ist der Bing Maps API Key.

mapTypeId:
Legt den Kartentype fest. Wir haben mit “road” die Darstellung der Straßenkarten gewählt. Zur Auswahl stehen aerial, auto, birdseye, collinsBart, mercator, ordnanceSurvey und road. Hier eine Dokumentation der verschiedenen Typen:

Bing Documentation
http://msdn.microsoft.com/en-us/library/gg427625.aspx

Zoom:
Mit Zoom können wir die Zoomstufe festlegen.

showMapTypeSelector:
Mit showMapTypeSelector=true haben wir das Karten Navigationsmenü aktiviert.

Bing Documentation
Hier die Beschreibung der verschiedenen Werte:
http://msdn.microsoft.com/en-us/library/gg427603.aspx

enableSearchLogo:
Mit enableSearchLogo=false haben wir die Search Box in der Karte deaktiviert. In der Karte kann auch eine Bing Maps Suchfeld angezeigt werden, um direkt in der Karte auf den Bing Maps Dienst zuzugreifen und nach Standorten zu suchen.

setView():
Mit setView haben wird die Karte noch zusätzlich auf das Center von München gesetzt.

map.setView({center: new Microsoft.Maps.Location(48.150971, 11.538815)});

Hier die Dokumentation der Möglichkeiten eine Karte darzustellen.

Bing Dokumentation
http://msdn.microsoft.com/en-us/library/gg427609.aspx

Create a pushpin and add to the map

[caption id=”attachment_3769” align=”aligncenter” width=”452”] Add a pushpin[/caption]

Codebeispiel auf jsFiddle
http://jsfiddle.net/scandio/Ak8h4/

Jetzt wollen wir einen Pushpin der Karte hinzufügen.

var pin = new Microsoft.Maps.Pushpin(
             new Microsoft.Maps.Location(48.150971, 11.538815));

Dazu verwenden wir die Methode Microsoft.Maps.Pushpin. Die Geolocation muss als Location Objekt übergeben werden. Das Pushpin Objekt muss jetzt noch der Karte zugewiesen werden. Das map Karten Objekt hat eine Liste entities, der wir eine Pushpin und weitere Objekte (unterschiedlichen Typs) hinzufügen können.

map.entities.push(pin);

Customize a Pushpin

Im vorigen Breispiel haben wir einen Default-Pushpin erstellt und den hinzugefügt. Ein Pushpin kann aber über setOption auch individual angepasst werden. Beispiel:

pin.setOptions(
{
 icon: 'img/pushpin.png',
 width: 32,
 height: 32,
 visible : true,
 typeName: 'mypin'
});
  • Wir können die Höhe und Breite des Pushpins festlegen.
  • Wir können ein eigenes Icons festgelegen. Dazu muss nur der Pfad zu einem Icon angegeben werden.
  • Wir können festlegen, ob der Pushpin angezeigt werden soll oder nicht.

Sehr hilfreich kann sein , dass man dem Pushpin auch eine CSS Klasse übergeben kann. So können wir viele verschiedene Pushpins erstellen und deren Darstellung über CSS Styles setzen. Dazu müssen wir dem Pushpin einen typeName=”myPin” übergeben.

Add Pushpin Tooltip

[caption id=”attachment_3783” align=”aligncenter” width=”452”] Add pushpin Tooltip[/caption]

Codebeispiel auf jsFiddle
http://jsfiddle.net/scandio/6TecR/

Schritt 1:
Um einen Tooltip zu erstellen, braucht der Pushpin einen „Title“ und eine „Description“.

//set Title and desc of the pushpin
pin.Title = "Scandio GmbH";
pin.Description = "In der Rosenau 6
81829 München";

Schritt 2: Wir brauchen eine InfoBox, die wir auch der Entity Liste hinzufügen.

//create info box
infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0),
{
    visible: false,
    offset: new Microsoft.Maps.Point( 10, 20),
    height:110, showCloseButton: false
});
//add to entity list
map.entities.push(infobox);

Schritt 3:
Wir müssen unserem Puskpin mit einem mouseover und mouseout Event versehen.

//Add events
Microsoft.Maps.Events.addHandler(pin, 'mouseover', displayInfobox);
Microsoft.Maps.Events.addHandler(pin, 'mouseout', displayInfoboxClose

Schritt 4:
Die Funktionen für displayInfoBox und displayInfoboxClose erstellen

// Event Show Bing Maps Tooltip