1"use strict";(self.webpackChunkgeoapify_home=self.webpackChunkgeoapify_home||[]).push([[8723],{2389:function(t,e,a){var n=a(6540),s=a(8154);e.A=({name:t,description:e,supplies:a,tools:o,steps:l})=>{const i={"@context":"https://schema.org","@type":"HowTo",name:t,description:e,steps:l.map((t=>({"@type":"HowToStep",name:t.name,url:t.url,itemListElement:t.items.map((t=>({"@type":"HowToTip",text:t})))})))};return a&&a.length&&(i.supply=a.map((t=>({"@type":"HowToSupply",name:t})))),o&&o.length&&(i.tools=o.map((t=>({"@type":"HowToTool",name:t})))),n.createElement(s.m,null,n.createElement("script",{type:"application/ld+json"},JSON.stringify(i)))}},2992:function(t,e,a){var n=a(6540),s=a(8154);e.A=({companyName:t,geoapifySlogan:e,logoSrc:a,logoWidth:o,logoHeight:l,slug:i,articleName:r,articleHeadline:p,published:c,modified:u,images:d})=>{const m={"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://www.geoapify.com/#organization",name:t,url:"https://www.geoapify.com/",email:"[email protected]",brand:"Geoapify Location Platform",sameAs:["https://www.facebook.com/pg/Geoapify","https://www.linkedin.com/company/geoapify","https://twitter.com/Geoapify"],logo:{"@type":"ImageObject","@id":"https://www.geoapify.com/#logo",url:a,width:o,height:l,caption:t},slogan:e,image:{"@id":"https://www.geoapify.com/#logo"}}]},y={"@type":"Article","@id":`https://www.geoapify.com/${i}/#article`,mainEntityOfPage:`https://www.geoapify.com/${i}/`,name:r,headline:p,inLanguage:"en-US",publisher:{"@id":"https://www.geoapify.com/#organization"},author:{"@id":"https://www.geoapify.com/#organization"},datePublished:c,dateModified:u};return d&&(y.image=d),m["@graph"].push(y),n.createElement(s.m,null,n.createElement("script",{type:"application/ld+json"},JSON.stringify(m)))}},3537:function(t,e){e.A=[{id:"javascript",label:"JavaScript"},{id:"angular",label:"Angular"},{id:"react",label:"React JS"},{id:"java",label:"Java"},{id:"c#",label:"C#"},{id:"r",label:"R language"},{id:"python",label:"Python"},{id:"nocode",label:"No code"}]},7339:function(t,e){e.A=[{id:"maps",label:"Maps"},{id:"geocoding",label:"Geocoding & Geolocation"},{id:"routing",label:"Routes & Optimization"},{id:"isoline",label:"Isochrones & isodistances"},{id:"places",label:"Places & Details"}]},8257:function(t,e,a){a.r(e),a.d(e,{default:function(){return F}});var n=a(4506),s=a(8453),o=a(6540);function l(t){const e=Object.assign({p:"p",a:"a",strong:"strong",h2:"h2",ul:"ul",li:"li",h3:"h3",span:"span",em:"em",ol:"ol"},(0,s.RP)(),t.components),{JSONTree:a}=e;return a||function(t,e){throw new Error("Expected "+(e?"component":"object")+" `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}("JSONTree",!0),o.createElement(o.Fragment,null,o.createElement(e.p,null,"Customization plays a significant role in map creation. Having the ability to adjust map colors, text font, or change language can be quite helpful when creating a map that matches your specific needs."),"\n",o.createElement(e.p,null,o.createElement(e.a,{href:"/map-tiles/"},"Vector maps")," are highly customizable that let you control every aspect of the resulting maps. And, in this tutorial, we will explain the vector maps and show you ",o.createElement(e.strong,null,"how to style OSM-based maps")," to make them fit your website design."),"\n",o.createElement(e.h2,null,"Customizing Vector Maps"),"\n",o.createElement(e.p,null,"Unlike raster maps, ",o.createElement(e.strong,null,"vector map tiles consist of data"),", not pictures. So a map library deals with pieces of data or tiles that should be rendered according to the provided styling rules or map style."),"\n",o.createElement(e.p,null,"In other words, to create a vector map, you need:"),"\n",o.createElement(e.ul,null,"\n",o.createElement(e.li,null,"map data that is provided as ",o.createElement(e.strong,null,"map tiles"),";"),"\n",o.createElement(e.li,null,o.createElement(e.strong,null,"map style")," that describes which data to show on the map and how to render it."),"\n"),"\n",o.createElement(e.p,null,"The map tiles are generated by a tile server, and the map style is specified in the project when you create a map with a map library.\
1nSo, this means ",o.createElement(e.strong,null,"you can't change the map data, but you can decide which data to visualize and how to do that"),"."),"\n",o.createElement(e.p,null,"A ",o.createElement(e.strong,null,"style.json connects those two parts"),". It contains tile server links and describes map layers. Therefore all you need to create a map is to pass a style.json to your map library as an input parameter."),"\n",o.createElement(e.p,null,"The link to the style.json file can be external that correspond to a ready-to-use map style, or it could be a link to a custom style.json file.\nIn other words, you can create a custom style.json for your project, for example, by choosing one of the ",o.createElement(e.a,{href:"/map-tiles/"},"Map Styles")," as a base."),"\n",o.createElement(e.p,null,"Here is a video explaining how to create a ",o.createElement(e.strong,null,"custom style.json")," with the ",o.createElement(e.a,{href:"https://maputnik.github.io/editor/",target:"_blank",rel:"nofollow"},"Maputnik map style editor"),":"),"\n",o.createElement("div",{className:"width-default-video mx-auto mb-10"},o.createElement("div",{className:"video-wrapper"},o.createElement("iframe",{width:"560",height:"315",src:"https://www.youtube.com/embed/mLIovq9HIp8",title:"YouTube video player",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}))),"\n",o.createElement(e.p,null,"Let's go further into details to see what map tiles are and learn more about style.json structure."),"\n",o.createElement(e.h3,null,"Map tiles and data available"),"\n",o.createElement(e.p,null,"The information available in every map tile depends on the type of tile schema used by the map provider. For example, ",o.createElement(e.a,{href:"/map-tiles/"},"Geoapify Map Tiles")," are based on ",o.createElement(e.a,{href:"https://openmaptiles.org/schema/",target:"_blank",rel:"nofollow"},"OpenMapTiles vector tiles schema"),"."),"\n",o.createElement(e.p,null,"The schema groups the OpenStreetMap objects by their nature:"),"\n",o.createElement(e.ul,null,"\n",o.createElement(e.li,null,"aerodrome_label"),"\n",o.createElement(e.li,null,"aeroway"),"\n",o.createElement(e.li,null,"boundary"),"\n",o.createElement(e.li,null,"building"),"\n",o.createElement(e.li,null,"housenumber"),"\n",o.createElement(e.li,null,"landcover"),"\n",o.createElement(e.li,null,"landuse"),"\n",o.createElement(e.li,null,"mountain_peak"),"\n",o.createElement(e.li,null,"park"),"\n",o.createElement(e.li,null,"place"),"\n",o.createElement(e.li,null,"poi"),"\n",o.createElement(e.li,null,"transportation"),"\n",o.createElement(e.li,null,"transportation_name"),"\n",o.createElement(e.li,null,"water"),"\n",o.createElement(e.li,null,"water_name"),"\n",o.createElement(e.li,null,"waterway"),"\n"),"\n",o.createElement(e.p,null,"All the objects can be easily queried by their properties, classes and subclasses. So by browsing the schema, you can find out which objects and properties you can add to your map. Note: on small zoom levels, some objects might be skipped to avoid overloading the map."),"\n",o.createElement(e.h3,null,"Map Style structure"),"\n",o.createElement(e.p,null,"The map style determines which details are added to the map and how to render these details. It has ",o.createElement(e.a,{href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/",target:"_blank",rel:"nofollow"},"the Mapbox style specification"),". Here is an example of data you can find in ",o.createElement(e.strong,null,"Geoapify OSM Bright Grey")," style.json:"),"\n",o.createElement("div",{className:"width-default text-sm mb-10"},o.createElement(a,{theme:{scheme:"ashes",author:"jannik siebert (https://github.com/janniks)",base00:"#1C2023",base01:"#393F45",base02:"#565E65",base03:"#747C84",base04:"#ADB3BA",base05:"#C7CCD1",base06:"#DFE2E5",base07:"#F3F4F5",base08:"#C7AE95",base09:"#C7C795",base0A:"#AEC795",base0B:"#95C7AE",base0C:"#95AEC7",base0D:"#AE95C7",base0E:"#C795AE",base0F:"#C79595"},invertTheme:!0,hideRoot:!0,shouldExpandNodeInitially:(t,e,a)=>a<=0||0===t[0],data:{version:8,name:"osm-bright-grey",metadata:{"mapbox:type":"template","mapbox:groups":{1444849364238.8171:{collapsed:!1,name:"Buildings"},1444849354174.1904:{collapsed:!0,name:"Tunnels"},1444849388993.3071:{collapsed:!1,name:"Land"},1444849242106.713:{collapsed:!1,name:"Places"},1444849382550.77:{collapsed:!1,name:"Water"},1444849345966.4436:{collapsed:!1,name:"Roads"},1444849334699.1902:{collapsed:!0,name:"Bridges"}},"mapbox:autocomposite":!1,"maputnik:renderer":"mbgljs"},sources:{default:{type:"vector",url:"https://maps.geoapify.com/v1/styles/osm-bright-grey/data.json?apiKey=7b4rt2u79b810e28ddb141889f9ea58dbw"}},sprite:"https://maps.geoapify.com/v1/styles/osm-bright-grey/sprite?apiKey=7b4rt2u79b810e28ddb141889f9ea58dbw",glyphs:"https://maps.geoapify.com/v1/styles/osm-bright-grey/fonts/{fontstack}/{range}.pbf?apiKey=7b4rt2u79b810e28ddb141889f9ea58dbw",layers:[{id:"background",type:"background",paint:{"background-color":"rgba(255, 255, 255, 1)"}},{id:"landcover-glacier",type:"fill",metadata:{"mapbox:group":"1444849388993.3071"},source:"default","source-layer":"landcover",filter:["==","subclass","glacier"],layout:{visibility:"visible"}
1,paint:{"fill-color":"#fff","fill-opacity":{base:1,stops:[[0,.9],[10,.3]]}}},{id:"landuse-residential",type:"fill",metadata:{"mapbox:group":"1444849388993.3071"},source:"default","source-layer":"landuse",filter:["==","class","residential"],layout:{visibility:"none"},paint:{"fill-color":{base:1,stops:[[12,"hsla(30, 19%, 90%, 0.4)"],[16,"hsla(30, 19%, 90%, 0.2)"]]}}},{id:"landuse-commercial",type:"fill",metadata:{"mapbox:group":"1444849388993.3071"},source:"default","source-layer":"landuse",filter:["all",["==","$type","Polygon"],["==","class","commercial"]],layout:{visibility:"none"},paint:{"fill-color":"hsla(0, 60%, 87%, 0.23)"}},{id:"landuse-industrial",type:"fill",metadata:{"mapbox:group":"1444849388993.3071"},source:"default","source-layer":"landuse",filter:["all",["==","$type","Polygon"],["==","class","industrial"]],layout:{visibility:"none"},paint:{"fill-color":"hsla(49, 100%, 88%, 0.34)"}},{id:"park",type:"fill",metadata:{"mapbox:group":"1444849388993.3071"},source:"default","source-layer":"park",filter:["==","$type","Polygon"],paint:{"fill-color":"rgba(234, 234, 234, 1)","fill-opacity":{base:1.8,stops:[[9,.3],[12,.1]]}}},{id:"park-outline",type:"line",metadata:{"mapbox:group":"1444849388993.3071"},source:"default","source-layer":"park",filter:["==","$type","Polygon"],layout:{},paint:{"line-color":{base:1,stops:[[6,"rgba(230, 230, 230, 1)"],[8,"rgba(236, 236, 236, 1)"]]},"line-dasharray":[3,3]}},{id:"landuse-cemetery",type:"fill",metadata:{"mapbox:group":"1444849388993.3071"},source:"default","source-layer":"landuse",filter:["==","class","cemetery"],paint:{"fill-color":"rgba(240, 241, 231, 1)","fill-opacity":.8}},{id:"landuse-hospital",type:"fill",metadata:{"mapbox:group":"1444849388993.3071"},source:"default","source-layer":"landuse",filter:["==","class","hospital"],paint:{"fill-color":"rgba(243, 234, 239, 1)","fill-opacity":.7}},{id:"landuse-school",type:"fill",metadata:{"mapbox:group":"1444849388993.3071"},source:"default","source-layer":"landuse",filter:["==","class","school"],paint:{"fill-color":"rgba(231, 229, 234, 1)","fill-opacity":.5}},{id:"landuse-railway",type:"fill",metadata:{"mapbox:group":"1444849388993.3071"},source:"default","source-layer":"landuse",filter:["==","class","railway"],layout:{visibility:"none"},paint:{"fill-color":"hsla(30, 19%, 90%, 0.4)"}},{id:"landcover-wood",type:"fill",metadata:{"mapbox:group":"1444849388993.3071"},source:"default","source-layer":"landcover",filter:["==","class","wood"],paint:{"fill-color":"rgba(188, 230, 199, 1)","fill-opacity":.1,"fill-outline-color":"hsla(0, 0%, 0%, 0.03)","fill-antialias":{base:1,stops:[[0,!1],[9,!0]]}}},{id:"landcover-grass",type:"fill",metadata:{"mapbox:group":"1444849388993.3071"},source:"default","source-layer":"landcover",filter:["==","class","grass"],paint:{"fill-color":"rgba(240, 241, 231, 1)","fill-opacity":.5}},{id:"landcover-grass-park",type:"fill",metadata:{"mapbox:group":"1444849388993.3071"},source:"default","source-layer":"park",filter:["==","class","public_park"],paint:{"fill-color":"rgba(240, 241, 231, 1)","fill-opacity":.3}},{id:"waterway_tunnel",type:"line",source:"default","source-layer":"waterway",minzoom:14,filter:["all",["in","class","river","stream","canal"],["==","brunnel","tunnel"]],layout:{"line-cap":"round"},paint:{"line-color":"rgba(195, 197, 205, 1)","line-width":{base:1.3,stops:[[13,.5],[20,6]]},"line-dasharray":[2,4]}},{id:"waterway-other",type:"line",metadata:{"mapbox:group":"1444849382550.77"},source:"default","source-layer":"waterway",filter:["!in","class","canal","river","stream"],layout:{"line-cap":"round"},paint:{"line-color":"rgba(195, 197, 205, 1)","line-width":{base:1.3,stops:[[13,.5],[20,2]]}}},{id:"waterway-stream-canal",type:"line",metadata:{"mapbox:group":"1444849382550.77"},source:"default","source-layer":"waterway",filter:["all",["in","class","canal","stream"],["!=","brunnel","tunnel"]],layout:{"line-cap":"round"},paint:{"line-color":"rgba(195, 197, 205, 1)","line-width":{base:1.3,stops:[[13,.5],[20,6]]}}},{id:"waterway-river",type:"line",metadata:{"mapbox:group":"1444849382550.77"},source:"default","source-layer":"waterway",filter:["all",["==","class","river"],["!=","brunnel","tunnel"]],layout:{"line-cap":"round"},paint:{"line-color":"rgba(195, 197, 205, 1)","line-width":{base:1.2,stops:[[10,.8],[20,6]]}}},{id:"water-offset",type:"fill",metadata:{"mapbox:group":"1444849382550.77"},source:"default","source-layer":"water",maxzoom:8,filter:["==","$type","Polygon"],layout:{visibility:"visible"},paint:{"fill-opacity":1,"fill-color":"rgba(212, 212, 212, 1)","fill-translate":{base:1,stops:[[6,[2,0]],[8,[0,0]]]}}},{id:"water",type:"fill",metadata:{"mapbox:group":"1444849382550.77"},source:"default","source-layer":"water",layout:{visibility:"visible"},paint:{"fill-color":"rgba(213, 225, 220, 1)"}},{id:"water-pattern",type:"fill",metadata:{"mapbox:group":"1444849382550.77"},source:"default","source-layer":"water",layout:{visibility:"none"},paint:{"fill-translate":[0,2.5],"fill-pattern":"wave"}},{id:"landcover-ice-shelf",type:"fill",metadata:{"mapbox:group":"1444849382550.77"},source:"default","source-layer":"landcover",filter:["==","subclass","ice_shelf"],layout:{visibility:"visible"}
1,paint:{"fill-color":"#fff","fill-opacity":{base:1,stops:[[0,.9],[10,.3]]}}},{id:"building",type:"fill",metadata:{"mapbox:group":"1444849364238.8171"},source:"default","source-layer":"building",paint:{"fill-color":{base:1,stops:[[15.5,"rgba(231, 229, 228, 1)"],[16,"rgba(231, 229, 228, 1)"]]},"fill-antialias":!0}},{id:"building-top",type:"fill",metadata:{"mapbox:group":"1444849364238.8171"},source:"default","source-layer":"building",layout:{visibility:"visible"},paint:{"fill-translate":{base:1,stops:[[14,[0,0]],[16,[-2,-2]]]},"fill-outline-color":"#dfdbd7","fill-color":"rgba(246, 243, 241, 1)","fill-opacity":{base:1,stops:[[13,0],[16,1]]}}},{id:"tunnel-service-track-casing",type:"line",metadata:{"mapbox:group":"1444849354174.1904"},source:"default","source-layer":"transportation",filter:["all",["==","brunnel","tunnel"],["in","class","service","track"]],layout:{"line-join":"round"},paint:{"line-color":"#cfcdca","line-dasharray":[.5,.25],"line-width":{base:1.2,stops:[[15,1],[16,4],[20,11]]}}},{id:"tunnel-minor-casing",type:"line",metadata:{"mapbox:group":"1444849354174.1904"},source:"default","source-layer":"transportation",filter:["all",["==","brunnel","tunnel"],["==","class","minor"]],layout:{"line-join":"round"},paint:{"line-color":"#cfcdca","line-opacity":{stops:[[12,0],[12.5,1]]},"line-width":{base:1.2,stops:[[12,.5],[13,1],[14,4],[20,15]]}}},{id:"tunnel-secondary-tertiary-casing",type:"line",metadata:{"mapbox:group":"1444849354174.1904"},source:"default","source-layer":"transportation",filter:["all",["==","brunnel","tunnel"],["in","class","secondary","tertiary"]],layout:{"line-join":"round"},paint:{"line-color":"rgba(192, 167, 146, 1)","line-opacity":1,"line-width":{base:1.2,stops:[[8,1.5],[20,17]]}}},{id:"tunnel-trunk-primary-casing",type:"line",metadata:{"mapbox:group":"1444849354174.1904"},source:"default","source-layer":"transportation",filter:["all",["==","brunnel","tunnel"],["in","class","primary","trunk"]],layout:{"line-join":"round"},paint:{"line-color":"rgba(192, 167, 146, 1)","line-width":{base:1.2,stops:[[5,.4],[6,.6],[7,1.5],[20,22]]}}},{id:"tunnel-motorway-casing",type:"line",metadata:{"mapbox:group":"1444849354174.1904"},source:"default","source-layer":"transportation",filter:["all",["==","brunnel","tunnel"],["==","class","motorway"]],layout:{"line-join":"round",visibility:"visible"},paint:{"line-color":"rgba(192, 167, 146, 1)","line-dasharray":[.5,.25],"line-width":{base:1.2,stops:[[5,.4],[6,.6],[7,1.5],[20,22]]}}},{id:"tunnel-path",type:"line",metadata:{"mapbox:group":"1444849354174.1904"},source:"default","source-layer":"transportation",filter:["all",["==","$type","LineString"],["all",["==","brunnel","tunnel"],["==","class","path"]]],paint:{"line-color":"#cba","line-dasharray":[1.5,.75],"line-width":{base:1.2,stops:[[15,1.2],[20,4]]}}},{id:"tunnel-service-track",type:"line",metadata:{"mapbox:group":"1444849354174.1904"},source:"default","source-layer":"transportation",filter:["all",["==","brunnel","tunnel"],["in","class","service","track"]],layout:{"line-join":"round"},paint:{"line-color":"#fff","line-width":{base:1.2,stops:[[15.5,0],[16,2],[20,7.5]]}}},{id:"tunnel-minor",type:"line",metadata:{"mapbox:group":"1444849354174.1904"},source:"default","source-layer":"transportation",filter:["all",["==","brunnel","tunnel"],["==","class","minor_road"]],layout:{"line-join":"round"},paint:{"line-color":"#fff","line-opacity":1,"line-width":{base:1.2,stops:[[13.5,0],[14,2.5],[20,11.5]]}}},{id:"tunnel-secondary-tertiary",type:"line",metadata:{"mapbox:group":"1444849354174.1904"},source:"default","source-layer":"transportation",filter:["all",["==","brunnel","tunnel"],["in","class","secondary","tertiary"]],layout:{"line-join":"round"},paint:{"line-color":"#C2BFB3","line-width":{base:1.2,stops:[[6.5,0],[7,.5],[20,10]]}}},{id:"tunnel-trunk-primary",type:"line",metadata:{"mapbox:group":"1444849354174.1904"},source:"default","source-layer":"transportation",filter:["all",["==","brunnel","tunnel"],["in","class","primary","trunk"]],layout:{"line-join":"round"},paint:{"line-color":"rgba(194, 191, 179, 1)","line-width":{base:1.2,stops:[[6.5,0],[7,.5],[20,18]]}}},{id:"tunnel-motorway",type:"line",metadata:{"mapbox:group":"1444849354174.1904"},source:"default","source-layer":"transportation",filter:["all",["==","brunnel","tunnel"],["==","class","motorway"]],layout:{"line-join":"round",visibility:"visible"},paint:{"line-color":"#C2BFB3","line-width":{base:1.2,stops:[[6.5,0],[7,.5],[20,18]]}}},{id:"tunnel-railway",type:"line",metadata:{"mapbox:group":"1444849354174.1904"},source:"default","source-layer":"transportation",filter:["all",["==","brunnel","tunnel"],["==","class","rail"]],paint:{"line-color":"#bbb","line-width":{base:1.4,stops:[[14,.4],[15,.75],[20,2]]},"line-dasharray":[2,2]}},{id:"ferry",type:"line",source:"default","source-layer":"transportation",filter:["all",["in","class","ferry"]],layout:{"line-join":"round",visibility:"visible"},paint:{"line-color":"rgba(174, 191, 199, 1)","line-width":1.1,"line-dasharray":[2,2]}},{id:"aeroway-taxiway-casing",type:"line",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"aeroway",minzoom:12,filter:["all",["in","class","taxiway"]],layout:{"line-cap":"round","line-join":"round",visibility:"visible"},paint:{"line-color":"rgba(153, 153, 153, 1)","line-width":{base:1.5,stops:[[11,2],[17,12]]},"line-opacity":1}},{id:"aeroway-runway-casing",type:"line",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"aeroway",minzoom:12,filter:["all",["in","class","runway"]],layout:{"line-cap":"round","line-join":"round",visibility:"visible"},paint:{"line-color":"rgba(191, 191, 191, 1)","line-width":{base:1.5,stops:[[11,5],[17,55]]},"line-opacity":1}},{id:"aeroway-area",type:"fill",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"aeroway",minzoom:4,filter:["all",["==","$type","Polygon"],["in","class","runway","taxiway"]],layout:{visibility:"visible"}
vendor: 5,215 bytes, line 1
1,paint:{"fill-opacity":{base:1,stops:[[13,0],[14,1]]},"fill-color":"rgba(255, 255, 255, 1)"}},{id:"aeroway-taxiway",type:"line",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"aeroway",minzoom:4,filter:["all",["in","class","taxiway"],["==","$type","LineString"]],layout:{"line-cap":"round","line-join":"round",visibility:"visible"},paint:{"line-color":"rgba(255, 255, 255, 1)","line-width":{base:1.5,stops:[[11,1],[17,10]]},"line-opacity":{base:1,stops:[[11,0],[12,1]]}}},{id:"aeroway-runway",type:"line",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"aeroway",minzoom:4,filter:["all",["in","class","runway"],["==","$type","LineString"]],layout:{"line-cap":"round","line-join":"round",visibility:"visible"},paint:{"line-color":"rgba(255, 255, 255, 1)","line-width":{base:1.5,stops:[[11,4],[17,50]]},"line-opacity":{base:1,stops:[[11,0],[12,1]]}}},{id:"highway-area",type:"fill",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"transportation",filter:["==","$type","Polygon"],layout:{visibility:"visible"},paint:{"fill-color":"hsla(0, 0%, 89%, 0.56)","fill-outline-color":"#cfcdca","fill-opacity":.9,"fill-antialias":!1}},{id:"highway-motorway-link-casing",type:"line",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"transportation",minzoom:12,filter:["all",["!in","brunnel","bridge","tunnel"],["==","class","motorway_link"]],layout:{"line-cap":"round","line-join":"round"},paint:{"line-color":"rgba(192, 167, 146, 1)","line-opacity":1,"line-width":{base:1.2,stops:[[12,1],[13,3],[14,4],[20,15]]}}},{id:"highway-link-casing",type:"line",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"transportation",minzoom:13,filter:["all",["!in","brunnel","bridge","tunnel"],["in","class","primary_link","secondary_link","tertiary_link","trunk_link"]],layout:{"line-cap":"round","line-join":"round",visibility:"visible"},paint:{"line-color":"rgba(192, 167, 146, 1)","line-opacity":1,"line-width":{base:1.2,stops:[[12,1],[13,3],[14,4],[20,15]]}}},{id:"highway-minor-casing",type:"line",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"transportation",filter:["all",["==","$type","LineString"],["all",["!=","brunnel","tunnel"],["in","class","minor","service","track"]]],layout:{"line-cap":"round","line-join":"round"},paint:{"line-color":"#cfcdca","line-opacity":{stops:[[12,0],[12.5,1]]},"line-width":{base:1.2,stops:[[12,.5],[13,1],[14,4],[20,15]]}}},{id:"highway-secondary-tertiary-casing",type:"line",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"transportation",filter:["all",["!in","brunnel","bridge","tunnel"],["in","class","secondary","tertiary"]],layout:{"line-cap":"butt","line-join":"round",visibility:"visible"},paint:{"line-color":"rgba(192, 167, 146, 1)","line-opacity":1,"line-width":{base:1.2,stops:[[8,1.5],[20,17]]}}},{id:"highway-primary-casing",type:"line",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"transportation",minzoom:5,filter:["all",["!in","brunnel","bridge","tunnel"],["in","class","primary"]],layout:{"line-cap":"butt","line-join":"round",visibility:"visible"},paint:{"line-color":"rgba(192, 167, 146, 1)","line-opacity":{stops:[[7,0],[8,1]]},"line-width":{base:1.2,stops:[[7,0],[8,.6],[9,1.5],[20,22]]}}},{id:"highway-trunk-casing",type:"line",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"transportation",minzoom:5,filter:["all",["!in","brunnel","bridge","tunnel"],["in","class","trunk"]],layout:{"line-cap":"butt","line-join":"round",visibility:"visible"},paint:{"line-color":"rgba(192, 167, 146, 1)","line-opacity":{stops:[[5,0],[6,1]]},"line-width":{base:1.2,stops:[[5,0],[6,.6],[7,1.5],[20,22]]}}},{id:"highway-motorway-casing",type:"line",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"transportation",minzoom:4,filter:["all",["!in","brunnel","bridge","tunnel"],["==","class","motorway"]],layout:{"line-cap":"butt","line-join":"round",visibility:"visible"},paint:{"line-color":"rgba(192, 167, 146, 1)","line-width":{base:1.2,stops:[[4,0],[5,.4],[6,.6],[7,1.5],[20,22]]},"line-opacity":{stops:[[4,0],[5,1]]}}},{id:"highway-path",type:"line",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"transportation",filter:["all",["==","$type","LineString"],["all",["!in","brunnel","bridge","tunnel"],["==","class","path"]]],paint:{"line-color":"#cba","line-dasharray":[1.5,.75],"line-width":{base:1.2,stops:[[15,1.2],[20,4]]}}},{id:"highway-motorway-link",type:"line",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"transportation",minzoom:12,filter:["all",["!in","brunnel","bridge","tunnel"],["==","class","motorway_link"]],layout:{"line-cap":"round","line-join":"round"},paint:{"line-color":"#DFCCB2","line-width":{base:1.2,stops:[[12.5,0],[13,1.5],[14,2.5],[20,11.5]]}}},{id:"highway-link",type:"line",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"transportation",minzoom:13,filter:["all",["!in","brunnel","bridge","tunnel"],["in","class","primary_link","secondary_link","tert
1iary_link","trunk_link"]],layout:{"line-cap":"round","line-join":"round",visibility:"visible"},paint:{"line-color":"rgba(225, 221, 204, 1)","line-width":{base:1.2,stops:[[12.5,0],[13,1.5],[14,2.5],[20,11.5]]}}},{id:"highway-minor",type:"line",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"transportation",filter:["all",["==","$type","LineString"],["all",["!=","brunnel","tunnel"],["in","class","minor","service","track"]]],layout:{"line-cap":"round","line-join":"round"},paint:{"line-color":"#fff","line-opacity":1,"line-width":{base:1.2,stops:[[13.5,0],[14,2.5],[20,11.5]]}}},{id:"highway-secondary-tertiary",type:"line",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"transportation",filter:["all",["!in","brunnel","bridge","tunnel"],["in","class","secondary","tertiary"]],layout:{"line-cap":"round","line-join":"round",visibility:"visible"},paint:{"line-color":"rgba(225, 221, 204, 1)","line-width":{base:1.2,stops:[[6.5,0],[8,.5],[20,13]]}}},{id:"highway-primary",type:"line",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"transportation",filter:["all",["==","$type","LineString"],["all",["!in","brunnel","bridge","tunnel"],["in","class","primary"]]],layout:{"line-cap":"round","line-join":"round",visibility:"visible"},paint:{"line-color":"rgba(225, 221, 204, 1)","line-width":{base:1.2,stops:[[8.5,0],[9,.5],[20,18]]}}},{id:"highway-trunk",type:"line",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"transportation",filter:["all",["==","$type","LineString"],["all",["!in","brunnel","bridge","tunnel"],["in","class","trunk"]]],layout:{"line-cap":"round","line-join":"round",visibility:"visible"},paint:{"line-color":"rgba(225, 221, 204, 1)","line-width":{base:1.2,stops:[[6.5,0],[7,.5],[20,18]]}}},{id:"highway-motorway",type:"line",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"transportation",minzoom:5,filter:["all",["==","$type","LineString"],["all",["!in","brunnel","bridge","tunnel"],["==","class","motorway"]]],layout:{"line-cap":"round","line-join":"round",visibility:"visible"},paint:{"line-color":"rgba(223, 204, 178, 1)","line-width":{base:1.2,stops:[[6.5,0],[7,.5],[20,18]]}}},{id:"railway-transit",type:"line",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"transportation",filter:["all",["==","$type","LineString"],["all",["==","class","transit"],["!in","brunnel","tunnel"]]],layout:{visibility:"visible"},paint:{"line-color":"hsla(0, 0%, 73%, 0.77)","line-width":{base:1.4,stops:[[14,.4],[20,1]]}}},{id:"railway-transit-hatching",type:"line",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"transportation",filter:["all",["==","$type","LineString"],["all",["==","class","transit"],["!in","brunnel","tunnel"]]],layout:{visibility:"visible"},paint:{"line-color":"hsla(0, 0%, 73%, 0.68)","line-dasharray":[.2,8],"line-width":{base:1.4,stops:[[14.5,0],[15,2],[20,6]]}}},{id:"railway-service",type:"line",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"transportation",filter:["all",["==","$type","LineString"],["all",["==","class","rail"],["has","service"]]],paint:{"line-color":"hsla(0, 0%, 73%, 0.77)","line-width":{base:1.4,stops:[[14,.4],[20,1]]}}},{id:"railway-service-hatching",type:"line",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"transportation",filter:["all",["==","$type","LineString"],["all",["==","class","rail"],["has","service"]]],layout:{visibility:"visible"},paint:{"line-color":"hsla(0, 0%, 73%, 0.68)","line-dasharray":[.2,8],"line-width":{base:1.4,stops:[[14.5,0],[15,2],[20,6]]}}},{id:"railway",type:"line",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"transportation",filter:["all",["==","$type","LineString"],["all",["!has","service"],["!in","brunnel","bridge","tunnel"],["==","class","rail"]]],paint:{"line-color":"#bbb","line-width":{base:1.4,stops:[[14,.4],[15,.75],[20,2]]}}},{id:"railway-hatching",type:"line",metadata:{"mapbox:group":"1444849345966.4436"},source:"default","source-layer":"transportation",filter:["all",["==","$type","LineString"],["all",["!has","service"],["!in","brunnel","bridge","tunnel"],["==","class","rail"]]],paint:{"line-color":"#bbb","line-dasharray":[.2,8],"line-width":{base:1.4,stops:[[14.5,0],[15,3],[20,8]]}}},{id:"bridge-motorway-link-casing",type:"line",metadata:{"mapbox:group":"1444849334699.1902"},source:"default","source-layer":"transportation",filter:["all",["==","brunnel","bridge"],["==","class","motorway_link"]],layout:{"line-join":"round"},paint:{"line-color":"rgba(192, 167, 146, 1)","line-opacity":1,"line-width":{base:1.2,stops:[[12,1],[13,3],[14,4],[20,15]]}}},{id:"bridge-link-casing",type:"line",metadata:{"mapbox:group":"1444849334699.1902"},source:"default","source-layer":"transportation",filter:["all",["==","brunnel","bridge"],["in","class","primary_link","secondary_link","tert
1iary_link","trunk_link"]],layout:{"line-join":"round"},paint:{"line-color":"rgba(192, 167, 146, 1)","line-opacity":1,"line-width":{base:1.2,stops:[[12,1],[13,3],[14,4],[20,15]]}}},{id:"bridge-secondary-tertiary-casing",type:"line",metadata:{"mapbox:group":"1444849334699.1902"},source:"default","source-layer":"transportation",filter:["all",["==","brunnel","bridge"],["in","class","secondary","tertiary"]],layout:{"line-join":"round",visibility:"visible"},paint:{"line-color":"rgba(192, 167, 146, 1)","line-opacity":1,"line-width":{base:1.2,stops:[[8,1.5],[20,28]]}}},{id:"bridge-trunk-primary-casing",type:"line",metadata:{"mapbox:group":"1444849334699.1902"},source:"default","source-layer":"transportation",filter:["all",["==","brunnel","bridge"],["in","class","primary","trunk"]],layout:{"line-join":"round",visibility:"visible"},paint:{"line-color":"rgba(192, 167, 146, 1)","line-width":{base:1.2,stops:[[5,.4],[6,.6],[7,1.5],[20,26]]}}},{id:"bridge-motorway-casing",type:"line",metadata:{"mapbox:group":"1444849334699.1902"},source:"default","source-layer":"transportation",filter:["all",["==","brunnel","bridge"],["==","class","motorway"]],layout:{"line-join":"round"},paint:{"line-color":"rgba(192, 167, 146, 1)","line-width":{base:1.2,stops:[[5,.4],[6,.6],[7,1.5],[20,22]]}}},{id:"bridge-path-casing",type:"line",metadata:{"mapbox:group":"1444849334699.1902"},source:"default","source-layer":"transportation",filter:["all",["==","$type","LineString"],["all",["==","brunnel","bridge"],["==","class","path"]]],paint:{"line-color":"#f8f4f0","line-width":{base:1.2,stops:[[15,1.2],[20,18]]}}},{id:"bridge-path",type:"line",metadata:{"mapbox:group":"1444849334699.1902"},source:"default","source-layer":"transportation",filter:["all",["==","$type","LineString"],["all",["==","brunnel","bridge"],["==","class","path"]]],paint:{"line-color":"#cba","line-width":{base:1.2,stops:[[15,1.2],[20,4]]},"line-dasharray":[1.5,.75]}},{id:"bridge-motorway-link",type:"line",metadata:{"mapbox:group":"1444849334699.1902"},source:"default","source-layer":"transportation",filter:["all",["==","brunnel","bridge"],["==","class","motorway_link"]],layout:{"line-join":"round"},paint:{"line-color":"rgba(223, 204, 178, 1)","line-width":{base:1.2,stops:[[12.5,0],[13,1.5],[14,2.5],[20,11.5]]}}},{id:"bridge-link",type:"line",metadata:{"mapbox:group":"1444849334699.1902"},source:"default","source-layer":"transportation",filter:["all",["==","brunnel","bridge"],["in","class","primary_link","secondary_link","tertiary_link","trunk_link"]],layout:{"line-join":"round"},paint:{"line-color":"rgba(225, 221, 204, 1)","line-width":{base:1.2,stops:[[12.5,0],[13,1.5],[14,2.5],[20,11.5]]}}},{id:"bridge-secondary-tertiary",type:"line",metadata:{"mapbox:group":"1444849334699.1902"},source:"default","source-layer":"transportation",filter:["all",["==","brunnel","bridge"],["in","class","secondary","tertiary"]],layout:{"line-join":"round"},paint:{"line-color":"rgba(225, 221, 204, 1)","line-width":{base:1.2,stops:[[6.5,0],[7,.5],[20,20]]}}},{id:"bridge-trunk-primary",type:"line",metadata:{"mapbox:group":"1444849334699.1902"},source:"default","source-layer":"transportation",filter:["all",["==","brunnel","bridge"],["in","class","primary","trunk"]],layout:{"line-join":"round"},paint:{"line-color":"rgba(225, 221, 204, 1)","line-width":{base:1.2,stops:[[6.5,0],[7,.5],[20,18]]}}},{id:"bridge-motorway",type:"line",metadata:{"mapbox:group":"1444849334699.1902"},source:"default","source-layer":"transportation",filter:["all",["==","brunnel","bridge"],["==","class","motorway"]],layout:{"line-join":"round"},paint:{"line-color":"#DFCCB2","line-width":{base:1.2,stops:[[6.5,0],[7,.5],[20,18]]}}},{id:"bridge-railway",type:"line",metadata:{"mapbox:group":"1444849334699.1902"},source:"default","source-layer":"transportation",filter:["all",["==","brunnel","bridge"],["==","class","rail"]],paint:{"line-color":"#bbb","line-width":{base:1.4,stops:[[14,.4],[15,.75],[20,2]]}}},{id:"bridge-railway-hatching",type:"line",metadata:{"mapbox:group":"1444849334699.1902"},source:"default","source-layer":"transportation",filter:["all",["==","brunnel","bridge"],["==","class","rail"]],paint:{"line-color":"#bbb","line-dasharray":[.2,8],"line-width":{base:1.4,stops:[[14.5,0],[15,3],[20,8]]}}},{id:"cablecar",type:"line",source:"default","source-layer":"transportation",minzoom:13,filter:["==","class","cable_car"],layout:{visibility:"visible","line-cap":"round"},paint:{"line-color":"hsl(0, 0%, 70%)","line-width":{base:1,stops:[[11,1],[19,2.5]]}}},{id:"cablecar-dash",type:"line",source:"default","source-layer":"transportation",minzoom:13,filter:["==","class","cable_car"],layout:{visibility:"visible","line-cap":"round"},paint:{"line-color":"hsl(0, 0%, 70%)","line-width":{base:1,stops:[[11,3],[19,5.5]]},"line-dasharray":[2,3]}},{id:"boundary-land-level-4",type:"line",source:"default","source-layer":"boundary",filter:["all",[">=","admin_level",4],["<=","admin_level",8],["!=","maritime",1]],layout:{"line-join":"round"},paint:{"line-color":"#9e9cab","line-dasharray":[3,1,1,1],"line-width":{base:1.4,stops:[[4,.4],[5,1],[12,3]]}}},{id:"boundary-land-level-2",type:"line",source:"default","source-layer":"boundary",filter:["all",["==","admin_level",2],["!=","maritime",1],["!=","disputed",1]],layout:{"line-cap":"round","line-join":"round"},paint:{"line-color":"hsl(248, 7%, 66%)","line-width":{base:1,stops:[[0,.6],[4,1.4],[5,2],[12,8]]}}},{id:"boundary-land-disputed",type:"line",source:"default","source-layer":"boundary",filter:["all",["!=","maritime",1],["==","disputed",1]],layout:{"line-cap":"round","line-join":"round"},paint:{"line-color":"hsl(248, 7%, 70%)","line-dasharray":[1,3],"line-width":{base:1,stops:[[0,.6],[4,1.4],[5,2],[12,8]]}}},{id:"boundary-water",type:"line",source:"default","source-layer":"boundary",filter:["all",["in","admin_level",2,4],["==","maritime",1]],layout:{"line-cap":"round","line-join":"round",visibility:"none"},paint:{"line-color":"rgba(154, 189, 214, 1)","line-width":{base:1,stops:[[0,.6],[4,1.4],[5,2],[12,8]]},"line-opacity":{stops:[[6,.6],[10,1]]}}},{id:"waterway-name",type:"symbol",source:"default","source-layer":"waterway",minzoom:13,filter:["all",["==","$type","LineString"],["has","name"]],layout:{"text-font":["Noto Sans Italic"],"text-size":14,"text-field":"{name:latin} {name:nonlatin}","text-max-width":5,"text-rotation-alignment":"map","symbol-placement":"line","text-letter-spacing":.2,"symbol-spacing":350},paint:{"text-color":"rgba(120, 130, 134, 1)","text-halo-width":1.5,"text-halo-color":"rgba(255,255,255,0.7)"}},{id:"water-name-lakeline",type:"symbol",source:"default","source-layer":"water_name",filter:["==","$type","LineString"],layout:{"text-font":["Noto Sans Italic"],"text-size":14,"text-field":"{name:latin}\n{name:nonlatin}","text-max-width":5,"text-rotation-alignment":"map","symbol-placement":"line","symbol-spacing":350,"text-letter-spacing":.2},paint:{"text-color":"rgba(109, 110, 114, 1)","text-halo-width":1.5,"text-halo-color":"rgba(255,255,255,0.7)"}},{id:"water-name-ocean",type:"symbol",source:"default","source-layer":"water_name",filter:["all",["==","$type","Point"],["==","class","ocean"]],layout:{"text-font":["Noto Sans Italic"],"text-size":14,"text-field":"{name:latin}","text-max-width":5,"text-rotation-alignment":"map","symbol-placement":"point","symbol-spacing":350,"text-letter-spacing":.2},paint:{"text-color":"rgba(109, 110, 114, 1)","text-halo-width":1.5,"text-halo-color":"rgba(255,255,255,0.7)"}},{id:"water-name-other",type:"symbol",source:"default","source-layer":"water_name",filter:["all",["==","$type","Point"],["!in","class","ocean"]],layout:{"text-font":["Noto Sans Italic"],"text-size":{stops:[[0,10],[6,14]]},"text-field":"{name:latin}\n{name:nonlatin}","text-max-width":5,"text-rotation-alignment":"map","symbol-placement":"point","symbol-spacing":350,"text-letter-spacing":.2,visibility:"visible"},paint:{"text-color":"rgba(109, 110, 114, 1)","text-halo-width":1.5,"text-halo-color":"rgba(255,255,255,0.7)"}},{id:"poi-level-3",type:"symbol",source:"default","source-layer":"poi",minzoom:16,filter:["all",["==","$type","Point"],[">=","rank",25]],layout:{"text-padding":2,"text-font":["Noto Sans Regular"],"text-anchor":"top","icon-image":"{class}_11","text-field":"{name:latin}\n{name:nonlatin}","text-offset":[0,.6],"text-size":12,"text-max-width":9},paint:{"text-halo-blur":.5,"text-color":"#666","text-halo-width":1,"text-halo-color":"#ffffff"}},{id:"poi-level-2",type:"symbol",source:"default","source-layer":"poi",minzoom:15,filter:["all",["==","$type","Point"],["<=","rank",24],[">=","rank",15]],layout:{"text-padding":2,"text-font":["Noto Sans Regular"],"text-anchor":"top","icon-image":"{class}_11","text-field":"{name:latin}\n{name:nonlatin}","text-offset":[0,.6],"text-size":12,"text-max-width":9},paint:{"text-halo-blur":.5,"text-color":"#666","text-halo-width":1,"text-halo-color":"#ffffff"}},{id:"poi-level-1",type:"symbol",source:"default","source-layer":"poi",minzoom:14,filter:["all",["==","$type","Point"],["<=","rank",14],["has","name"]],layout:{"text-padding":2,"text-font":["Noto Sans Regular"],"text-anchor":"top","icon-image":"{class}_11","text-field":"{name:latin}\n{name:nonlatin}","text-offset":[0,.6],"text-size":12,"text-max-width":9},paint:{"text-halo-blur":.5,"text-color":"#666","text-halo-width":1,"text-halo-color":"#ffffff"}},{id:"poi-railway",type:"symbol",source:"default","source-layer":"poi",minzoom:13,filter:["all",["==","$type","Point"],["has","name"],["==","class","railway"],["==","
1subclass","station"]],layout:{"text-padding":2,"text-font":["Noto Sans Regular"],"text-anchor":"top","icon-image":"{class}_11","text-field":"{name:latin}\n{name:nonlatin}","text-offset":[0,.6],"text-size":12,"text-max-width":9,"icon-optional":!1,"icon-ignore-placement":!1,"icon-allow-overlap":!1,"text-ignore-placement":!1,"text-allow-overlap":!1,"text-optional":!0},paint:{"text-halo-blur":.5,"text-color":"#666","text-halo-width":1,"text-halo-color":"#ffffff"}},{id:"road_oneway",type:"symbol",source:"default","source-layer":"transportation",minzoom:15,filter:["all",["==","oneway",1],["in","class","motorway","trunk","primary","secondary","tertiary","minor","service"]],layout:{"symbol-placement":"line","icon-image":"oneway","symbol-spacing":75,"icon-padding":2,"icon-rotation-alignment":"map","icon-rotate":90,"icon-size":{stops:[[15,.5],[19,1]]}},paint:{"icon-opacity":.5}},{id:"road_oneway_opposite",type:"symbol",source:"default","source-layer":"transportation",minzoom:15,filter:["all",["==","oneway",-1],["in","class","motorway","trunk","primary","secondary","tertiary","minor","service"]],layout:{"symbol-placement":"line","icon-image":"oneway","symbol-spacing":75,"icon-padding":2,"icon-rotation-alignment":"map","icon-rotate":-90,"icon-size":{stops:[[15,.5],[19,1]]}},paint:{"icon-opacity":.5}},{id:"highway-name-path",type:"symbol",source:"default","source-layer":"transportation_name",minzoom:15.5,filter:["==","class","path"],layout:{"text-size":{base:1,stops:[[13,12],[14,13]]},"text-font":["Noto Sans Regular"],"text-field":"{name:latin} {name:nonlatin}","symbol-placement":"line","text-rotation-alignment":"map"},paint:{"text-halo-color":"#f8f4f0","text-color":"rgba(106, 98, 91, 1)","text-halo-width":.5}},{id:"highway-name-minor",type:"symbol",source:"default","source-layer":"transportation_name",minzoom:15,filter:["all",["==","$type","LineString"],["in","class","minor","service","track"]],layout:{"text-size":{base:1,stops:[[13,12],[14,13]]},"text-font":["Noto Sans Regular"],"text-field":"{name:latin} {name:nonlatin}","symbol-placement":"line","text-rotation-alignment":"map"},paint:{"text-halo-blur":.5,"text-color":"#6A625B","text-halo-width":1}},{id:"highway-name-major",type:"symbol",source:"default","source-layer":"transportation_name",minzoom:12.2,filter:["in","class","primary","secondary","tertiary","trunk"],layout:{"text-size":{base:1,stops:[[13,12],[14,13]]},"text-font":["Noto Sans Regular"],"text-field":"{name:latin} {name:nonlatin}","symbol-placement":"line","text-rotation-alignment":"map"},paint:{"text-halo-blur":.5,"text-color":"#765","text-halo-width":1}},{id:"highway-shield",type:"symbol",source:"default","source-layer":"transportation_name",minzoom:8,filter:["all",["<=","ref_length",6],["==","$type","LineString"],["!in","network","us-interstate","us-highway","us-state"]],layout:{"text-size":10,"icon-image":"road_{ref_length}","icon-rotation-alignment":"viewport","symbol-spacing":200,"text-font":["Noto Sans Regular"],"symbol-placement":{base:1,stops:[[10,"point"],[11,"line"]]},"text-rotation-alignment":"viewport","icon-size":1,"text-field":"{ref}"},paint:{}},{id:"highway-shield-us-interstate",type:"symbol",source:"default","source-layer":"transportation_name",minzoom:7,filter:["all",["<=","ref_length",6],["==","$type","LineString"],["in","network","us-interstate"]],layout:{"text-size":10,"icon-image":"{network}_{ref_length}","icon-rotation-alignment":"viewport","symbol-spacing":200,"text-font":["Noto Sans Regular"],"symbol-placement":{base:1,stops:[[7,"point"],[7,"line"],[8,"line"]]},"text-rotation-alignment":"viewport","icon-size":1,"text-field":"{ref}"},paint:{"text-color":"rgba(0, 0, 0, 1)"}},{id:"highway-shield-us-other",type:"symbol",source:"default","source-layer":"transportation_name",minzoom:9,filter:["all",["<=","ref_length",6],["==","$type","LineString"],["in","network","us-highway","us-state"]],layout:{"text-size":10,"icon-image":"{network}_{ref_length}","icon-rotation-alignment":"viewport","symbol-spacing":200,"text-font":["Noto Sans Regular"],"symbol-placement":{base:1,stops:[[10,"point"],[11,"line"]]},"text-rotation-alignment":"viewport","icon-size":1,"text-field":"{ref}"},paint:{"text-color":"rgba(0, 0, 0, 1)"}},{id:"airport-label-major",type:"symbol",source:"default","source-layer":"aerodrome_label",minzoom:10,filter:["all",["has","iata"]],layout:{"text-padding":2,"text-font":["Noto Sans Regular"],"text-anchor":"top","icon-image":"airport_11","text-field":"{name:latin}\n{name:nonlatin}","text-offset":[0,.6],"text-size":12,"text-max-width":9,visibility:"visible","icon-size":1,"text-optional":!0},paint:{"text-halo-blur":.5,"text-color":"#666","text-halo-width":1,"text-halo-color":"#ffffff"}},{id:"place-other",type:"symbol",metadata:{"mapbox:group":"1444849242106.713"},source:"default","source-layer":"place",filter:["!in","class","city","town","village","country","continent"],layout:{"text-letter-spacing":.1,"text-size":{base:1.2,stops:[[12,10],[15,14]]},"text-font":["Noto Sans Bold"],"text-field":"{name:latin}\n{name:nonlatin}","text-transform":"uppercase","text-max-width":9,visibility:"visible"},paint:{"text-color":"#633","text-halo-width":1.2,"text-halo-color":"rgba(255,255,255,0.8)"}},{id:"place-village",type:"symbol",metadata:{"mapbox:group":"1444849242106.713"},source:"default","source-layer":"place",filter:["==","class","village"],layout:{"text-font":["Noto Sans Regular"],"text-size":{base:1.2,stops:[[10,12],[15,22]]},"text-field":"{name:latin}\n{name:nonlatin}","text-max-width":8,visibility:"visible"},paint:{"text-color":"#333","text-halo-width":1.2,"text-halo-color":"rgba(255,255,255,0.8)"}},{id:"place-town",type:"symbol",metadata:{"mapbox:group":"1444849242106.713"},source:"default","source-layer":"place",filter:["==","class","town"],layout:{"text-font":["Noto Sans Regular"],"text-size":{base:1.2,stops:[[10,14],[15,24]]},"text-field":"{name:latin}\n{name:nonlatin}","text-max-width":8,visibility:"visible"},paint:{"text-color":"#333","text-halo-width":1.2,"text-halo-color":"rgba(255,255,255,0.8)"}},{id:"place-city",type:"symbol",metadata:{"mapbox:group":"1444849242106.713"},source:"default","source-layer":"place",filter:["all",["!=","capital",2],["==","class","city"]],layout:{"text-font":["Noto Sans Regular"],"text-size":{base:1.2,stops:[[7,
114],[11,24]]},"text-field":"{name:latin}\n{name:nonlatin}","text-max-width":8,visibility:"visible"},paint:{"text-color":"#333","text-halo-width":1.2,"text-halo-color":"rgba(255,255,255,0.8)"}},{id:"place-city-capital",type:"symbol",metadata:{"mapbox:group":"1444849242106.713"},source:"default","source-layer":"place",filter:["all",["==","capital",2],["==","class","city"]],layout:{"text-font":["Noto Sans Regular"],"text-size":{base:1.2,stops:[[7,14],[11,24]]},"text-field":"{name:latin}\n{name:nonlatin}","text-max-width":8,"icon-image":"star_11","text-offset":[.4,0],"icon-size":.8,"text-anchor":"left",visibility:"visible"},paint:{"text-color":"#333","text-halo-width":1.2,"text-halo-color":"rgba(255,255,255,0.8)"}},{id:"place-country-other",type:"symbol",metadata:{"mapbox:group":"1444849242106.713"},source:"default","source-layer":"place",filter:["all",["==","class","country"],[">=","rank",3],["!has","iso_a2"]],layout:{"text-font":["Noto Sans Italic"],"text-field":"{name:latin}","text-size":{stops:[[3,11],[7,17]]},"text-transform":"uppercase","text-max-width":6.25,visibility:"visible"},paint:{"text-halo-blur":1,"text-color":"#334","text-halo-width":2,"text-halo-color":"rgba(255,255,255,0.8)"}},{id:"place-country-3",type:"symbol",metadata:{"mapbox:group":"1444849242106.713"},source:"default","source-layer":"place",filter:["all",["==","class","country"],[">=","rank",3],["has","iso_a2"]],layout:{"text-font":["Noto Sans Bold"],"text-field":"{name:latin}","text-size":{stops:[[3,11],[7,17]]},"text-transform":"uppercase","text-max-width":6.25,visibility:"visible"},paint:{"text-halo-blur":1,"text-color":"#334","text-halo-width":2,"text-halo-color":"rgba(255,255,255,0.8)"}},{id:"place-country-2",type:"symbol",metadata:{"mapbox:group":"1444849242106.713"},source:"default","source-layer":"place",filter:["all",["==","class","country"],["==","rank",2],["has","iso_a2"]],layout:{"text-font":["Noto Sans Bold"],"text-field":"{name:latin}","text-size":{stops:[[2,11],[5,17]]},"text-transform":"uppercase","text-max-width":6.25,visibility:"visible"},paint:{"text-halo-blur":1,"text-color":"#334","text-halo-width":2,"text-halo-color":"rgba(255,255,255,0.8)"}},{id:"place-country-1",type:"symbol",metadata:{"mapbox:group":"1444849242106.713"},source:"default","source-layer":"place",filter:["all",["==","class","country"],["==","rank",1],["has","iso_a2"]],layout:{"text-font":["Noto Sans Bold"],"text-field":"{name:latin}","text-size":{stops:[[1,11],[4,17]]},"text-transform":"uppercase","text-max-width":6.25,visibility:"visible"},paint:{"text-halo-blur":1,"text-color":"#334","text-halo-width":2,"text-halo-color":"rgba(255,255,255,0.8)"}},{id:"place-continent",type:"symbol",metadata:{"mapbox:group":"1444849242106.713"},source:"default","source-layer":"place",maxzoom:1,filter:["==","class","continent"],layout:{"text-font":["Noto Sans Bold"],"text-field":"{name:latin}","text-size":14,"text-max-width":6.25,"text-transform":"uppercase",visibility:"visible"},paint:{"text-halo-blur":1,"text-color":"#334","text-halo-width":2,"text-halo-color":"rgba(255,255,255,0.8)"}},{id:"omt_watermark",type:"symbol",source:"default","source-layer":"omt_watermark",layout:{"text-field":"{attribution}","text-font":["Open Sans Regular"],"text-size":12},paint:{"text-color":"rgba(10,10,10,0.2)","text-halo-color":"rgba(250,250,250,0.15)","text-halo-width":1}}],id:"kusglxf9i"}})),"\n",o.createElement(e.p,null,'By analyzing the JSON file, you can quickly identify links to Geoapify tiles servers and resources, and find descriptions for layers visualization. This style describes how to visualize 112 layers, where each layer has one of "fill", "line", "symbol", "circle", "heatmap", "fill-extrusion", "raster", "hillshade", "background", "sky" type. The ',o.createElement(e.strong,null,'"source-layer"')," and ",o.createElement(e.strong,null,'"filter"')," property describes the data to be visualized by each layer. For example, this part describes how to visualize paths:"),"\n",o.createElement("div",{className:"width-default"},o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`{\n "id": "highway-path",\n "type": "line",\n "metadata": {\n "mapbox:group": "1444849345966.4436"\n },\n "source": "default",\n "source-layer": "transportation",\n "filter": [ \n "all", \n [ "==", "\\$type", "LineString" ],\n [ "all", [ "!in", "brunnel", "bridge", "tunnel" ], ["==", "class", "path" ]]\n ],\n "paint": {\n "line-color": "#cba",\n "line-dasharray": [ 1.5, 0.75 ],\n "line-width": {\n "base": 1.2,\n "stops": [ [ 15, 1.2 ], [ 20, 4 ] ]\n }\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">
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>'}}),o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="json"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span>\n <span class="token property">"id"</span><span class="token operator">:</span> <span class="token string">"highway-path"</span><span class="token punctuation">,</span>\n <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"line"</span><span class="token punctuation">,</span>\n <span class="token property">"metadata"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"mapbox:group"</span><span class="token operator">:</span> <span class="token string">"1444849345966.4436"</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token property">"source"</span><span class="token operator">:</span> <span class="token string">"default"</span><span class="token punctuation">,</span>\n <span class="token property">"source-layer"</span><span class="token operator">:</span> <span class="token string">"transportation"</span><span class="token punctuation">,</span>\n <span class="token property">"filter"</span><span class="token operator">:</span> <span class="token punctuation">[</span> \n <span class="token string">"all"</span><span class="token punctuation">,</span> \n <span class="token punctuation">[</span> <span class="token string">"=="</span><span class="token punctuation">,</span> <span class="token string">"$type"</span><span class="token punctuation">,</span> <span class="token string">"LineString"</span> <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span> <span class="token string">"all"</span><span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token string">"!in"</span><span class="token punctuation">,</span> <span class="token string">"brunnel"</span><span class="token punctuation">,</span> <span class="token string">"bridge"</span><span class="token punctuation">,</span> <span class="token string">"tunnel"</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">"=="</span><span class="token punctuation">,</span> <span class="token string">"class"</span><span class="token punctuation">,</span> <span class="token string">"path"</span> <span class="token punctuation">]</span><span class="token punctuation">]</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token property">"paint"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"line-color"</span><span class="token operator">:</span> <span class="token string">"#cba"</span><span class="token punctuation">,</span>\n <span class="token property">"line-dasharray"</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token number">1.5</span><span class="token punctuation">,</span> <span class="token number">0.75</span> <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token property">"line-width"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"base"</span><span class="token operator">:</span> <span class="token number">1.2</span><span class="token punctuation">,</span>\n <span class="token property">"stops"</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">[</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">1.2</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">4</span> <span class="token punctuation">]</span> <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span></code></pre></div>'}})),"\n",o.createElement(e.p,null,"Here you see that we query data of type ",o.createElement(e.em,null,"LineString")," having property ",o.createElement(e.em,null,'"brunnel"'),' not in ["bridge", "tunnel"] and property ',o.createElement(e.em,null,'"class"'),' equal to "path" from the "transportation".'),"\n",o.createElement(e.h2,null,"Add a new cycleways layer to the map"),"\n",o.createElement(e.p,null,"Let's add a new layer to the map. For example, ",o.
1createElement(e.strong,null,"let's draw cycleways or bike routes"),"."),"\n",o.createElement(e.h3,null,"Step 1. Get a base map for customization"),"\n",o.createElement(e.p,null,"We will use the ",o.createElement(e.strong,null,"OSM Bright map style")," as a base for our custom map style. You'll need to ",o.createElement(e.a,{href:"/get-started-with-maps-api/"},"register and obtain an API key")," in order to use the Geoapify Maps:"),"\n",o.createElement("div",{className:"width-default"},o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`https://maps.geoapify.com/v1/styles/osm-bright-smooth/style.json?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>'}}),o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token literal-property property">https</span><span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>maps<span class="token punctuation">.</span>geoapify<span class="token punctuation">.</span>com<span class="token operator">/</span>v1<span class="token operator">/</span>styles<span class="token operator">/</span>osm<span class="token operator">-</span>bright<span class="token operator">-</span>smooth<span class="token operator">/</span>style<span class="token punctuation">.</span>json<span class="token operator">?</span>apiKey<span class="token operator">=</span><span class="token constant">YOUR_API_KEY</span></code></pre></div>'}})),"\n",o.createElement(e.p,null,"We recommend that you use ",o.createElement(e.a,{href:"https://maputnik.github.io/editor/",target:"_blank",rel:"nofollow"},"the visual style editor Maputnik")," to modify the style.json. However, you can make all changes in any text editor."),"\n",o.createElement(e.p,null,"Here is how you can add the base map URL to the Maputnik:"),"\n",o.createElement(e.ul,null,"\n",o.createElement(e.li,null,'Press the "Open" button from the top menu'),"\n",o.createElement(e.li,null,'Add Map Tile style.json URL to the "Load from URL" field:'),"\n"),"\n",o.createElement(e.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/77c501fd46e794a2ac76489e438ad02e/2b2c6/open-map-style-from-url.png' style='display: block' target='_blank' rel='noopener'>\n <span class='gatsby-resp-image-background-image' style=\"padding-bottom: 79.33333333333333%; position: relative; bottom: 0; left: 0; background-image: url('data:image/webp;base64,UklGRlwAAABXRUJQVlA4IFAAAABwAwCdASoUABAAPtFUo0uoJKMhsAgBABoJaQC7ACHNwkT4FZAA/u78sfAhejVtBIGb63w11ypRMtgtagaavRg++uyKjcdA1L5rPYBIeQVAAA=='); background-size: cover; display: block;\"></span>\n <img class='gatsby-resp-image-image' alt='Load style from URL in Maputnuk' title='' src='/static/77c501fd46e794a2ac76489e438ad02e/0a47e/open-map-style-from-url.png' srcset='/static/77c501fd46e794a2ac76489e438ad02e/5a46d/open-map-style-from-url.png 300w,\n/static/77c501fd46e794a2ac76489e438ad02e/fc2a6/open-map-style-from-url.png 450w,\n/static/77c501fd46e794a2ac76489e438ad02e/0a47e/open-map-style-from-url.png 600w,\n/static/77c501fd46e794a2ac76489e438ad02e/2b2c6/open-map-style-from-url.png 869w' 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(e.ul,null,"\n",o.createElement(e.li,null,"Now you can edit the map style in the visual editor. Just press Export and then Download to get a copy of the style.json file when you finish customizing."),"\n"),"\n",o.createElement(e.h3,null,"Step 2. Find out which layers and properties to use"),"\n",o.createElement(e.p,null,"By analyzing tile schema, we see that the cycleway data we are interested in belongs to the ",o.createElement(e.strong,null,'"transportation" layer')," and its ",o.createElement(e.strong,null,'"bicycle" and "subclass"="cycleway" properties'),"."),"\n",o.createElement(e.p,null,'According to the documentation, the "bicycle" field corresponds to the ',o.createElement(e.a,{href:"https://taginfo.openstreetmap.org/keys/bicycle",target:"_blank",rel:"nofollow"},'"bicycle" OSM tag'),', and the "subclass"="cycleway" corresponds to the ',o.createElement(e.a,{href:"https://taginfo.openstreetmap.org/tags/highway=cycleway",target:"_blank",rel:"nofollow"},'"highway=cycleway" tag value'),"."),"\n",o.createElement(e.p,null,'The following "bicycle" tag values can tell that bikers are allowed to use the road:'),"\n",o.createElement(e.ul,null,"\n",o.createElement(e.li,null,o.createElement(e.em,null,'"yes"')),"\n",o.createElement(e.li,null,o.createElement(e.em,null,'"designated"')),"\n",o.createElement(e.li,null,o.createElement(e.em,null,'"permissive"')),"\n",o.createElement(e.li,null,o.createElement(e.em,null,'"official"')),"\n",o.createElement(e.li,null,o.createElement(e.em,null,'"lane"')),"\n"),"\n",o.createElement(e.p,null,o.createElement(e.strong,null,"Note"),": OSM is an open-source project that constantly evolves, and Map Style data support not all existing tags. For example, the ",o.createElement(e.a,{href:"https://wiki.openstreetmap.org/wiki/Key:cycleway",target:"_blank",rel:"nofollow"},'tag "cycleway"')," can be used only in custom Map Tiles versions now on request."),"\n",o.createElement(e.h3,null,"Step 3. Describe the new cycleways layer in terms of Style Specification"),"\n",o.createElement(e.p,null,"Now we simply need to create ",o.createElement(e.strong,null,"a new map layer")," that queries the data of the needed type and with the required properties."),"\n",o.createElement(e.p,null,'In Maputnik, you can add a new player by cloning one of the existing layers or creating a new layer (with the "Add layer" button).\nWe recommend you clone the "highway-path" layer, for example. Then you can edit properties in the dedicated fields or the JSON object in JSON Editor.'),"\n",o.createElement(e.p,null,"We want to show the cycleways as lines on the map, adding them as a ",o.createElement(e.a,{href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#line",target:"_blank",rel:"nofollow"},"Line Layer"),'. The "sourcelayer" and "filter" properties determine what data will be visualized on the layer, and the "paint" and "layout" properties define how the data will be shown on the map.'),"\n",o.createElement(e.p,null,"Looking at the schema, the source layer for transportation information is ",o.createElement(e.strong,null,'"transportation"'),":"),"\n",o.createElement("div",{className:"width-default"},o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`{\n "id": "highway-cycleways",\n "type": "line",\n "source": "default",\n "source-layer": "transportation",\n "filter": [...],\n "paint": {...},\n "layout": {...},\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">
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>'}}),o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="json"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span>\n <span class="token property">"id"</span><span class="token operator">:</span> <span class="token string">"highway-cycleways"</span><span class="token punctuation">,</span>\n <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"line"</span><span class="token punctuation">,</span>\n <span class="token property">"source"</span><span class="token operator">:</span> <span class="token string">"default"</span><span class="token punctuation">,</span>\n <span class="token property">"source-layer"</span><span class="token operator">:</span> <span class="token string">"transportation"</span><span class="token punctuation">,</span>\n <span class="token property">"filter"</span><span class="token operator">:</span> <span class="token punctuation">[</span>...<span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token property">"paint"</span><span class="token operator">:</span> <span class="token punctuation">{</span>...<span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token property">"layout"</span><span class="token operator">:</span> <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",o.createElement(e.p,null,"Now let's define a filter using properties and fields we've discovered in the previous step:"),"\n",o.createElement(e.ul,null,"\n",o.createElement(e.li,null,'"subclass"="cycleway"'),"\n",o.createElement(e.li,null,'"bicycle" in ["yes", "designated", "permissive", "official", "lane"]'),"\n"),"\n",o.createElement(e.p,null,"Moreover, similar to other road layers, we can specify the data type - LineString."),"\n",o.createElement(e.p,null,"Using the ",o.createElement(e.a,{href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#lookup",target:"_blank",rel:"nofollow"},'"Expressions" syntax'),", you can determine data type and conditions in the filter property to specify layer data:"),"\n",o.createElement("div",{className:"width-default"},o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`{\n ...\n "filter": [\n "all",\n ["==", "\\$type", "LineString"],\n [\n "any",\n [\n "in",\n "bicycle",\n "yes",\n "designated",\n "permissive",\n "official",\n "lane"\n ],\n ["==", "subclass", "cycleway"]\n ]\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">
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>'}}),o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="json"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span>\n ...\n <span class="token property">"filter"</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token string">"all"</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span><span class="token string">"=="</span><span class="token punctuation">,</span> <span class="token string">"$type"</span><span class="token punctuation">,</span> <span class="token string">"LineString"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span>\n <span class="token string">"any"</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span>\n <span class="token string">"in"</span><span class="token punctuation">,</span>\n <span class="token string">"bicycle"</span><span class="token punctuation">,</span>\n <span class="token string">"yes"</span><span class="token punctuation">,</span>\n <span class="token string">"designated"</span><span class="token punctuation">,</span>\n <span class="token string">"permissive"</span><span class="token punctuation">,</span>\n <span class="token string">"official"</span><span class="token punctuation">,</span>\n <span class="token string">"lane"</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span><span class="token string">"=="</span><span class="token punctuation">,</span> <span class="token string">"subclass"</span><span class="token punctuation">,</span> <span class="token string">"cycleway"</span><span class="token punctuation">]</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">]</span>\n<span class="token punctuation">}</span></code></pre></div>'}})),"\n",o.createElement(e.p,null,"Which corresponds to the following condition:"),"\n",o.createElement("div",{className:"width-default"},o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`(TYPE = "LineString") AND (("bicycle" in ["yes", "designated", "permissive", "official", "lane"]) OR ("subclass" = "cycleway"))`, 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>'}}),o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="sql"><pre class="language-sql"><code class="language-sql"><span class="token punctuation">(</span><span class="token keyword">TYPE</span> <span class="token operator">=</span> <span class="token string">"LineString"</span><span class="token punctuation">)</span> <span class="token operator">AND</span> <span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token string">
1"bicycle"</span> <span class="token operator">in</span> <span class="token punctuation">[</span><span class="token string">"yes"</span><span class="token punctuation">,</span> <span class="token string">"designated"</span><span class="token punctuation">,</span> <span class="token string">"permissive"</span><span class="token punctuation">,</span> <span class="token string">"official"</span><span class="token punctuation">,</span> <span class="token string">"lane"</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">OR</span> <span class="token punctuation">(</span><span class="token string">"subclass"</span> <span class="token operator">=</span> <span class="token string">"cycleway"</span><span class="token punctuation">)</span><span class="token punctuation">)</span></code></pre></div>'}})),"\n",o.createElement(e.p,null,"The Paint and Layout properties let you define the appearance of cycleways: line color, line width, line style, etc. Here are two examples of the cycleway line style:"),"\n",o.createElement(e.ol,null,"\n",o.createElement(e.li,null,"Solid line:"),"\n"),"\n",o.createElement("div",{className:"width-default"},o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`{\n ...\n "paint": {\n "line-color": "rgba(215, 41, 196, 1)",\n "line-width": 5\n },\n "layout": {\n "line-cap": "round",\n "line-join": "round",\n "visibility": "visible"\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>'}}),o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="json"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span>\n ...\n <span class="token property">"paint"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"line-color"</span><span class="token operator">:</span> <span class="token string">"rgba(215, 41, 196, 1)"</span><span class="token punctuation">,</span>\n <span class="token property">"line-width"</span><span class="token operator">:</span> <span class="token number">5</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token property">"layout"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"line-cap"</span><span class="token operator">:</span> <span class="token string">"round"</span><span class="token punctuation">,</span>\n <span class="token property">"line-join"</span><span class="token operator">:</span> <span class="token string">"round"</span><span class="token punctuation">,</span>\n <span class="token property">"visibility"</span><span class="token operator">:</span> <span class="token string">"visible"</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span></code></pre></div>'}})),"\n",o.createElement(e.ol,{start:"2"},"\n",o.createElement(e.li,null,"Dashed line:"),"\n"),"\n",o.createElement("div",{className:"width-default"},o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`{\n "paint": {\n "line-dasharray": [1.5, 0.75],\n "line-width": {\n "base": 1.2,\n "stops": [[15, 1.2], [20, 4]]\n },\n "line-color": "rgba(215, 41, 196, 1)"\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">
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>'}}),o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="json"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span>\n <span class="token property">"paint"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"line-dasharray"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1.5</span><span class="token punctuation">,</span> <span class="token number">0.75</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token property">"line-width"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"base"</span><span class="token operator">:</span> <span class="token number">1.2</span><span class="token punctuation">,</span>\n <span class="token property">"stops"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">1.2</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token property">"line-color"</span><span class="token operator">:</span> <span class="token string">"rgba(215, 41, 196, 1)"</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span></code></pre></div>'}})),"\n",o.createElement(e.p,null,o.createElement(e.strong,null,"Note"),": the line width from the second example using ",o.createElement(e.a,{href:"https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#interpolate",target:"_blank",rel:"nofollow"},"interpolate expression")," that depends on map zoom level."),"\n",o.createElement(e.p,null,"Here is an example of JSON Object describing the cycleways layer:"),"\n",o.createElement("div",{className:"width-default"},o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-remark-copy-button-container">\n <button\n class="gatsby-remark-copy-button"\n onClick="copyToClipboard(`{\n "id": "highway-cycleway",\n "type": "line",\n "metadata": {\n "mapbox:group": "1444849345966.4436"\n },\n "source": "default",\n "source-layer": "transportation",\n "filter": [\n "all",\n ["==", "\\$type", "LineString"],\n [\n "any",\n [\n "in",\n "bicycle",\n "yes",\n "designated",\n "permissive",\n "official"\n ],\n ["==", "subclass", "cycleway"]\n ]\n ],\n "paint": {\n "line-color": "rgba(215, 41, 196, 1)",\n "line-width": 5\n },\n "layout": {\n "line-cap": "round",\n "line-join": "round",\n "visibility": "visible"\n },\n "minzoom": 14\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">
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>'}}),o.createElement(e.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="json"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span>\n <span class="token property">"id"</span><span class="token operator">:</span> <span class="token string">"highway-cycleway"</span><span class="token punctuation">,</span>\n <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"line"</span><span class="token punctuation">,</span>\n <span class="token property">"metadata"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"mapbox:group"</span><span class="token operator">:</span> <span class="token string">"1444849345966.4436"</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token property">"source"</span><span class="token operator">:</span> <span class="token string">"default"</span><span class="token punctuation">,</span>\n <span class="token property">"source-layer"</span><span class="token operator">:</span> <span class="token string">"transportation"</span><span class="token punctuation">,</span>\n <span class="token property">"filter"</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token string">"all"</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span><span class="token string">"=="</span><span class="token punctuation">,</span> <span class="token string">"$type"</span><span class="token punctuation">,</span> <span class="token string">"LineString"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span>\n <span class="token string">"any"</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span>\n <span class="token string">"in"</span><span class="token punctuation">,</span>\n <span class="token string">"bicycle"</span><span class="token punctuation">,</span>\n <span class="token string">"yes"</span><span class="token punctuation">,</span>\n <span class="token string">"designated"</span><span class="token punctuation">,</span>\n <span class="token string">"permissive"</span><span class="token punctuation">,</span>\n <span class="token string">"official"</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span><span class="token string">"=="</span><span class="token punctuation">,</span> <span class="token string">"subclass"</span><span class="token punctuation">,</span> <span class="token string">"cycleway"</span><span class="token punctuation">]</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token property">"paint"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"line-color"</span><span class="token operator">:</span> <span class="token string">"rgba(215, 41, 196, 1)"</span><span class="token punctuation">,</span>\n <span class="token property">"line-width"</span><span class="token operator">:</span> <span class="token number">5</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token property">"layout"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"line-cap"</span><span class="token operator">:</span> <span class="token string">"round"</span><span class="token punctuation">,</span>\n <span class="token property">"line-join"</span><span class="token operator">:</span> <span class="token string">"round"</span><span class="token punctuation">,</span>\n <span class="token property">"visibility"</span><span class="token operator">:</span> <span class="token string">"visible"</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token property">"minzoom"</span><span class="token operator">:</span> <span class="token number">14</span>\n<span class="token punctuation">}</span></code></pre></div>'}})),"\n",o.createElement(e.h3,null,"Step 4. Use the custom style.json in your project"),"\n",o.createElement(e.p,null,"When you've customized style.json, you can use it in your map application by providing the path to the file when you create a map object."),"\n",o.createElement(e.h2,null,"What's next"),"\n",o.createElement(e.ul,null,"\n",o.createElement(e.li,null,"Learn more about ",o.
1createElement(e.a,{href:"/map-tiles/"},"Geoapify Map Tiles >>")),"\n",o.createElement(e.li,null,"Learn ",o.createElement(e.a,{href:"/map-language-localize-labels-on-the-map/"},"how to localize a map with Maputnik >>")),"\n",o.createElement(e.li,null,"Learn ",o.createElement(e.a,{href:"/styling-map-customize-colors-labels-of-osm-map/"},"how to change map colors with Maputnik >>")),"\n",o.createElement(e.li,null,"Check out our ",o.createElement(e.a,{href:"/raster-vs-vector-map-tiles/"},"Raster Vs Map Tiles article")),"\n"))}var i=function(t={}){const{wrapper:e}=Object.assign({},(0,s.RP)(),t.components);return e?o.createElement(e,t,o.createElement(l,t)):l(t)};var r=a(4794),p=a(5588),c=a(8154),u=a(1574),d=a(7127),m=a(1543),y=a(3537),g=a(7339),b=a(2992),h=a(3481),f=a(9911),w=a(9856),k=a(529),x=a(8818),v=a(1435),q=a(2389),E=a(118),z=a(2833),S=a(9816),_=a(3960),H=a(5898);const L={Link:r.Link,SplitSection:h.A,BackgroundPanel:f.A,Card:w.A,Button:k.A,ButtonGroup:x.A,Banner:v.A,HowToStructuredData:q.A,FAQWithStructuredData:E.A,InputCheckbox:z.A,TryGeolocation:S.A,JSONTree:u.d,TableOfContent:_.A,PageList:H.A},j=({data:{post:t,logo:e,siteData:a,postFormattedData:l},children:i,pageContext:{modifiedTime:r}})=>{const u=t.frontmatter.featuredImage?t.frontmatter.featuredImage.childImageSharp.original:{},h=t.frontmatter.twitterImage2x1?t.frontmatter.twitterImage2x1.childImageSharp.original:{},f=t.frontmatter.languages?t.frontmatter.languages.map((t=>y.A.find((e=>e.id===t)))):[],w=f?f.map((t=>t.label)):null,k=g.A.find((e=>e.id===t.frontmatter.group))||{label:"Geoapify"},x=[t.frontmatter.image1x1,t.frontmatter.image4x3,t.frontmatter.image16x9].filter((t=>!!t)).map((t=>t.childImageSharp.original.src)),v=l.frontmatter.featuredImage?l.frontmatter.featuredImage.childImageSharp.gatsbyImageData:null,q="home"===t.frontmatter.slug.split("/").join("")?"https://www.geoapify.com/":`https://www.geoapify.com/${t.frontmatter.slug}/`;return o.createElement(o.Fragment,null,o.createElement(c.m,null,o.createElement("link",{rel:"canonical",href:q,"data-baseprotocol":"https:","data-basehost":"www.geoapify.com"})),o.createElement(m.A,{webpageTitle:t.frontmatter.title_60,webpageDescription:t.frontmatter.description_120,slug:t.frontmatter.slug,imageSrc:u.src,imageWidth:u.width,imageHeight:u.height,imageAlt:t.frontmatter.featuredImageAlt_120,ogType:"article",twitterImageSrc:h.src,twitterTitle:t.frontmatter.twitterTitle_70,twitterImageAlt:t.frontmatter.twitterImageAlt_420,twitterDescription:t.frontmatter.twitterDescription_200,articleSection:"Geo information systems (GIS)",articleTags:["tutorial",k.label].concat((0,n.A)(w)),created:t.frontmatter.date,modified:r}),o.createElement(b.A,{geoapifySlogan:a.siteMetadata.slogan,companyName:a.siteMetadata.company,logoSrc:e.childImageSharp.gatsbyImageData.src,logoWidth:e.childImageSharp.gatsbyImageData.width,logoHeight:e.childImageSharp.gatsbyImageData.height,slug:t.frontmatter.slug,articleName:t.frontmatter.title_60,articleHeadline:t.frontmatter.headline_110,published:t.frontmatter.date,modified:r,images:x}),o.createElement(d.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"}," / "),o.createElement("span",null,"by Geoapify"),o.createElement("span",{className:"ml-1"}," / in "),o.createElement("span",null,o.createElement("a",{href:"/tutorials/"},"Tutorials"))),o.createElement("h1",null,t.frontmatter.title),t.frontmatter.subtitle?o.createElement("h2",{className:"text-2xl text-gray-700 mx-2 font-light"},t.frontmatter.subtitle):null,v?o.createElement("div",{className:"geoapify-post-featured-image"},o.createElement(p.G,{image:v,alt:t.frontmatter.featuredImageAlt_120})):null,t.frontmatter.featuredImageAlt_120?o.createElement("div",{className:"text-center mt-2 mb-10 text-sm italic text-gray-700",dangerouslySetInnerHTML:{__html:t.frontmatter.featuredImageAlt_120}}):o.createElement("div",{className:"mb-10"})),o.createElement("section",{className:"geoapify-post-body"}
1,o.createElement(s.xA,{components:L},i))),o.createElement("div",{className:"post-navigation"},o.createElement("div",{className:"post-navigation-buttons flex flex-col md:flex-row"},o.createElement("div",{className:"previous-post"},o.createElement("a",{href:"/tutorials/",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"},"Back to"),o.createElement("span",{className:"post-title"},"How-tos and Tutorials")))))))))};function F(t){return o.createElement(j,t,o.createElement(i,t))}},9816:function(t,e,a){var n=a(6540);e.A=()=>{const{0:t,1:e}=(0,n.useState)(0),a=t=>{e(t)},s=t=>{let e;switch(t.code){case t.PERMISSION_DENIED:e="User denied the request for Geolocation.";break;case t.POSITION_UNAVAILABLE:e="Location information is unavailable.";break;case t.TIMEOUT:e="The request to get user location timed out.";break;case t.UNKNOWN_ERROR:default:e="An unknown error occurred."}a(`Error occured: ${e}`)},o=t=>{a(`Your geolocation: latitude: ${t.coords.latitude}, longitude: ${t.coords.longitude}`)};return n.createElement(n.Fragment,null,n.createElement("button",{onClick:()=>{const t={maximumAge:1e3,timeout:2e3,enableHighAccuracy:!0};navigator.geolocation?navigator.geolocation.getCurrentPosition(o,s,t):a("Geolocation is not supported by this browser.")},className:"border-solid border-2 border-indigo-300 rounded p-3 text-gray-800",type:"button"},"Try Geolocation API"),t?n.createElement("div",{className:"mt-2 text-indigo-700"},t):"")}}}]); 2//# sourceMappingURL=component---src-template-tutorial-post-js-content-file-path-src-tutorials-map-styling-index-mdx-93789a7535755bf17d32.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.