OpenStreetMaps Location Picker

Introduction

This article features the OpenStreetMap (OSM) Location Picker Plugin created by Mokxa Technologies, LLC.

The OpenStreetMap (OSM) Location Picker Plugin enhances Joget’s standard form data entry by providing a visual, interactive map interface directly within the Joget Form Builder. Instead of manually typing coordinates or addresses, users can click or drag the pin on a live map to instantly capture precise location data. Powered by Leaflet.js and OpenStreetMap, this plugin provides geolocation capabilities without the need for paid third-party mapping API keys.

Key Features:

• An interactive map displays directly inside Joget forms.
• Automatically captures precise Latitude and Longitude coordinates via mouse click or dragging the map marker.
• Completely free and open-source map tiles via OpenStreetMap (No API keys or billing accounts required).
• Configurable default zoom levels and initial center coordinates tailored to your business region.
• Lightweight data storage (saves coordinates as a simple comma-separated string in the database).

Plugin Information

Plugins Available in the Bundle:

• OSM Map Picker (Form Element)

Plugin details:

• Supported Databases: MySQL, PostgreSQL, Oracle, MS SQL Server
• License: Apache License, Version 2.0
• GitHub: OSM Location Picker
• This plugin bundle is compatible with Joget DX 9 and onwards.

Get Started

Prerequisites

• Joget DX 9 Enterprise or Community Edition.
• Developer or administrator access with permission to manage plugins and apps.

Where to get the plugin

You can download this plugin from the Joget Marketplace.

How to install

1. Click Download on the Joget Marketplace to get the osm-location-picker-1.0.0.jar file.
2. Go to your Joget localhost or server. In the Joget Console, go to Admin Bar > Systems Settings > Manage Plugins and click the Upload Plugins button.
3. Under Upload Plugin, select the plugin .jar file you downloaded and click Upload.
4. You can now view your new plugin in your Form Builder.
   

How to use it

1. Open up a form in the Form Builder.
2. Drag and drop the OSM Map Picker element from the Custom Plugins category on the left palette onto the canvas.
   
3. Click the newly added OSM Map Picker element to open its configuration properties.

Configure OSM Map Picker Properties

Fill in the following fields:

• Label: The element label to be displayed to the end-user (for example, "Delivery Location").
• ID: The element ID. By declaring it as a name, a corresponding database table column will be created.
• Default Latitude: Configurable initial center latitude coordinate tailored to your business region.
• Default Longitude: Configurable initial center longitude coordinate tailored to your business region.
• Default Zoom Level: The default zoom level to ensure the map automatically centers on your preferred city or region when the form loads.

Expected Outcome

After configuring the plugin, open the form in the live application UI. Interact with the map by clicking a new location or dragging the marker. The plugin automatically captures precise Latitude and Longitude coordinates. When you save the form, the coordinates are stored as a simple, lightweight, comma-separated string in the database and can be viewed when you open the form in edit or read-only modes.

Related Video Tutorials

Download Plugin

Download the plugin from the Joget Marketplace.

Download Sample App

Credits

This plugin and documentation are created by Mokxa Technologies, LLC.