https://www.geoapify.com/component---src-template-post-js-content-…omponents-index-mdx-765229bbbf85e9f9e929.js

1"use strict";(self.webpackChunkgeoapify_home=self.webpackChunkgeoapify_home||[]).push([[8229],{8267:function(e,t,a){a.r(t),a.d(t,{default:function(){return C}});var n=a(8453),o=a(6540);function l(e){const t=Object.assign({p:"p",a:"a",h2:"h2",h4:"h4",span:"span"},(0,n.RP)(),e.components),{Banner:a,ButtonGroup:l,Button:r}=t;return a||i("Banner",!0),r||i("Button",!0),l||i("ButtonGroup",!0),o.createElement(o.Fragment,null,o.createElement(t.p,null,"Does it make sense to create a custom map for your website? Sure, a custom map brings a lot of benefits and advantages to your website. For instance, with your own map you are able to show the important locations to customers, highlight areas you want to pay attention to, and visualize data which could be potentially very interesting for both sites."),"\n",o.createElement(t.p,null,"Geoapify helps you to create a map from the beginning and add ",o.createElement(t.a,{href:"/solutions/location-intelligence-for-place-search/"},"Location Intelligence components")," into it. Read ",o.createElement(t.a,{href:"https://apidocs.geoapify.com/docs/maps/map-tiles/",target:"_blank",rel:"nofollow"},"how to add a map to your website"),"."),"\n",o.createElement(t.p,null,'However, location visualizations are not only what people look for on a map. It\'s also important to make the map interactive and "alive". So the users can interact and "play" with it and make location decisions.'),"\n",o.createElement(t.h2,null,'Make your custom map "alive"'),"\n",o.createElement(t.p,null,'But what does make a custom map "alive"? How to make the map interactive? The answer is simple: add components to your custom map, where a user can enter his data and analyze outcome.'),"\n",o.createElement(t.p,null,"This could be an input to search a location, popups opening on a click and giving some details or location analytics components like routing or isochrones."),"\n",o.createElement(t.h2,null,"Turn your map into Location Intelligence application"),"\n",o.createElement(t.p,null,"Geoapify offers APIs and map components which help to turn your map not just into the interactive map but into a Location Intelligence application of the full value."),"\n",o.createElement(t.h4,null,"Geocoding API to create a location input field"),"\n",o.createElement(t.p,null,"It's always great to have a location input on your map. However, it's forgotten by many map developers. The service which allows you to look for locations address details by search string is called Geocoding."),"\n",o.createElement(t.p,null,"As a result, with Geoapify Geocoding API you are able to specify the search and retrieve accurate results. As well as implement autocomplete fields."),"\n",o.createElement(t.span,{dangerouslySetInnerHTML:{__html:"<span class='gatsby-resp-image-wrapper' style='position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 469px; '>\n      <a class='gatsby-resp-image-link' href='/static/e71c09b759de6d053482955a51d7bf5e/5f759/autocomplete.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 60.66666666666667%; position: relative; bottom: 0; left: 0; background-image: url('data:image/webp;base64,UklGRkgAAABXRUJQVlA4IDwAAACQAwCdASoUAAwAPtFUo0uoJKMhsAgBABoJaQAAW+qpQ3MYPvMAAP7x6gdY/4QC3foWDLdNh2EvyEqAAAA='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='Location autocomplete input' title='' src='/static/e71c09b759de6d053482955a51d7bf5e/5f759/autocomplete.png' srcset='/static/e71c09b759de6d053482955a51d7bf5e/5a46d/autocomplete.png 300w,\n/static/e71c09b759de6d053482955a51d7bf5e/fc2a6/autocomplete.png 450w,\n/static/e71c09b759de6d053482955a51d7bf5e/5f759/autocomplete.png 469w' sizes='(max-width: 469px) 100vw, 469px' 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",o.createElement(t.p,null,"Check our ",o.createElement(t.a,{href:"https://apidocs.geoapify.com/playground/geocoding",target:"_blank",rel:"nofollow"},"Geoacoding API in the Playground"),"."),"\n",o.createElement(t.h4,null,"Reverce Geocoding API to get a location address by its coordinates"),"\n",o.createElement(t.p,null,'Another useful geospatial tool is Reverse Geocoding API. It returns a place address by its coordinates. With Reverse Geocoding API you are able to answer the question "What is located here?", when a user clicks on the map.'),"\n",o.createElement(t.p,null,"Check our ",o.createElement(t.a,{href:"https://apidocs.geoapify.com/playground/geocoding",target:"_blank",rel:"nofollow"},"Reverse Geoacoding API in the Playground"),"."),"\n",o.createElement(t.h4,null,"Routing API to build a path"),"\n",o.createElement(t.p,null,"Often people search locations on a map which are close to their route. Although route building is so popular, it's present only on very several maps. By using Routing API together with Geocoding API, you can create a convenient routing tool for your map on your website."),"\n",o.createElement(t.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/e9b1113218a65efc5d53c1870a092e0c/02cd5/routing.png' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 41%; position: relative; bottom: 0; left: 0; background-image: url('data:image/webp;base64,UklGRmAAAABXRUJQVlA4IFQAAACwAwCdASoUAAgAPtFipk0oJiOiMAgBABoJQBibDSxA6VOMBDXwWAD++z9ksChv0+NrCqlKn/eTepWjdPiVZxx+cQVYU4XwNjGaVBkf2mG/vuuAAAA='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='Routing for your web site' title='' src='/static/e9b1113218a65efc5d53c1870a092e0c/0a47e/routing.png' srcset='/static/e9b1113218a65efc5d53c1870a092e0c/5a46d/routing.png 300w,\n/static/e9b1113218a65efc5d53c1870a092e0c/fc2a6/routing.png 450w,\n/static/e9b1113218a65efc5d53c1870a092e0c/0a47e/routing.png 600w,\n/static/e9b1113218a65efc5d53c1870a092e0c/02cd5/routing.png 821w' 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>"}}),"\n",o.createElement(t.p,null,"Check our ",o.createElement(t.a,{href:"https://apidocs.geoapify.com/playground/routing",target:"_blank",rel:"nofollow"},"Routing API in the Playground"),"."),"\n",o.createElement(t.h4,null,"Isolines API to analyse travel times"),"\n",o.createElement(t.p,null,"Can you show your customers what can the get from their living or working place? Sure! With Isolines API! By using the API you will be able to highlight areas on a map reachable within a given time. Together with driving and walking modes, our Isoline APIs work with transit and bicycle modes."),"\n",o.createElement(t.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/17139f99e1969239b5d8b5c30e78aea4/828fb/isoline.jpg' style='display: block' target='_blank' rel='noopener'>\n    <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 93.66666666666667%; position: relative; bottom: 0; left: 0; background-image: url('data:image/webp;base64,UklGRqIAAABXRUJQVlA4IJYAAADwBACdASoUABMAPtFgqU+oJSOiKAgBABoJZwDDNBD1fl3IJtcGufkG9LQCKkon9wAA/uhmXqI59wPCl6wrA27bCtLZu1XDNZdgektMy6dNUmZyVcPYTzbjBIkUKA6c269twXQSBTxDgaM19DDqIDKQ10lVhAxTWhLmmBf5NO0pqYKiTiMsBRauZ2dKg6nbJAcEqckEAAA='); background-size: cover; display: block;\"></span>\n  <img class='gatsby-resp-image-image' alt='Isochrone for travel time analytics' title='' src='/static/17139f99e1969239b5d8b5c30e78aea4/b4294/isoline.jpg' srcset='/static/17139f99e1969239b5d8b5c30e78aea4/f93b5/isoline.jpg 300w,\n/static/17139f99e1969239b5d8b5c30e78aea4/20e5d/isoline.jpg 450w,\n/static/17139f99e1969239b5d8b5c30e78aea4/b4294/isoline.jpg 600w,\n/static/17139f99e1969239b5d8b5c30e78aea4/828fb/isoline.jpg 630w' 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",o.createElement(t.p,null,"Check our ",o.createElement(t.a,{href:"https://apidocs.geoapify.com/playground/isoline",target:"_blank",rel:"nofollow"},"Isoline API in the Playground"),"."),"\n",o.createElement(t.h4,null,"Places API to show amenities near by"),"\n",o.createElement(t.p,null,"Last but not least are amenities and points of interest. Show your customers places they are interested in with our ",o.createElement(t.a,{href:"/places-api/"},"Points of Interest API"),". Restaurants, fitness studios, schools, and other places."),"\n",o.createElement(t.p,null,"Check our ",o.createElement(t.a,{href:"https://apidocs.geoapify.com/playground/places",target:"_blank",rel:"nofollow"},"Places API in the Playground"),"."),"\n",o.createElement(a,null,o.createElement(t.h2,null,"Geoapify Location Platform"),o.createElement(t.h4,null,"We offer APIs and Components for digital maps. Register and try our APIs for Free!"),o.createElement(l,{className:"max-w-screen-md md:w-full mt-5 md:mx-auto"},o.createElement(r,{type:"primary",noWrap:!0,text:"Learn more",url:"/maps-api/"}),o.createElement(r,{newTab:!0,noWrap:!0,type:"secondary",text:"Get API Key",url:"https://myprojects.geoapify.com"}),o.createElement(r,{newTab:!0,type:"secondary-dark",text:"Playground",url:"https://apidocs.geoapify.com"}))))}var r=function(e={}){const{wrapper:t}=Object.assign({},(0,n.RP)(),e.components);return t?o.createElement(t,e,o.createElement(l,e)):l(e)};function i(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}var s=a(4794),c=a(5588),m=a(8154),p=a(1574),g=a(7127),d=a(1543),u=a(3428),h=a(369),f=a(2992),y=a(3481),b=a(9911),w=a(9856),A=a(529),E=a(8818),v=a(1435),k=a(5898),I=a(2389),P=a(118),x=a(2833),N=a(9816),_=a(3008),B=a(3960),S=a(7358),T=a(6649);const G={Link:s.Link,SplitSection:y.A,BackgroundPanel:b.A,Card:w.A,Button:A.A,ButtonGroup:E.A,Banner:v.A,PageList:k.A,FAQStructutedData:_.A,HowToStructuredData:I.A,FAQWithStructuredData:P.A,InputCheckbox:x.A,TryGeolocation:N.A,JSONTree:p.d,TableOfContent:B.A,PostImage:S.A,VerticalTimeline:T.VerticalTimeline,VerticalTimelineElement:T.VerticalTimelineElement},D=({data:{post:e,logo:t,siteData:a,postFormattedData:l,prevPost:r,nextPost:i},children:s,pageContext:{modifiedTime:p}})=>{const y=e.frontmatter.featuredImage?e.frontmatter.featuredImage.childImageSharp.original:{},b=e.frontmatter.twitterImage2x1?e.frontmatter.twitterImage2x1.childImageSharp.original:{},w=e.frontmatter.categories?e.frontmatter.categories.map((e=>u.A.find((t=>t.id===e)))):null,A=e.frontmatter.tags?e.frontmatter.tags.map((e=>h.A.find((t=>t.id===e)))):null,E=A?A.map((e=>e.label)):null,v=b.src||y.src,k=v?[`https://www.geoapify.com${v}`]:null,I=l.frontmatter.featuredImage?l.frontmatter.featuredImage.childImageSharp.gatsbyImageData:null,P="home"===e.frontmatter.slug.split("/").join("")?"https://www.geoapify.com/":`https://www.geoapify.com/${e.frontmatter.slug}/`;return o.createElement(o.Fragment,null,o.createElement(m.m,null,o.createElement("link",{rel:"canonical",href:P,"data-baseprotocol":"https:","data-basehost":"www.geoapify.com"})),o.createElement(d.A,{webpageTitle:e.frontmatter.title_60,webpageDescription:e.frontmatter.description_120,slug:e.frontmatter.slug,imageSrc:y.src,imageWidth:y.width,imageHeight:y.height,imageAlt:e.frontmatter.featuredImageAlt_12

10,ogType:"article",twitterImageSrc:b.src,twitterTitle:e.frontmatter.twitterTitle_70,twitterImageAlt:e.frontmatter.twitterImageAlt_420,twitterDescription:e.frontmatter.twitterDescription_200,articleSection:"Geo information systems (GIS)",articleTags:E,created:e.frontmatter.first_publiched_date||e.frontmatter.date,modified:p}),o.createElement(f.A,{geoapifySlogan:a.siteMetadata.slogan,companyName:a.siteMetadata.company,logoSrc:t.childImageSharp.gatsbyImageData.src,logoWidth:t.childImageSharp.gatsbyImageData.width,logoHeight:t.childImageSharp.gatsbyImageData.height,slug:e.frontmatter.slug,articleName:e.frontmatter.title_60,articleHeadline:e.frontmatter.headline_110,published:e.frontmatter.first_publiched_date||e.frontmatter.date,modified:p,images:k}),o.createElement(g.A,null,o.createElement("article",{className:"geoapify-post"},o.createElement("header",{className:"geoapify-post-header"},o.createElement("div",{className:"geoapify-post-meta"},o.createElement("span",null,l.frontmatter.date),o.createElement("span",{className:"mx-1"}," / "),e.frontmatter.author?o.createElement("span",null,"by ",o.createElement("a",{rel:"noopener noreferrer",target:"_blank",href:e.frontmatter.authorUrl},e.frontmatter.author)):o.createElement("span",null,"by Geoapify"),w&&w.length?o.createElement("span",{className:"ml-1"}," / in "):null,w&&w.length?w.map(((e,t)=>o.createElement("span",{key:e.id},t?o.createElement("span",null,", "):null,o.createElement("a",{href:`/category/${e.slug}/`},e.label)))):null),o.createElement("h1",null,e.frontmatter.title),e.frontmatter.subtitle?o.createElement("h2",{className:"text-xl text-gray-700 mx-2 font-light"},e.frontmatter.subtitle):null,I?o.createElement("div",{className:"geoapify-post-featured-image"},o.createElement(c.G,{image:I,alt:e.frontmatter.featuredImageAlt_120})):null,e.frontmatter.featuredImageAlt_120?o.createElement("div",{className:"text-center mt-2 mb-10 text-sm italic text-gray-600",dangerouslySetInnerHTML:{__html:e.frontmatter.featuredImageAlt_120}}):o.createElement("div",{className:"mb-10"})),o.createElement("section",{className:"geoapify-post-body"},o.createElement(n.xA,{components:G},s))),o.createElement("div",{className:"mx-5 lg:mx-auto tag-list"},A?A.map((e=>o.createElement("a",{className:"tag",href:`/tag/${e.slug}/`,key:e.id},e.label))):null),o.createElement("div",{className:"post-navigation"},o.createElement("div",{className:"post-navigation-buttons flex flex-col md:flex-row"},r?o.createElement("div",{className:"previous-post"},o.createElement("a",{href:`/${r.frontmatter.slug}/`,rel:"prev"},o.createElement("div",{className:"previous"},o.createElement("span",{className:"chevron lnr lnr-chevron-left"}),o.createElement("div",{className:"title"},o.createElement("span",{className:"meta"},"Previous Post"),o.createElement("span",{className:"post-title"},r.frontmatter.title))))):null,i?o.createElement("div",{className:"next-post"},o.createElement("a",{href:`/${i.frontmatter.slug}/`,rel:"next"},o.createElement("div",{className:"next"},o.createElement("div",{className:"title"},o.createElement("span",{className:"meta"},"Next Post"),o.createElement("span",{className:"post-title"},i.frontmatter.title)),o.createElement("span",{className:"chevron lnr lnr-chevron-right"})))):null))))};function C(e){return o.createElement(D,e,o.createElement(r,e))}}}]);
2//# sourceMappingURL=component---src-template-post-js-content-file-path-src-posts-2019-05-10-create-a-map-with-location-intelligence-components-index-mdx-765229bbbf85e9f9e929.js.map