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.
Be sure to check this page for the OpenStreetMap license before using it.
The customization result
Let's start by seeing what the customization would look like.
For single images on the Record Details page
If you save only one image in the record, a map will be displayed with a pin on the geographic location of the image data.
For multiple images on the Record Details page
If you save multiple images in the record, the map automatically adjusts the zoom levels to show all the pins.
For images with no location data
If location info cannot be obtained, the following message is displayed.
For the Record List page
The map is also displayed on the Record List page.
- Photos from your 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 Code / Element ID
- The sample code below, saved as a .js file with UTF-8 encoding
Various features you can use with OpenLayers are listed on the OpenLayers website. Try utilizing these features to build out a customization feature set for your kintone usage.