Products

Here are the current products offered by Proximitii:

• Local Lifestyle Widget
• Local Lifestyle API
• Crime Widget
• Proximitii Maps

Authentication

In order to use any of the Proximitii products, you will need a key. The keys will authenticate your access to the widgets or API. We have two different types of authentication, depending on which product is being called.

Public Key (Widget):

When using a widget, you’ll be asked for the URL of the website you want to put it on, and given a public key in return. Use this public key in your widget, and as long as it’s installed on the correct site, the key will work.

Private Key (API):

When using the API, a public key and a private key is required to authenticate the API. Send these together in your API calls. Do not expose the private key in code or on publicly viewable endpoints.

If you do not have a key, please contact info@proximitii.com.

Service Areas

These are the areas that we currently cover:

Installation

Add the following embed code to your page or template. In order for the widget to render, you must add your own public key and you must pass the latitude and longitude.

 <script src="https://widget-api.proximitii.com/proximitii-embed.js"></script>
<div id="prox-map"></div>
<script type="module">
window.onProximitiiLoad = () => {
let proximitiiMap = new Proximitii('prox-map')

//Make sure to put in your own public key!
proximitiiMap.setPublicKey("YOUR OWN KEY HERE")

proximitiiMap.setCenter(43.65925118924679, -79.34521876247898)

proximitiiMap.setOptions({
    primaryColor: '#02A0E9',  
    hideScores: false, 
    hideTitle: false, 
    hideRadius: false, 
    hideBackgroundImage: false, 
    markerIconColor: 'white',
    height: '500px',
    customOrderCategories: false,
    disableGestureHandling: false
})

proximitiiMap.setColors({
    scoreCircle: "#189CAD",
    locationMarker: "#537BBE",
})

proximitiiMap.render()
}
</script>

How to Install the Widget:

First, start by importing the Proximitii script.

 <script src="https://widget-api.proximitii.com/proximitii-embed.js"></script>

And a div for the map to fill.

 <div id="prox-map"></div>

Next, you can access the onProximitiiLoad function and pass in a callback, where you create a new instance of Proximitii.

 <div id="prox-map"></div>
<script type="module">
window.onProximitiiLoad = () => {
    let proximitiiMap = new Proximitii('prox-map')

    //Make sure to put in your own public key!
    proximitiiMap.setPublicKey('KEY')

    proximitiiMap.setCenter(44.656834, -63.5982224)

    proximitiiMap.render()
}
</script>

You can also set and reset options, including the center, at any time, if you call render after. Various colors may also be changed.

 proximitiiMap.setOptions({
        primaryColor: '#02a0e9', 
        title: 'Proximitii Score',
        hideScores: false, 
        hideTitle: false, 
        hideRadius: false, 
        hideBackgroundImage: false, 
        markerIconColor: 'white',
        height: '500px',
        sortCategoriesScore: false,
        gestureHandling: false
    })
    
proximitiiMap.setColors({
        scoreCircle: "#189CAD",
        locationMarker: "#537BBE",
        link: "#02a0e9",
        categoryScore: "primary",
        categoryScoreText: "#ffffff"
    })

Always be sure to call render AFTER setting or resetting any options.

Customization

There are many customization options. See below for how to customize the widget.

General Options:

Display Options:

Color Options:

Tech Options:

Categories

These are the categories that are available in the Local Lifestyle Widget.

WordPress

To install the Local Lifestyle Widget on WordPress, please see the instructions below.

Install:

1. Download the plugin from here, it’s a zip file
2. Navigate to your WordPress dashboard, and go to “Plugins”
3. Click “Add New”
4. On the next page click “Upload Plugin” > “Choose File”
5. Navigate to your downloads, and upload the package
6. Click “Install”
7. Go back to your list of Plugins, and find the Proximitii Widget plugin- click the “Activate” button underneath
8. You should now see “Proximitii Widget” on your sidebar- click on that.
9. Fill out settings. These are your default settings for your whole website- anytime you update here, it will update all widgets on your site automatically.

Shortcodes:

1. You can use the widget anywhere on your WordPress site you can use shortcodes - [proximitii]
2. The bare minimum you’ll need to pass in the latitude and longitude as parameters, like this - [proximitii latitude=”xx” longitude=”yy”]
3. You can also override any settings you set on the settings page in each shortcode - [proximitii latitude=”xx” longitude=”yy” titleSize=”32px”]
4. You can use The Playground page to generate shortcodes

Example Call

					https://widget-api.proximitii.com/api/map/locations?lat=43.659251&long=-79.345218&dataType=all&radius=6400&limit=2&categories=coffee,park,elementaryschools&public_key={public_key}&private_key={private_key}

Keys

In order to call the API successfully, you will need a public and private key. Make sure to store the keys safely and do the API call on backend so the keys are not exposed to the public.

Values

Categories:

Sample Output

 {
  "OverallScore": 90,
  "Active": 1,
  "Data": {
    "coffee": {
      "Category": "coffee",
      "Score": 9,
      "Locations": [
        {
          "AmenityID": 30342,
          "Country": "CA",
          "Name": "Starbucks",
          "Address": " ",
          "Category": "coffee",
          "Tag": "Coffee Shop",
          "Coord": {
            "Lat": 43.6603708,
            "Long": -79.3425969
          },
          "WalkingTime": 4
        },
        {
          "AmenityID": 14544,
          "Country": "CA",
          "Name": "Purple Penguin Cafe",
          "Address": "889 Queen Street East",
          "Category": "coffee",
          "Tag": "Coffee Shop",
          "Coord": {
            "Lat": 43.6604252,
            "Long": -79.3422613
          },
          "WalkingTime": 4
        }
      ],
      "Count": 2
    },
    "park": {
      "Category": "park",
      "Score": 9,
      "Locations": [
        {
          "AmenityID": 921809,
          "Country": "CA",
          "Name": "McCleary Playground",
          "Address": "80 McGee Street",
          "Category": "park",
          "Tag": "Park",
          "Coord": {
            "Lat": 43.6593088127695,
            "Long": -79.3454086596916
          },
          "WalkingTime": 1
        },
        {
          "AmenityID": 931509,
          "Country": "CA",
          "Name": "Saulter Street Parkette",
          "Address": "25 Saulter Street",
          "Category": "park",
          "Tag": "Park",
          "Coord": {
            "Lat": 43.6577088206208,
            "Long": -79.3465032129895
          },
          "WalkingTime": 3
        }
      ],
      "Count": 2
    },
    "elementaryschools": {
      "Category": "elementaryschools",
      "Score": 9,
      "Locations": [
        {
          "SchoolID": 13009,
          "NCESSchoolID": "153214",
          "Address": "935 Dundas St E",
          "City": "Toronto",
          "StateAbbr": "ON",
          "Postal": "M4M 1R4",
          "Phone": "416-393-9565",
          "Site": "http://schoolweb.tdsb.on.ca/dundas",
          "LowGrade": "JK",
          "HighGrade": "5",
          "IsPre": 0,
          "IsElem": 1,
          "IsMid": 0,
          "IsHigh": 0,
          "Type": "Elementary",
          "Students": "465",
          "Coord": {
            "Lat": 43.6620635986328,
            "Long": -79.3486251831055
          },
          "ProfMath": "67",
          "ProfLang": "82",
          "SchoolScore": 74.5,
          "WalkingTime": 7,
          "Name": "Dundas Junior Public School"
        },
        {
          "SchoolID": 13106,
          "NCESSchoolID": "374733",
          "Address": "180 Carlaw Ave",
          "City": "Toronto",
          "StateAbbr": "ON",
          "Postal": "M4M 2R9",
          "Phone": "416-393-9494",
          "Site": "http://schoolweb.tdsb.on.ca/morsestreet",
          "LowGrade": "JK",
          "HighGrade": "6",
          "IsPre": 0,
          "IsElem": 1,
          "IsMid": 0,
          "IsHigh": 0,
          "Type": "Elementary",
          "Students": "510",
          "Coord": {
            "Lat": 43.6601181030273,
            "Long": -79.3401336669922
          },
          "ProfMath": "57",
          "ProfLang": "86",
          "SchoolScore": 71.5,
          "WalkingTime": 7,
          "Name": "Morse Street Junior Public School"
        },
      ],
      "Count": 2
    }
  }
}

Installation

Add the following embed code to your page or template. In order for the widget to render, you must add your own public key and you must pass the latitude and longitude.

<script src="https://widget-api.proximitii.com/crime/embed.js"></script>
<div id="prox-crime-map"></div>
<script type="module">
window.onProximitiiCrimeLoad = () => {
let proximitiiCrimeMap = new ProximitiiCrimeMap('prox-crime-map')

//Make sure to put in your own public key!
proximitiiCrimeMap.setPublicKey("YOUR OWN KEY HERE")

proximitiiCrimeMap.setCenter(37.772079370456495, -122.42953237968246)

proximitiiCrimeMap.setOptions({
    centerMarker: false,
    height: '500px',
    zoom: 10
})
        
proximitiiCrimeMap.render()
}
</script>

Values

Installation

Add the following to the head of your page.

<!-- Proximitii script	-->
<script src="https://proximitiimaps.com/proxinit/"></script>	
		
<!-- Your script -->
<script src="prox-map.js"></script>

Add the following to the body of your page.

<div id="my-map" class="leaflet-pane:leaflet-map-pane"></div>

Add the following .js file to your server.

window.onload = () => {
	
	const gps = [43.654087, -79.38549];		//center of the map
	const opts = {					//map options	
		id:     'my-map',			//DIV id
		key:    'my-key-here',		        //your private key
		gps:    gps,
		zoom:   14,				//zoom level
		style:  'init_style_light',		//map style
		func:   onMapReady			//callback
	};
	
	var map_init = new ProxMap (opts);		//create the map
	map_init.create_map ();

	function onMapReady ()
	{
		var map = map_init.get_map ();	        //get map object
		if (map)
		{
			L.marker(gps)			//create marker	
				.bindPopup("Hello <b>Map</b>")
				.addTo(map)
				.openPopup();

			var popup = L.popup();		//popup onMapClick event func
			function onMapClick(e) {		
				popup
				.setLatLng(e.latlng)
				.setContent("Click at " + e.latlng.toString())
				.openOn(map);
			}
			map.on('click', onMapClick);	//click event
		}
	}
}

Here is a sample .html file.

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Proximitii Maps</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="utf-8">

		<style>
			html, body {
				width: 100%;
				height: 100%;
				padding: 0;
				margin:0;
			}	
			#my-map { position: relative; width: 100%; height: 100%;}
		</style>
	  
		<script src="https://proximitiimaps.com/proxinit/"></script>	
		<script src="prox-map.js"></script>
	</head>

	<body>	
		<div id="my-map" class="leaflet-pane:leaflet-map-pane"></div>
	</body>
</html>

Values

General Options:

Map Styles

Light

Bright

Modern

Baseline