Adding Data and Content

After you have set up an Interactive Map, you can now add overlays of additonal content.

Introduction

While our standard maps include the most used features, there will always be additional data that people need for different use cases. Some popular examples would be county lines and labels for the United States (see above), or cloud radar for a weather map. To achieve this, we can add an additional layer over our map that includes all the needed images, geometry, and names. In the examples we use TopoJSON, but most mapping programs support many other formats like GeoJSON, XML, additional tile layers, and more.

Data Sources

You can find more TopoJSON data in this World Wide Collection, or check out the data from the above example in this US-Atlas Collection. Be sure to look for and share other sources in the Community Data Forum.

MapLibre

For MapLibre users, check the links below for information and examples on how to add different sources and layers.

Link	Description
Homepage	The Projects home for GL JS
Examples	Information, examples, and plugins
TopoJSON Example	Source code adapted for Example below.

Here is the code for the above example. Note the additon of the d3 js to enable displaying TopoJSON with Maplibre, and the turf library for placing the label in the center of the county polygons. When using different json data, be sure to update the object elements to match your new file. For this example "counties", and "name" will likely be different.

<!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>
  <!-- Mgl CSS -->
  <link href="https://api.slpy.com/lib/mlgl/latest/maplibre-gl.css" rel="stylesheet">
  <link href="https://api.slpy.com/lib/slpy/latest/slpy-style.css" rel="stylesheet">

  <!-- MglJS -->
  <script src="https://api.slpy.com/lib/mlgl/latest/maplibre-gl.js"></script>
  <script src="https://api.slpy.com/lib/slpy/latest/slpy.js"></script>

  <script src="https://api.slpy.com/lib/d3/d3.v3.min.js"></script>
  <script src="https://api.slpy.com/lib/d3/topojson.v3.min.js"></script>
  <script src="https://www.unpkg.com/[email protected]/turf.min.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';
   		
		//map code
   		var center = [longitude,latitude];
   		var map = new slpy.maplibreMap({
						apiKey: apiKey,
						container: targetDivId,
						center: center,
						zoom: startZoom
					});

		//after map code
		map.on('load', function() {

			//Data from https://github.com/topojson/us-atlas
			loadDistricts("https://api.slpy.com/data/counties-10m.json", function(data) {

				map.addSource('counties', {
					'type': 'geojson',
					'data': data
				});

				map.addLayer({
					'id': 'counties',
					'type': 'line',
					'source': 'counties',
					'layout': {},
					'paint': {
						'line-color': '#319FD3',
						'line-width': 0.5
					},
				});

				var labels = {
					'type': 'FeatureCollection',
					'features': []
				};
				data.features.map(function(d) {
					var pt = turf.pointOnSurface(d);
					pt.properties = d.properties;
					labels.features.push(pt);
				});
				map.addSource('district_labels', {
					'type': 'geojson',
					'data': labels
				});
				map.addLayer({
					'id': 'district_labels',
					'type': 'symbol',
					'source': 'district_labels',
					'layout': {
						"text-field": '{name}',
						"text-font": ["Noto Sans Regular"],
						"text-size": 12
					},
					'paint': {
						"text-color": '#319FD3',
						"text-halo-color": '#fff',
						"text-halo-width": 1,
						"text-halo-blur": 1
					}
				});
			});
		});

		function loadDistricts(file, cb) {
			d3.json(file, function(error, topoDistricts) {

				var districts = topojson.feature(topoDistricts, topoDistricts.objects.counties),
					neighbors = topojson.neighbors(topoDistricts.objects.counties.geometries);

				cb(districts)
			});
		}
    </script>
</body>
</html>

OpenLayers

For OpenLayers users, check the links below for information and examples on how to add different sources and layers.

Link	Description
Homepage	The Projects home for OpenLayers
Reference	Information, examples, and plugins
Github	Source code

Here is the code for this pages example. When using different json data, be sure to update the object elements to match your new file. For this example "counties", and "name" will likely be different.

<!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.slpy.com/lib/ol/latest/ol.css" rel="stylesheet">
  <link href="https://api.slpy.com/lib/slpy/latest/slpy-style.css" rel="stylesheet">

  <!-- Open Layers -->
  <script src="https://api.slpy.com/lib/ol/latest/ol.js"></script>
  <script src="https://api.slpy.com/lib/slpy/latest/slpy.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';
   		
		//map code
   		var center = [longitude,latitude];
   		var map = new slpy.openlayersMap({
						apiKey: apiKey,
						container: targetDivId,
						center: center,
						zoom: startZoom
					});

		//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.slpy.com/data/counties-10m.json',
			format: new ol.format.TopoJSON({
			  layers: ['counties'],
			}),
			overlaps: false,
		  }),
		  style: countyStyle,
		});
		map.addLayer(vectorCounties);
		
    </script>
</body>
</html>

Leaflet

For Leaflet users, check the links below for information and examples on how to add different sources and layers.

Link	Description
Homepage	The Projects home
Examples	Information, examples, and plugins
TopoJSON Example	An example page for adding TopoJSON to leaflet.

Next Steps

Customize and add features to your new map

Settings & Features

Common settings and Language Support.
Content Filtering
Satellite, Street Level, and other features.
Compatibility for older browsers.

Markers & Popups

Add markers to your points
Include popups on your page for more info.
Highlight points on your map.
Helper functions

Map Design

Customize your maps look
Night Mode, Greyscale.
Get the Slpy Style source code.

Search & Geocoding

Add a search bar to your map.
Translate addresses to coordinates
Search for points of interest.

Documentation