Enable Dark Mode!
integrate-mapbox-with-odoo.png
By: Varghese Thomas

Integrate Mapbox With Odoo

Technical

We are changing the way people move around the cities and explore the world. Every actions and experience are updated on various social platforms at the earliest. The technologies like mapbox enable you to add location features like maps, search and navigation into any experience you create in miscellaneous platforms. 

Mapbox is one of the largest providers of custom online maps/ location data platform for web applications and mobiles. Integrating such technology to Odoo can definitely take the application to greater functionalities and technicalities. 

It is indeed a great deal and this blog helps you to know how mapbox is integrated to Odoo ERP. The steps go as below:

Creating mapbox access token 

> To get a mapbox access token, firstly make an account in mapbox

> https://www.mapbox.com/signup/

integrate-mapbox-with-odoo-1


After sign in, you get an access key like below. 

integrate-mapbox-with-odoo-2

How to implement in Odoo 

Insert the mapbox CDN link in the XML file CSS and javascript 

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'/>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet'/>

Load the custom javascript  and CSS from your module, let say as map.css and map.js 

<link href='/demo_map/static/src/css/map.css' rel='stylesheet'/>  
<script src='/website_location/static/src/js/map.js'/>

We can easily place the map in the odoo webpage  using the div with map id 

<div id='map'/>

Sample code mapbox.css

body {
  margin: 0;
  padding: 0;
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
Sample code for JavaScript 

mapboxgl.accessToken = 'YOUR-ACCESS-TOKEN-HERE';
var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location
  center: [-74.50, 40], // starting position
  zoom: 9 // starting zoom
});

This gets you with a result like this

integrate-mapbox-with-odoo-3


> One can also enable the advanced features like below by integrating mapbox into Odoo. Have a look at the additional benefits you can derive with.

Marking locations 

integrate-mapbox-with-odoo-4


> We can add custom markers according to your requirement 

Making popup with company info 

integrate-mapbox-with-odoo-5

> We can include company details like company name, contact within popup in the marker 

Map cluster 

integrate-mapbox-with-odoo-6

> If we have a number of markers on the map, we need to add clustering on the map. 
> Each group will display the number of points inside the map. 

Geocoding 

integrate-mapbox-with-odoo-7

> We can add custom geocoding options. We can also limit the geocoding limit based on a country or we can use a box

Adding partner location from odoo 

integrate-mapbox-with-odoo-8


> We can add the partner location using the coordinate value,  based on location. It will directly get displayed on the map.

 

integrate-mapbox-with-odoo-9

Statics
 
integrate-mapbox-with-odoo-10

> We can also monitor the number of map views and geocoding request using mapbox account. 

Mapbox styles 
This application also features the facility to select different styles of the map according to your requirement.

integrate-mapbox-with-odoo-11

Basic

integrate-mapbox-with-odoo-12

Street 

integrate-mapbox-with-odoo-13

Dark 
 
To know more about odoo integrations  
Any kind of assistance kindly drop your email at info@cybrosys.com.


If you need any assistance in odoo, we are online, please chat with us.



0
Comments



Leave a comment

 


whatsapp
location

Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

location

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

location

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message