Pin Address Locations on Embedded Maps
This article uses Leaflet to convert street addresses into geographical locations. The locations are pinned onto maps that are embedded into records of Kintone Apps.
This example illustrates how the Leaflet library can be used to make a Lunch Map App on Kintone. The App keeps track of various restaurant locations around the office. Each record contains information regarding a restaurant. A map displaying the geographical location of the restaurant shows up when viewing the Record Details page. There is an option to add a reference point. In this example, the Kintone San Francisco office is the reference point.
This example uses the following libraries
- LocationIQ : a Maps & Geocoding platform provider.
- OpenStreetMap : a collaborative project to create a free editable map of the world.
The customization displays a map on the header of the Record Details page. The location placed in the Address field is pinned on the map.
The reference point is also pinned, and can be viewed if the address is close, or the map is zoomed out.
Create the Form
Create an App that includes the following fields.
|Field Type||Field Name||Field Code|
Set the Libraries
Generate a LocationIQ API Token
LocationIQ's Forward Geocoding API is used to convert street addresses to geographical coordinates.
- Create an account on the LocationIQ Registration Page
- Navigate to LocationIQ Access Token Create page and create an Access Token. Follow the instructions on Location IQ's docs for more details.
Insert_Access_Token_Here with LocationIQ's access token.
After saving the settings and clicking on Update App, navigate to the Record Details page. A map should be displayed in the header of the Record list.
The event is triggered when the Record Details view is displayed. The event object is passed as an argument so that details of the record, such as the Address and Place values, can be accessed. For more information, refer to the Kintone Event Handling API article.
The getHeaderMenuSpaceElement method fetches the header space in the Record Details view as an element object.
div element is created to contain the map, and is appended to the Header Menu Space Element. The
style.height attribute is set to 300px, a length suitable for displaying the map.
Creating the Map View
The first line in this snippet instantiates a map and attaches it to the header space
div by referencing its id 'kintone'.
setView(center, zoom, options) is a method that centers the map view around
center, a set of geographical coordinates. A zoom level is specified in the second parameter.
tileLayer(urlTemplate, options) adds raster tiles to the map, i.e. the actual geographical details of the place being mapped. This example uses
The first layer adds generic geographical features such as rivers and roads, while the second adds labels. The
maxZoom attribute restricts the maximum zoom-in level for the map view. The
zIndex attribute controls the vertical stacking order of the two overlaying map layers. This ensures that labels will be superimposed above the generic geographical features.
L.marker(LatLng) is used to place a pin at the location specified in the
In this example, the
referencePointGPS variable is placed in the
L.marker() while holding the geographic coordinates of Kintone USA.
bindPopup() specifies the label of the popup. The
autoClose options ensure that multiple popups can appear simultaneously.
openPopup() automatically displays the markers' label by default.
To add a reference point, another variable is created with the value
geographic_coordinates_variable parameter is set as the GPS coordinates. Write the coordinates in the format of: [Latitude, Longitude] (e.g. [37.789808, -122.401767])
forwardGeocode(name, address, map) function
Leaflet requires addresses to be geocoded (converted to geographical coordinates) for processing. The LocationIQ API is required to accomplish this conversion. After UTF-8 encoding the address, kintone.proxy() is used to make a GET API call with the address included in the URL.
kintone.proxy() response is returned as a string and
JSON.parse() is used to convert it into an array of objects. LocationIQ returns the coordinates as strings and
parseFloat() is used to convert them to floating-point numbers.
- Leaflet: Docs
- Leaflet: Tutorials
- Leaflet: Plugins
- Search by LocationIQ.com
- LocationIQ: Docs
- LocationIQ: Demo