2f: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); }); }); }30:[] 2d:{"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"},{"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"},{"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"},{"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"},{"id":18,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":31,"value":"html`

Create 50 random points in Los Angeles

`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":35,"value":"html`

Set image for markers

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