RadMap exposes the Kendo Map client-side events in its markup (and, respectively, code-behind), via the inner tag (class). Map.center() //a simple array is used as argument Negative values are west of the Greenwich meridian Var longitude = 20 //this can be a float number. We can do this by right-clicking on the \Scripts directory within our project, and then choose the "Add->New Item" menu command, select the JScript item, and name it "Map.js".īelow is the JavaScript code we'll add to the Map.Var latitude = 30 //this can be a float number. Let's now create the Map.js file that we can use to encapsulate the JavaScript functionality for our map (and implement the LoadMap and LoadPin methods above). The blocks will execute when the view is rendering on the server – and so the output of the HTML will just end up with embedded JavaScript values (for example: var latitude = 47.64312 ). This is a useful technique to output dynamic values that can be used by client-side script (without requiring a separate AJAX call back to the server to retrieve the values – which makes it faster). Notice how we are using a server-side block within the client-side script block to embed the latitude and longitude of the Dinner we want to map into the JavaScript. The second function is a callback event handler that adds a pin to the map that identifies a location. It calls a LoadMap() helper function that we'll define within our Map.js script file to load the virtual earth map control. The first function uses jQuery to wire-up a function that executes when the page is ready to run client-side script. We then have an embedded block that contains two JavaScript functions specific to this view. The element is the HTML container that Virtual Earth will use to host the map. The second reference points to a map.js file that we will shortly create which will encapsulate our common Javascript mapping logic. The first reference points to the Microsoft Virtual Earth 6.2 mapping library. We'll then update the Map.ascx file to have the following content: When we click the "Add" button our partial template will be created. We'll name the view "Map.ascx", check it as a partial view, and indicate that we are going to pass it a strongly-typed "Dinner" model class: We can create the map.ascx partial by right-clicking on the \Views\Dinners directory and choosing the Add->View menu command. We'll name this partial view "map.ascx" and create it within the \Views\Dinners directory. To keep our code DRY we'll encapsulate the common map functionality within a single partial template that we can re-use across multiple controller actions and views. We are going to use mapping functionality in several places within our application. This will enable users who are creating, editing or viewing dinners to see the location of the dinner graphically. We'll now make our application a little more visually exciting by integrating AJAX mapping support. NerdDinner Step 11: Integrating an AJAX Map If you are using ASP.NET MVC 3, we recommend you follow the Getting Started With MVC 3 or MVC Music Store tutorials. Step 11 shows how to integrate AJAX mapping support into our NerdDinner application, enabling users who are creating, editing or viewing dinners to see the location of the dinner graphically. This is step 11 of a free "NerdDinner" application tutorial that walks-through how to build a small, but complete, web application using ASP.NET MVC 1.
0 Comments
Leave a Reply. |