Wikiocity Documentation

Everything you need to know to start using the Wikiocity API

Android and iOS SDK Vector Maps

Everything needed to get scalable interactive maps running in your app.



Quick Reference

Theses settings are automatically used when you add our Wikiocity libraries below. Only needed for reference and advanced users.

Attribution

© Wikiocity © OpenStreetMap contributors

MapLibre GL Native

Visit the MapLibre GL github page for more information, source code, and help.



How to create a Vector Map - MapLibre-GL-Native SDK

Use the code below for a quick and easy setup.

New Project Setup:

  • Language - Kotlin
  • Minimum SDK - API 14 or newer

Add Dependencies

  • 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.
  • Repeat clicking + Add Dependency from the <All Modules> column, and then choose Library Dependency from the drop-down.
  • Enter com.squareup.okhttp3:okhttp: and click Search. Choose the latest version and click OK
  • Your Project build.gradle should now contain the "mavenCentral()" repository.
  • Your Module build.gradle should now contain the "org.maplibre.gl:android-sdk:x.x.x" and "com.squareup.okhttp3:okhttp:x.x.x" implementation.

Setup Layout

  • From the Project File Navigation Panel, navigate to app -> res -> layout and open activity_{type}.xml
  • Note: The activity xml file name is based on the type selected when starting the project. ie - 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.

	<com.mapbox.mapboxsdk.maps.MapView
        android:id="@+id/mapView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
			

Setup Activity

  • From the Project File Navigation Panel, navigate to app -> java -> com.examply.{projectname} and open {type}Activity
  • Note: The activity file name is based on the type selected when starting the project. ie - Basic, Empty, or Fullscreen Activity.
  • Click ... next to import, and add the import code below 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 com.mapbox.mapboxsdk.Mapbox
import com.mapbox.mapboxsdk.WellKnownTileServer
import com.mapbox.mapboxsdk.camera.CameraPosition
import com.mapbox.mapboxsdk.maps.MapboxMapOptions
import com.mapbox.mapboxsdk.geometry.LatLng
import com.mapbox.mapboxsdk.maps.MapView
import com.mapbox.mapboxsdk.module.http.HttpRequestUtil
import okhttp3.OkHttpClient
			

onCreate:


	override fun onCreate(savedInstanceState: Bundle?) {
		
        super.onCreate(savedInstanceState)

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

        Mapbox.getInstance(this, null, WellKnownTileServer.MapLibre)

        setContentView(R.layout.activity_{type})

        val okHttpClient: OkHttpClient = OkHttpClient.Builder()
            .addInterceptor() { chain ->
                var request = chain.request()
                if (request.url.pathSegments[0] == "r") {
                    val url = request.url.newBuilder()
                        .addQueryParameter("key", apiKey)
                        .setPathSegment(2,mapLanguage)
                        .build()
                    request = request.newBuilder().url(url).build()
                }
                chain.proceed(request)
            }
            .build()
        HttpRequestUtil.setOkHttpClient(okHttpClient)

        val mglOptions = MapboxMapOptions.createFromAttributes(this, null)
            .camera(
                CameraPosition.Builder()
                    .target(center)
                    .zoom(startZoom)
                    .build()
            ).logoEnabled(false)
            .attributionMargins(intArrayOf(20, 0, 0, 20))

        var mapView = MapView(this, mglOptions)
        mapView?.onCreate(savedInstanceState)
        mapView?.getMapAsync { map ->
            map.setStyle(mapStyleUrl) {
                map.uiSettings.setDisableRotateWhenScaling(true)
            }
        }
        setContentView(mapView);
    }
			

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 onSaveInstanceState(outState: Bundle) {
        super.onSaveInstanceState(outState)
        mapView?.onSaveInstanceState(outState)
    }
 
    override fun onLowMemory() {
        super.onLowMemory()
        mapView?.onLowMemory()
    }
 
    override fun onDestroy() {
        super.onDestroy()
        mapView?.onDestroy()
    }
			

Build and Run

How to create a Vector Map - MapLibre-GL-Native SDK

Use the code below for a quick and easy setup.

New Xcode Project Setup (UIKit):

  • Platform - iOS App
  • Interface - Storyboard
  • Language - Swift

Add Dependencies

  • From the top drop-down, select File -> Add Packages
  • In the Package Dependency window, search for https://github.com/maplibre/maplibre-gl-native-distribution, then press enter.
  • You should see maplibre-gl-native-distribution in the results. Select, then click Add Package
  • In the Choose Package Products window, checkmark Mapbox, then click Add Package
  • MapLibre GL Native x.x.x should now show under Package Dependencies in the Project Navigation panel.

Setup ViewController

  • From the Project Navigation Panel, navigate to {App Name} -> {App Name} -> ViewController and open ViewController.swift
  • Note: The App Name is based on the name given when starting the project.
  • Find the import code at the top, and add the import section code below the other import lines.
  • Within the main ViewController class, modify or replace the viewDidLoad function with the viewDidLoad code below.
  • Note: Change the Api Key, center, zoom, and language to match your needs.

Import Section:


import Mapbox
			

viewDidLoad:


	override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
		
        let apiKey = "Your Api Key"
        let center = CLLocationCoordinate2D(latitude: 37.78, longitude: -122.43)
        let startZoom = 12.0
        let mapLanguage = "en"
        let mapStyle = "wikiocity-mgl-sdk-style.json"
        let mapStyleUrl = URL(string: "https://api.wikiocity.com/style/\(mapStyle)")
        
        //This code sets key and language headers until a better function is introduced.
        let sessionConfig = URLSessionConfiguration.default
        sessionConfig.httpAdditionalHeaders = ["WikiocityKey" : apiKey, "WikiocityLanguage" : mapLanguage]
        MGLNetworkConfiguration.sharedManager.sessionConfiguration = sessionConfig
        
        let mapView = MGLMapView(frame: view.bounds, styleURL: mapStyleUrl)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        mapView.setCenter(center, zoomLevel: startZoom, direction: 0, animated: false)
        mapView.logoView.isHidden = true
        mapView.delegate = self
        self.view.addSubview(mapView)
    }

			

Build and Run


Next Steps

Customize and Improve your new map

Search & Geocoding

  • Translate addresses to coordinates
  • Search for points of interest.
  • Find locations and cities.
  • Add a search bar to your map.