2c:null 2d:["$","title",null,{"children":"Map of GP practices in England by GPIT supplier | Mike Thompson | Observable"}] 32:T820,{ let container = html`

`; // Give the container dimensions. yield container; // Create the `map` object with the mapboxgl.Map constructor, referencing // the container div let map = new mapboxgl.Map({ container, center: [-1.1458, 52.8124], zoom: 5, style: "mapbox://styles/mapbox/streets-v9", scrollZoom: false }); container.style.position = "relative"; // the div your map renders into container.appendChild(infoPanel); container.appendChild(legend); map.fitBounds([-6.4, 49.8, 1.766, 55.833]) map.addControl(new mapboxgl.NavigationControl()); map.on("load", () => { map.addSource("gp-practices", { type: "geojson", data: geojson }); map.addLayer({ id: "gp-practices-points", type: "circle", source: "gp-practices", paint: { "circle-radius": 4, "circle-color": [ "match", ["get", "system"], "TPP", systems.TPP.colour, "EMIS", systems.EMIS.colour, "MEDICUS", systems.MEDICUS.colour, /* other */ "#999999" ], "circle-stroke-width": 0.5, "circle-stroke-color": "#ffffff" } }); }); map.on("click", "gp-practices-points", (e) => { const props = e.features[0].properties; infoPanel.innerHTML = ` ${props.name}
ODS code: ${props.ods_code}
Postcode: ${props.postcode}
System: ${props.system} `; }); map.on("click", (e) => { const features = map.queryRenderedFeatures(e.point, { layers: ["gp-practices-points"] }); if (!features.length) { infoPanel.innerHTML = `Click a point for details`; } }); map.on("mouseenter", "gp-practices-points", () => { map.getCanvas().style.cursor = "pointer"; }); map.on("mouseleave", "gp-practices-points", () => { map.getCanvas().style.cursor = ""; }); // Clean up the map's resources using `map.remove()` whenever // this cell is re-evaluated. invalidation.then(() => map.remove()); }33:[] 30:{"id":"e8d1b6760f2ceaf1","slug":"map-of-gp-practices-in-england-by-gpit-supplier","title":"Map of GP practices in England by GPIT supplier","thumbnail":"d3e529ebc2c27a2dd5288914f2364fc343ccbfbba909f0f8744dcb75c3d27b7a","access_level":"unlisted","create_time":"$D2026-06-28T11:30:40.051Z","update_time":"$D2026-07-01T08:55:12.575Z","view_time":null,"first_public_time":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"34b3e592976f9cd2","login":"mikejamesthompson","name":"Mike Thompson","avatar_url":"https://avatars-next.observableusercontent.com/57e8ff24c2d3843f76fd089c7a740c6b9315ea6136523fb1f5b6f5567e4470c9","tier":"starter_2024"},"version":81,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"775820c39ba45082","login":"mikejamesthompson","name":"Mike Thompson","avatar_url":"https://avatars-next.observableusercontent.com/57e8ff24c2d3843f76fd089c7a740c6b9315ea6136523fb1f5b6f5567e4470c9","tier":null}],"members":[{"type":"team","id":"34b3e592976f9cd2","login":"mikejamesthompson","name":"Mike Thompson","avatar_url":"https://avatars-next.observableusercontent.com/57e8ff24c2d3843f76fd089c7a740c6b9315ea6136523fb1f5b6f5567e4470c9","tier":"starter_2024","role":"editor"},{"type":"individual","id":"775820c39ba45082","login":"mikejamesthompson","name":"Mike Thompson","avatar_url":"https://avatars-next.observableusercontent.com/57e8ff24c2d3843f76fd089c7a740c6b9315ea6136523fb1f5b6f5567e4470c9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Map of GP practices in England by GPIT supplier","cells":[{"id":0,"value":"# Map of GP practices in England by GPIT supplier","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":67,"value":"This map shows GP practices in England coloured to indicate the GPIT system they use.\n\nThe data behind this map has been compiled from multiple sources:\n\n- Practices and their system supplier from the [Appointments in General Practice NHS England dataset](https://digital.nhs.uk/data-and-information/publications/statistical/appointments-in-general-practice)\n- GP practice postcodes from the [ODS GP and GP practice-related data](https://digital.nhs.uk/services/organisation-data-service/data-search-and-export/csv-downloads/gp-and-gp-practice-related-data) from NHS Digital (NHS England)\n- Geographical locations are derived from the postcodes using https://postcodes.io/\n\nFor more information on the data, please see the separate [GitHub repository](https://github.com/mikejamesthompson/gp-2-gp-it-supplier).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"systems = ({\n TPP: {\n colour: \"#2e3d5d\",\n name: \"SystmOne\",\n },\n EMIS: {\n colour: \"#f75d29\",\n name: \"EMISWeb\",\n },\n MEDICUS: {\n colour: \"#ed13ea\",\n name: \"Medicus\",\n },\n OTHER: {\n colour: \"#999999\",\n name: \"Other\",\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"legend = {\n const div = document.createElement(\"div\");\n div.style.cssText = `\n position: absolute;\n top: 10px;\n left: 10px;\n background: white;\n padding: 10px 12px;\n border-radius: 6px;\n box-shadow: 0 1px 12px rgba(0,0,0,0.3);\n font-family: sans-serif;\n font-size: 13px;\n z-index: 2;\n `;\n\n const s = Object.keys(systems).filter(s => s !== \"OTHER\");\n\n div.innerHTML = `\n

System

\n ${s.map(system => `\n

\n \n ${systems[system].name}\n

\n `).join(\"\")}\n `;\n\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"infoPanel = {\n const div = document.createElement(\"div\");\n div.style.cssText = `\n position: absolute;\n bottom: 40px;\n left: 10px;\n width: 240px;\n background: white;\n padding: 10px 12px;\n border-radius: 6px;\n box-shadow: 0 1px 12px rgba(0,0,0,0.3);\n font-family: sans-serif;\n font-size: 13px;\n line-height: 1.4;\n z-index: 1;\n pointer-events: none;\n `;\n div.innerHTML = `Click a point for details`;\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"geojson = ({\n type: \"FeatureCollection\",\n features: csv\n .filter(d => d.POSTCODE_LATITUDE && d.POSTCODE_LONGITUDE)\n .map(d => ({\n type: \"Feature\",\n geometry: {\n type: \"Point\",\n coordinates: [d.POSTCODE_LONGITUDE, d.POSTCODE_LATITUDE]\n },\n properties: {\n ods_code: d.ODS_CODE,\n name: d.NAME,\n postcode: d.POSTCODE,\n system: d.SYSTEM\n }\n }))\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"csv = d3.csv(csvURL)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"csvURL = \"https://raw.githubusercontent.com/mikejamesthompson/gp-2-gp-it-supplier/refs/heads/main/data/gp_suppliers.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@3.25.0\");\n if (!gl.accessToken) {\n gl.accessToken = \"pk.eyJ1IjoibWp0NTgiLCJhIjoiY21xeTk0OTJpMDFlcTJ0cXgyYjlqMzRyYSJ9.QSzdX37LH6_cWuRIP6UcbQ\"\n const href = await require.resolve(\"mapbox-gl@3.25.0/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"