Everything you need to know to start using the Wikiocity API
Everything needed to get scalable interactive maps running on your site.
In adddition to the JS and CSS from the Basic Map libraries, copy-paste the style <link> line below into your <head>, or into the <body> before the map loading script. This supplies Font-Awesome icons for use as markers.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet">This shows how to place a single marker on the map.
<!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>
<!-- 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">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet">
<!-- 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>
<!-- JS -->
<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';
var markers = [
{ 'name' : 'Example', 'data':[latitude, longitude] }
];
//map code
var center = [longitude,latitude];
var map = MBglMap(apiKey, targetDivId, center, startZoom, mapType);
addMarkers(markers, map);
</script>
</body>
</html>This shows how to place a marker on the map, and include a popup with some text. Works with single or multiple markers.
<!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>
<!-- 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">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet">
<!-- 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>
<!-- JS -->
<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 id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
</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';
var markers = [
{ 'name' : 'Example', 'data':[latitude, longitude, '<div><p>Popup Example</p></div>'] }
];
//map code
var center = [longitude,latitude];
var map = MBglMap(apiKey, targetDivId, center, startZoom, mapType);
addMarkers(markers, map);
setMarkerOpen(markers, 0);
</script>
</body>
</html>Here we add multiple markers to the map. You can also add popups to all markers using the modifications in the popups example above. Note the use of the quickMarkersCenter function to find the center lat/lon of the marker group and the appropriate zoom level to display them all.
<!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>
<!-- 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">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet">
<!-- 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>
<!-- JS -->
<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 markers = [
{ 'name' : 'Example1', 'data':['29.4942', '-98.5508'] },
{ 'name' : 'Example2', 'data':['29.5165', '-98.5051'] },
{ 'name' : 'Example3', 'data':['29.4894', '-98.4472'] }
];
var latlongzoom = quickMarkersCenter(markers);
var latitude = latlongzoom[0];
var longitude = latlongzoom[1];
var startZoom = latlongzoom[2];
//map code
var center = [longitude,latitude];
var map = MBglMap(apiKey, targetDivId, center, startZoom, mapType);
addMarkers(markers, map);
</script>
</body>
</html>For advanced uses, we also have some easy to use functions for removing makers, highighting, and more.