Geo-fencing on ASP.NET MVC using Geo-fencing API From Here Technologies.
Introduction
Here we will learn how to do geo-fencing using MVC. A geo-fence is a virtual parameter on google maps or here maps for a real world geographic area. Geo-fencing is a way of creating a boundary in an area to signify whether that area has high crime rate or not for an example.
Goals
- Create a Web Application.
- Add a map on the Web Application.
- Create a Geo-fence using the Geo-fencing API from here technologies.
- Add a marker on the map to show current position/location.
Prerequisites
- Create/Open a Here account.
- Have a basic MVC App created on Visual Studio.
Let’s get started…
Create a Here Account
- Go to http://her.is/mea to open an account.
- On the Here site, click on signup.

3. Once you have clicked on sign up, enter your details and select the Fremium Plan.

4. It will take you to a Review Page, there tick the checkbox to agree to the Terms and Conditions then click on “Start Coding”

5. Once that is done, you will be redirected to the project page where you will have to generate the AppID, AppCode and ApiKey. Click On Generate app on the Javascript option to generate the apikey.

6. You will get a page like this, then copy the appID on Notepad. After that do the same thing for the Apikey.

Now let’s start coding…You must be excited!
- Start up your basic MVC application and go any view of your choice between Index,About or Contact. I chose About.

2. Now add the following html head after the <p> tags to render a map using the Javascript code I will show you.

3. Inside the body tag add the following Javascript code to show your map on the view.

Note: The Api key is the one you copied from your Here account project page.
4. You can change the latitude and longitude coordinates to your respective Location.

5. This is how the map looks like after I have done the above steps.

Note: You can change the coordinates on lat, lng variables, as I am using Durban coordinates.
6. Let’s add a geo-fence in the area in the form of a triangle using the following Javascript code. You need 4 points to make a triangle as your geo-fence, the first and the last one are the same.

Note: You add this Code right after the code to add/render a map in step 4.
7. This is how your map will look like after you have added the code for the geo-fence.

8. We need to upload our geo-fence to the cloud as a zip file using a blob, the following Javascript code will do just that.

Note: The app_id, app_code are the same as the ones we got in step 6 for generating apiKey on the Here website. But we get the app code after clicking generate app_id and app_code.

9. The next step is to add a marker on our map to show a person’s location. Here is the Javascript code for it. Add this code after the code in step 8.

10. This is how it looks like on our map.

Note: The coordinates can be any coordinates as long as they are Longitude and Latitude and the are around the same area as your geo-fence.
11. The following Javascript code will allow us to move our marker to any region on the map, also move into our geo-fence in which it will send a message if we are inside the geo-fence.

12. This is the result of our moved marker on the map. The Marker is inside the geo-fence.

Thank you! I hope you had fun.

