Maps

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

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/maplibre-gl@3.x/dist/maplibre-gl.css" rel="stylesheet" type="text/css">
<script src="https://freshpaint-hipaa-maps.com/maplibre-gl@3.x/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:

SearchPlaceIndexForPosition - Amazon Location ServiceAmazon Location Service

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}'