Wikiocity Documentation

Everything you need to know to start using the Wikiocity API

Vector and Raster Maps

Everything needed to get scalable interactive maps running on your site.

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

Vector Tiles URL

https://api.wikiocity.com/r/vector/{language code}/{z}/{x}/{y}.pbf?key={your_api_key}

Implementing without Wikiocity-maps.js

How to create a Vector Map - Mapbox-GL-JS

Use the code below for a quick and easy setup.

CSS Styling

Copy-paste the stylesheet <link> a lines below into your <head>.

<!-- MBgl CSS -->
<link href="https://api.wikiocity.com/lib/mbgl/v1.13.0/mapbox-gl.css" rel="stylesheet">
<link href="https://api.wikiocity.com/style/wikiocity-style.css" rel="stylesheet">

Notes:

  • Mapbox-gl - Software for displaying vector maps using WebGL.
  • Wikiocity-Style - A basic CSS file for map class, notices, markers, and popups

JS Libraries

Copy-paste the javascript <script> lines below into your <head> or into the <body> before the map loading scripts.

<!-- MBglJS -->
<script src="https://api.wikiocity.com/lib/mbgl/v1.13.0/mapbox-gl.js"></script>
<script src="https://api.wikiocity.com/style/wikiocity-maps.js"></script>

Notes:

  • Mapbox-gl - Software for displaying vector maps using WebGL.
  • Wikiocity-map - This file holds settings and functions for common use cases, and makes loading mapping software easy.

HTML Example

This is everything needed to make a functional map. Be sure to check out the Map Settings page for additional features and customization.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
  <title>Hello World!</title>
  <!-- MBgl CSS -->
  <link href="https://api.wikiocity.com/lib/mbgl/v1.13.0/mapbox-gl.css" rel="stylesheet">
  <link href="https://api.wikiocity.com/style/wikiocity-style.css" rel="stylesheet">

  <!-- MBglJS -->
  <script src="https://api.wikiocity.com/lib/mbgl/v1.13.0/mapbox-gl.js"></script>
  <script src="https://api.wikiocity.com/style/wikiocity-maps.js"></script>
  </head>
<body>
    <style>
    .map {
        width: 100%;
        height:400px;
    }
   </style>
   <div id="map" class="map"></div>
   <script type="text/javascript">
   		//settings
		var apiKey = 'your_api_key';
   		var targetDivId = 'map';
   		var mapType = 'vector';
   		
   		var latitude = '0.0'; //latitude of your map center
   		var longitude = '-0.0'; //longitude of your map center
   		var startZoom =  '3';
   		
		//map code
   		var center = [longitude,latitude];
   		var map = MBglMap(apiKey, targetDivId, center, startZoom, mapType);
    </script>
</body>
</html>

Notes:

  • apiKey - This is the key you created for your site on your account page after you login to Api.Wikiocity.
  • targetDivId - This is the id name you used in your map div. You can change the id, but it should alays have a class of "map".
  • mapType - You can choose between 'vector' or 'raster'. It is currently recommended to use OpenLayers, Leaflet, or Mapbox.js for raster.
  • Latitude and Longitude - These make up the coordinates of where you want to center your map on loading. If you don't have the latitude and longitude, check out our Search Api for help with geocoding an address.
  • startZoom - This is the zoom level, ranging from 0-20. 0 is the whole world, and 20 is an individual house.
  • map code - No need to mess with this code. It will build everything from your supplied settings.
  • Style sizing - Style your map class with the appropriate width and height.

How to create a Vector Map - OpenLayers

Use the code below for a quick and easy setup.

CSS Styling

Copy-paste the stylesheet <link> a lines below into your <head>.

<!-- Open Layers CSS -->
<link href="https://api.wikiocity.com/lib/ol/v6.3.1/ol.css" rel="stylesheet">
<link href="https://api.wikiocity.com/style/wikiocity-style.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet">

Notes:

  • Open Layers - An Open Source library for displaying vector maps.
  • Wikiocity-Style - A basic CSS file for map class
  • Font-Awesome - A vector icon library for showing Points of Interest icons

JS Libraries

Copy-paste the javascript <script> lines below into your <head> or into the <body> before the map loading scripts.

<!-- Open Layers -->
<script src="https://api.wikiocity.com/lib/ol/v6.3.1/ol.js"></script>
<script src="https://api.wikiocity.com/style/wikiocity-maps.js"></script>

<!-- Wikiocity Style for Open Layers -->
<script src="https://api.wikiocity.com/style/wikiocity-ol-style.js"></script>

Notes:

  • Open Layers - An Open Source library for displaying vector maps.
  • Wikiocity-map - This file holds settings for open layers, functions for markers, and makes loading Open Layers easy.
  • Wikiocity Style - This is what gives the map its structure and style.

HTML Example

This is everything needed to make a functional map. Be sure to check out the Map Settings page for additional features and customization.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
  <title>Hello World!</title>
  <!-- Open Layers CSS -->
  <link href="https://api.wikiocity.com/lib/ol/v6.3.1/ol.css" rel="stylesheet">
  <link href="https://api.wikiocity.com/style/wikiocity-style.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet">

  <!-- Open Layers -->
  <script src="https://api.wikiocity.com/lib/ol/v6.3.1/ol.js"></script>
  <script src="https://api.wikiocity.com/style/wikiocity-maps.js"></script>

  <!-- Wikiocity Style for Open Layers -->
  <script src="https://api.wikiocity.com/style/wikiocity-ol-style.js"></script>
  </head>
<body>
    <style>
    .map {
        width: 100%;
        height:400px;
    }
   </style>
   <div id="map" class="map"></div>
   <script type="text/javascript">
   		//settings
		var apiKey = 'your_api_key';
   		var targetDivId = 'map';
   		var mapType = 'vector';
   		
   		var latitude = '0.0'; //latitude of your map center
   		var longitude = '-0.0'; //longitude of your map center
   		var startZoom =  '3';
   		
		//map code
   		var center = [longitude,latitude];
   		var view = getView(center);
   		var map = new ol.Map({
   			controls: controlOpts,
   			interactions: interactionOpts,
   		    layers: [getLayer(mapType, apiKey, targetDivId)],
   		    target: targetDivId,
   		    view: view
   		});
    </script>
</body>
</html>

Notes:

  • apiKey - This is the key you created for your site on your account page after you login to Api.Wikiocity.
  • targetDivId - This is the id name you used in your map div. You can change the id, but it should alays have a class of "map".
  • mapType - You can choose between 'vector' or 'raster'.
  • Latitude and Longitude - These make up the coordinates of where you want to center your map on loading. If you don't have the latitude and longitude, check out our Search Api for help with geocoding an address.
  • startZoom - This is the zoom level, ranging from 0-20. 0 is the whole world, and 20 is an individual house.
  • map code - No need to mess with this code. It will build everything from your supplied settings.
  • Style sizing - Style your map class with the appropriate width and height.

How to create a Vector Map - Leaflet

Here is a quick way to enable Mapbox-gl style rendering with Leaflet support and features.
NOTICE: Leaflet is not yet compatible with the Wikiocity-maps.js library.

CSS Styling

Copy-paste the stylesheet <link> a lines below into your <head>.

<!-- Leaflet CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" rel="stylesheet">

Notes:

  • Leaflet - An Open Source library for displaying dynamic maps.

JS Libraries

Copy-paste the javascript <script> lines below into your <head> or into the <body> before the map loading scripts.

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<script src="https://api.wikiocity.com/lib/mbgl/v1.13.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/mapbox-gl-leaflet/leaflet-mapbox-gl.js"></script>

Notes:

  • Leaflet - An Open Source library for displaying dynamic maps.
  • Mapbox-GL-JS - Rendering needed for the map style.
  • Leaflet-Mapbox-gl - Allows rendering from GL style to Leaflet.

HTML Example

This is everything needed to make a functional map. Be sure to check out the Map Settings page for additional features and customization.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
  <title>Hello World!</title>
  <!-- Open Layers CSS -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" rel="stylesheet">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
  <script src="https://api.wikiocity.com/lib/mbgl/v1.13.0/mapbox-gl.js"></script>
  <script src="https://unpkg.com/mapbox-gl-leaflet/leaflet-mapbox-gl.js"></script>
  </head>
<body>
    <style>
    .map {
        width: 100%;
        height:400px;
    }
   </style>
   <div id="map" class="map"></div>
   <script type="text/javascript">
   		//settings
		var apiKey = 'your_api_key';
   		var targetDivId = 'map';
   		var mapType = 'vector';
   		
   		var latitude = '0.0'; //latitude of your map center
   		var longitude = '-0.0'; //longitude of your map center
   		var startZoom =  '3';
		mapLanguage = 'en';
   		
		//map code
   		var center = [longitude,latitude];
		var map = L.map(targetDivId).setView(center, startZoom);
		var gl = L.mapboxGL({
			transformRequest: function (url, resourceType) {
				if(resourceType === 'Tile') {
					var mapLang = (typeof mapLanguage === 'undefined') ? 'en' : mapLanguage;
					if (mapLang != 'en') {
						url = url.replace('/en/', '/'+mapLang+'/');
					}
					return {
						url: url+'?key='+apiKey
					}
				}
			},
			attribution: '&copy; <a href="https://api.wikiocity.com">Wikiocity</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
			style: 'https://api.wikiocity.com/style/wikiocity-mbgl-style.json'
		}).addTo(map);
    </script>
</body>
</html>

Notes:

  • apiKey - This is the key you created for your site on your account page after you login to Api.Wikiocity.
  • targetDivId - This is the id name you used in your map div. You can change the id, but it should alays have a class of "map".
  • mapType - You can choose between 'vector' or 'raster'.
  • Latitude and Longitude - These make up the coordinates of where you want to center your map on loading. If you don't have the latitude and longitude, check out our Search Api for help with geocoding an address.
  • startZoom - This is the zoom level, ranging from 0-20. 0 is the whole world, and 20 is an individual house.
  • map code - No need to mess with this code. It will build everything from your supplied settings.
  • Style sizing - Style your map class with the appropriate width and height.

Next Steps

Customize and Improve your new map

Settings & Content
  • Modify the maps Language.
  • Add or Filter content and features.
  • Change the way the maps controls work.
  • Improve compatibility for older browsers.
  • Lock scrolling for mobile maps.
  • Get a detailed breakdown of settings.

Markers & Popups
  • Add markers to your points
  • Include popups on your page for more info.
  • Highlight points on your map.
  • Get other functions to make your map mor interactive.

Map Design
  • Use CSS filters to change the look
  • Invert for Night Mode.
  • Greyscale for colorless.
  • Saturate for more vibrant color.
  • Hue-rotate for a different look.
  • Get the Wikiocity Style source code.

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