Everything you need to know to start using the Wikiocity API
Everything needed to get scalable interactive maps running on your site.
Theses settings are automatically used when you add our Wikiocity libraries below. Only needed for reference and advanced users.
© Wikiocity © OpenStreetMap contributors
https://api.wikiocity.com/r/vector/{language code}/{z}/{x}/{y}.pbf?key={your_api_key}
Use the code below for a quick and easy setup.
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">
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>
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>
Use the code below for a quick and easy setup.
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">
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>
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>
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.
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">
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>
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: '© <a href="https://api.wikiocity.com">Wikiocity</a> © <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>
Customize and Improve your new map