# Quick Start

Display geographical data on a map using the MVC FlexMap control. Learn more about the MVC FlexMap control in ASP.NET MVC documentation.

## Content



The quick start guides you through the steps of adding the FlexMap control to your MVC web application, adding a layer to the map and setting the data source of map layer to display the world map. In the following example, we have used [Layers](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.FlexMap-1.Layers.html) property of the [FlexMap](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.FlexMap-1.html) class to set the map layer and added a GeoMap layer to it using the **AddGeoMapLayer** method. In addition, we specified the data source for the map layer using the [Url](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.MapLayerBase-1.Url.html) property.

![MVC FlexMap with geomaplayer](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/flexmap-with-layer.png)

To accomplish this, follow these steps:

## Create an MVC Application

Create a new MVC application using the ComponentOne or VisualStudio templates. For more information about creating an MVC application, see [Configuring your MVC Application](/componentone/docs/mvc/online-mvc/CreatingaNewProject) topic.

## Add FlexMap

To add the FlexMap control to your application, add **C1.Web.MVC** reference and follow these steps:

### **Add a new Controller**

1.  In the **Solution Explorer**, right click the folder **Controllers.**
2.  From the context menu, select **Add | Controller**. The **Add Scaffold** dialog appears.
3.  In the **Add Scaffold** dialog, follow these steps:
    1.  Select the **MVC 5 Controller - Empty** template.
    2.  Set name of the controller (for example: `FlexMapController`).
    3.  Click **Add**.

### **Add a View for the Controller**

1.  From the **Solution Explorer**, expand the folder **Controllers** and double click the FlexMapController`.`
2.  Place the cursor inside the method `Index()`.
3.  Right click and select **Add View**. The **Add View** dialog appears.
4.  In the **Add View** dialog, verify that the View name is **Index** and View engine is **Razor (CSHTML).**
5.  Click **Add** to add a view for the controller. Copy the following code and paste it inside **Index.cshtml**.
    
    ```razor
    @using System.Drawing
    @(Html.C1().FlexMap().Id("flexMap")
            .Header("MVC Map")
            .Height(400)
            .Layers(ls =>
            {
                ls.AddGeoMapLayer()
                    .Url("/Content/data/land.json");
            })
    )
    ```
    

## Build and Run the Project

1.  Click **Build | Build Solution** to build the project.
2.  Press **F5** to run the project. 
	> type=note
	> Append the folder name and view name to the generated URL (for example: http://localhost:1234/**FlexMap/Index**) in the address bar of the browser to see the view.