Bing Maps MVC4 Editor/Display templates

A few days ago Scott Hanselman posted about some cool mapping in mvc to add support for the DbGeography spatial types in MVC 4 when your are scaffolding the models and generating the views. You can read all about how Scott built a model binder for the datatype and created a editor and display template for it too using Google maps in his blog post.

In the last weeks in some of my spare time i m building a idea that used these kind of features, and it was also a mvc website, but i didn’t use all this good stuff of model binders and templates, i did some javascript code and i used Bing Maps with the brand new metromodern theme.

Yesterday i thought i should try and add some of my code to the project that Scott is calling SpatialFun so you can opt in using Bing Maps and also get a little better user experience when editing/creating using the map for  the DBGeography fields.

Some of the features i added were:

  • The ability do drag a pushpin and update the location on the input field.
  • Search module – let’s you reverse geocode the LatLong selected on the map and show a infobox with the readble address of the location your are dragging the pushpin.

Please take a look at my Bing Maps branch feel free to fork and submit pull requests.

I m looking forward to get some feedback, new ideas as well as improve the current javascript code.

 

 

 


Comments

2 responses to “Bing Maps MVC4 Editor/Display templates”

  1. Hi ruimarinho
    Thanks – this is great!
    Two bugs so far:
    1: You don’t allow a new place to be created on the map in the Create view.
    2: In edit view, if you zoom in, then drag the marker, the zoom level is reset to what it was before.
    But I like this – it is a great idea.
    James

  2. ruimarinho Avatar
    ruimarinho

    Hi James, thanks for the feedback.
    Will get into it and update in github

    thanks
    rui

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.