1"use strict";(self.webpackChunkgeoapify_home=self.webpackChunkgeoapify_home||[]).push([[4756],{3788:function(a,n,e){e.r(n),e.d(n,{default:function(){return U}});var t=e(8453),s=e(6540);function o(a){const n=Object.assign({p:"p",strong:"strong",em:"em",ul:"ul",li:"li",code:"code",a:"a",h2:"h2",span:"span",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",h3:"h3"},(0,t.RP)(),a.components),{TableOfContent:e,PageList:o,FAQWithStructuredData:p}=n;return p||r("FAQWithStructuredData",!0),o||r("PageList",!0),e||r("TableOfContent",!0),s.createElement(s.Fragment,null,s.createElement(e,{titles:[{label:"When Custom Map Marker Icons Are Useful",id:"when-custom-map-marker-icons-are-useful"},{label:"What Is a Custom Map Marker?",id:"what-is-a-custom-map-marker"},{label:"Google Maps Marker Icon",id:"google-maps-marker-icon"},{label:"Leaflet Marker Icon",id:"leaflet-marker-icon"},{label:"MapLibre GL Marker Icon",id:"maplibre-gl-marker-icon"},{label:"Other Map Libraries",id:"other-map-libraries"},{label:"Best Practices",id:"best-practices"},{label:"Learn More",id:"learn-more"},{label:"FAQ",id:"faq"}]}),"\n",s.createElement(n.p,null,"Default map pins work for a quick demo, but real applications often need ",s.createElement(n.strong,null,"custom map marker icons")," for brands, categories, statuses, and clearer visual scanning. A store locator, delivery dashboard, real estate map, or travel app can use different marker styles to show ",s.createElement(n.em,null,"what each location means")," before the user clicks anything. In this guide, we will use PNG/JPG marker images that can be reused across:"),"\n",s.createElement(n.ul,null,"\n",s.createElement(n.li,null,s.createElement(n.strong,null,"Google Maps")," - widely used for commercial web and mobile maps, with marker icons for stores, assets, and POIs."),"\n",s.createElement(n.li,null,s.createElement(n.strong,null,"Leaflet")," - a lightweight open-source map library where PNG markers can be added with ",s.createElement(n.code,null,"L.icon()"),"."),"\n",s.createElement(n.li,null,s.createElement(n.strong,null,"MapLibre GL")," - a vector map library where marker images can be used in HTML markers or symbol layers."),"\n"),"\n",s.createElement(n.p,null,s.createElement(n.a,{href:"/map-marker-icon-api/"},"Geoapify Map Marker API")," helps generate those marker images as URLs, so the same marker can be used in different map libraries with less manual asset work."),"\n",s.createElement("div",{className:"sticky-anchor",id:"when-custom-map-marker-icons-are-useful"}),"\n",s.createElement(n.h2,null,"When Custom Map Marker Icons Are Useful"),"\n",s.createElement(n.p,null,"Default map markers are intentionally simple: usually a single pin shape, one color, and no extra context. That is fine when a map shows only one location, but it becomes less useful when users need to compare many places or understand what each point represents."),"\n",s.createElement(n.p,null,"Here are default markers from popular map libraries:"),"\n",s.createElement("div",{className:"grid gap-4 md:grid-cols-3 width-default-wider"},s.createElement("div",null,s.createElement(n.span,{dangerouslySetInnerHTML:{__html:"<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 600px; '>\n <a class='gatsby-resp-image-link' href='/static/2dfb0a782099ba1698d71aeee96d9021/57dc1/default-google-maps-marker.png' style='display: block' target='_blank' rel='noopener'>\n <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 64.33333333333333%; position: relative; bottom: 0; left: 0; background-image: url('data:image/webp;base64,UklGRoAAAABXRUJQVlA4IHQAAABQBACdASoUAA0APtFUo0uoJKMhsAgBABoJQAqQUf8CA7y8SmkZea1RRugAAP7fFDSJIY1ZJqRJ0VgskGmLzdMMjq2nLczVk+Xw9bJ7PqICXlE+4URvv9uoKrHSOr5S7RHZgrJ+5NjityrZrH3yp1V6fgAAAA=='); background-size: cover; display: block;\"></span>\n <img class='gatsby-resp-image-image' alt='Default Google Maps marker' title='' src='/static/2dfb0a782099ba1698d71aeee96d9021/0a47e/default-google-maps-marker.png' srcset='/static/2dfb0a782099ba1698d71aeee96d9021/5a46d/default-google-maps-marker.png 300w,\n/static/2dfb0a782099ba1698d71aeee96d9021/fc2a6/default-google-maps-marker.png 450w,\n/static/2dfb0a782099ba1698d71aeee96d9021/0a47e/default-google-maps-marker.png 600w,\n/static/2dfb0a782099ba1698d71aeee96d9021/57dc1/default-google-maps-marker.png 718w' sizes='(max-width: 600px) 100v
1w, 600px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n </a>\n </span>"}})),s.createElement("div",null,s.createElement(n.span,{dangerouslySetInnerHTML:{__html:"<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 600px; '>\n <a class='gatsby-resp-image-link' href='/static/4739e8aeb463f08ef86dc7419b0e2d46/57dc1/default-leaflet-marker.png' style='display: block' target='_blank' rel='noopener'>\n <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 64.33333333333333%; position: relative; bottom: 0; left: 0; background-image: url('data:image/webp;base64,UklGRnoAAABXRUJQVlA4IG4AAAAwBACdASoUAA0APtFUo0uoJKMhsAgBABoJZgCdMoADQj4/a/cIPdalSUAA/ugUdMopZq6/zCBXqeNHlMZzFvpYsFLzn8wI3hcd54fG0LOM9qvPSI4l2glVHPeeF4bfYR/vF2LLuT5BQb/5o1AAAA=='); background-size: cover; display: block;\"></span>\n <img class='gatsby-resp-image-image' alt='Default Leaflet marker' title='' src='/static/4739e8aeb463f08ef86dc7419b0e2d46/0a47e/default-leaflet-marker.png' srcset='/static/4739e8aeb463f08ef86dc7419b0e2d46/5a46d/default-leaflet-marker.png 300w,\n/static/4739e8aeb463f08ef86dc7419b0e2d46/fc2a6/default-leaflet-marker.png 450w,\n/static/4739e8aeb463f08ef86dc7419b0e2d46/0a47e/default-leaflet-marker.png 600w,\n/static/4739e8aeb463f08ef86dc7419b0e2d46/57dc1/default-leaflet-marker.png 718w' sizes='(max-width: 600px) 100vw, 600px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n </a>\n </span>"}})),s.createElement("div",null,s.createElement(n.span,{dangerouslySetInnerHTML:{__html:"<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 600px; '>\n <a class='gatsby-resp-image-link' href='/static/8a056e081e9049d13f3c1e73baaa5641/57dc1/default-maplibre-gl-marker.png' style='display: block' target='_blank' rel='noopener'>\n <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 64.33333333333333%; position: relative; bottom: 0; left: 0; background-image: url('data:image/webp;base64,UklGRngAAABXRUJQVlA4IGwAAAAwBACdASoUAA0APtFUo0uoJKMhsAgBABoJaACdMoADQw+1AGdoRAAsegAA/vHnWc+xGGIGuxn4P096BhqDs2QOXAhy+ZwlLTCi6wc7gx6pombA7hQJEAmmi9/nHPBEdrPt6bhve2p2dFwAAAA='); background-size: cover; display: block;\"></span>\n <img class='gatsby-resp-image-image' alt='Default MapLibre GL marker' title='' src='/static/8a056e081e9049d13f3c1e73baaa5641/0a47e/default-maplibre-gl-marker.png' srcset='/static/8a056e081e9049d13f3c1e73baaa5641/5a46d/default-maplibre-gl-marker.png 300w,\n/static/8a056e081e9049d13f3c1e73baaa5641/fc2a6/default-maplibre-gl-marker.png 450w,\n/static/8a056e081e9049d13f3c1e73baaa5641/0a47e/default-maplibre-gl-marker.png 600w,\n/static/8a056e081e9049d13f3c1e73baaa5641/57dc1/default-maplibre-gl-marker.png 718w' sizes='(max-width: 600px) 100vw, 600px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n </a>\n </span>"}}))),"\n",s.createElement("div",{className:"image-caption"},"Default markers in Google Maps, Leaflet, and MapLibre GL are recognizable, but they do not show category, status, priority, or brand context."),"\n",s.createElement(n.p,null,"Custom marker icons add ",s.createElement(n.strong,null,"extra information directly on the map"),", before a user opens a popup or reads a side panel. Instead of showing every location with the same default pin, each marker can communicate something useful:"),"\n",s.createElement(n.ul,null,"\n",s.createElement(n.li,null,s.createElement(n.strong,null,"Place type")," - restaurants, hotels, parking lots, warehouses, service points, or customer locations."),"\n",s.createElement(n.li,null,s.createElement(n.strong,null,"Status")," - open or closed stores, active or completed deliveries, available or occupied assets."),"\n",s.createElement(n.li,null,s.createElement(n.strong,null,"Priority")," - urgent incidents, selected results, promoted locations, or recommended stops."),"\n",s.createElement(n.li,null,s.createElement(n.strong,null,"Brand or product context")," - company-colored pins, campaign markers, or product-specific icons."),"\n",s.createElement(n.li,null,s.createElement(n.strong,null,"Map readability")," - clearer scanning when many points appear close together."),"\n"),"\n",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:"<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 600px; '>\n <a class='gatsby-resp-image-link' href='/static/0b9f78da519007b537e4fdb7d3661b85/e8950/custom-map-marker-examples.png' style='display: block' target='_blank' rel='noopener'>\n <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 50%; position: relative; bottom: 0; left: 0; background-image: url('data:image/webp;
1base64,UklGRoIAAABXRUJQVlA4IHYAAABwAwCdASoUAAoAPtFUpEuoJKOhsAgBABoJQBYdhB7npwTfIEAA/url+soGONixssiTG6sfSXBFQTJZZvzxK9q4h1gPeU7/qA7G0NAGxOQsgoA2y0l58nnsEXNktueZDiR6YER7Y6QD7ey4mW7N22d4QRZ8AAAA'); background-size: cover; display: block;\"></span>\n <img class='gatsby-resp-image-image' alt='Custom Geoapify map marker icon examples' title='' src='/static/0b9f78da519007b537e4fdb7d3661b85/0a47e/custom-map-marker-examples.png' srcset='/static/0b9f78da519007b537e4fdb7d3661b85/5a46d/custom-map-marker-examples.png 300w,\n/static/0b9f78da519007b537e4fdb7d3661b85/fc2a6/custom-map-marker-examples.png 450w,\n/static/0b9f78da519007b537e4fdb7d3661b85/0a47e/custom-map-marker-examples.png 600w,\n/static/0b9f78da519007b537e4fdb7d3661b85/e8950/custom-map-marker-examples.png 2000w' sizes='(max-width: 600px) 100vw, 600px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n </a>\n </span>"}}),"\n",s.createElement("div",{className:"image-caption"},"Custom marker icons can show place type, status, priority, marker size, selected results, and recommended stops directly on the map."),"\n",s.createElement("div",{className:"sticky-anchor",id:"what-is-a-custom-map-marker"}),"\n",s.createElement(n.h2,null,"What Is a Custom Map Marker?"),"\n",s.createElement(n.p,null,"A custom map marker is a visual replacement for the default pin. Most map libraries support this by letting you pass an image, usually a ",s.createElement(n.strong,null,"PNG")," or ",s.createElement(n.strong,null,"JPG"),", as a marker URL or file path."),"\n",s.createElement(n.p,null,"Usually, custom markers are image files stored somewhere and served from a static URL. They can also be generated dynamically, for example with different text labels like ",s.createElement(n.code,null,"1"),", ",s.createElement(n.code,null,"2"),", ",s.createElement(n.code,null,"3"),", ",s.createElement(n.code,null,"4"),", or with changing colors, sizes, shapes, and icons."),"\n",s.createElement(n.table,null,s.createElement(n.thead,null,s.createElement(n.tr,null,s.createElement(n.th,null,"Static images"),s.createElement(n.th,null,"Dynamic images"))),s.createElement(n.tbody,null,s.createElement(n.tr,null,s.createElement(n.td,null,s.createElement(n.strong,null,"How it works:"),s.createElement("br"),"You create image files in advance, such as ",s.createElement(n.code,null,"restaurant-marker.png")," or ",s.createElement(n.code,null,"hotel-marker.png"),", and use those files as marker images.",s.createElement("br"),s.createElement("br"),s.createElement(n.strong,null,"Best for:"),s.createElement("br"),"A small fixed set of marker styles that does not change often."),s.createElement(n.td,null,s.createElement(n.strong,null,"How it works:"),s.createElement("br"),"You generate marker images from parameters such as color, size, shape, icon, or text.",s.createElement("br"),s.createElement("br"),s.createElement(n.strong,null,"Best for:"),s.createElement("br"),"Many marker variations, generated on demand without manually exporting each image.")))),"\n",s.createElement(n.p,null,"Static images are enough when the design is fixed. When marker styles depend on categories, statuses, sizes, labels, or brand colors, it is easier to generate marker images from parameters instead of preparing every file manually."),"\n",s.createElement("div",{className:"sticky-anchor",id:"creating-a-marker-icon-with-api"}),"\n",s.createElement(n.h3,null,"Creating a Marker Icon with API"),"\n",s.createElement(n.p,null,s.createElement(n.a,{href:"/map-marker-icon-api/"},"Geoapify Map Marker API")," lets you dynamically generate custom map marker images with URL parameters. You can choose a marker style, set colors and sizes, and add icon content from ",s.createElement(n.strong,null,s.createElement(n.a,{href:"https://fontawesome.com/v6/search?ip=classic&s=solid&ic=free-collection",target:"_blank",rel:"nofollow"},"Font Awesome")),", ",s.createElement(n.strong,null,s.createElement(n.a,{href:"https://fonts.google.com/icons",target:"_blank",rel:"nofollow"},"Material Icons")),", or ",s.createElement(n.strong,null,s.createElement(n.a,{href:"https://lucide.dev/icons/",target:"_blank",rel:"nofollow"},"Lucide Icons")),"."),"\n",s.createElement("div",{className:"grid gap-4 md:grid-cols-3 width-default-wider"},s.createElement("div",null,s.createElement(n.span,{dangerouslySetInnerHTML:{__html:"<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 600px; '>\n <a class='gatsby-resp-image-link' href='/static/c9e6fccf573ffab62a77dd6f57fcf97c/26a94/font-awesome-icons-screenshot.png' style='display: block' target='_blank' rel='noopener'>\n <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 99.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/webp;base64,UklGRnoAAABXRUJQVlA4IG4AAACQAwCdASoUABQAPtFgqU+oJSOiKAgBABoJaRFAAAF4vh529AvAAP7xNzPgQPlO+1nZtUy39qNi0maHh7vV1lgN2Qi0qbXDV3LQsdTEmeIeNPAdAEvkAqqJNvUweMLrzUEt+7wtH4jpDencZMcAAA=='); background-size: cover; display: block;\"></span>\n <img class='gatsby-resp-image-image' alt='Font Awesome icons screenshot' title='' src='/static/c9e6fccf573ffab62a77dd6f57fcf97c/0a47e/font-awesome-icons-screenshot.png' srcset='/static/c9e6fccf573ffab62a77dd6f57fcf97c/5a46d/font-awesome-icons-screenshot.png 300w,\n/static/c9e6fccf573ffab62a77dd6f57fcf97c/fc2a6/font-awesome-icons-screenshot.png 450w,\n/static/c9e6fccf573ffab62a77dd6f57fcf97c/0a47e/font-awesome-icons-screenshot.png 600w,\n/static/c9e6fccf573ffab62a77dd6f57fcf97c/26a94/font-awesome-icons-screenshot.png 1102w' sizes='(max-width: 600px) 100v
1w, 600px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n </a>\n </span>"}})),s.createElement("div",null,s.createElement(n.span,{dangerouslySetInnerHTML:{__html:"<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 600px; '>\n <a class='gatsby-resp-image-link' href='/static/eb769a656c54c5fefb2a2ce79ae66244/26a94/material-icons-screenshot.png' style='display: block' target='_blank' rel='noopener'>\n <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 99.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/webp;base64,UklGRoAAAABXRUJQVlA4IHQAAACQAwCdASoUABQAPtFiqk+oJaOiKAgBABoJaQ3KQAGXq9vGbsQAAP7xLTRQPqFBHYXfl3e+NJMyargsac8joMyiqK59TCLU93Br9sGWfSEP2mtN+z0WR9xZhnHy2HMl3pQuimOhQ+kHwFYpkBvARoJQgAAAAA=='); background-size: cover; display: block;\"></span>\n <img class='gatsby-resp-image-image' alt='Material Icons screenshot' title='' src='/static/eb769a656c54c5fefb2a2ce79ae66244/0a47e/material-icons-screenshot.png' srcset='/static/eb769a656c54c5fefb2a2ce79ae66244/5a46d/material-icons-screenshot.png 300w,\n/static/eb769a656c54c5fefb2a2ce79ae66244/fc2a6/material-icons-screenshot.png 450w,\n/static/eb769a656c54c5fefb2a2ce79ae66244/0a47e/material-icons-screenshot.png 600w,\n/static/eb769a656c54c5fefb2a2ce79ae66244/26a94/material-icons-screenshot.png 1102w' sizes='(max-width: 600px) 100vw, 600px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n </a>\n </span>"}})),s.createElement("div",null,s.createElement(n.span,{dangerouslySetInnerHTML:{__html:"<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 600px; '>\n <a class='gatsby-resp-image-link' href='/static/0e8876506
15d18ade344ea02bcd138416/26a94/lucide-icons-screenshot.png' style='display: block' target='_blank' rel='noopener'>\n <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 99.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/webp;base64,UklGRmwAAABXRUJQVlA4IGAAAADQBACdASoUABQAPtFgqU+oJSOiKAgBABoJaQAMKSw8gK9rMJ+d1xGT69tMeBgFQAD+9OT7j1IrdIqc4EgeVmyeyARqw4dnZClth3lYpn+9zLJzekaSpz+NFPMn4QAAAAA='); background-size: cover; display: block;\"></span>\n <img class='gatsby-resp-image-image' alt='Lucide icons screenshot' title='' src='/static/0e88765065d18ade344ea02bcd138416/0a47e/lucide-icons-screenshot.png' srcset='/static/0e88765065d18ade344ea02bcd138416/5a46d/lucide-icons-screenshot.png 300w,\n/static/0e88765065d18ade344ea02bcd138416/fc2a6/lucide-icons-screenshot.png 450w,\n/static/0e88765065d18ade344ea02bcd138416/0a47e/lucide-icons-screenshot.png 600w,\n/static/0e88765065d18ade344ea02bcd138416/26a94/lucide-icons-screenshot.png 1102w' sizes='(max-width: 600px) 100vw, 600px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n </a>\n </span>"}}))),"\n",s.createElement("div",{className:"image-caption"},"Geoapify Map Marker API can use Font Awesome, Material Icons, and Lucide Icons as marker content."),"\n",s.createElement(n.p,null,"The result is an image URL that can be used directly in Google Maps, Leaflet, MapLibre GL, OpenLayers, and other mapping libraries that accept custom marker image URLs."),"\n",s.createElement(n.table,null,s.createElement(n.thead,null,s.createElement(n.tr,null,s.createElement(n.th,null,"Parameter"),s.createElement(n.th,null,"Example"),s.createElement(n.th,null,"Description"))),s.createElement(n.tbody,null,s.createElement(n.tr,null,s.createElement(n.td,null,s.createElement(n.code,null,"type")),s.createElement(n.td,null,s.createElement(n.code,null,"awesome")),s.createElement(n.td,null,"Marker style or shape. Common options include ",s.createElement(n.code,null,"awesome"),", ",s.createElement(n.code,null,"material"),", and ",s.createElement(n.code,null,"circle"),".")),s.createElement(n.tr,null,s.createElement(n.td,null,s.createElement(n.code,null,"color")),s.createElement(n.td,null,s.createElement(n.code,null,"%23ff6b35")),s.createElement(n.td,null,"Marker background color. Use URL-encoded hex colors, where ",s.createElement(n.code,null,"#")," becomes ",s.createElement(n.code,null,"%23"),".")),s.createElement(n.tr,null,s.createElement(n.td,null,s.createElement(n.code,null,"size")),s.createElement(n.td,null,s.createElement(n.code,null,"60")),s.createElement(n.td,null,"Marker image size in pixels.")),s.createElement(n.tr,null,s.createElement(n.td,null,s.createElement(n.code,null,"icon")),s.createElement(n.td,null,s.createElement(n.code,null,"utensils")),s.createElement(n.td,null,"Icon name shown inside the marker.")),s.createElement(n.tr,null,s.createElement(n.td,null,s.createElement(n.code,null,"text")),s.createElement(n.td,null,s.createElement(n.code,null,"1")),s.createElement(n.td,null,"Short text label shown inside the marker, such as a number or letter.")),s.createElement(n.tr,null,s.createElement(n.td,null,s.createElement(n.code,null,"iconType")),s.createElement(n.td,null,s.createElement(n.code,null,"awesome")),s.createElement(n.td,null,"Icon set for the marker content: ",s.createElement(n.code,null,"awesome"),", ",s.createElement(n.code,null,"material"),", or ",s.createElement(n.code,null,"lucide"),".")),s.createElement(n.tr,null,s.createElement(n.td,null,s.createElement(n.code,null,"contentSize")),s.createElement(n.td,null,s.createElement(n.code,null,"24")),s.createElement(n.td,null,"Size of the icon or text inside the marker.")),s.createElement(n.tr,null,s.createElement(n.td,null,s.createElement(n.code,null,"contentColor")),s.createElement(n.td,null,s.createElement(n.code,null,"%23ffffff")),s.createElement(n.td,null,"Color of the icon or text inside the marker.")),s.createElement(n.tr,null,s.createElement(n.td,null,s.createElement(n.code,null,"scaleFactor")),s.createElement(n.td,null,s.createElement(n.code,null,"2")),s.createElement(n.td,null,"Creates a higher-resolution marker for retina displays.")),s.createElement(n.tr,null,s.createElement(n.td,null,s.createElement(n.code,null,"apiKey")),s.createElement(n.td,null,s.createElement(n.code,null,"YOUR_API_KEY")),s.createElement(n.td,null,"Your Geoapify API key.")))),"\n",s.createElement(n.p,null,"For example, this URL generates an orange restaurant marker with a Font Awesome utensils icon:"),"\n",s.createElement("div",{className:"width-default"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`https://api.geoapify.com/v2/icon/?type=awesome&color=%23ff6b35&size=60&icon=utensils&iconType=awesome&contentSize=24&contentColor=%23ffffff&scaleFactor=2&apiKey=YOUR_API_KEY`, this)"\n >\n <svg class="copy-icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e<path fill="#FFFFFF" d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg><svg class="success-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
1<path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>\n </button>\n </div>'}}),s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">https://api.geoapify.com/v2/icon/?type=awesome&color=%23ff6b35&size=60&icon=utensils&iconType=awesome&contentSize=24&contentColor=%23ffffff&scaleFactor=2&apiKey=YOUR_API_KEY</code></pre></div>'}})),"\n",s.createElement(n.p,null,"Once you have the marker image URL, the remaining step is to pass it to your map library as the marker icon. Here is how it works in Google Maps first."),"\n",s.createElement("div",{className:"sticky-anchor",id:"google-maps-marker-icon"}),"\n",s.createElement(n.h2,null,"How to Use a Custom Marker Icon in Google Maps"),"\n",s.createElement(n.p,null,"Google Maps supports custom graphic markers with the ",s.createElement(n.a,{href:"https://developers.google.com/maps/documentation/javascript/advanced-markers/graphic-markers",target:"_blank",rel:"nofollow"},"Advanced Markers API"),". The idea is simple: create an image element, set its ",s.createElement(n.code,null,"src")," to your marker image URL, and use that image as the marker graphic."),"\n",s.createElement(n.p,null,"For numbered pin markers like ",s.createElement(n.code,null,"1"),", ",s.createElement(n.code,null,"2"),", ",s.createElement(n.code,null,"3"),", ",s.createElement(n.code,null,"4"),", generate a separate Geoapify Marker Icon URL for each number. The ",s.createElement(n.code,null,"noWhiteCircle")," parameter keeps the number directly on the pin:"),"\n",s.createElement("div",{className:"width-default"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`https://api.geoapify.com/v2/icon/?type=awesome&color=%232f80ed&size=60&text=1&contentSize=18&contentColor=%23ffffff&noWhiteCircle&scaleFactor=2&apiKey=YOUR_API_KEY\nhttps://api.geoapify.com/v2/icon/?type=awesome&color=%232f80ed&size=60&text=2&contentSize=18&contentColor=%23ffffff&noWhiteCircle&scaleFactor=2&apiKey=YOUR_API_KEY\nhttps://api.geoapify.com/v2/icon/?type=awesome&color=%232f80ed&size=60&text=3&contentSize=18&contentColor=%23ffffff&noWhiteCircle&scaleFactor=2&apiKey=YOUR_API_KEY\nhttps://api.geoapify.com/v2/icon/?type=awesome&color=%232f80ed&size=60&text=4&contentSize=18&contentColor=%23ffffff&noWhiteCircle&scaleFactor=2&apiKey=YOUR_API_KEY`, this)"\n >\n <svg class="copy-icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e<path fill="#FFFFFF" d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg><svg class="success-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>\n </button>\n </div>'}}),s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">https://api.geoapify.com/v2/icon/?type=awesome&color=%232f80ed&size=60&text=1&contentSize=18&contentColor=%23ffffff&noWhiteCircle&scaleFactor=2&apiKey=YOUR_API_KEY\nhttps://api.geoapify.com/v2/icon/?type=awesome&color=%232f80ed&size=60&text=2&contentSize=18&contentColor=%23ffffff&noWhiteCircle&scaleFactor=2&apiKey=YOUR_API_KEY\nhttps://api.geoapify.com/v2/icon/?type=awesome&color=%232f80ed&size=60&text=3&contentSize=18&contentColor=%23ffffff&noWhiteCircle&scaleFactor=2&apiKey=YOUR_API_KEY\nhttps://api.geoapify.com/v2/icon/?type=awesome&color=%232f80ed&size=60&text=4&contentSize=18&contentColor=%23ffffff&noWhiteCircle&scaleFactor=2&apiKey=YOUR_API_KEY</code></pre></div>'}})),"\n",s.createElement(n.p,null,s.createElement(n.strong,null,"Marker size in this example:")),"\n",s.createElement(n.ul,null,"\n",s.createElement(n.li,null,s.createElement(n.code,null,"size=60")," sets the height of the marker pin itself."),"\n",s.createElement(n.li,null,"The generated image also includes the marker shadow, so the full displayed marker becomes ",s.createElement(n.code,null,"46x67")," CSS pixels."),"\n",s.createElement(n.li,null,"With ",s.createElement(n.code,null,"scaleFactor=2"),", the actual PNG is generated at ",s.createElement(n.code,null,"92x134")," pixels for sharper rendering on retina screens."),"\n",s.createElement(n.li,null,"The shadow takes ",s.createElement(n.code,null,"14px")," in the generated image, or ",s.createElement(n.code,null,"7px")," after scaling down to CSS pixels."),"\n"),"\n",s.createElement(n.p,null,"You can check the final generated image size by opening the marker URL in a browser. Because the shadow is part of the image, the Google Maps anchor should point to the pin tip above the shadow, not to the bottom edge of the image."),"\n",s.createElement(n.p,null,"Then pass those image URLs to Google Maps markers:"),"\n",s.createElement("div",{className:"width-default"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`async function addNumberedMarkers(map) {\n const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");\n\n const markerColor = "%232f80ed";\n const markerWidth = 46;\n const markerHeight = 67;\n const markerShadowOffset = 7;\n const locations = [\n { name: "Location 1", lat: 40.7128, lng: -74.0060 },\n { name: "Location 2", lat: 40.7152, lng: -74.0021 },\n { name: "Location 3", lat: 40.7181, lng: -74.0102 },\n { name: "Location 4", lat: 40.7214, lng: -74.0048 }\n ];\n\n locations.forEach((location, index) =>
1 {\n const markerNumber = index + 1;\n const markerIconUrl = \\`https://api.geoapify.com/v2/icon/?type=awesome&color=\\${markerColor}&size=60&text=\\${markerNumber}&contentSize=18&contentColor=%23ffffff&noWhiteCircle&scaleFactor=2&apiKey=YOUR_API_KEY\\`;\n const markerImage = document.createElement("img");\n\n markerImage.src = markerIconUrl;\n markerImage.alt = \\`Marker \\${markerNumber}\\`;\n markerImage.style.width = \\`\\${markerWidth}px\\`;\n markerImage.style.height = \\`\\${markerHeight}px\\`;\n\n const marker = new AdvancedMarkerElement({\n map,\n position: { lat: location.lat, lng: location.lng },\n title: location.name,\n anchorLeft: \\`-\\${markerWidth / 2}px\\`,\n anchorTop: \\`-\\${markerHeight - markerShadowOffset}px\\`\n });\n\n marker.append(markerImage);\n });\n}`, this)"\n >\n <svg class="copy-icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e<path fill="#FFFFFF" d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg><svg class="success-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>\n </button>\n </div>'}}),s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">addNumberedMarkers</span><span class="token punctuation">(</span><span class="token parameter">map</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> AdvancedMarkerElement <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span><span class="token function">importLibrary</span><span class="token punctuation">(</span><span class="token string">"marker"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">const</span> markerColor <span class="token operator">=</span> <span class="token string">"%232f80ed"</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> markerWidth <span class="token operator">=</span> <span class="token number">46</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> markerHeight <span class="token operator">=</span> <span class="token number">67</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> markerShadowOffset <span class="token operator">=</span> <span class="token number">7</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> locations <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"Location 1"</span><span class="token punctuation">,</span> <span class="token literal-property property">lat</span><span class="token operator">:</span> <span class="token number">40.7128</span><span class="token punctuation">,</span> <span class="token literal-property property">lng</span><span class="token operator">:</span> <span class="token operator">-</span><span class="token number">74.0060</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> <span class="token literal-property property">
1name</span><span class="token operator">:</span> <span class="token string">"Location 2"</span><span class="token punctuation">,</span> <span class="token literal-property property">lat</span><span class="token operator">:</span> <span class="token number">40.7152</span><span class="token punctuation">,</span> <span class="token literal-property property">lng</span><span class="token operator">:</span> <span class="token operator">-</span><span class="token number">74.0021</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"Location 3"</span><span class="token punctuation">,</span> <span class="token literal-property property">lat</span><span class="token operator">:</span> <span class="token number">40.7181</span><span class="token punctuation">,</span> <span class="token literal-property property">lng</span><span class="token operator">:</span> <span class="token operator">-</span><span class="token number">74.0102</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"Location 4"</span><span class="token punctuation">,</span> <span class="token literal-property property">lat</span><span class="token operator">:</span> <span class="token number">40.7214</span><span class="token punctuation">,</span> <span class="token literal-property property">lng</span><span class="token operator">:</span> <span class="token operator">-</span><span class="token number">74.0048</span> <span class="token punctuation">}</span>\n <span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n locations<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">location<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> markerNumber <span class="token operator">=</span> index <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> markerIconUrl <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://api.geoapify.com/v2/icon/?type=awesome&color=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>markerColor<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&size=60&text=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>markerNumber<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&contentSize=18&contentColor=%23ffffff&noWhiteCircle&scaleFactor=2&apiKey=YOUR_API_KEY</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> markerImage <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"img"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n markerImage<span class="token punctuation">.</span>src <span class="token operator">=</span> markerIconUrl<span class="token punctuation">;</span>\n markerImage<span class="token punctuation">.</span>alt <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Marker </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>markerNumber<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>\n markerImage<span class="token punctuation">.</span>style<span class="token punctuation">.</span>width <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>markerWidth<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">px</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>\n markerImage<span class="token punctuation">.</span>style<span class="token punctuation">.</span>height <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>markerHeight<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">px</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>\n\n <span class="token keyword">const</span> marker <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">AdvancedMarkerElement</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n map<span class="token punctuation">,</span>
1\n <span class="token literal-property property">position</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">lat</span><span class="token operator">:</span> location<span class="token punctuation">.</span>lat<span class="token punctuation">,</span> <span class="token literal-property property">lng</span><span class="token operator">:</span> location<span class="token punctuation">.</span>lng <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> location<span class="token punctuation">.</span>name<span class="token punctuation">,</span>\n <span class="token literal-property property">anchorLeft</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>markerWidth <span class="token operator">/</span> <span class="token number">2</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">px</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n <span class="token literal-property property">anchorTop</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>markerHeight <span class="token operator">-</span> markerShadowOffset<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">px</span><span class="token template-punctuation string">`</span></span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n marker<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>markerImage<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre></div>'}})),"\n",s.createElement(n.p,null,"Here is how this can look on a Google Maps map:"),"\n",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:"<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 600px; '>\n <a class='gatsby-resp-image-link' href='/static/802f1b863a9a5fd2dec4bf547b751816/78958/google-maps-with-custom-map-markers.png' style='display: block' target='_blank' rel='noopener'>\n <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 40.33333333333333%; position: relative; bottom: 0; left: 0; background-image: url('data:image/webp;base64,UklGRlIAAABXRUJQVlA4IEYAAACQAwCdASoUAAgAPtFWo0uoJKMhsAgBABoJZ12AWUEU/26Feh4AAP7wSzlBDSX06Go4XyUDNqWvWSEi6HYI4OUNrGBD3QAA'); background-size: cover; display: block;\"></span>\n <img class='gatsby-resp-image-image' alt='Numbered Geoapify pin markers in Google Maps' title='' src='/static/802f1b863a9a5fd2dec4bf547b751816/0a47e/google-maps-with-custom-map-markers.png' srcset='/static/802f1b863a9a5fd2dec4bf547b751816/5a46d/google-maps-with-custom-map-markers.png 300w,\n/static/802f1b863a9a5fd2dec4bf547b751816/fc2a6/google-maps-with-custom-map-markers.png 450w,\n/static/802f1b863a9a5fd2dec4bf547b751816/0a47e/google-maps-with-custom-map-markers.png 600w,\n/static/802f1b863a9a5fd2dec4bf547b751816/78958/google-maps-with-custom-map-markers.png 1320w' sizes='(max-width: 600px) 100vw, 600px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n </a>\n </span>"}}),"\n",s.createElement("div",{className:"image-caption"},"Numbered Geoapify marker icons displayed as custom graphic markers in Google Maps."),"\n",s.createElement(n.p,null,"This approach works well when marker numbers, colors, or sizes are generated from your data. For example, a route planner can use ",s.createElement(n.code,null,"1"),", ",s.createElement(n.code,null,"2"),", ",s.createElement(n.code,null,"3"),", ",s.createElement(n.code,null,"4")," for stop order, while a search results map can use the same pattern for ranked results."),"\n",s.createElement("div",{className:"sticky-anchor",id:"leaflet-marker-icon"}),"\n",s.createElement(n.h2,null,"How to Use a Custom Marker Icon in Leaflet"),"\n",s.createElement(n.p,null,"Leaflet uses ",s.createElement(n.code,null,"L.icon()")," to define a custom marker image, then passes that icon to ",s.createElement(n.code,null,"L.marker()"),". This example shows places with a ",s.createElement(n.code,null,"priority")," value from ",s.createElement(n.code,null,"0")," to ",s.createElement(n.code,null,"1"),", where low-priority places are green and high-priority places become red."),"\n",s.createElement("div",{className:"width-default"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`const API_KEY = "YOUR_API_KEY";\n\nconst locations = [\n { name: "Low priority", lat: 51.505, lon: -0.09, priority: 0 },\n { name: "Medium priority", lat: 51.51, lon: -0.1, priority: 0.5 },\n { name: "High priority", lat: 51.515, lon: -0.11, priority: 1 }\n];\n\nfunction priorityToColor(priority) {\n const value = Math.max(0, Math.min(1, priority));\n const stops = [\n { value: 0, color: { r: 39, g: 174, b: 96 } }, // green\n { value: 0.33, color: { r: 242, g: 201, b: 76 } }
1, // yellow\n { value: 0.66, color: { r: 242, g: 153, b: 74 } }, // orange\n { value: 1, color: { r: 235, g: 87, b: 87 } } // red\n ];\n\n const endIndex = stops.findIndex((stop) => value <= stop.value);\n const end = stops[endIndex];\n const start = stops[Math.max(0, endIndex - 1)];\n const ratio = (value - start.value) / (end.value - start.value || 1);\n const r = Math.round(start.color.r + (end.color.r - start.color.r) * ratio);\n const g = Math.round(start.color.g + (end.color.g - start.color.g) * ratio);\n const b = Math.round(start.color.b + (end.color.b - start.color.b) * ratio);\n\n return \\`#\\${[r, g, b].map((color) => color.toString(16).padStart(2, "0")).join("")}\\`;\n}\n\nfunction createPriorityMarkerIcon(priority) {\n const color = encodeURIComponent(priorityToColor(priority));\n const iconUrl = \\`https://api.geoapify.com/v2/icon/?type=awesome&color=\\${color}&size=60&icon=flag&contentSize=18&contentColor=%23ffffff&noWhiteCircle&scaleFactor=2&apiKey=\\${API_KEY}\\`;\n\n return L.icon({\n iconUrl,\n // Display size of the generated marker image in CSS pixels.\n iconSize: [46, 67],\n // Bottom-center of the visible pin, adju
1sted above the shadow.\n iconAnchor: [23, 60],\n // Open the popup above the marker.\n popupAnchor: [0, -62]\n });\n}\n\nlocations.forEach((location) => {\n L.marker([location.lat, location.lon], {\n icon: createPriorityMarkerIcon(location.priority)\n })\n .bindPopup(\\`\\${location.name}: priority \\${location.priority}\\`)\n .addTo(map);\n});`, this)"\n >\n <svg class="copy-icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e<path fill="#FFFFFF" d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg><svg class="success-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>\n </button>\n </div>'}}),s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token constant">API_KEY</span> <span class="token operator">=</span> <span class="token string">"YOUR_API_KEY"</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> locations <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"Low priority"</span><span class="token punctuation">,</span> <span class="token literal-property property">lat</span><span class="token operator">:</span> <span class="token number">51.505</span><span class="token punctuation">,</span> <span class="token literal-property property">lon</span><span class="token operator">:</span> <span class="token operator">-</span><span class="token number">0.09</span><span class="token punctuation">,</span> <span class="token literal-property property">priority</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"Medium priority"</span><span class="token punctuation">,</span> <span class="token literal-property property">lat</span><span class="token operator">:</span> <span class="token number">51.51</span><span class="token punctuation">,</span> <span class="token literal-property property">lon</span><span class="token operator">:</span> <span class="token operator">-</span><span class="token number">0.1</span><span class="token punctuation">,</span> <span class="token literal-property property">priority</span><span class="token operator">:</span> <span class="token number">0.5</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"High priority"</span><span class="token punctuation">,</span> <span class="token literal-property property">lat</span><span class="token operator">:</span> <span class="token number">51.515</span><span class="token punctuation">,</span> <span class="token literal-property property">lon</span><span class="token operator">:</span> <span class="token operator">-</span><span class="token number">0.11</span><span class="token punctuation">,</span> <span class="token literal-property property">priority</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function">priorityToColor</span><span class="token punctuation">(</span><span class="token parameter">priority</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> value <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> Math<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> priority<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> stops <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">r</span><span class="token operator">:</span> <span class="token number">39</span><span class="token punctuation">,</span> <span class="token literal-property property">g</span><span class="token operator">:</span> <span class="token number">174</span><span class="token punctuation">,</span> <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">96</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// green</span>\n <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">0.33</span><span class="token punctuation">,</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">r</span><span class="token operator">:</span> <span class="token number">242</span><span class="token punctuation">,</span> <span class="token literal-property property">g</span><span class="token operator">:</span> <span class="token number">201</span><span class="token punctuation">,</span> <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">76</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// yellow</span>\n <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">0.66</span><span class="token punctuation">,</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">r</span><span class="token operator">:</span> <span class="token number">242</span><span class="token punctuation">,</span> <span class="token literal-property property">g</span><span class="token operator">:</span> <span class="token number">
1153</span><span class="token punctuation">,</span> <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">74</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// orange</span>\n <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">r</span><span class="token operator">:</span> <span class="token number">235</span><span class="token punctuation">,</span> <span class="token literal-property property">g</span><span class="token operator">:</span> <span class="token number">87</span><span class="token punctuation">,</span> <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">87</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// red</span>\n <span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n <span class="token keyword">const</span> endIndex <span class="token operator">=</span> stops<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">stop</span><span class="token punctuation">)</span> <span class="token operator">=></span> value <span class="token operator"><=</span> stop<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> end <span class="token operator">=</span> stops<span class="token punctuation">[</span>endIndex<span class="token punctuation">]</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> start <span class="token operator">=</span> stops<span class="token punctuation">[</span>Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> endIndex <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> ratio <span class="token operator">=</span> <span class="token punctuation">(</span>value <span class="token operator">-</span> start<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token punctuation">(</span>end<span class="token punctuation">.</span>value <span class="token operator">-</span> start<span class="token punctuation">.</span>value <span class="token operator">||</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> r <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>start<span class="token punctuation">.</span>color<span class="token punctuation">.</span>r <span class="token operator">+</span> <span class="token punctuation">(</span>end<span class="token punctuation">.</span>color<span class="token punctuation">.</span>r <span class="token operator">-</span> start<span class="token punctuation">.</span>color<span class="token punctuation">.</span>r<span class="token punctuation">)</span> <span class="token operator">*</span> ratio<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> g <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>start<span class="token punctuation">.</span>color<span class="token punctuation">.</span>g <span class="token operator">+</span> <span class="token punctuation">(</span>end<span class="token punctuation">.</span>color<span class="token punctuation">.</span>g <span class="token operator">-</span> start<span class="token punctuation">.</span>color<span class="token punctuation">.</span>g<span class="token punctuation">)</span> <span class="token operator">*</span> ratio<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> b <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>start<span class="token punctuation">.</span>color<span class="token punctuation">.</span>b <span class="token operator">+</span> <span class="token punctuation">(</span>end<span class="token punctuation">.</span>color<span class="token punctuation">.</span>b <span class="token operator">-</span> start<span class="token punctuation">.</span>color<span class="token punctuation">.</span>b<span class="token punctuation">)</span> <span class="token operator">*</span> ratio<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
1#</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token punctuation">[</span>r<span class="token punctuation">,</span> g<span class="token punctuation">,</span> b<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">color</span><span class="token punctuation">)</span> <span class="token operator">=></span> color<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">padStart</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">"0"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">function</span> <span class="token function">createPriorityMarkerIcon</span><span class="token punctuation">(</span><span class="token parameter">priority</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> color <span class="token operator">=</span> <span class="token function">encodeURIComponent</span><span class="token punctuation">(</span><span class="token function">priorityToColor</span><span class="token punctuation">(</span>priority<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> iconUrl <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://api.geoapify.com/v2/icon/?type=awesome&color=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>color<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&size=60&icon=flag&contentSize=18&contentColor=%23ffffff&noWhiteCircle&scaleFactor=2&apiKey=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">API_KEY</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>\n\n <span class="token keyword">return</span> <span class="token constant">L</span><span class="token punctuation">.</span><span class="token function">icon</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n iconUrl<span class="token punctuation">,</span>\n <span class="token comment">// Display size of the generated marker image in CSS pixels.</span>\n <span class="token literal-property property">iconSize</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">46</span><span class="token punctuation">,</span> <span class="token number">67</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token comment">
1// Bottom-center of the visible pin, adjusted above the shadow.</span>\n <span class="token literal-property property">iconAnchor</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">60</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token comment">// Open the popup above the marker.</span>\n <span class="token literal-property property">popupAnchor</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">62</span><span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\nlocations<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">location</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token constant">L</span><span class="token punctuation">.</span><span class="token function">marker</span><span class="token punctuation">(</span><span class="token punctuation">[</span>location<span class="token punctuation">.</span>lat<span class="token punctuation">,</span> location<span class="token punctuation">.</span>lon<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token function">createPriorityMarkerIcon</span><span class="token punctuation">(</span>location<span class="token punctuation">.</span>priority<span class="token punctuation">)</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token function">bindPopup</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>location<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">: priority </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>location<span class="token punctuation">.</span>priority<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token function">addTo</span><span class="token punctuation">(</span>map<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}})),"\n",s.createElement(n.p,null,"The ",s.createElement(n.code,null,"priorityToColor()")," function converts a numeric priority into a color scale: green, yellow, orange, then red. A priority of ",s.createElement(n.code,null,"0")," becomes green, ",s.createElement(n.code,null,"1")," becomes red, and values between them move through yellow and orange."),"\n",s.createElement(n.p,null,"The ",s.createElement(n.code,null,"createPriorityMarkerIcon()")," function then adds that color to the Geoapify Marker Icon API URL. Leaflet receives the generated image URL through ",s.createElement(n.code,null,"L.icon()"),", so every marker can have its own color without preparing separate image files."),"\n",s.createElement(n.p,null,"For example, the generated marker URLs can look like this:"),"\n",s.createElement("div",{className:"width-default"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`# priority: 0\nhttps://api.geoapify.com/v2/icon/?type=awesome&color=%2327ae60&size=60&icon=flag&contentSize=18&contentColor=%23ffffff&noWhiteCircle&scaleFactor=2&apiKey=YOUR_API_KEY\n\n# priority: 0.5\nhttps://api.geoapify.com/v2/icon/?type=awesome&color=%23f2b04b&size=60&icon=flag&contentSize=18&contentColor=%23ffffff&noWhiteCircle&scaleFactor=2&apiKey=YOUR_API_KEY\n\n# priority: 1\nhttps://api.geoapify.com/v2/icon/?type=awesome&color=%23eb5757&size=60&icon=flag&contentSize=18&contentColor=%23ffffff&noWhiteCircle&scaleFactor=2&apiKey=YOUR_API_KEY`, this)"\n >\n <svg class="copy-icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e<path fill="#FFFFFF" d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg><svg class="success-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
1<path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>\n </button>\n </div>'}}),s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text"># priority: 0\nhttps://api.geoapify.com/v2/icon/?type=awesome&color=%2327ae60&size=60&icon=flag&contentSize=18&contentColor=%23ffffff&noWhiteCircle&scaleFactor=2&apiKey=YOUR_API_KEY\n\n# priority: 0.5\nhttps://api.geoapify.com/v2/icon/?type=awesome&color=%23f2b04b&size=60&icon=flag&contentSize=18&contentColor=%23ffffff&noWhiteCircle&scaleFactor=2&apiKey=YOUR_API_KEY\n\n# priority: 1\nhttps://api.geoapify.com/v2/icon/?type=awesome&color=%23eb5757&size=60&icon=flag&contentSize=18&contentColor=%23ffffff&noWhiteCircle&scaleFactor=2&apiKey=YOUR_API_KEY</code></pre></div>'}})),"\n",s.createElement(n.p,null,"Here is how priority-based custom markers can look in Leaflet:"),"\n",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:"<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 600px; '>\n <a class='gatsby-resp-image-link' href='/static/2f23df513f0b66e387540d8f22af3009/81386/leaflet-priority-map-markers.png' style='display: block' target='_blank' rel='noopener'>\n <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 40.33333333333333%; position: relative; bottom: 0; left: 0; background-image: url('data:image/webp;base64,UklGRkgAAABXRUJQVlA4IDwAAADwAgCdASoUAAgAPtFUo0uoJKMhsAgBABoJZ2i2AD5ggAD+8H3tuse70h+uWk+jtiD0d8jVA+S4LcjgAAA='); background-size: cover; display: block;\"></span>\n <img class='gatsby-resp-image-image' alt='Priority-based Geoapify marker icons in Leaflet' title='' src='/static/2f23df513f0b66e387540d8f22af3009/0a47e/leaflet-priority-map-markers.png' srcset='/static/2f23df513f0b66e387540d8f22af3009/5a46d/leaflet-priority-map-markers.png 300w,\n/static/2f23df513f0b66e387540d8f22af3009/fc2a6/leaflet-priority-map-markers.png 450w,\n/static/2f23df513f0b66e387540d8f22af3009/0a47e/leaflet-priority-map-markers.png 600w,\n/static/2f23df513f0b66e387540d8f22af3009/81386/leaflet-priority-map-markers.png 2640w' sizes='(max-width: 600px) 100vw, 600px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n </a>\n </span>"}}),"\n",s.createElement("div",{className:"image-caption"},"Leaflet map with Geoapify marker icons colored by priority from green to red."),"\n",s.createElement("div",{className:"sticky-anchor",id:"maplibre-gl-marker-icon"}),"\n",s.createElement(n.h2,null,"How to Use a Custom Marker Icon in MapLibre GL"),"\n",s.createElement(n.p,null,"In MapLibre GL, one practical way to use custom marker images is to create an HTML marker element and pass it to ",s.createElement(n.a,{href:"https://maplibre.org/maplibre-gl-js/docs/API/classes/Marker/",target:"_blank",rel:"nofollow"},s.createElement(n.code,null,"new maplibregl.Marker({ element })")),". This follows the same pattern as the official ",s.createElement(n.a,{href:"https://maplibre.org/maplibre-gl-js/docs/examples/custom-marker-icons/",target:"_blank",rel:"nofollow"},"custom marker example"),". This example uses different Geoapify marker icons for different restaurant categories."),"\n",s.createElement("div",{className:"width-default"},s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`const API_KEY = "YOUR_API_KEY";\n\nconst restaurantIconCategories = {\n "burger": ["catering.restaurant.american", "catering.restaurant.burger"],\n "pizza-slice": ["catering.restaurant.italian", "catering.restaurant.pizza"],\n "fish": ["catering.restaurant.fish", "catering.restaurant.sushi"],\n "shrimp": ["catering.restaurant.seafood", "catering.restaurant.tapas"],\n "drumstick-bite": ["catering.restaurant.chicken", "catering.restaurant.kebab"],\n "pepper-hot": ["catering.restaurant.mexican", "catering.restaurant.tacos"],\n "bowl-rice": ["catering.restaurant.asian", "catering.restaurant.thai"],\n "fire": ["catering.restaurant.barbecue"]\n};\n\nconst restaurants = [\n {\n name: "Burger Place",\n coordinates: [-80.6045, 28.0733],\n categories: ["catering.restaurant", "catering.restaurant.burger"]\n },\n {\n name: "Pizza Corner",\n coordinates: [-80.6072, 28.0711],\n categories: ["catering.restaurant", "catering.restaurant.pizza"]\n },\n {\n name: "Sushi Bar",\n coordinates: [-80.6013, 28.0754],\n categories: ["catering.restaurant", "catering.restaurant.sushi"]\n }\n];\n\nfunction getRestaurantIconName(categories) {\n const categorySet = new Set(categories || []);\n\n for (const [iconName, iconCategories] of Object.entries(restaurantIconCategories)) {\n if (iconCategories.some((category) => categorySet.has(category))) {\n return iconName;\n }\n }\n\n return "utensils";\n}\n\nfunction restaurantMarkerIconUrl(iconName) {\n return \\`https://api.geoapify.com/v2/icon/?type=material&color=%23E35D5B&size=50&iconType=awesome&icon=\\${iconName}&contentSize=20&scaleFactor=2&noWhiteCircle&apiKey=\\${API_KEY}\\`;\n}\n\nfunction createRestaurantMarker(categories) {\n const markerElement = document.createElement("div");\n const markerIcon = document.createElement("img");\n\n markerIcon.src = restaurantMarkerIconUrl(getRestaurantIconName(categories));\n markerIcon.alt = "Restaurant";\n markerIcon.style.width = "40px";\n markerIcon.style.height = "58px";\n\n markerElement.appendChild(markerIcon);\n\n return markerElement;\n}
1\n\nrestaurants.forEach((restaurant) => {\n new maplibregl.Marker({\n element: createRestaurantMarker(restaurant.categories),\n anchor: "bottom",\n offset: [0, 5]\n })\n .setLngLat(restaurant.coordinates)\n .setPopup(new maplibregl.Popup().setText(restaurant.name))\n .addTo(map);\n});`, this)"\n >\n <svg class="copy-icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e<path fill="#FFFFFF" d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg><svg class="success-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>\n </button>\n </div>'}}),s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> <span class="token constant">API_KEY</span> <span class="token operator">=</span> <span class="token string">"YOUR_API_KEY"</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> restaurantIconCategories <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token string-property property">"burger"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"catering.restaurant.american"</span><span class="token punctuation">,</span> <span class="token string">"catering.restaurant.burger"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token string-property property">"pizza-slice"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"catering.restaurant.italian"</span><span class="token punctuation">,</span> <span class="token string">"catering.restaurant.pizza"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token string-property property">"fish"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"catering.restaurant.fish"</span><span class="token punctuation">,</span> <span class="token string">"catering.restaurant.sushi"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token string-property property">"shrimp"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"catering.restaurant.seafood"</span><span class="token punctuation">,</span> <span class="token string">"catering.restaurant.tapas"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token string-property property">"drumstick-bite"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"catering.restaurant.chicken"</span><span class="token punctuation">,</span> <span class="token string">"catering.restaurant.kebab"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token string-property property">"pepper-hot"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"catering.restaurant.mexican"</span><span class="token punctuation">,</span> <span class="token string">"catering.restaurant.tacos"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token string-property property">"bowl-rice"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"catering.restaurant.asian"</span><span class="token punctuation">,</span> <span class="token string">"catering.restaurant.thai"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token string-property property">"fire"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"catering.restaurant.barbecue"</span><span class="token punctuation">]</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> restaurants <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">
1name</span><span class="token operator">:</span> <span class="token string">"Burger Place"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">coordinates</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">80.6045</span><span class="token punctuation">,</span> <span class="token number">28.0733</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token literal-property property">categories</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"catering.restaurant"</span><span class="token punctuation">,</span> <span class="token string">"catering.restaurant.burger"</span><span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"Pizza Corner"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">coordinates</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">80.6072</span><span class="token punctuation">,</span> <span class="token number">28.0711</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token literal-property property">categories</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"catering.restaurant"</span><span class="token punctuation">,</span> <span class="token string">"catering.restaurant.pizza"</span><span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"Sushi Bar"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">coordinates</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">80.6013</span><span class="token punctuation">,</span> <span class="token number">28.0754</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token literal-property property">categories</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"catering.restaurant"</span><span class="token punctuation">,</span> <span class="token string">"catering.restaurant.sushi"</span><span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function">getRestaurantIconName</span><span class="token punctuation">(</span><span class="token parameter">categories</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> categorySet <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>categories <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> <span class="token punctuation">[</span>iconName<span class="token punctuation">,</span> iconCategories<span class="token punctuation">]</span> <span class="token keyword">of</span> Object<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span>restaurantIconCategories<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">if</span> <span class="token punctuation">(</span>iconCategories<span class="token punctuation">.</span><span class="token function">
1some</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">category</span><span class="token punctuation">)</span> <span class="token operator">=></span> categorySet<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>category<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> iconName<span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n\n <span class="token keyword">return</span> <span class="token string">"utensils"</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">function</span> <span class="token function">restaurantMarkerIconUrl</span><span class="token punctuation">(</span><span class="token parameter">iconName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://api.geoapify.com/v2/icon/?type=material&color=%23E35D5B&size=50&iconType=awesome&icon=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>iconName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&contentSize=20&scaleFactor=2&noWhiteCircle&apiKey=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">API_KEY</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">function</span> <span class="token function">createRestaurantMarker</span><span class="token punctuation">(</span><span class="token parameter">categories</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> markerElement <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> markerIcon <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"img"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n markerIcon<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token function">restaurantMarkerIconUrl</span><span class="token punctuation">(</span><span class="token function">getRestaurantIconName</span><span class="token punctuation">(</span>categories<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n markerIcon<span class="token punctuation">.</span>alt <span class="token operator">=</span> <span class="token string">"Restaurant"</span><span class="token punctuation">;</span>\n markerIcon<span class="token punctuation">.</span>style<span class="token punctuation">.</span>width <span class="token operator">=</span> <span class="token string">"40px"</span><span class="token punctuation">;</span>\n markerIcon<span class="token punctuation">.</span>style<span class="token punctuation">.</span>height <span class="token operator">=</span> <span class="token string">"58px"</span><span class="token punctuation">;</span>\n\n markerElement<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>markerIcon<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">return</span> markerElement<span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\nrestaurants<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">restaurant</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">new</span> <span class="token class-name">
1maplibregl<span class="token punctuation">.</span>Marker</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">element</span><span class="token operator">:</span> <span class="token function">createRestaurantMarker</span><span class="token punctuation">(</span>restaurant<span class="token punctuation">.</span>categories<span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token literal-property property">anchor</span><span class="token operator">:</span> <span class="token string">"bottom"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">offset</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token function">setLngLat</span><span class="token punctuation">(</span>restaurant<span class="token punctuation">.</span>coordinates<span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token function">setPopup</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">maplibregl<span class="token punctuation">.</span>Popup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setText</span><span class="token punctuation">(</span>restaurant<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token function">addTo</span><span class="token punctuation">(</span>map<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}})),"\n",s.createElement(n.p,null,"Here is how category-based restaurant markers can look in MapLibre GL:"),"\n",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:"<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 600px; '>\n <a class='gatsby-resp-image-link' href='/static/1309db21f0392190cba76e0ab38ac856/81386/maplibre-restaurant-category-markers.png' style='display: block' target='_blank' rel='noopener'>\n <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 59.66666666666667%; position: relative; bottom: 0; left: 0; background-image: url('data:image/webp;base64,UklGRloAAABXRUJQVlA4IE4AAAAQAwCdASoUAAwAPtFUo0uoJKMhsAgBABoJQBOgBaDzS+AA/vBpHGRL1YCnyc+SQu4IknONdnoM+7bw18nXAIP4FDil/k3BfJNYJehnAAA='); background-size: cover; display: block;\"></span>\n <img class='gatsby-resp-image-image' alt='Restaurant category markers in MapLibre GL' title='' src='/static/1309db21f0392190cba76e0ab38ac856/0a47e/maplibre-restaurant-category-markers.png' srcset='/static/1309db21f0392190cba76e0ab38ac856/5a46d/maplibre-restaurant-category-markers.png 300w,\n/static/1309db21f0392190cba76e0ab38ac856/fc2a6/maplibre-restaurant-category-markers.png 450w,\n/static/1309db21f0392190cba76e0ab38ac856/0a47e/maplibre-restaurant-category-markers.png 600w,\n/static/1309db21f0392190cba76e0ab38ac856/81386/maplibre-restaurant-category-markers.png 2640w' sizes='(max-width: 600px) 100vw, 600px' style='width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;' loading='lazy' decoding='async'>\n </a>\n </span>"}}),"\n",s.createElement("div",{className:"image-caption"},"MapLibre GL map with Geoapify marker icons selected by restaurant category."),"\n",s.createElement(n.p,null,"Here, ",s.createElement(n.code,null,"getRestaurantIconName()")," chooses an icon from the restaurant categories, and ",s.createElement(n.code,null,"restaurantMarkerIconUrl()")," turns that icon name into a Geoapify Marker Icon API URL. MapLibre GL receives the generated image through a normal HTML ",s.createElement(n.code,null,"<img>")," element, while ",s.createElement(n.a,{href:"https://maplibre.org/maplibre-gl-js/docs/API/classes/Marker/#setpopup",target:"_blank",rel:"nofollow"},s.createElement(n.code,null,"setPopup()"))," attaches a popup to each marker."),"\n",s.createElement("div",{className:"sticky-anchor",id:"other-map-libraries"}),"\n",s.createElement(n.h2,null,"Other Map Libraries"),"\n",s.createElement(n.p,null,"The same Geoapify marker image URL can be used in other map libraries that support custom image markers. The exact option name changes by library, but the idea is the same: pass the generated PNG/JPG URL as the marker image."),"\n",s.createElement(n.table,null,s.createElement(n.thead,null,s.createElement(n.tr,null,s.createElement(n.th,null,"Library"),s.createElement(n.th,null,"How custom marker images are usually added"),s.createElement(n.th,null,"Docs"))),s.createElement(n.tbody,null,s.createElement(n.tr,null,s.createElement(n.td,null,"OpenLayers"),s.createElement(n.td,null,"Use ",s.createElement(n.code,null,"ol.style.Icon")," for point features."),s.createElement(n.td,null,s.createElement(n.a,{href:"https://openlayers.org/en/latest/examples/icon.html",target:"_blank",rel:"nofollow"},"Icon example"))),s.createElement(n.tr,null,s.createElement(n.td,null,"Mapbox GL JS"),s.createElement(n.td,null,"Use an HTML marker with a custom element, or load an image for a symbol layer."),s.createElement(n.td,null,s.createElement(n.a,{href:"https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons/",target:"_blank",rel:"nofollow"},"Custom marker"))),s.createElement(n.tr,null,s.createElement(n.td,null,"HERE Maps"),s.createElement(n.td,null,"Use an image icon with ",s.createElement(n.code,null,"H.map.Icon"),"."),s.createElement(n.td,null,s.createElement(n.a,{href:"https://docs.here.com/maps-api-for-js/docs/marker-objects",target:"_blank",rel:"nofollow"},"Marker objects"))),s.createElement(n.tr,null,s.createElement(n.td,null,"Azure Maps"),s.createElement(n.td,null,"Use custom image sprites or HTML markers."),s.createElement(n.td,null,s.createElement(n.a,{href:"https://learn.microsoft.com/en-us
1/azure/azure-maps/map-add-custom-html",target:"_blank",rel:"nofollow"},"Add custom HTML markers"))))),"\n",s.createElement("div",{className:"sticky-anchor",id:"best-practices"}),"\n",s.createElement(n.h2,null,"Best Practices for Map Marker Icons"),"\n",s.createElement(n.p,null,"Custom marker icons work best when they add information without making the map harder to read. Keep the marker design simple, consistent, and easy to recognize at normal map zoom levels."),"\n",s.createElement(n.ul,null,"\n",s.createElement(n.li,null,s.createElement(n.strong,null,"Use strong contrast")," - the icon or text inside the marker should stay readable on light and dark map areas."),"\n",s.createElement(n.li,null,s.createElement(n.strong,null,"Keep marker meaning consistent")," - do not use the same color for different statuses or the same icon for unrelated categories."),"\n",s.createElement(n.li,null,s.createElement(n.strong,null,"Set the anchor point correctly")," - the coordinate should match the visible pin tip, not the bottom of the full image when the image includes a shadow."),"\n",s.createElement(n.li,null,s.createElement(n.strong,null,"Avoid long text inside markers")," - short labels like ",s.createElement(n.code,null,"1"),", ",s.createElement(n.code,null,"A"),", or ",s.createElement(n.code,null,"P")," work better than words."),"\n",s.createElement(n.li,null,s.createElement(n.strong,null,"Use retina images when needed")," - ",s.createElement(n.code,null,"scaleFactor=2")," keeps markers sharp on high-density screens, but remember to display them at the CSS size."),"\n",s.createElement(n.li,null,s.createElement(n.strong,null,"Cluster dense maps")," - if many markers overlap, use clustering or filtering instead of relying on marker icons alone."),"\n"),"\n",s.createElement("div",{className:"sticky-anchor",id:"learn-more"}),"\n",s.createElement(n.h2,null,"Learn More"),"\n",s.createElement(n.p,null,"Related Geoapify resources for marker icons, map libraries, and map customization:"),"\n",s.createElement("div",{className:"tutorial-groups mb-2
10"},s.createElement(o,{keys:["map-marker-icon-api","map-marker-icons-generator-create-beautiful-icons-for-your-map","create-custom-map-marker-icon","map-libraries-comparison-leaflet-vs-maplibre-gl-vs-openlayers-trends-and-statistics"]})),"\n",s.createElement("div",{className:"sticky-anchor",id:"faq"}),"\n",s.createElement(p,{title:"FAQ",questions:[{question:"How do I change a Google Maps marker icon?",answer:'In Google Maps JavaScript, use a custom image for the marker. With <a href="https://developers.google.com/maps/documentation/javascript/advanced-markers/graphic-markers" target="_blank" rel="noopener noreferrer nofollow">Advanced Markers</a>, create an <code>img</code> element, set its <code>src</code> to your marker image URL, and pass it to <code>new google.maps.marker.AdvancedMarkerElement()</code>.'},{question:"How do I create a Google Map with multiple custom markers?",answer:'Create an array of locations, generate or assign a marker image URL for each location, and loop through the array to create one marker per item. Use the <a href="/map-marker-icon-api/">Geoapify Map Marker Icon API</a> when marker icons need dynamic numbers, colors, or category symbols.'},{question:"How do I set a marker icon in Google Maps Android?",answer:'In Google Maps Android, create a marker with <a href="https://developers.google.com/maps/documentation/android-sdk/marker" target="_blank" rel="noopener noreferrer nofollow"><code>MarkerOptions</code></a> and set a custom bitmap with <code>icon(BitmapDescriptorFactory.fromBitmap(...))</code> or use a drawable resource with <code>BitmapDescriptorFactory.fromResource(...)</code>.'},{question:"How do I use a custom marker icon in Leaflet?",answer:'Use <a href="https://leafletjs.com/reference.html#icon" target="_blank" rel="noopener noreferrer nofollow"><code>L.icon()</code></a> with an <code>iconUrl</code>, then pass the icon to <code>L.marker()</code>. For accurate placement, also set <code>iconSize</code>, <code>iconAnchor</code>, and <code>popupAnchor</code>.'},{question:"How do I add a custom marker icon in MapLibre GL?",answer:'In <a href="https://maplibre.org/maplibre-gl-js/docs/API/classes/Marker/" target="_blank" rel="noopener noreferrer nofollow">MapLibre GL</a>, create an HTML element, add an <code>img</code> inside it, and pass the element to <code>new maplibregl.Marker({ element })</code>. This works well when marker images come from dynamic URLs such as <a href="/map-marker-icon-api/">Geoapify Marker Icon API</a> URLs.'},{question:"Can I use the same marker icon URL in different map libraries?",answer:'Yes. If the marker icon is a PNG or JPG image URL, you can usually reuse it in Google Maps, <a href="https://leafletjs.com/" target="_blank" rel="noopener noreferrer nofollow">Leaflet</a>, <a href="https://maplibre.org/" target="_blank" rel="noopener noreferrer nofollow">MapLibre GL</a>, OpenLayers, Mapbox GL JS, HERE Maps, Azure Maps, and other libraries that support custom image markers.'},{question:"What size should a custom map marker icon be?",answer:'A common marker display size is around 40-60 CSS pixels high. If you use retina output, such as <code>scaleFactor=2</code> in the <a href="/map-marker-icon-api/">Map Marker Icon API</a>, generate a larger PNG but display it at the intended CSS size so it stays sharp without appearing too large.'},{question:"How do I set the correct anchor point for a custom marker icon?",answer:'Set the anchor point to the visible pin tip, not necessarily the bottom of the full image. If the marker image includes a shadow, adjust the anchor above the shadow so the coordinate points to the actual location. In Leaflet this is <a href="https://leafletjs.com/reference.html#icon-iconanchor" target="_blank" rel="noopener noreferrer nofollow"><code>iconAnchor</code></a>; in Google Maps Advanced Markers, use marker anchor options.'}]}))}var p=function(a={}){const{wrapper:n}=Object.assign({},(0,t.RP)(),a.components);return n?s.createElement(n,a,s.createElement(o,a)):o(a)};function r(a,n){throw new Error("Expected "+(n?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}var c=e(4794),l=e(5588),i=e(8154),u=e(1574),m=e(7127),k=e(1543),g=e(3428),d=e(369),f=e(2992),h=e(3481),y=e(9911),b=e(9856),w=e(529),E=e(8818),A=e(1435),v=e(5898),I=e(2389),x=e(118),M=e(2833),L=e(9816),z=e(3008),_=e(3960),H=e(7358),q=e(6649);
1const C={Link:c.Link,SplitSection:h.A,BackgroundPanel:y.A,Card:b.A,Button:w.A,ButtonGroup:E.A,Banner:A.A,PageList:v.A,FAQStructutedData:z.A,HowToStructuredData:I.A,FAQWithStructuredData:x.A,InputCheckbox:M.A,TryGeolocation:L.A,JSONTree:u.d,TableOfContent:_.A,PostImage:H.A,VerticalTimeline:q.VerticalTimeline,VerticalTimelineElement:q.VerticalTimelineElement},S=({data:{post:a,logo:n,siteData:e,postFormattedData:o,prevPost:p,nextPost:r},children:c,pageContext:{modifiedTime:u}})=>{const h=a.frontmatter.featuredImage?a.frontmatter.featuredImage.childImageSharp.original:{},y=a.frontmatter.twitterImage2x1?a.frontmatter.twitterImage2x1.childImageSharp.original:{},b=a.frontmatter.categories?a.frontmatter.categories.map((a=>g.A.find((n=>n.id===a)))):null,w=a.frontmatter.tags?a.frontmatter.tags.map((a=>d.A.find((n=>n.id===a)))):null,E=w?w.map((a=>a.label)):null,A=y.src||h.src,v=A?[`https://www.geoapify.com${A}`]:null,I=o.frontmatter.featuredImage?o.frontmatter.featuredImage.childImageSharp.gatsbyImageData:null,x="home"===a.frontmatter.slug.split("/").join("")?"https://www.geoapify.com/":`https://www.geoapify.com/${a.frontmatter.slug}/`;return s.createElement(s.Fragment,null,s.createElement(i.m,null,s.createElement("link",{rel:"canonical",href:x,"data-baseprotocol":"https:","data-basehost":"www.geoapify.com"})),s.createElement(k.A,{webpageTitle:a.frontmatter.title_60,webpageDescription:a.frontmatter.description_120,slug:a.frontmatter.slug,imageSrc:h.src,imageWidth:h.width,imageHeight:h.height,imageAlt:a.frontmatter.featuredImageAlt_120,ogType:"article",twitterImageSrc:y.src,twitterTitle:a.frontmatter.twitterTitle_70,twitterImageAlt:a.frontmatter.twitterImageAlt_420,twitterDescription:a.frontmatter.twitterDescription_200,articleSection:"Geo information systems (GIS)",articleTags:E,created:a.frontmatter.first_publiched_date||a.frontmatter.date,modified:u}),s.createElement(f.A,{geoapifySlogan:e.siteMetadata.slogan,companyName:e.siteMetadata.company,logoSrc:n.childImageSharp.gatsbyImageData.src,logoWidth:n.childImageSharp.gatsbyImageData.width,logoHeight:n.childImageSharp.gatsbyImageData.height,slug:a.frontmatter.slug,articleName:a.frontmatter.title_60,articleHeadline:a.frontmatter.headline_110,published:a.frontmatter.first_publiched_date||a.frontmatter.date,modified:u,images:v}),s.createElement(m.A,null,s.createElement("article",{className:"geoapify-post"},s.createElement("header",{className:"geoapify-post-header"},s.createElement("div",{className:"geoapify-post-meta"},s.createElement("span",null,o.frontmatter.date),s.createElement("span",{className:"mx-1"}," / "),a.frontmatter.author?s.createElement("span",null,"by ",s.createElement("a",{rel:"noopener noreferrer",target:"_blank",href:a.frontmatter.authorUrl},a.frontmatter.author)):s.createElement("span",null,"by Geoapify"),b&&b.length?s.createElement("span",{className:"ml-1"}," / in "):null,b&&b.length?b.map(((a,n)=>s.createElement("span",{key:a.id},n?s.createElement("span",null,", "):null,s.createElement("a",{href:`/category/${a.slug}/`},a.label)))):null),s.createElement("h1",null,a.frontmatter.title),a.frontmatter.subtitle?s.createElement("h2",{className:"text-xl text-gray-700 mx-2 font-light"},a.frontmatter.subtitle):null,I?s.createElement("div",{className:"geoapify-post-featured-image"},s.createElement(l.G,{image:I,alt:a.frontmatter.featuredImageAlt_120})):null,a.frontmatter.featuredImageAlt_120?s.createElement("div",{className:"text-center mt-2 mb-10 text-sm italic text-gray-600",dangerouslySetInnerHTML:{__html:a.frontmatter.featuredImageAlt_120}}):s.createElement("div",{className:"mb-10"})),s.createElement("section",{className:"geoapify-post-body"},s.createElement(t.xA,{components:C},c))),s.createElement("div",{className:"mx-5 lg:mx-auto tag-list"},w?w.map((a=>s.createElement("a",{className:"tag",href:`/tag/${a.slug}/`,key:a.id},a.label))):null),s.createElement("div",{className:"post-navigation"},s.createElement("div",{className:"post-navigation-buttons flex flex-col md:flex-row"},p?s.createElement("div",{className:"previous-post"},s.createElement("a",{href:`/${p.frontmatter.slug}/`,rel:"prev"},s.createElement("div",{className:"previous"},s.createElement("span",{className:"chevron lnr lnr-chevron-left"}),s.createElement("div",{className:"title"},s.createElement("span",{className:"meta"},"Previous Post"),s.createElement("span",{className:"post-title"},p.frontmatter.title))))):null,r?s.createElement("div",{className:"next-post"},s.createElement("a",{href:`/${r.frontmatter.slug}/`,rel:"next"},s.createElement("div",{className:"next"},s.createElement("div",{className:"title"},s.createElement("span",{className:"meta"},"Next Post"),s.createElement("span",{className:"post-title"},r.frontmatter.title)),s.createElement("span",{className:"chevron lnr lnr-chevron-right"})))):null))))};function U(a){return s.createElement(S,a,s.createElement(p,a))}}}]); 2//# sourceMappingURL=component---src-template-post-js-content-file-path-src-posts-2026-06-16-custom-map-marker-icons-google-maps-leaflet-maplibre-index-mdx-741d3132c6330c51807f.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.