Everything you need to know to start using the Wikiocity API
Everything needed to get scalable interactive maps running on your site.
NOTICE: Raster maps are good for older browsers or slower hardware. They do however incur more credits, larger downloads, have less customization, and do not scale well for high resolutions. We encourage our users to use Vector Maps whenever possible. We offer the ability to auto failover to raster for Internet Explorer 9 by setting ie9RasterFallback = true.
Theses settings are automatically used when you add our Wikiocity libraries below. Only needed for reference and advanced users.
© Wikiocity © OpenStreetMap contributors
Raster Tiles are offered at 512x512 tile size in 2x resolution (1024x1024 actual). Be sure to change tileSize and tilePixelRatio in Leaflet or Openlayers from their defaults.
https://api.wikiocity.com/r/raster/{language code}/{z}/{x}/{y}.png?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>
.
<!-- 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">
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>
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">
<!-- 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>
</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 = 'raster';
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>
Use the code below for a quick and easy setup.
Copy-paste the stylesheet <link>
a lines below into your <head>
.
<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.
<!-- Leaflet -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.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>
<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>
</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 = 'raster';
var mapLanguage = 'en';
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 = L.map(targetDivId).setView(center, startZoom);
L.tileLayer('https://api.wikiocity.com/r/raster/'+mapLanguage+'/{z}/{x}/{y}.png?key='+apiKey,{
tileSize: 512,
maxZoom: 19,
crossOrigin: true,
attribution: '© <a href="https://api.wikiocity.com">Wikiocity</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
</script>
</body>
</html>
Customize and Improve your new map