مزود خدمات الرعاية الصحية هو من أكثر الخرائط ذات العواقب التي يمكن لمطور أن يبنيها. المرضى الذين يستخدمونها غالباً ما يكونون قلقين وآلمين أو يتنقلون عبر نظام غير مألوف. خريطة تحمل ببطء أو تعود نتائج غير ذات صلة أو تعريض الرمز البريدي الخاص بهم بصمت إلى خدمة تابعة لجهة خارجية مقرها الولايات المتحدة ليست مجرد تجربة مستخدم سيئة بل هي انتهاك محتمل للقانون العام لحماية البيانات.
يبني هذا البرنامج التعليمي مزود خدمات جاهزاً للإنتاج: تصفية التخصص والبحث برمز بريدي باستخدام Geocoding API وتراكب isochrone يوضح «الأطباء خلال 20 دقيقة» وخريطة عاملة باستخدام MapAtlas Maps API مع التوافق الكامل لقانون حماية البيانات المدمج في البنية من البداية وليس بعد ذلك.
التطبيق الكامل هو JavaScript vanilla لا يلزم إطار عمل. يعمل على أي مكدس: React و Vue و HTML عادي و WordPress أو CMS موروث من مستشفى. يغطي البرنامج التعليمي أيضاً السياق التنظيمي للاتحاد الأوروبي وبيانات CQC بالمملكة المتحدة و Kassenärztliche Vereinigung بالألمانية و CNAM الفرنسي بحيث تعرف من أين تحصل على بيانات المزود بشكل شرعي.
لماذا تطبيقات الموقع الصحي لها التزامات GDPR إضافية
تجمع التطبيقات القياسية البيانات الشخصية (الاسم والبريد الإلكتروني والاستخدام). تطبيقات الرعاية الصحية لها خطر ثانٍ: استنتاج معلومات الصحة من بيانات الموقع.
عندما يبحث المستخدم عن «أمراض قلب بالقرب من SE1 7PB» يكون الرمز البريدي الخاص به بيانات شخصية. الجمع بين الرمز البريدي والتخصص الطبي يصبح بيانات من فئة خاصة محتملة بموجب المادة 9(1) من قانون حماية البيانات وهي بيانات تكشف عن حالة صحية. هذا صحيح حتى لو لم تقم بإنشاء حساب مستخدم أو تخزين ملف تعريف.
المخاطر واقعية:
- يتم إرسال استدعاء API لجيوترميز من جانب العميل يتضمن الرمز البريدي الذي يكتبه المستخدم إلى خادم تابع لجهة خارجية. يرى هذا الخادم الرمز البريدي والتخصص الذي يتم البحث عنه وعنوان IP. بدون اتفاقية معالجة البيانات وضمان إقامة البيانات في الاتحاد الأوروبي فهذا تحويل مشكل.
- قد يستمر تكامل المتصفح والسجل في الرمز البريدي الذي يكتبه والاستعلام المتخصص على جهاز المستخدم خارج السيطرة الخاصة بك لكنه يستحق الملاحظة في معلومات الخصوصية الخاصة بك.
- إذا قمت بتسجيل استجابات API من جانب الخادم (شائعة للتصحيح) فقد تقوم بتسجيل مزيج الرمز البريدي + التخصص دون إدراك.
الإصلاح هو وكيل ظهور خادم: يستقبل الخادم الخاص بك البحث ويستدعي MapAtlas Geocoding API ويعود فقط الإحداثيات ولم يرسل الاستعلام المكتوب مطلقاً إلى API تابع لجهة خارجية من متصفح المريض. المزيد عن هذا في قسم التنفيذ.
Provider Data Structure
Provider data should come from authoritative official sources, not scraped datasets:
- UK: NHS Digital's NHS Choices API and CQC registered provider lists
- Germany: Kassenärztliche Bundesvereinigung (KBV) open data and the Arztsuche API
- France: CNAM's Ameli API and the répertoire RPPS
Structure each provider as a GeoJSON feature:
const providers = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: { type: "Point", coordinates: [4.9051, 52.3680] },
properties: {
id: "prov-001",
name: "Dr. Maria van den Berg",
specialty: "general-practitioner",
accepting: true,
address: "Prinsengracht 263, 1016 GV Amsterdam",
phone: "+31 20 423 5678",
languages: ["Dutch", "English"],
nextAvailable: "2026-02-18"
}
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [4.8890, 52.3610] },
properties: {
id: "prov-002",
name: "Dr. Jan Smits",
specialty: "cardiologist",
accepting: false,
address: "Leidseplein 15, 1017 PS Amsterdam",
phone: "+31 20 612 3456",
languages: ["Dutch"],
nextAvailable: null
}
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [4.9200, 52.3750] },
properties: {
id: "prov-003",
name: "Anna Fischer, MD",
specialty: "dermatologist",
accepting: true,
address: "Plantage Middenlaan 14, 1018 DD Amsterdam",
phone: "+31 20 789 0123",
languages: ["Dutch", "English", "German"],
nextAvailable: "2026-02-20"
}
}
]
};
Step 1: Map Initialisation with Specialty Filter
Start with the map and a specialty dropdown. The filter updates the visible markers client-side without any network request.
import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';
const map = new mapmetricsgl.Map({
container: 'provider-map',
style: 'https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY',
center: [4.9041, 52.3676],
zoom: 13
});
map.on('load', () => {
map.addSource('providers', {
type: 'geojson',
data: providers
});
// Provider markers, green = accepting, grey = full
map.addLayer({
id: 'provider-markers',
type: 'circle',
source: 'providers',
paint: {
'circle-radius': 10,
'circle-color': [
'case',
['==', ['get', 'accepting'], true], '#16A34A',
'#9CA3AF'
],
'circle-stroke-width': 2,
'circle-stroke-color': '#ffffff'
}
});
buildList(providers.features);
});
// Specialty filter
document.getElementById('specialty-select').addEventListener('change', (e) => {
const specialty = e.target.value;
if (specialty === 'all') {
map.setFilter('provider-markers', null);
} else {
map.setFilter('provider-markers', ['==', ['get', 'specialty'], specialty]);
}
});
Step 2: Postcode Search via Backend Proxy
Rather than calling the Geocoding API from the browser (which exposes the patient's postcode to a third-party server), route the geocoding request through your own backend endpoint. Your server calls MapAtlas and returns only the coordinates.
Frontend (patient's browser):
async function geocodePostcode(postcode) {
// Call YOUR backend, not the geocoding API directly
const res = await fetch(`/api/geocode?q=${encodeURIComponent(postcode)}`);
const { lat, lng } = await res.json();
return { lat, lng };
}
document.getElementById('postcode-form').addEventListener('submit', async (e) => {
e.preventDefault();
const postcode = document.getElementById('postcode-input').value.trim();
const { lat, lng } = await geocodePostcode(postcode);
map.flyTo({ center: [lng, lat], zoom: 13 });
fetchIsochrone(lat, lng);
});
Backend proxy (Node.js/Express):
// /api/geocode, server-side only, postcode never leaves your infrastructure
app.get('/api/geocode', async (req, res) => {
const url = new URL('https://api.mapatlas.eu/geocoding/v1/search');
url.searchParams.set('text', req.query.q);
url.searchParams.set('key', process.env.MAPATLAS_API_KEY); // server-side key
url.searchParams.set('size', '1');
const upstream = await fetch(url.toString());
const data = await upstream.json();
if (!data.features?.length) {
return res.status(404).json({ error: 'Postcode not found' });
}
const [lng, lat] = data.features[0].geometry.coordinates;
// Return ONLY coordinates, no postcode logged, no specialty in response
res.json({ lat, lng });
});
Your API key stays on the server and the patient's raw postcode query is never sent to a third party.
Step 3: Isochrone Overlay, "Doctors Within 20 Minutes"
An isochrone polygon shows every point reachable within a given drive time. Displaying one on a provider finder answers the most practical patient question: "how many doctors can I actually reach?"
async function fetchIsochrone(lat, lng) {
// Call through your backend proxy for the same privacy reasons
const res = await fetch(
`/api/isochrone?lat=${lat}&lng=${lng}&minutes=20&profile=driving`
);
const geojson = await res.json();
// Remove existing isochrone layer if present
if (map.getLayer('isochrone-fill')) map.removeLayer('isochrone-fill');
if (map.getLayer('isochrone-border')) map.removeLayer('isochrone-border');
if (map.getSource('isochrone')) map.removeSource('isochrone');
map.addSource('isochrone', { type: 'geojson', data: geojson });
map.addLayer({
id: 'isochrone-fill',
type: 'fill',
source: 'isochrone',
paint: {
'fill-color': '#16A34A',
'fill-opacity': 0.12
}
}, 'provider-markers'); // Insert below markers so pins render on top
map.addLayer({
id: 'isochrone-border',
type: 'line',
source: 'isochrone',
paint: {
'line-color': '#16A34A',
'line-width': 2,
'line-dasharray': [3, 2]
}
}, 'provider-markers');
}
Backend isochrone proxy:
app.get('/api/isochrone', async (req, res) => {
const { lat, lng, minutes, profile } = req.query;
const url = new URL('https://api.mapatlas.eu/v1/isochrone');
url.searchParams.set('lat', lat);
url.searchParams.set('lng', lng);
url.searchParams.set('time', minutes * 60); // seconds
url.searchParams.set('profile', profile || 'driving');
url.searchParams.set('key', process.env.MAPATLAS_API_KEY);
const upstream = await fetch(url.toString());
const data = await upstream.json();
res.json(data); // GeoJSON polygon
});
The Isochrone Maps Explained article goes deeper on isochrone use cases, including public transit isochrones (useful for patients without a car) and multi-time-band overlays showing 10, 20, and 30-minute zones simultaneously.
Step 4: Provider Detail Popup
When a patient clicks a doctor marker, show the essential details: name, specialty, accepting status, languages, and next available appointment.
map.on('click', 'provider-markers', (e) => {
const {
name, specialty, accepting, address, phone, languages, nextAvailable
} = e.features[0].properties;
const coords = e.features[0].geometry.coordinates.slice();
const statusBadge = accepting
? '<span style="color:#16A34A;font-weight:600">Accepting patients</span>'
: '<span style="color:#9CA3AF">Not accepting new patients</span>';
const apptLine = accepting && nextAvailable
? `<p style="margin:4px 0">Next available: <strong>${nextAvailable}</strong></p>`
: '';
new mapmetricsgl.Popup({ maxWidth: '280px' })
.setLngLat(coords)
.setHTML(`
<strong style="font-size:15px">${name}</strong>
<p style="margin:4px 0;text-transform:capitalize">${specialty.replace('-', ' ')}</p>
${statusBadge}
${apptLine}
<p style="margin:6px 0;font-size:13px;color:#64748b">${address}</p>
<p style="margin:4px 0;font-size:13px">
Languages: ${Array.isArray(languages) ? languages.join(', ') : languages}
</p>
<a href="tel:${phone}" style="color:#2563EB">${phone}</a>
`)
.addTo(map);
});
map.on('mouseenter', 'provider-markers', () => { map.getCanvas().style.cursor = 'pointer'; });
map.on('mouseleave', 'provider-markers', () => { map.getCanvas().style.cursor = ''; });
Step 5: List Panel Synced with Map
A list view alongside the map helps users with screen readers and those who prefer scrolling to clicking pins.
function buildList(features) {
const list = document.getElementById('provider-list');
list.innerHTML = '';
features.forEach(({ properties, geometry }) => {
const { name, specialty, accepting, address, nextAvailable } = properties;
const card = document.createElement('div');
card.className = `provider-card ${accepting ? 'accepting' : 'full'}`;
card.innerHTML = `
<strong>${name}</strong>
<p>${specialty.replace('-', ' ')}</p>
<p style="font-size:12px;color:#64748b">${address}</p>
<small>${accepting ? `Next: ${nextAvailable || 'call to confirm'}` : 'Not accepting'}</small>
`;
card.addEventListener('click', () => {
map.flyTo({ center: geometry.coordinates, zoom: 15 });
});
list.appendChild(card);
});
}
GDPR Implementation Checklist
For EU healthcare developers, treat this as a minimum compliance checklist:
- Backend proxy for geocoding: Patient postcodes must not be sent client-side to third-party APIs.
- No session logging of search terms: If you log requests for debugging, strip the postcode before writing to logs.
- Privacy notice: Your app's privacy notice must disclose that location data is processed to find nearby providers, the legal basis (legitimate interest or explicit consent), and the retention period.
- Consent for location access: If you use the browser Geolocation API (
navigator.geolocation.getCurrentPosition), show a clear purpose statement before triggering the browser permission prompt. - Data residency: MapAtlas processes all API requests within the EU. Reference the MapAtlas DPA when completing your Records of Processing Activities.
- Retention: If you cache isochrone results or search coordinates server-side for performance, define a retention period (e.g. 24 hours) and automate deletion.
The EU Developer's Guide to GDPR-Compliant Map APIs covers processor agreements, data residency, and consent patterns in full. The Healthcare Services industry page lists the specific MapAtlas features relevant to digital health applications.
What to Build Next
- Sign up for a free MapAtlas API key, one key for maps, geocoding, routing, and isochrones
- Add the Store Locator tutorial pattern for multi-clinic networks with more than a handful of locations
- Explore the Geocoding API capabilities page for postcode lookup, reverse geocoding, and batch provider address validation
Frequently Asked Questions
Why does GDPR apply to a doctor finder map even if I don't store patient data?
A patient's search location on a healthcare finder reveals where they live and, by inference, which conditions they may have (e.g. searching for oncologists near a postcode). Under GDPR Article 9, health-related inferences from location data can qualify as special category data. Even without storing profiles, real-time geocoding requests sent client-side to third-party APIs create a processing record that requires a legal basis and disclosure.
What is an isochrone and why is it useful for a provider finder?
An isochrone is a polygon that shows every point reachable within a given travel time from a starting location. On a healthcare finder, an isochrone overlay answers "which doctors are within 20 minutes by car?", a much more useful question than raw distance, because it accounts for roads, speed limits, and traffic patterns.
Can I use MapAtlas for a patient-facing NHS or public health application?
Yes. MapAtlas is EU-hosted, ISO 27001 certified, and provides a GDPR-compliant Data Processing Agreement under Article 28. This satisfies typical public sector procurement requirements. UK NHS Digital and equivalent bodies in Germany (DSGVO) and France (CNIL) require data residency within the EU/UK, which MapAtlas fulfils.
