Everything you need to know to start using the Wikiocity API
Everything needed to get scalable interactive maps running on your site.
Go over the list of javascript variables below to modify how maps function and load. Pay attention to variable order and whether the variable is local or global as denoted by the use of var
//settings
var apiKey = 'your_api_key';
var targetDivId = 'map';
var mapType = 'vector';
mapLanguage = 'en';
MBglOptions = { mapStyle: 'default', navControl: 'top-left', hash: true};
OpenLayersFallback = true;
ie9RasterFallback = true;
setInteractionOnFocus(targetDivId);
var latitude = '0.0';
var longitude = '-0.0';
var startZoom = '3';
Modern mapping software is often not compatible with older browsers without modification. Because this represents a significant amount of traffic for large websites, we made it easy to allow fallback to other map software and have kept our own libraries cross platform compatible.
Polyfills enables backwards compatibility for features not found in older browsers. Inlcude the below lines in your <head>, and before any other script includes. Best used in combination with OpenLayersFallback and ie9RasterFallback set to true to enable support for Internet Explorer 9-10, and IE 11/Edge browsers that are not recently updated.
NOTICE: Please note when setting ie9RasterFallback to true that Raster maps incur higher costs than Vector. Average traffic fallback is 1%. Polyfills are still recommended regardless of ie9RasterFallback setting.
<!-- The polyfills below are only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.jsdelivr.net/combine/npm/[email protected],npm/[email protected],npm/[email protected]/MouseEvent.min.js"></script>
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,blissfuljs,default,es2019,Uint8Array,Element.prototype.classList"></script> Mapbox-GL uses WebGL to display smooth and beautiful maps, but WebGL is not supported by older browsers. Internet Explorer 9 and 10, as well as IE11 and Edge when not updated, do not support WebGL.
To make this work, we test for successful Mapbox-GL loading, and whether WebGl is functional and will perform acceptably. A positive test will return true for MBglReady. If WebGL fails, we load the libraries for OpenLayers by inserting them in to the DOM Head, and run OnOLReady() when done. While most code will be a simple copy/paste between the "Mapbox-GL Compatible code" and "OL Compatible Code", the two are seperated for easy use of library specific code. Modify your map with the code below to get started.
//settings
OpenLayersFallback = true;
ie9RasterFallback = true;
//map code
var center = [longitude,latitude];
var map = MBglMap(apiKey, targetDivId, center, startZoom, mapType);
//code for markers, options, or other functions.
if (MBglReady) {
//Mapbox-GL Compatible code
} else {
function OnOLReady() {
//OL Compatible Code
}
}
NOTICE: Vector maps only. Not currently supported on Raster. Let us know in the forums if you need this feature.
Use the global mapFilter array variable to remove features and content from vector maps, and filter out things like points of interest.
//settings
mapFilter = ['mid_points', 'other_points'];
Go over the list of javascript variables below to modify how maps function and load. Pay attention to variable order and whether the variable is local or global as denoted by the use of var
//settings
var apiKey = 'your_api_key';
var targetDivId = 'map';
var mapType = 'vector';
mapLanguage = 'en';
ie9RasterFallback = true;
setInteractionOnFocus(targetDivId);
var latitude = '0.0';
var longitude = '-0.0';
var startZoom = '3';
Modern mapping software is often not compatible with older browsers without modification. Because this represents a significant amount of traffic for large websites, we made it easy to allow fallback to other map software and have kept our own libraries cross platform compatible.
Polyfills enables backwards compatibility for features not found in older browsers. Inlcude the below lines in your <head>, and before any other script includes. Best used in combination with ie9RasterFallback set to true to enable support for Internet Explorer 9-10, and IE 11/Edge browsers that are not recently updated.
NOTICE: Please note when setting ie9RasterFallback to true that Raster maps incur higher costs than Vector. Average traffic fallback is 1%. Polyfills are still recommended regardless of ie9RasterFallback setting.
<!-- The polyfills below are only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.jsdelivr.net/combine/npm/[email protected],npm/[email protected],npm/[email protected]/MouseEvent.min.js"></script>
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,blissfuljs,default,es2019,Uint8Array,Element.prototype.classList"></script> NOTICE: Vector maps only. Not currently supported on Raster. Let us know in the forums if you need this feature.
Use the global mapFilter array variable to remove features and content from vector maps, and filter out things like points of interest.
//settings
mapFilter = ['mid_points', 'other_points'];
While our standard maps include the most used features, there will always be additional data that people need for different use cases.
A popular example would be county lines and labels for the United States. To achieve this, we can add an additional layer over our map that includes all the needed geometry and names. TopoJSON is a great and compact format for this, but most mapping programs support many other formats like GeoJSON, XML, and more.
//after map code
function countyStyle(feature, resolution) {
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#319FD3',
width: 0.5,
}),
text: new ol.style.Text({
text: feature.get('name'),
fill: new ol.style.Fill({color: '#319FD3'}),
})
});
}
var vectorCounties = new ol.layer.Vector({
source: new ol.source.Vector({
//Data from https://github.com/topojson/us-atlas
url: 'https://api.wikiocity.com/data/counties-10m.json',
format: new ol.format.TopoJSON({
layers: ['counties'],
}),
overlaps: false,
}),
style: countyStyle,
});
map.addLayer(vectorCounties);
Here are other examples of how it can be done in Leaflet (TopoJSON Leaflet Example), and MapLibre-GL as well (TopoJSON MapLibre GL Example).