Trying to add pushpins using Webmatrix Map Helper RSS

• • Reply
  

  mudmaps

  Member

  5 Points

  27 Posts

  Trying to add pushpins using Webmatrix Map Helper

  Mar 20, 2013 10:46 PM|LINK

  My ultimate goal is to add pushpins from a SQL database into a Map but as I'm finding this immensely difficult to do I thought I'd try and understand the basics of the Webmatrix Map Helper by working it sep by step.

  I can get a basic map displayed with the following code

  @{
  Layout = "~/_MapLayout.cshtml";
  Page.Title = "Schools Map";
  }
  
  @section Scripts
  {
  <script type="text/javascript" src="~/Scripts/jquery-1.9.1.min.js"></script>;
  <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>;
  }
  
  <div id="content">
                     @Maps.GetGoogleHtml(
                     latitude: "-25",
                     longitude: "152.5",
                      width: "600",
                      height: "600"
                     
                            )
     </div>

  But now I'd like to add a single pushpin.

  Does anyone know the syntax needed to add a pushpin onto the map using the helper?

• • Reply
  

  Mikesdotnett...

  All-Star

  154818 Points

  19853 Posts

  Moderator

  MVP

  Re: Trying to add pushpins using Webmatrix Map Helper

  Mar 21, 2013 05:40 AM|LINK

  Have you read this article?

  http://www.microsoft.com/web/post/using-the-bing-maps-api

  It contains the syntax you need.

  Regards, Mike
  Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter
• • Reply
  

  mudmaps

  Member

  5 Points

  27 Posts

  Re: Trying to add pushpins using Webmatrix Map Helper

  Mar 21, 2013 07:21 AM|LINK

  Yes I have but I'm trying to use the Helper.

  The reason I'm using the Helper is that other Wematrix Helpers easily display information from database tables and I can't understand all this complex coding and mixed messages around the Bing Maps API.  Besides, while I'd love to use Bing it doesn't consistently display and so I'm using Google.

  The lack of info on how to use the Helper isn't helping either hence the simple question about the syntax of the Helper.

• • Reply
  

  Mikesdotnett...

  All-Star

  154818 Points

  19853 Posts

  Moderator

  MVP

  Re: Trying to add pushpins using Webmatrix Map Helper

  Mar 21, 2013 09:26 PM|LINK

  Sorry - didn't read your question carefully enough.

  The GetGoogelHtml method takes the following parameters (with defaults specified):

  string location = null,
  string latitude = null,
  string longitude = null,
  string width = null,
  string height = null,
  int zoom = 14,
  string type = "ROADMAP",
  bool showDirectionsLink = true,
  string directionsLinkText = "Get Directions",
  IEnumerable<MapLocation> pushpins = null

  The MapLocation type has two properties: Latitude (string) and  Longitude (string). So you need create a MapLocation object for each pushpin:

  @{
      var pushPins = new List<Maps.MapLocation>();
      pushPins.Add(new Maps.MapLocation("51.501925", "-0.141847"));
  }

  Then you pass that in to the GetGoogleHtml method:

  @Maps.GetGoogleHtml(longitude: "-0.141847", 
                      latitude: "51.501925", 
                      width: "400",
                      height: "400",
                      pushpins: pushPins)

  
  (Buckingham Palace, by the way)
  
  

  Regards, Mike
  Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter
  • Marked as answer by mudmaps on Mar 22, 2013 12:35 AM
• • Reply
  

  mudmaps

  Member

  5 Points

  27 Posts

  Re: Trying to add pushpins using Webmatrix Map Helper

  Mar 21, 2013 09:37 PM|LINK

  You little ripper!

  That's what I've been looking for.

  Thank you soooooo much!

• • Reply
  

  mudmaps

  Member

  5 Points

  27 Posts

  Re: Trying to add pushpins using Webmatrix Map Helper

  Mar 22, 2013 12:38 AM|LINK

  And if anyone is interested here is my working Webmatrix-Razor code that displays basic pushpins from the SQL Express Database.

  @{
  Layout = "~/_MapLayout.cshtml";
  var pushPins = new List<Maps.MapLocation>();
  }
  
  @section Scripts
  {
  <script type="text/javascript" src="~/Scripts/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
  }
  
  @{
  var db = Database.Open("StarterSite");
  var selectCommand = "SELECT * FROM Schools WHERE SchoolLon != 'null' ";
  var selectedSchool = db.Query(selectCommand);
  var schoolgrid = new WebGrid(source: selectedSchool);
  }
  
  
  
  
      <h1>@Page.Title</h1>
       @foreach(var row in selectedSchool)
                 {
                     pushPins.Add(new Maps.MapLocation(@row.SchoolLat,@row.SchoolLon));
                    }
        <div>
                     @Maps.GetGoogleHtml(
                     latitude: "-27",
                     longitude: "152.5",
                      width: "600",
                      height: "600",
                      type: "roadmap",
                      zoom: 8,
                      pushpins: pushPins
                            )
          </div>

  and the _MapLayout.cshtml is

  <!DOCTYPE html>
  <html lang="en">
  <head>
          <meta charset="utf-8" />
  </head>
  <body>
  
   @RenderSection("Scripts", required: true)
   @RenderBody()
  
  </body>
  </html>

  
  
  
  

• • Reply
  

  mudmaps

  Member

  5 Points

  27 Posts

  Re: Trying to add pushpins using Webmatrix Map Helper

  Mar 22, 2013 08:08 AM|LINK

  Having now read through the Helper code a bit it looks like adding a pushpin is about the limit of the Helper.

  It appears the Helper doesn't cater for Infoboxes, titles, descriptions, images or URL links as you might want to include in a database driven map.

  If anyone knows better please let me know.

  cheers