Rendering HERE Map using Ruby on Rails
Introduction
Web application development has evolved over the course of time. The major reason is the emergence of new frameworks in different languages. It gives developers the freedom of creating websites without any hassle. One such open-source server-side web application framework is Ruby on Rails (or Rails) that is written in the Ruby programming language.
Ruby is an interpreted scripting language known for quick and easy object-oriented programming.
In this blog, we are going to create a web application that will show a HERE map on a browser. Let us get started!
Prerequisite
Your machine should have Ruby language and Ruby on Rails framework on it for implementing web applications. And if you haven't done so yet, you will need to sign up for a Freemium account on developer.here.com. Once you signed up, you can generate your free API key and get 250.000 free transactions every month.
Before moving to the coding part, make sure you have Ruby and rails on your machine. Run following commands on command prompt or terminal:
- ruby -v
- rails -v
If you are getting version numbers as a response for both the commands, then we are good to move forward, else you need to install them properly.
Creating a new app
The first thing required is to create an application, to generate it, run this line in your terminal or command prompt:
- rails new map_app
The command will successfully generate a new application, map_app and if you investigate, you will find a lot of files and folders inside it. Navigate to the new directory by running the command:
- cd map_app
We can run our application, by entering:
- rails s
This command starts our application, you can view it by opening a browser and entering http://localhost:3000. You should see a welcome page.
Editing welcome page
When we go to http://localhost:3000 we see the Rails welcome page. We are going to change this default page to our own page. To do so, we need to generate a new controller called maps. Run this line in your command prompt or terminal to generate a new controller.
- rails g controller maps
This command should have created a bunch of files for us.
At this point, we usually decide whether we need an IDE or use any text editor for coding. I prefer an IDE, hence using Visual Studio Code.
Open file maps_controller.rb located in apps/controllers folder.
- apps/controller/maps_controller.rb
We will define our home page here. The file contains MapsController class which inherits from the Applicationcontroller class. We will define a public method named “index”
class MapsController < ApplicationController
def index
end
end
Next, we need to define a route. Routing is a way to redirect incoming requests to controllers and actions. We have already created a controller. All we need to do is define it in routes.rg file located inside the config folder.
- config/routes.rb
Add ‘root to:'pages#index'’ lines to the file
Rails.application.routes.draw do
root to: 'maps#index'
end
pages#index calls the MapsController and its public method index. Where hash symbol (#) represents a method.
Now, we need to create a template, a page that will ultimately show a map. Go to app/views/maps and create a index.html.erb file. In this file, we can write HTML and Embedded Ruby code.
- app/views/maps/index.html.erb
Write a simple code to see how it works.
<h1> HERE Maps </h1>
Open http://localhost:3000 in the browser, you should see “HERE Maps” instead of the Rails welcome page.
Our very basic template is ready. From here on, we can start introducing new things. Let us edit the template to show a map.
<html>
<head>
<meta name="viewport" charset="UTF-8" content="initial-scale=1.0, width=device-width" />
<%= javascript_include_tag 'https://js.api.here.com/v3/3.1/mapsjs-core.js' %>
<%= javascript_include_tag 'https://js.api.here.com/v3/3.1/mapsjs-service.js' %>
<%= javascript_include_tag 'https://js.api.here.com/v3/3.1/mapsjs-ui.js' %>
<%= javascript_include_tag 'https://js.api.here.com/v3/3.1/mapsjs-mapevents.js' %>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css"/>
</head>
<body>
<div style="width: 100vw; height: 100vh" id="mapContainer"></div>
<%= javascript_pack_tag 'my_js' %>
</body>
</html>
Add the above HTML code in index.html.erb file. The javascript_pack_tag helps in importing a specific JS file, in our scenario, my_js.
Adding JavaScript
We need to add a JavaScript file in the packs' directory. The javascript_pack_tag should also refer to the name of the JavaScript file you created.
Create a JavaScript file named my_js.js in the app/javascript/packs directory
- app/javascript/packs directory/my_js.js
var platform = new H.service.Platform({
apikey: "HERE_API_KEY"
});
const lat = 52.5;
const lng = 13.4;
// Obtain the default map types from the platform object:
var defaultLayers = platform.createDefaultLayers();
// Your current position
var myPosition = {lat: lat, lng: lng};
// Instantiate (and display) a map object:
var map = new H.Map(
document.getElementById('mapContainer'),
defaultLayers.vector.normal.map,
{
zoom: 11,
center: myPosition
});
var ui = H.ui.UI.createDefault(map, defaultLayers, 'en-US');
var mapEvents = new H.mapevents.MapEvents(map);
var behavior = new H.mapevents.Behavior(mapEvents);
const marker = new H.map.Marker({lat: lat, lng: lng});
map.addObject(marker);
marker.addEventListener('tap', function(evt) {
// Create an info bubble object at a specific geographic location:
var bubble = new H.ui.InfoBubble({ lng: lng, lat: lat }, {
content: '
Ruby on Rails
'
});
// Add info bubble to the UI:
ui.addBubble(bubble);
const marker = new H.map.Marker({lat: lat, lng: lng});
map.addObject(marker);
});
In the above code, you need to provide your API key in place of HERE_API_KEY. Open http://localhost:3000 and you will get a HERE map with a marker over Berlin, Germany. You can change the lat and lng value in the my_js.js file to get the location of your choice.
This concludes our blog on rendering HERE maps using Ruby on Rails. Now you have all the ingredients to quickly build a location-based web application.
Have your say
Related articles
Sign up for our newsletter
Why sign up:
- Latest offers and discounts
- Tailored content delivered weekly
- Exclusive events
- One click to unsubscribe