Adding Markers to Maps

Using Slpy JS

After you have set up an Interactive Map, you can now add markers to your map.

Summary

One of the most common functions of mapping is to display locations, and the easiest way to do that is to place an icon or marker on the map to signify the coordinates. Whether for a store locator or displaying points of information, the examples below should make this quick and simple.

Single Marker

This shows how to place a single marker on the map.


   		//settings
		//map code
		//after map code
		
		var markers = [
			{ 'name' : 'Example', 'data':[latitude, longitude] }
		];
		slpy.addMarkers(markers, map);

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

This shows how to place a marker on the map, and include a popup with some text. Works with single or multiple markers.


		//settings
		//map code
		//after map code

		var markers = [
			{ 'name' : 'Example', 'data':[latitude, longitude, '<div><p>Popup Example</p></div>'] }
		];

		slpy.addMarkers(markers, map);
		slpy.setMarkerOpen(markers, 0);

Item	Description
markers variable	This holds an array of marker information objects. Each marker includes a name that does not need to be unique. Each object requires a name, latitude and longitude, with an optional field for popup contents.
addMarkers function	This function automatically adds markers to the map.
setMarkerOpen function	This function sets a single marker's popup to be open when 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 before loading the map.


		//settings

		var markers = [
			{ 'name' : 'Example1', 'data':['29.4942', '-98.5508'] },
			{ 'name' : 'Example2', 'data':['29.5165', '-98.5051'] },
			{ 'name' : 'Example3', 'data':['29.4894', '-98.4472'] }
		];
		
		var latlonzoom = slpy.quickMarkersCenter(markers);

		var latitude = latlonzoom[0];
		var longitude = latlonzoom[1];
		var startZoom = latlonzoom[2];

		//map code
		var center = [longitude,latitude];
		//MapLibre example map code
   		var map = new slpy.maplibreMap({
						apiKey: apiKey,
						container: targetDivId,
						center: center,
						zoom: startZoom,
						mapType: mapType
					});

		//after map code

		slpy.addMarkers(markers, map);

Item	Description
markers variable	This holds an array of marker information objects. Each marker includes a name that does not need to be unique. Each object requires a name, latitude and longitude, with an optional field for popup contents.
addMarkers function	This function automatically adds markers to the map.
quickMarkersCenter function	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.

Marker Functions

Slpy JS includes many functions to create interactive and dynamic markers, including marker highlighting and "fly to" animations.

Item	Description
addMarkers(array, map object)	This function automatically adds markers to the map.
quickMarkersCenter(array)	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.
setMarkerOpen(array, integer)	This function sets a single marker's popup to be open when 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.
highlightMarker(integer)	This function turns the marker blue for easy visibility among a group of markers. Integer should be the index number of the marker, starting with 0.
dehighlightMarker(integer)	Removes the highlighting from above function.
flyTo(object, map)	Animates a map bounce and pan from the map center to the specified location. Object is an object containing "lat", "lon", and "quality" as returned in our Search Api json object. Map is the intialized map object. You can see an example of this on Slpy's Demo Map
distanceInKM(latitude1, longitude1, latitude2, longitude2)	Returns the distance between two sets of latitude/longitude point strings in Kilometers.
distanceInMI(latitude1, longitude1, latitude2, longitude2)	Returns the distance between two sets of latitude/longitude point strings in Miles.

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.

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