How to draw a marker on OpenStreetMap

To Use OpenStreetMap and draw marker we can use a javascript library, there’s a lot out there but for this example well use leafletjs.com. It’s open source, mobile friendly and lightweight and has a complete features most developers need.

Leafletjs

Now head over to the website and follow the quick start tutorial, that should be enough to get started. After you follow the tutorial, you can create a simple web application with ASP.NET Core with MVC template (follow this tutorial). Add a new controller, name it MapController then create Index.cshtml view for it. Inside the View, include the leafletjs css style and its script inside the head section of the page to initialize the map and don’t forget to put a div element with a certain id inside the body element. This div element is where you want your map would be.
The web application would have a feature like this: everytime a user enter a text inside the search box and click on a search button, we will search the database for the airport’s name. By calling on the MapController Search action via HttpGet Ajax Request. Once the result came out with the result of Airport[], the app will add marker(s) and put the result on the map. So the user can see the airports data on the map by putting a marker at its location.

Airport Data

Since this application will fetch a Geolocation data in a form of Latitude and Longitude, for that we’ll create a table with Columns: Airport Name, Latitude, Longitude, Country and City. Create the Table called AIRPORTS and insert the data from openflights.org (download). The additional information like Country and City is for clarity only, we dont want to only show the airports name and its location because it would be confusing for the user. A country and a city where the airport is located will add more information for the user. We’ll build simple map, with a textbox for searching an airport by its name.
This sql command is for creating the Table :

Create table AIRPORTS(ID INT PRIMARY KEY IDENTITY(1,1), Name varchar(350) not null,Code varchar(10), Latitude varchar(50) not null, Longitude varchar(50) not null,City varchar(50) not null, Country varchar(50) not null);

Dapper

To access the data from database, we’ll use a simple object mapper for .NET called Dapper. Using this library we don’t need to manage the SqlConnection, we can execute a query and map the results into a strongly typed list. Or execute a command (insert, update, delete), a stored procedure with a sweeping fast query time. This is one of my favorite nuget package, and I use it regularly on many different projects.

ASP.Net Core

The web application itself has no authentication, let it open so anyone can access it. To make things easier on the data access, create a Repository class and called it AirportRepository. Using Dapper we only need to declare a private member for the SqlConnection and a constant string for the ConnectionString. The repository only have one method for searching the airport data by its name.

Don’t forget to add a private member of AirportRepository inside MapController and add a Constructor with one parameter which took a Repository instance. This is dependency injection via Constructor, it’s a common pattern that developers often uses its also a built in feature that comes with asp.net core by design. In order for the Constructor to get an instance of the Repository, we have to register the Repository as dependency on Startup.cs, you can read more about dependency injection in asp.net core here.

That’s it, a short introduction for using Openstreetmap and leafletjs in you web application as an alternative of googlemaps. You can download the source code here.