Freshpaint
Search
⌃K
Links

Maps [Feature Preview]

Freshpaint offers a HIPAA-compliant, Zoomable, Pannable embedded map.

This preview feature is not yet available to all customers. Please contact Freshpaint support if you're interested in more information.

Example

The example site has a full working demo that you can inspect and customize to your needs.
Freshpaint Maps Integration Demo
A demo site showing the Freshpaint map connected to clickable location cards. When you click on a location card, the map automatically focuses on the location. When you click on a pin, the location cards automatically scroll to the selected location.

Map Setup: Vanilla JS

Freshpaint uses MapLibre as an open-source renderer to display the map. You will need to load Maplibre and its stylesheet.
<link href="https://freshpaint-hipaa-maps.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" type="text/css">
<script src="https://freshpaint-hipaa-maps.com/[email protected]/dist/maplibre-gl.js" type="text/javascript"> </script>

Creating a Map

// Styles affect how the maps look:
// We currently support the following styles:
// "standard-light": colorized, typical map style
// "standard-dark": colorized, typical dark map style
// "visualization-light": grayscale, elegant black and white style
// "visualization-dark": grayscale, elegant dark black and white style
const style = "standard-light"
​
// Your freshpaint environment ID
// https://documentation.freshpaint.io/reference/faqs/where-do-i-find-my-environment-id
const envId = "00000000-1111-2222-3333-444444444444"
​
const map = new maplibregl.Map({
container: "map",
style: `https://freshpaint-hipaa-maps.com/${envId}/${style}/style-descriptor`,
​
// Latitude and longitude of the map's origin
center: [-87.6800, 41.8500],
​
// Zoom levels (rough descriptions):
// 15 : a close street view
// 13 : city neighborhoods
// 11 : entire region (Chicagoland)
zoom: 13,
});
​
// This adds a toolbar for zooming an panning:
// + : zoom in
// - : zoom out
// compass for rotating (e.g. north facing up or south facing up)
map.addControl(new maplibregl.NavigationControl(), "top-left");
​

Adding pins with popups

const markers = [
{
"LngLat": [-87.7276, 41.7919],
"Header": "UI Health",
"Href": "https://hospital.uillinois.edu/"
},
{
"LngLat": [-87.69738, 41.85505],
"Header": "Saint Anthony Hospital",
"Href": "https://sahchicago.org/"
}
];
​
// You can customize popups with arbitrary HTML
// Here, we just do a simple header and link to the website
const newPopup = (m) => new maplibregl.Popup({ offset: 25 })
.setHTML(`<div>
<h3>${m.Header}<\/h3>
<a href="${m.Href}">${m.Href}<\/a>
<\/div>`)
​
markers.forEach((m) => {
const popup = newPopup(m);
const marker = new maplibregl.Marker({color: "#808080"})
.setLngLat(m.LngLat)
.setPopup(popup)
.addTo(map);
});
​
​

Full working example

See the working demo at https://freshpaint-hipaa-maps.com/demo/index.html for a demo with the Freshpaint map connected to clickable location cards.
This demo shows how to add on-click handlers to customize behaviors when users click on Map pins. It also shows how to link external actions to the Map (e.g. so on-click outside of the map cause the map to recenter).

Map Setup: React

Ask Freshpaint directly if you need assistance setting up a React app!
​

Location Search Setup:

Freshpaint also offers a HIPAA-compliant Location search service that finds location matches to user inputs. We offer a backend that can be used with your autocomplete frontend of choice.
Example location autocomplete.

API Details

The API is accessible at
POST `https://freshpaint-hipaa-maps.com/places/v0/indexes/freshpaint/search/suggestions?token=00000000-1111-2222-3333-444444444444`

Request body

Because we use AWS Location Services, a full account of all supported features, and inputs can be found here: https://docs.aws.amazon.com/location/latest/APIReference/API_SearchPlaceIndexForSuggestions.html​

Sample CURL request

# https://documentation.freshpaint.io/reference/faqs/where-do-i-find-my-environment-id
TOKEN="YOUR-FRESHPAINT-ENV-ID-HERE"
​
curl -H 'Content-Type: application/json' \
"https://freshpaint-hipaa-maps.com/places/v0/indexes/freshpaint/search/suggestions?token=$TOKEN" \
-d '{"Text": "Good", "MaxResults": 8, "BiasPosition": [-87.69420, 41.86181], "FilterCountries": ["USA"], "FilterCategories": ["MunicipalityType"]}'
​

Reverse Geocoding Setup:

Freshpaint also offers a HIPAA-compliant Reverse Geocoding API that allows you to look up an address based on Latitude and Longitude.

API Details

The API is accessible at
POST 'https://freshpaint-hipaa-maps.com/places/v0/indexes/freshpaint/search/position?token=00000000-1111-2222-3333-444444444444'

Request body

Because we use AWS Location Services, a full account of all supported features, and inputs can be found here:

Sample CURL request

# https://documentation.freshpaint.io/reference/faqs/where-do-i-find-my-environment-id
TOKEN="YOUR-FRESHPAINT-ENV-ID-HERE"
​
curl -H 'Content-Type: application/json' \
"https://freshpaint-hipaa-maps.com/places/v0/indexes/freshpaint/search/position?token=$TOKEN" \
-d '{"Position": [-122.3394,47.6159], "MaxResults": 8}'
​