Kintone x OpenStreetMap

Introduction

This article introduces a sample customization using OpenStreetMap and Openlayers, to display maps into Kintone.


In this sample, maps will be displayed on the Record Details and Record List page, pointing to the geographic location recorded inside the attached images.


OpenStreetMap (OSM) is a collaborative project to create a free editable map of the world. Maps from OpenStreetMap are freely available and accessible.
OpenLayers is a JavaScript library for developing dynamic map widgets with tools for displaying and editing geographic information.


Be sure to check the Copyright and license page for the OpenStreetMap license before using it.

 

The customization result

The customization will look like the following when created:

For single images on the Record Details page

If only one image is saved in the record, a map will be displayed with a pin on the geographic location of the image data.

US_01.png

 

US_02.png

For multiple images on the Record Details page

If multiple images are saved in the record, the map automatically adjusts the zoom levels to show all the pins.

US_03.png

 

US_04.png

For images with no location data

If location info cannot be obtained, the following message is displayed.

openstreetmap_nodata.png

For the Record List page

The map is also displayed on the Record List page.

US_06.png

Notes

  • Photos from a smartphone will not include geographic location data if the geolocation settings have been turned off.
  • Photos with reduced image file size may not include geographical location data.
  • Photos taken with the Take Photo or Video option on the Kintone Mobile App and Kintone accessed from mobile browsers do not include geographical location data.

Setting up the Customization

Field settings of the App

First, the Kintone App will need the below field settings:

Field Type

Field Name

Field Code / Element ID

Attachment

Picture

pic

Blank space

 

map

JavaScript/CSS settings

Set the following URL in the Upload CSS File for PC option under the JavaScript and CSS Customization settings.

  • https://js.kintone.com/openlayers/v3.17.1/ol.css

Set the following URLs/files in the Upload JavaScript File for PC option under the JavaScript and CSS Customization settings.

  • https://js.kintone.com/jquery/2.2.4/jquery.min.js
  • https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.1.0/load-image.all.min.js
  • https://js.kintone.com/openlayers/v3.17.1/ol.js
  • The sample code below, saved as a .js file with UTF-8 encoding

Finally

Various features can be used with OpenLayers are listed on the OpenLayers website. Try utilizing these features to build out a customization feature set for Kintone usage.

Was this article helpful?
0 out of 0 found this helpful
Do you have any questions or issues related to this article?
Please share your views with us in the Community forums!