// 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 styleconststyle="standard-light"// Your freshpaint environment ID// https://documentation.freshpaint.io/reference/faqs/where-do-i-find-my-environment-idconstenvId="00000000-1111-2222-3333-444444444444"constmap=newmaplibregl.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(newmaplibregl.NavigationControl(),"top-left");
Adding pins with popups
constmarkers= [ {"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 websiteconstnewPopup= (m) =>newmaplibregl.Popup({ offset:25 }).setHTML(`<div> <h3>${m.Header}<\/h3> <a href="${m.Href}">${m.Href}<\/a> <\/div>`)markers.forEach((m) => {constpopup=newPopup(m);constmarker=newmaplibregl.Marker({color:"#808080"}).setLngLat(m.LngLat).setPopup(popup).addTo(map);});
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.
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`