2b:null 2c:["$","title",null,{"children":"Custom Markers on a Map | NB.AI Solutions Team | Observable"}] 31:T7a3,myMap = { nextbillion.setApiKey(apiKey); const container = html`

`; yield container; let pos = { lat: 34.01645, lng: -117.944 }; const nbmap = new nextbillion.maps.Map({ container: document.getElementById("map"), center: pos, zoom: 10, maxZoom: 15, minZoom: 5, style: "https://api.nextbillion.io/maps/streets/style.json", scrollZoom: true }); nbmap.map.on("load", function () { let randomPoints = { type: "FeatureCollection", features: [] }; randomVRPInputs.pointsArray.forEach((pt) => { let feature = { type: "Feature", properties: { business: pt.business, name: pt.name, phone: pt.phone }, geometry: { type: "Point", coordinates: [pt.longitude, pt.latitude] } }; randomPoints.features.push(feature); }); // Add markers with popups on hover randomPoints.features.forEach((pt) => { let el = document.createElement("div"); el.className = "marker"; el.style.backgroundSize = "contain"; el.style.backgroundRepeat = "no-repeat"; el.style.backgroundPosition = "center"; el.style.backgroundImage = `url(${imageUrl})`; el.style.width = "15px"; el.style.height = "15px"; const popup = new nextbillion.maps.Popup({ closeButton: false, closeOnClick: false }).setHTML(` ${pt.properties.name}
${pt.properties.business}
${pt.properties.phone} `); el.addEventListener("mouseenter", () => { popup.setLngLat(pt.geometry.coordinates).addTo(nbmap.map); }); el.addEventListener("mouseleave", () => { popup.remove(); }); new nextbillion.maps.Marker(el) .setLngLat(pt.geometry.coordinates) .addTo(nbmap.map); }); }); }32:[] 2f:{"id":"4e76f267d2884188","slug":null,"title":"Custom Markers on a Map","thumbnail":"121b070ef1548155390b52ab7fb9134ff4b962230cffac69b762b8eb7aa1b38a","access_level":"public","create_time":"$D2023-01-28T20:50:29.850Z","update_time":"$D2025-06-24T22:28:56.414Z","view_time":null,"first_public_time":"$D2023-01-28T21:31:11.462Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"05baed136f9134c1","login":"nbai","name":"NB.AI Solutions Team","avatar_url":"https://avatars-next.observableusercontent.com/7a25d1b5deb9c5290b12e4e0914aacdbd4196bb5c3a94c63a0fda0fe706d28b2","tier":"starter_2024"},"version":94,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bcb6b2e256659128","login":"jim-welch","name":"Jim Welch","avatar_url":"https://avatars-next.observableusercontent.com/6334ed2ccd004bd8ab34e9f05c047bf4ef291dea914767f26079d7756d073607","tier":null}],"members":[{"type":"individual","id":"bcb6b2e256659128","login":"jim-welch","name":"Jim Welch","avatar_url":"https://avatars-next.observableusercontent.com/6334ed2ccd004bd8ab34e9f05c047bf4ef291dea914767f26079d7756d073607","tier":null,"role":"editor"},{"type":"team","id":"05baed136f9134c1","login":"nbai","name":"NB.AI Solutions Team","avatar_url":"https://avatars-next.observableusercontent.com/7a25d1b5deb9c5290b12e4e0914aacdbd4196bb5c3a94c63a0fda0fe706d28b2","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"5e6955c88320d791","slug":"websdk-examples","title":"Platform - API and SDK Examples","owner":{"id":"05baed136f9134c1","login":"nbai","name":"NB.AI Solutions Team"}},"type":"notebook","body":{"title":"Custom Markers on a Map","cells":[{"id":0,"value":"# [Custom Markers on a Map](https://docs.nextbillion.ai)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"viewof apiKey = secret2(\"apiKey\", {\n title: \"NextBillion.ai API Key\",\n submit: \"Set\",\n description:\n \"Contact support@nextbillion.ai to get your API key\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"{\n nextbillion.setApiKey(apiKey);\n return html`Set API key
nextbillion.setApiKey(${apiKey.substr(\n 0,\n 4\n )}....)`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"html`Add the stylesheet for the NB.ai SDK
<link href=\"https://maps-gl.nextbillion.io/maps/v2/api/css\" rel=\"stylesheet\">`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"html`

Create 50 random points in Los Angeles

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"randomVRPInputs = {\n let retval = null;\n retval = await fetch(\n `https://m4aqpzp5ah6n7ilzunwyo5ma2u0ezqcc.lambda-url.us-east-2.on.aws/?region=la&number=50&vehicles=10&type=service`\n ).then((response) => response.json());\n return retval;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"html`

Set image for markers

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"imageUrl = \"https://d12qcqjlhp2ahm.cloudfront.net/marker1.svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {\n secret2,\n nextbillion,\n styles,\n routeStyles\n} from \"@nbai/nextbillion-ai-dependencies\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"styling = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"