Migrating from Mapbox to Barikoi Maps

This guide outlines the step-by-step process to migrate your web application from Mapbox to Barikoi Maps.

Overview of Changes

When migrating from Mapbox to Barikoi, you'll need to make the following key changes:

Update CDN links for CSS and JavaScript
Replace the map initialization code
Update the API key reference
Adjust map coordinates (Barikoi focuses on Bangladesh)
Update any additional features or plugins

Step-by-Step Migration Guide

1. Update CDN Links

Mapbox:

<link
  href="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.css"
  rel="stylesheet"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.js"></script>

Barikoi:

<link
  rel="stylesheet"
  href="https://cdn.barikoi.com/bkoi-gl-js/dist/bkoi-gl.css"
/>
<script src="https://cdn.barikoi.com/bkoi-gl-js/dist/bkoi-gl.js"></script>

2. Change Map Initialization

Mapbox:

mapboxgl.accessToken = "YOUR_MAPBOX_ACCESS_TOKEN";
const map = new mapboxgl.Map({
  container: "map",
  center: [-74.5, 40], // New York area coordinates
  zoom: 9,
});

Barikoi:

bkoigl.accessToken = "YOUR_BARIKOI_API_KEY";
new bkoigl.Map({
  container: "map",
  center: [90.3938010872331, 23.821600277500405], // Dhaka coordinates
  zoom: 12,
});

3. Get an API Key

Barikoi: Obtained from https://developer.barikoi.com/login

4. Adjust Coordinates

Barikoi primarily focuses on Bangladesh, so you'll need to update your default coordinates to locations within Bangladesh. The example uses Dhaka's coordinates:

Longitude: 90.3938010872331
Latitude: 23.821600277500405

5. Additional Map Features

If your application uses Mapbox-specific features, you'll need to find equivalent Barikoi implementations:

Markers

Mapbox:

new mapboxgl.Marker().setLngLat([-74.5, 40]).addTo(map);

Barikoi:

new bkoigl.Marker()
  .setLngLat([90.3938010872331, 23.821600277500405])
  .addTo(map);

Popups

Mapbox:

new mapboxgl.Popup()
  .setLngLat([-74.5, 40])
  .setHTML("<h3>Hello World!</h3>")
  .addTo(map);

Barikoi:

new bkoigl.Popup()
  .setLngLat([90.3938010872331, 23.821600277500405])
  .setHTML("<h3>Hello World!</h3>")
  .addTo(map);

6. Complete Example

Mapbox Version:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Display a map on a webpage</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      mapboxgl.accessToken = "YOUR_MAPBOX_ACCESS_TOKEN";
      const map = new mapboxgl.Map({
        container: "map",
        center: [-74.5, 40],
        zoom: 9,
      });
    </script>
  </body>
</html>

Barikoi Version:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Display a map on a webpage</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <link
      rel="stylesheet"
      href="https://cdn.barikoi.com/bkoi-gl-js/dist/bkoi-gl.css"
    />
    <script src="https://cdn.barikoi.com/bkoi-gl-js/dist/bkoi-gl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      bkoigl.accessToken = "YOUR_BARIKOI_API_KEY";
      new bkoigl.Map({
        container: "map",
        center: [90.3938010872331, 23.821600277500405],
        zoom: 12,
      });
    </script>
  </body>
</html>

Advanced Example: Reverse Geocoding with Barikoi

Here's a practical example showing how to implement reverse geocoding with Barikoi Maps. This example creates a map with a marker and displays address information in a popup:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Barikoi Reverse Geocoding Example</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <link
      rel="stylesheet"
      href="https://cdn.barikoi.com/bkoi-gl-js/dist/bkoi-gl.css"
    />
    <script src="https://cdn.barikoi.com/bkoi-gl-js/dist/bkoi-gl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      // Initialize Barikoi map
      bkoigl.accessToken = "YOUR_BARIKOI_GL_TOKEN";
      const map = new bkoigl.Map({
        container: "map",
        center: [90.3938010872331, 23.821600277500405],
        zoom: 12,
      });

      // API key for Barikoi geocoding services
      const barikoiApiKey = "YOUR_BARIKOI_API_KEY";

      // Example coordinates for reverse geocoding
      const longitude = 90.3938010872331;
      const latitude = 23.821600277500405;

      // Create a marker at the specified location
      const marker = new bkoigl.Marker()
        .setLngLat([longitude, latitude])
        .addTo(map);

      // Make the reverse geocode API call
      fetch(
        `https://barikoi.xyz/v2/api/search/reverse/geocode?api_key=${barikoiApiKey}&longitude=${longitude}&latitude=${latitude}&country=true&district=true&post_code=true&sub_district=true&union=true&pauroshova=true&location_type=true&division=true&address=true&area=true&bangla=true&thana=true`
      )
        .then((response) => response.json())
        .then((data) => {
          console.log("Geocode data:", data);

          // Extract the address information from the API response
          if (data && data.place && data.place.address) {
            // Create a popup with the address information
            const popup = new bkoigl.Popup({ offset: 25 })
              .setLngLat([longitude, latitude])
              .setHTML(
                `
                <h3>Address Information</h3>
                <p><strong>Address:</strong> ${data.place.address || "N/A"}</p>
                <p><strong>Area:</strong> ${data.place.area || "N/A"}</p>
                <p><strong>City:</strong> ${data.place.city || "N/A"}</p>
                <p><strong>Postal Code:</strong> ${
                  data.place.postCode || "N/A"
                }</p>
              `
              )
              .addTo(map);

            // Attach the popup to the marker
            marker.setPopup(popup);

            // Open the popup when the map loads
            popup.addTo(map);
          }
        })
        .catch((error) => {
          console.error("Error fetching geocode data:", error);
        });
    </script>
  </body>
</html>

Key differences from Mapbox:

API Endpoints: Barikoi uses different API endpoints for geocoding services.
API Keys: You need both a Barikoi GL token for the map and a separate API key for geocoding services.
Response Structure: Barikoi's geocoding response format is different from Mapbox's, with location data nested under the place property.
Parameters: Barikoi's API allows for more Bangladesh-specific parameters like division, thana, etc.

Barikoi API Services Reference

Barikoi offers a comprehensive set of API services specifically optimized for Bangladesh. This section provides an overview of the available APIs that can be used in your applications.

Location Services

Reverse Geocoding - Convert coordinates to human-readable addresses
```
GET https://barikoi.xyz/v2/api/search/reverse/geocode
```

Autocomplete - Get real-time address suggestions while typing

GET https://barikoi.xyz/v1/api/search/autocomplete/{API_KEY}/place?q=search_term

Rupantor Geocoder - Specialized geocoder for Bangladesh addresses

GET https://barikoi.xyz/v1/api/search/rupantor/geocode/{API_KEY}?q=address

Search Place - Find places by name or type

GET https://barikoi.xyz/v1/api/search/place/{API_KEY}/place?q=search_query

Get Place Details - Retrieve detailed information about a specific place
```
GET https://barikoi.xyz/v1/api/place/details/{API_KEY}/{place_id}
```

Nearby API with Query Param - Find nearby places with filtering options

GET https://barikoi.xyz/v1/api/search/nearby/{API_KEY}/0.5/10?longitude=90.39&latitude=23.75

Routing Services

Route Overview - Get a basic route between two points
```
GET https://barikoi.xyz/v2/api/route/overview
```
Calculate Detailed Route - Get detailed routing information
```
GET https://barikoi.xyz/v2/api/route/detail
```
Route Optimization - Optimize routes for multiple stops
```
POST https://barikoi.xyz/v2/api/route/optimize
```
Route Location Optimized - Route optimization with location constraints
```
POST https://barikoi.xyz/v2/api/route/location-optimized
```
Route Match - Match GPS traces to road network
```
POST https://barikoi.xyz/v2/api/route/match
```
Snap to Road - Snap coordinates to the nearest road
```
POST https://barikoi.xyz/v2/api/route/snap
```

Administrative & Geographic Services

Districts - Get district information

GET https://barikoi.xyz/v1/api/district/{API_KEY}

Subdistricts - Get subdistrict information

GET https://barikoi.xyz/v1/api/thana/{API_KEY}?district=district_name

City With Areas - Get areas within a city

GET https://barikoi.xyz/v1/api/cities/{API_KEY}?city=city_name

Union - Get union information

GET https://barikoi.xyz/v1/api/unions/{API_KEY}?district=district_name

Area - Get area information

GET https://barikoi.xyz/v1/api/area/{API_KEY}?city=city_name

Geospatial Analysis

Ward & Zone from LatLng - Get administrative zone from coordinates

GET https://barikoi.xyz/v1/api/search/wardzone/{API_KEY}/0.5?longitude=90.39&latitude=23.75

Ward From LatLng - Get ward information from coordinates

GET https://barikoi.xyz/v1/api/search/ward/{API_KEY}?longitude=90.39&latitude=23.75

All Ward Geometry - Get geometry data for all wards

GET https://barikoi.xyz/v1/api/search/ward/all/{API_KEY}

Specific Ward Geometry - Get geometry data for a specific ward

GET https://barikoi.xyz/v1/api/search/ward/{API_KEY}/{ward_id}

Point in Polygon - Check if a point is within a polygon
```
POST https://barikoi.xyz/v1/api/search/pip/api_key
```
Geofencing Business - Create and manage geofences for business use
```
POST https://barikoi.xyz/v2/api/business/geofence
```

Example: Using Autocomplete API

Here's how to implement Barikoi's autocomplete feature in your application:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Barikoi Autocomplete Example</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <link
      rel="stylesheet"
      href="https://cdn.barikoi.com/bkoi-gl-js/dist/bkoi-gl.css"
    />
    <script src="https://cdn.barikoi.com/bkoi-gl-js/dist/bkoi-gl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
      .search-container {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 1;
        width: 300px;
        background: white;
        padding: 10px;
        border-radius: 4px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      }
      #search-box {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
      }
      #search-results {
        margin-top: 10px;
        max-height: 200px;
        overflow-y: auto;
      }
      .search-item {
        padding: 8px;
        cursor: pointer;
        border-bottom: 1px solid #eee;
      }
      .search-item:hover {
        background-color: #f5f5f5;
      }
    </style>
  </head>
  <body>
    <div class="search-container">
      <input type="text" id="search-box" placeholder="Search location..." />
      <div id="search-results"></div>
    </div>
    <div id="map"></div>
    <script>
      // Initialize Barikoi map
      bkoigl.accessToken = "YOUR_BARIKOI_GL_TOKEN";
      const map = new bkoigl.Map({
        container: "map",
        center: [90.3938010872331, 23.821600277500405],
        zoom: 12,
      });

      const barikoiApiKey = "YOUR_BARIKOI_API_KEY";
      const searchBox = document.getElementById("search-box");
      const searchResults = document.getElementById("search-results");
      let marker;

      // Add event listener for input changes
      searchBox.addEventListener("input", function () {
        const query = this.value.trim();
        if (query.length < 3) {
          searchResults.innerHTML = "";
          return;
        }

        // Call Barikoi Autocomplete API
        fetch(
          `https://barikoi.xyz/v1/api/search/autocomplete/${barikoiApiKey}/place?q=${encodeURIComponent(
            query
          )}`
        )
          .then((response) => response.json())
          .then((data) => {
            searchResults.innerHTML = "";
            if (data.places && data.places.length > 0) {
              data.places.forEach((place) => {
                const item = document.createElement("div");
                item.className = "search-item";
                item.textContent = place.address;
                item.addEventListener("click", function () {
                  searchBox.value = place.address;
                  searchResults.innerHTML = "";

                  // Add or update marker
                  if (marker) marker.remove();
                  marker = new bkoigl.Marker()
                    .setLngLat([place.longitude, place.latitude])
                    .addTo(map);

                  // Fly to the location
                  map.flyTo({
                    center: [place.longitude, place.latitude],
                    zoom: 16,
                  });

                  // Add popup with place info
                  new bkoigl.Popup({ offset: 25 })
                    .setLngLat([place.longitude, place.latitude])
                    .setHTML(
                      `
                      <h3>${place.address}</h3>
                      <p>${place.area}, ${place.city}</p>
                      <p>Postal Code: ${place.postCode || "N/A"}</p>
                    `
                    )
                    .addTo(map);
                });
                searchResults.appendChild(item);
              });
            } else {
              const noResults = document.createElement("div");
              noResults.className = "search-item";
              noResults.textContent = "No results found";
              searchResults.appendChild(noResults);
            }
          })
          .catch((error) => {
            console.error("Error fetching autocomplete data:", error);
          });
      });
    </script>
  </body>
</html>

API Migration Comparison Chart

Below is a comparison between common Mapbox services and their Barikoi equivalents:

Functionality	Mapbox	Barikoi
Map Display	mapboxgl.Map	bkoigl.Map
Geocoding	mapbox.places	barikoi.xyz/v1/api/search/autocomplete
Reverse Geocoding	mapbox.places	barikoi.xyz/v2/api/search/reverse/geocode
Directions	mapbox.directions	barikoi.xyz/v2/api/route/detail
Distance Matrix	mapbox.distance-matrix	barikoi.xyz/v2/api/route/optimize
Isochrone	mapbox.isochrone	Not directly available
Map Matching	mapbox.map-matching	barikoi.xyz/v2/api/route/match
Administrative Boundaries	mapbox.boundaries	Multiple endpoints (districts, subdistricts, etc.)

Best Practices for Barikoi Implementation

API Key Management
- Keep your API keys secure and don't expose them in client-side code
- Use environment variables for API keys in production applications
Error Handling
- Always implement proper error handling for API calls
- Provide fallback options when API calls fail
Performance Optimization
- Use debouncing for autocomplete to reduce API calls
- Cache frequently used data like district information
User Experience
- Provide visual feedback during API calls (loading indicators)
- Ensure responsive design for mobile users
Bangladesh-Specific Considerations
- Barikoi's data is optimized for Bangladesh
- Consider supporting both English and Bangla interfaces

Resources

Barikoi Documentation: https://docs.barikoi.com/
Barikoi Developer Portal: https://developer.barikoi.com/
Mapbox Documentation: https://docs.mapbox.com/

Migrating from Mapbox to Barikoi Maps

Overview of Changes​

Step-by-Step Migration Guide​

1. Update CDN Links​

2. Change Map Initialization​

3. Get an API Key​

4. Adjust Coordinates​

5. Additional Map Features​

Markers​

Popups​

6. Complete Example​

Mapbox Version:​

Barikoi Version:​

Advanced Example: Reverse Geocoding with Barikoi​

Key differences from Mapbox:​

Barikoi API Services Reference​

Location Services​

Routing Services​

Administrative & Geographic Services​

Geospatial Analysis​

Example: Using Autocomplete API​

API Migration Comparison Chart​

Best Practices for Barikoi Implementation​

Resources​

Overview of Changes

Step-by-Step Migration Guide

1. Update CDN Links

2. Change Map Initialization

3. Get an API Key

4. Adjust Coordinates

5. Additional Map Features

Markers

Popups

6. Complete Example

Mapbox Version:

Barikoi Version:

Advanced Example: Reverse Geocoding with Barikoi

Key differences from Mapbox:

Barikoi API Services Reference

Location Services

Routing Services

Administrative & Geographic Services

Geospatial Analysis

Example: Using Autocomplete API

API Migration Comparison Chart

Best Practices for Barikoi Implementation

Resources