Prerequisites

Map Pilot is a helper tool for Google Maps users. This page will show you how to interact with the tool through the javascript library. In this section we will present the elements that are needed to work with the library.

Google Maps

You need to understand how Google Maps works before worrking with Map Pilot. Please follow the Maps JavaScript API for more details.

As Map Pilot is based on Google Maps Javascript Api, you will need to follow its security rules to create your configuration. Follow the folloging Usign API Keys documentation to create and secure your API key.

Tools

You don't need any particular tool for using our JavaScript library. Map Pilot is written in pure Javascript without any framework. A simple text editor is enough to work. Use your favorite IDE to comply with your company environment.

Licence

You will need a Map Pilot Locator subscription to use the JavaScript Library. You can find in the User documentation more details about subscription. With that subscription you are granted to use the library in the respect of the current documentation.

Map Pilot JavaScript library

In this section we will continue with our project presented in the user docmentation. We will realize a web page presenting the map with our objects. We will add a filtering control on the map to demonstrate the interaction capabilities.

Setup the map

The first step is the JavaScript import in the page. Inside the the HTML code, you need to create a div element, insert the .js package and initialize the map :

The map object is a Google Maps Javascript object. Please refer to Google documentation for more details about integration, styling and callback management.

To create the map, you will need to instantiate a MapPilot object. This is the first

Here are the available options :

• apiKey (mandatory) : key of the map configuration. You can find this value in the URL of the configuration when using Map Pilot studio portal.
• activeProfile (optional, default = prod) : useful when you are working on a custom imtegration.
• mapDivId (optional, default = map) : this value represents the div in your HTML page. the javascript code will populate this div with the Google Map controled by Map Pilot.
• mapId (optional) : use this parameter to set a different style for the Google Map. You can visit the Google Maps developer site for more information about this feature.
• youmapsApiKey (optional) : If you need to use Youmaps for geocoding, directions or Places, you will set here the API key set for Youmaps API. Youmaps will use internally a dedicated Google Maps API key to process API calls from the cache.
• activeListing (optional, default = false) : you can set this parameter to true to display insithe the div a list of items. This list will represent the content of the map.
• debug (optional, default = false) : set debug to true if you want to display in the developer console debugging informations.
• zoomLevelOnClick (optional, default = 10) : when you click on a cluster, the map will be set to that zoom level, and centered on the market position.
• zoomLevelOneLocalMarker (optional, default = 17) : zoom level to apply when you add 1 local marker, with adaptDisplay option.
• maxClusterZoom (optional, default = 20) : zoom level from which you won't display clusters, whatever the number of markers with the same geocode prefix.
• searchType (optional, default = 'elastic_search') : for special integrations we can provide a particular search engine, like firestore. This option wille lead to the usage of this engine. Contact us for more details about this feature. Possible values are firestore, elastic_search or custom.
• searchUrl (optional) : this value is used when searchType=custom. In that particular case, the data is stored outside Map Pilot infrastructure. You need to provide an API that will receive data load requests. The object sent by the Javascript API contains filtering and paging information. Contact us for more details about this feature.
• initialFilters (optional) : list of the filters to apply for the first map load. See Manage Filter Items documentation for more informations.
• callback (optional) : you can give a function name that will be called after the map is initialized.

Interact

When the map is created and initialized, you can interact with the JavaScript object. In our example, the object is named mapPilot and is an instance of MapPilot JavaScript class.

Interactions allow the user to change the display, filter the data, act on objects listing, etc.

Update display type

You can modify the kind of display, depending on what you want to see on the map. By default, you will se the value defined in the Map Pilot studio. You can force the display programmatically by calling the function :

Manage filter items

You can integrate basic filtering from Map Pilot studio, based on labels and natural text search, or based on the type of data defined by the field style.

If you need something different (based on one or more specific fields, based on a particular geo area), then you have to control the filters by javascript functions. Map Pilot offers several functions to act on filtering :

Please note that filter items and fulltext search act separately. If you clear every filter item, Map Pilot keeps the fulltext criterion active. You need a second call to delete or modify it.

Manage local data

Map Pilot can be used to display local data (created locally, with no server storage). This option let you define the representation in Map Pilot studio, and then easily display custom information.

The following code snippet shows you how to display local data, and interact with your Map Pilot map. For more details about the marker object, please read reference part of the documentation.

Change display params

Coming soon...

Callbacks

In this section we will see how to react when something appears in Map Pilot. You will learn how to catch the events and make something on it.

Google Maps events

The first option available is getting Google Maps standard events. Please read the public Google documentation to get more informations. You will learn :

• How to add a listener on the map or a specific object
• What are the standard events available in Google Maps

Map Pilot events

In addition to Google Maps events, we have added events dedicated to content management. When something appears on the map, we generate a CustomEvent with the relevant information needed to treat the information by the program.

Example of event catching :

Please see reference section for details on available events.

Reference

In this section you will find general informations about Map Pilot javascript API. Constants definitions, objects details and everything about how to call Map Pilot functions.

Objects

In this section we will give details about all the objets involved in the different inputs or outputs of the Map Pilot JavaScript API.

Filter

A filter definition is used to retrieve specific data. In that section we present the fields of the objetc, the signification and the possible values.

Marker

A marker is an element representing a PoI (Point of Interest) to be displayed on the map. This element contains geo marker informations such as address, long/lat or geohash. It also contains customer specific data in a map structure called props.

Constants

In this section we present the different lists of constants used by Map Pilot.

List of events

Library details

In this section we will provide all the information relative to Map Pilot that can not be categorized.