Vector Maps for Android Apps

Advanced User Setup

Using MapLibre SDK for Native apps

MapLibre SDK

MapLibre is an open source project that was forked from Mapbox GL SDK. It is our preferred mapping program for interactive maps due to its modern design and ease of use.

Link	Description
Homepage	The Projects home for Native SDK
SDK Reference	Information, examples, and plugins
Github	Source code

Use the code below for a quick and easy setup.

New Project Setup

This project will setup a basic interactive map using the MapLibre SDK. Start a new project with the settings below.

Item	Description
Language	Kotlin
Project Type	Empty Views Activity used for example.
Minimum SDK	API 21 or newer

Add Dependencies

Follow the instructions for adding dependencies to your project.

Instructions
From the top drop-down, select File -> Project Structure
In the Project Structure window, choose Dependencies, then <All Modules>.
Click + Add Dependency from the <All Modules> column, and then choose Library Dependency from the drop-down.
Enter org.maplibre.gl:android-sdk: and click Search. Choose the latest version and click OK
Note: The latest current Android version can be found on the MapLibre SDK release page.

Setup Layout

Instructions
From the Project File Navigation Panel, navigate to app -> res -> layout and open activity_{type}.xml
Note: The activity xml file name can change based on the type selected when starting the project. ie - Main, Basic, Empty, or Fullscreen Activity.
Using Code view, Add the MapView code below within the main Layout, and replace any existing TextViews or other Views.


	<org.maplibre.android.maps.MapView
		android:id="@+id/mapView"
		android:layout_width="match_parent"
		android:layout_height="match_parent" />

Attribution

The next Activity section will already include the links below.
Our maps are built with the help of thousands of public and private sources and open projects. Allowing it's display satisfies their required attributions.

© <a href="https://www.slpy.com">Slpy</a> 
© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors

Setup Activity

Instructions
From the Project File Navigation Panel, navigate to app -> kotlin+java -> com.example.{projectname} and open {type}Activity
Note: The activity file name is based on the type selected when starting the project. ie - Main, Basic, Empty, or Fullscreen Activity.
Add the import code in the section below under the other import lines.
Within the main AppCompatActivity() class, modify or replace the onCreate function with the onCreate code below.
Note: Change the Api Key, center, zoom, language, and R.layout.activity_{type} to match your needs.
Within the main AppCompatActivity() class, add override code for App events.

Import Section


import android.view.LayoutInflater
import org.maplibre.android.maps.MapView
import org.maplibre.android.geometry.LatLng
import org.maplibre.android.camera.CameraPosition
import org.maplibre.android.MapLibre
import org.maplibre.android.WellKnownTileServer

onCreate


	private lateinit var mapView: MapView
    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        val apiKey = "Your API Key"
        val center = LatLng(37.78, -122.43)
        val startZoom = 12.0
        val mapLanguage = "en"
        val mapStyle = "slpy-mgl-style.json"
        val mapStyleUrl = "https://api.slpy.com/style/${mapStyle}?key=${apiKey}";

        MapLibre.getInstance(this, apiKey, WellKnownTileServer.MapLibre)

        // Init layout view
        val inflater = LayoutInflater.from(this)
        val rootView = inflater.inflate(R.layout.activity_{type}, null)
        setContentView(rootView)

        mapView = rootView.findViewById(R.id.mapView)
        mapView.getMapAsync { map ->
            map.setStyle(mapStyleUrl)
            map.cameraPosition = CameraPosition.Builder().target(center).zoom(startZoom).build()
            map.uiSettings.setAttributionMargins(20, 0, 0, 20)
            map.uiSettings.isLogoEnabled = false
        }
    }

overrides


	override fun onStart() {
        super.onStart()
        mapView.onStart()
    }

    override fun onResume() {
        super.onResume()
        mapView.onResume()
    }

    override fun onPause() {
        super.onPause()
        mapView.onPause()
    }

    override fun onStop() {
        super.onStop()
        mapView.onStop()
    }

    override fun onLowMemory() {
        super.onLowMemory()
        mapView.onLowMemory()
    }

    override fun onDestroy() {
        super.onDestroy()
        mapView.onDestroy()
    }

    override fun onSaveInstanceState(outState: Bundle) {
        super.onSaveInstanceState(outState)
        mapView.onSaveInstanceState(outState)
    }

Build and Run

That's it. You should have a working interactive map.
If not, be sure that you've updated the apiKey variable with your own, and changed the "activity_{type}" to match your actual file name. If you still have any issues, feel free to post in the forums.
Visit the MapLibre SDK Github for the most up to date code and help on building your project from here.

Next Steps

Customize and add features to your new map

Settings & Features

Common settings and Language Support.
Content Filtering
Satellite, Street Level, and other features.
Compatibility for older browsers.

Map Design

Customize your maps look
Night Mode, Greyscale.
Get the Slpy Style source code.

Search & Geocoding

Add a search bar to your map.
Translate addresses to coordinates
Search for points of interest.

Documentation