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.

Basic Raster Map

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.

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

Raster Tile Size

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.

Raster Tiles URL

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

How to create a Raster 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">

Notes:

  • Open Layers - An Open Source library for displaying raster maps.
  • Wikiocity-Style - A basic CSS file for map class

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>

Notes:

  • Open Layers - An Open Source library for displaying raster maps.
  • Wikiocity-Maps.js - This library holds settings for open layers, and makes loading and creating common uses 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>
  <!-- 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>

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.
  • Sizing - Style your map class with the appropriate width and height.

How to create a Raster Map - Leaflet

Use the code below for a quick and easy setup.

CSS Styling

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">

Notes:

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

JS Libraries

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>

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>
  <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: '&copy; <a href="https://api.wikiocity.com">Wikiocity</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
		}).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.
  • 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.