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.

Adding Markers to Maps

Marker CSS

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

Single Marker Example

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/mlgl/latest/maplibre-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">

  <!-- JS -->
  <script src="https://api.wikiocity.com/lib/mlgl/latest/maplibre-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 = MglMap(apiKey, targetDivId, center, startZoom, mapType);
		
		addMarkers(markers, map);
    </script>
</body>
</html>

Notes:

  • markers array object - This holds an array of marker information. Each marker includes a name that does not need to be unique. The data array requires a latitude and longitude, and an optional field for popup contents.
  • addMarkers - This function automatically adds markers to the map.

Marker with Popup Example

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/mlgl/latest/maplibre-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">

  <!-- JS -->
  <script src="https://api.wikiocity.com/lib/mlgl/latest/maplibre-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 = MglMap(apiKey, targetDivId, center, startZoom, mapType);
		
		addMarkers(markers, map);
		setMarkerOpen(markers, 0);
    </script>
</body>
</html>

Notes:

  • markers array object - The data array holds an optional third entry for popup contents. You can include HTML formatted information and links.
  • setMarkerOpen - This function sets a single marker's popup to be open on load, or whenever called. The second field in the function is the number of the marker in the array that you wish to open, and starts at 0.

Multiple Markers

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/mlgl/latest/maplibre-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">

  <!-- JS -->
  <script src="https://api.wikiocity.com/lib/mlgl/latest/maplibre-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 = MglMap(apiKey, targetDivId, center, startZoom, mapType);
		
		addMarkers(markers, map);
    </script>
</body>
</html>

Notes:

  • quickMarkersCenter - This function quickly finds the center between an array of multiple markers. It also returns a zoom level that matches the distance between the markers, and fits them within the bounds of a mobile sized map.

Other Marker Functions

For advanced uses, we also have some easy to use functions for removing makers, highighting, and more.

highlightMarker(markerIndex)

This function turns the marker blue for easy visibility among a group of markers. markerIndex should be the number of the marker, starting with 0.
You can see an example of this on Wikiocity's Search Map

dehighlightMarker(markerIndex)

Removes the highlighting from above function.

removeMarker(markers, markerIndex)

Deletes a marker from the map. markers is the original array of markers supplied to addMarkers, and index is the marker number, starting with 0.

flyTo(obj, view)

Animates a map bounce and pan from the map center to the specified location. obj is an object containing "lat", "lon", and "accuracy" as returned in our Search Api json object. view is the variable from the getView function.
You can see an example of this on Api.Wikiocity's Map

distanceInKM(lat1, lon1, lat2, lon2)

Returns the distance between two sets of latitude/longitude points in KM.

distanceInMI(lat1, lon1, lat2, lon2)

Returns the distance between two sets of latitude/longitude points in Miles.