HERE Maps API for JavaScript in Your Jupyter Notebooks

Sachin Kharude
Geek Culture
Published in
4 min readMar 18, 2021
Here Map Widget for Jupyter

Visualizing geospatial data on maps is a very important aspect of geospatial analysis. As Jupyter Notebooks have become the de-facto standard for data science, data analysis, research, and development hence using HERE Maps API for JavaScript in Jupyter Notebooks makes geospatial visualization more intuitive and fun!

The HERE Maps API for JavaScript is a set of programming interfaces that enable developers to build web applications with feature-rich, interactive HERE Maps at their center.

Today we introduce you to the open-source python package here-map-widget-for-jupyter, it combines the capabilities of Jupyter widgets, and HERE Maps API for JavaScript, with these combined capabilities Here Map widget for Jupyter enables interactive maps and geospatial data visualization in your Jupyter Notebook. Here Map widget for Jupyter API maps to that of HERE Maps API for JavaScript, bringing its core features to Jupyter Ecosystem.

Some of the important features of Here Map Widget for Jupyter:

  • Interactive HERE Map in Jupyter Notebooks
  • Tilt, rotate, and 3D Map appearance
  • Integration with HERE Location Services
  • Integration with HERE Data Hub
  • HERE Vector Tiles
  • HERE Raster Tiles

Prerequisites:

The HERE Maps API for JavaScript has API-driven architecture hence to access various HERE Maps APIs you need an API key for authentication. An API key is freely available from the HERE developer portal. Instructions to get the API key are mentioned here.

Installation:

To install here-map-widget-for-jupyter:

using conda:

$ conda install -c conda-forge here-map-widget-for-jupyter

using pip:

$ pip install here-map-widget-for-jupyter

Let’s dive into examples one by one:

  1. Map:

Visualizing map is very simple, create an object on Map class as shown below:

import os
from here_map_widget import Map
api_key = os.environ["LS_API_KEY"] # Read API key from environmentm = Map(api_key=api_key, center=[52.5147, 13.3984], zoom=13)m

You can zoom, pan, and tilt the map.

map

2. Basemaps

Basemaps are provided using HERE raster tiles, vector tiles, and map tile APIs as shown in the below code snippets:

import os
from here_map_widget import Map, DefaultLayers, DefaultLayerNames, Platform
api_key = os.environ["LS_API_KEY"]default_layer = DefaultLayers(layer_name=DefaultLayerNames.raster.satellite.map)m = Map(api_key=api_key, basemap=default_layer, center=[52.5147, 13.3984], zoom=13)
m
Basemaps

3. Markers:

When you have a set of POIs then you can add that as point markers on the map. The below example shows how a single point can be represented on the map using Marker.

import os
from here_map_widget import Map, Marker
api_key = os.environ["LS_API_KEY"]
m = Map(api_key=api_key, center=[52.53075, 13.3851], zoom=12)
marker = Marker(lat=52.53075, lng=13.3851)
m.add_object(marker)
m

Apart from the default marker, you can have a custom icon for your marker by using the Icon object also here map widget for jupyter also supports SVG and DOM markers.

markers

Here Map widget for Jupyter has three elements that can be added to the top.

I. Objects:

Objects are geometries such as:

  • Point
  • LineString
  • MultiLineString
  • Polygon
  • MultiPolygon
  • Rectangle
  • Circle
  • Polyline

II. Layers:

Layers are overlays that are added on the top of the map. Here map widget for Jupyter supports the following layers:

  • GeoJSON
  • GeoDataFrame(Geopandas DataFrame)
  • Data Hub Space Layer
  • Choropleth
  • KML
  • HeatMap
  • MarkerCluster

MarkerCluster Layer:

In the below example we add all the airports in the world as Marker Cluster layer on the map.

markers_cluster

Choropleth Layer:

Below is an example of the choropleth map based on the unemployment index of states in the USA. Unemployment data is in CSV format and is used to define the choropleth layer.

choropleth

let’s extend the above example and create an interactive map, on hovering the mouse pointer over the state, the name of the state will be shown on the top left corner of the map with the help of ipywidgets and by registering on_hover callback on the Choropleth layer.

interactive

III. Controls:

Controls provide various controlling functions.

  • FullScreen
  • Map Settings Control
  • Measurement
  • Scale Bar
  • Search
  • Split Map control
  • Zoom Control
  • Zoom Rectangle Control
  • Widget Control

Widget control:

With the help of widget control, you can add ipywidgets on the map and link the traits of the map to control the map. In the below example we have linked the heading trait for the map to IntSlider of ipywidgets so we can rotate the map using the slider.

In this post, I have shown very basic examples of the Here Map widget for Jupyter you can do some advanced GIS functionalities using the widget.

Here map widget for Jupyter has extensive documentation and more advanced examples. Below are some important links for more information on the widget.

--

--