Show Pin on Map

edited April 2012 in Enyo 2

I want to show all of my pins on map on page load, how can i achieve this.

In current enyo 2.0, we have pin on click but i want to have by default with page load.

Please help and let me know the solution.


  • I'm assuming you are using the "BingMap" kind included in Enyo2, yes?

    Option 1:
    You can do this a couple of different ways. When instantiating your BingMap kind, you can set the showPin property to true and define a location there:
    {name: "map", kind: "BingMap", fit: true, showPin: true, latitude: 37.280251416534774, longitude: -122.04357910156251, options: {
    	showDashboard: false, showScalebar: false},
    	credentials: "your-credentials-here"

    Option 2:
    Alternatively, if you don't know the location you want the pin to appear until after instantiating it, you can use the BingMap kind's "onLoaded" event to programmatically make it happen:
    {name: "map", kind: "BingMap", fit: true, onLoaded: "setPin", options: {
    	showDashboard: false, showScalebar: false},
    	credentials: "your-credentials-here"
    Then do something similar in your setPin function:
    setPin: function() {
    	this.$.map.setCenter(37.280251416534774, -122.04357910156251);
  • Hi germboy,

    Thanks for your reply and you are right that i am using BinMap on Enyo 2.0

    I have tried your both method but my problem does not solve, please have a look below of my problem points,

    1. I have array in mockdata.js, i want to load all of my listed lat long under this array.
    2. Pins/Marker act same as it is working when i click on pullout bookmark section but only difference is on by default load all marker/pin at their lat long value.

    Your solution is working for only one pin/marker but without on tap description facility and we required that blue pin/marker.

    Please help
  • Ah ... in that case, you could do something similar to the current demo map app's searchResults() function to display your mock data when the map loads.

    Make sure you have your onLoaded event defined:
    {name: "map", kind: "BingMap", fit: true, onLoaded: "setPins", options: {showDashboard: false, showScalebar: false}, credentials: "your-credentials-here"}

    Then when your map is loaded, it should call setPins(), which is where you will load your mockdata & send it to searchResults():
    var loc = {
    	results: [
    		{ Latitude: 37.280251416534774, Longitude: -122.04357910156251, Title: "Company Name 1",  Address: "Company Address 1" },
    		{ Latitude: 38.280251416534774, Longitude: -123.04357910156251, Title: "Company Name 2",  Address: "Company Address 2" }
    this.searchResults(this, loc);

    Here, I'm calling the default searchResults() function that is used to display search results.
    searchResults: function(inSender, inResponse) {
    	var r = inResponse.results;
    	for (var i=0, item; item=r[i]; i++) {
    		var p = this.$.map.createPushpin(item.Latitude, item.Longitude, {
    			icon: "images/poi_search.png", height: 48, width: 48, text: String(i+1),
    			textOffset: new Microsoft.Maps.Point(0, 7)});
    		p.item = item;
    		Microsoft.Maps.Events.addHandler(p, 'mouseup', enyo.bind(this, "openInfobox"));
    		!i && this.$.map.setCenter(item.Latitude, item.Longitude);

    Let me know how it works out.
  • Hi Germboy,

    I have succeeded to get default Pin onload event. But now i am in another problem and that is,

    I want to turned off all the default Pin on another event, please help me how could i hide all these PIN on another event call

    Please help me...
Sign In or Register to comment.