\n
\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n
\n
![](\"../../assets/roadsign/I2.1_Sulkuaita.svg\")
\n
\n
\n\n
\n
\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n
\n
![\"Bridge\"](\"@/assets/icon_bridge.png\")
\n
\n
\n\n
\n
\n
![\"Culvert\"](\"@/assets/icon_culvert.png\")
\n
\n
\n\n
\n
\n
![\"Drain\"](\"@/assets/icon_drain.png\")
\n
\n
\n\n
\n
\n
![\"DrainDefect\"](\"@/assets/icon_drain_defect.png\")
\n
\n
\n\n
\n
\n
![\"Center\"](\"@/assets/power_center.png\")
\n
\n
\n\n
\n\n
\n\n
\n
\n
![\"Center\"](\"@/assets/power_center_dim.png\")
\n
\n
\n\n
\n
\n
![\"Center\"](\"@/assets/power_center_clock.png\")
\n
\n
\n\n
\n
\n
![\"Center\"](\"@/assets/power_center_control.png\")
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
![\"Light\"](\"@/assets/icon_post.png\")
\n
\n
\n\n
\n
\n
![\"Light\"](\"@/assets/icon_portal.png\")
\n
\n
\n\n
\n
\n
![\"Light\"](\"@/assets/icon_stairs.png\")
\n
\n
\n\n
\n
\n
![\"Light\"](\"@/assets/icon_gate.png\")
\n
\n
\n\n
\n
\n
![\"Light\"](\"@/assets/icon_edge_pile.png\")
\n
\n
\n\n
\n
\n
![\"Light\"](\"@/assets/icon_boom.png\")
\n
\n
\n\n
\n
\n
![\"Light\"](\"@/assets/icon_equipment.png\")
\n
\n
\n\n
\n
\n
![\"Light\"](\"@/assets/icon_road_ad.png\")
\n
\n
\n\n
\n
\n
![\"Light\"](\"@/assets/street_light.png\")
\n
\n
\n\n
\n
\n
![\"LightDefect\"](\"@/assets/street_light_defect.png\")
\n
\n
\n\n
\n
\n
![\"LightDefect\"](\"@/assets/street_light_planned.png\")
\n
\n
\n\n
\n
\n
![\"LightDefect\"](\"@/assets/street_light_removed.png\")
\n
\n
\n\n
\n
\n
![\"LightDefect\"](\"@/assets/roadsign/unknown_sign.png\")
\n
\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n
\n
\n
\n
\n\n\n\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./MapMarkerStore.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./MapMarkerStore.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./MapMarkerStore.vue?vue&type=template&id=7f949b44\"\nimport script from \"./MapMarkerStore.vue?vue&type=script&lang=js\"\nexport * from \"./MapMarkerStore.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","import L from 'leaflet';\nimport 'protomaps-leaflet';\nimport {exp} from \"protomaps-leaflet\";\n\nexport const leafletVectorUtils = {\n\n methods: {\n createCustomProtomapsLayer(url, authHeader, options) {\n // Extend L.protomaps to create a custom layer\n const CustomProtomapsLayer = L.protomaps.extend({\n createTile: function (coords, done) {\n const tile = document.createElement('canvas');\n tile.width = this.getTileSize().x;\n tile.height = this.getTileSize().y;\n\n const tileUrl = L.Util.template(url, coords);\n\n // Custom XMLHttpRequest to add headers\n const xhr = new XMLHttpRequest();\n xhr.open('GET', tileUrl, true);\n xhr.responseType = 'arraybuffer';\n xhr.setRequestHeader('Authorization', authHeader);\n\n xhr.onload = function () {\n if (xhr.status >= 200 && xhr.status < 300) {\n done(null, tile);\n } else {\n // eslint-disable-next-line\n console.error(`Tile request failed: ${xhr.status}`);\n done(new Error(`Tile request failed: ${xhr.statusText}`), tile);\n }\n }.bind(this);\n\n xhr.onerror = function () {\n // eslint-disable-next-line\n console.error('Error loading tile');\n done(new Error('Error loading tile'), tile);\n };\n\n xhr.send();\n\n return tile;\n },\n })\n // Return an instance of the custom layer with the passed options\n return new CustomProtomapsLayer({\n ...options, // Merge provided options\n });\n },\n\n /* eslint-disable*/\n getPaintRules() {\n return [\n // WATER\n {\n dataLayer: \"water\",\n symbolizer: new protomapsL.PolygonSymbolizer({\n fill: \"#BEE4FD\",\n stroke: \"#BEE4FD\",\n opacity: 0.8,\n width: 2\n })\n },\n // BUILDING\n {\n dataLayer: \"building\",\n symbolizer: new protomapsL.PolygonSymbolizer({\n fill: \"#eeebdb\",\n stroke: \"#c9c6ba\",\n opacity: 1,\n width: 1\n })\n },\n // LANDUSE\n {\n dataLayer: \"landuse\",\n symbolizer: new protomapsL.PolygonSymbolizer({\n fill: \"#fcf5e1\",\n opacity: 0.0\n }),\n filter: (z, f) => {\n const kind = f.props.class ? f.props.class : \"\";\n return [\"residential\"].includes(kind);\n },\n },\n {\n dataLayer: \"landuse\",\n symbolizer: new protomapsL.PolygonSymbolizer({\n fill: \"#f3fca2\",\n opacity: 0.6\n }),\n filter: (z, f) => {\n const kind = f.props.class ? f.props.class : \"\";\n return [\"farmland\"].includes(kind);\n },\n },\n {\n dataLayer: \"landuse\",\n symbolizer: new protomapsL.PolygonSymbolizer({\n fill: \"#ebf8d1\",\n opacity: 0.6\n }),\n filter: (z, f) => {\n const kind = f.props.class ? f.props.class : \"\";\n return [\"park\", \"pitch\"].includes(kind);\n },\n },\n {\n dataLayer: \"landuse\",\n symbolizer: new protomapsL.PolygonSymbolizer({\n fill: \"#EAF2F2\",\n opacity: 0.3\n }),\n filter: (z, f) => {\n const kind = f.props.class ? f.props.class : \"\";\n return [\"school\"].includes(kind);\n },\n },\n {\n dataLayer: \"landuse\",\n symbolizer: new protomapsL.PolygonSymbolizer({\n fill: \"#f3f2f1\",\n opacity: 0.6\n }),\n filter: (z, f) => {\n const kind = f.props.class ? f.props.class : \"\";\n return [\"industrial\", \"commercial\", \"retail\"].includes(kind);\n },\n },\n // LANDCOVER\n {\n dataLayer: \"landcover\",\n symbolizer: new protomapsL.PolygonSymbolizer({\n fill: \"#dff1cc\",\n opacity: 0.6\n }),\n filter: (z, f) => {\n const kind = f.props.class ? f.props.class : \"\";\n return [\"grass\", \"scrubb\"].includes(kind);\n },\n },\n {\n dataLayer: \"landcover\",\n symbolizer: new protomapsL.PolygonSymbolizer({\n fill: \"#BEE4FD\",\n opacity: 0.7\n }),\n filter: (z, f) => {\n const kind = f.props.class ? f.props.class : \"\";\n return [\"wetland\"].includes(kind);\n },\n },\n {\n dataLayer: \"landcover\",\n symbolizer: new protomapsL.PolygonSymbolizer({\n fill: \"#dceebd\",\n opacity: 0.6\n }),\n filter: (z, f) => {\n const kind = f.props.class ? f.props.class : \"\";\n return [\"forest\", \"wood\"].includes(kind);\n },\n },\n // ROADS\n {\n dataLayer: \"transportation\",\n symbolizer: new protomapsL.LineSymbolizer({\n fill: \"#000000\",\n opacity: 0.3,\n dash: [2, 2],\n dashColor: \"#000000\",\n dashWidth: 2\n }),\n filter: (z, f) => {\n const kind = f.props.class ? f.props.class : \"\";\n return [\"rail\"].includes(kind);\n },\n },\n\n // Outline for motorways\n {\n dataLayer: \"transportation\",\n symbolizer: new protomapsL.LineSymbolizer({\n color: \"#c50505\",\n opacity: 1,\n width: (z, f) => {\n return exp(2.2, [\n [13, 4.2],\n [19, 6.2],\n ])(z);\n }\n }),\n filter: (z, f) => {\n const kind = f.props.class ? f.props.class : \"\"\n return [\"motorway\"].includes(kind)\n },\n },\n\n {\n dataLayer: \"transportation\",\n symbolizer: new protomapsL.LineSymbolizer({\n color: \"#e38a5a\",\n opacity: 1,\n lineCap: 'round',\n lineJoin: 'round',\n width: (z, f) => {\n return exp(1.6, [\n [13, 3],\n [19, 5],\n ])(z);\n }\n }),\n filter: (z, f) => {\n const kind = f.props.class ? f.props.class : \"\"\n return [\"motorway\"].includes(kind)\n },\n },\n\n // Outline for trunks - same width as upper class\n {\n dataLayer: \"transportation\",\n symbolizer: new protomapsL.LineSymbolizer({\n color: \"#e38a5a\",\n opacity: 1,\n width: (z, f) => {\n return exp(1.3, [\n [13, 4.2],\n [19, 6.2],\n ])(z);\n }\n }),\n filter: (z, f) => {\n const kind = f.props.class ? f.props.class : \"\"\n return [\"trunk\", \"primary\"].includes(kind)\n },\n },\n {\n dataLayer: \"transportation\",\n symbolizer: new protomapsL.LineSymbolizer({\n color: \"#f3da20\",\n opacity: 1,\n lineCap: 'round',\n lineJoin: 'round',\n width: (z, f) => {\n return exp(1.6, [\n [11, 1],\n [13, 3],\n [19, 5],\n ])(z)\n }\n }),\n filter: (z, f) => {\n const kind = f.props.class ? f.props.class : \"\"\n return [\"trunk\", \"primary\"].includes(kind)\n },\n },\n\n // Outline for secondary\n {\n dataLayer: \"transportation\",\n symbolizer: new protomapsL.LineSymbolizer({\n color: \"#9f9d9d\",\n opacity: 1,\n width: (z, f) => {\n return exp(2.2, [\n [14, 3.2],\n [16, 4.2],\n [18, 5.2]\n ])(z)\n }\n }),\n filter: (z, f) => {\n const kind = f.props.class ? f.props.class : \"\"\n return [\"secondary\", \"tertiary\"].includes(kind)\n },\n },\n {\n dataLayer: \"transportation\",\n symbolizer: new protomapsL.LineSymbolizer({\n color: \"#ffffff\",\n opacity: 1,\n lineCap: 'round',\n lineJoin: 'round',\n width: (z, f) => {\n return exp(1, [\n [14, 2],\n [16, 3],\n [18, 4],\n ])(z)\n }\n }),\n filter: (z, f) => {\n const kind = f.props.class ? f.props.class : \"\"\n return [\"secondary\", \"tertiary\"].includes(kind)\n },\n },\n {\n dataLayer: \"transportation\",\n symbolizer: new protomapsL.LineSymbolizer({\n color: \"#c7c6c6\",\n opacity: 1,\n width: (z, f) => {\n return exp(1, [\n [14, 1],\n [18, 3],\n ])(z)\n }\n }),\n filter: (z, f) => {\n const kind = f.props.class ? f.props.class : \"\"\n return [\"minor\", \"cycleway\", \"service\"].includes(kind)\n },\n },\n {\n dataLayer: \"transportation\",\n symbolizer: new protomapsL.LineSymbolizer({\n color: \"#b6977e\",\n opacity: 1,\n dash: [2, 2],\n dashColor: \"#b6977e\",\n dashWidth: 2,\n width: 1\n }),\n filter: (z, f) => {\n const kind = f.props.class ? f.props.class : \"\";\n return [\"path\"].includes(kind);\n },\n },\n {\n dataLayer: \"boundary\",\n symbolizer: new protomapsL.LineSymbolizer({\n color: \"#dc5454\",\n opacity: 0.8,\n dash: [2, 2],\n dashColor: \"#dc5454\",\n dashWidth: 1,\n width: 1\n }),\n filter: (z, f) => {\n return z < 14\n }\n },\n {\n dataLayer: \"boundary\",\n symbolizer: new protomapsL.LineSymbolizer({\n color: \"#c0bfbf\",\n opacity: 0.8,\n dashColor: \"#c0bfbf\",\n dashWidth: 1,\n dash: [2,2],\n width: 1\n }),\n filter: (z, f) => {\n return z >= 14\n }\n },\n ]\n },\n\n getLabelRules() {\n return [\n // PLACES\n {\n dataLayer: \"place\",\n symbolizer: new protomapsL.CenteredTextSymbolizer({\n labelProps: ['name:latin', 'name:nonlatin'],\n fill: \"white\",\n width: 1,\n letterSpacing: 4,\n stroke: \"#a2a2a2\",\n font: \"400 16px sans-serif\"\n }),\n filter: (z, f) => {\n const kind = f.props.class ? f.props.class : \"\";\n return [\"country\"].includes(kind);\n }\n },\n {\n dataLayer: \"place\",\n symbolizer: new protomapsL.CenteredTextSymbolizer({\n labelProps: ['name:latin', 'name:nonlatin'],\n fill: \"#404041\",\n width: 1,\n letterSpacing: 2,\n stroke: \"#ffffffff\",\n font: \"600 16px sans-serif\"\n }),\n filter: (z, f) => {\n const kind = f.props.class ? f.props.class : \"\";\n return [\"city\"].includes(kind);\n }\n },\n {\n dataLayer: \"place\",\n symbolizer: new protomapsL.CenteredTextSymbolizer({\n labelProps: ['name:latin', 'name:nonlatin'],\n fill: \"#404041\",\n stroke: \"#ffffff\",\n width: 1,\n font: \"600 12px sans-serif\"\n }),\n filter: (z, f) => {\n const kind = f.props.class ? f.props.class : \"\";\n return [\"town\"].includes(kind);\n }\n },\n {\n dataLayer: \"place\",\n symbolizer: new protomapsL.CenteredTextSymbolizer({\n labelProps: ['name:latin', 'name:nonlatin'],\n textTransform: 'uppercase',\n fill: \"#404041\",\n stroke: \"#ffffff\",\n width: 1,\n font: \"400 12px sans-serif\"\n }),\n filter: (z, f) => {\n const kind = z < 12 && f.props.class ? f.props.class : \"\"\n return [\"suburb\", \"village\", \"quarter\", \"hamlet\", \"neighbourhood\"].includes(kind)\n }\n },\n {\n dataLayer: \"place\",\n symbolizer: new protomapsL.CenteredTextSymbolizer({\n labelProps: ['name:latin', 'name:nonlatin'],\n textTransform: 'uppercase',\n fill: \"#404041\",\n stroke: \"#ffffff\",\n width: 1,\n font: \"400 14px sans-serif\"\n }),\n filter: (z, f) => {\n const kind = z > 11 && f.props.class ? f.props.class : \"\"\n return [\"suburb\", \"village\", \"quarter\", \"hamlet\", \"neighbourhood\"].includes(kind)\n }\n },\n {\n dataLayer: \"place\",\n symbolizer: new protomapsL.CenteredTextSymbolizer({\n labelProps: ['name:latin', 'name:nonlatin'],\n fill: \"#7b7b80\",\n stroke: \"#ffffff\",\n width: 1,\n font: \"400 11px sans-serif\"\n }),\n filter: (z, f) => {\n const kind = f.props.class ? f.props.class : \"\";\n return [\"peak\"].includes(kind);\n }\n },\n {\n dataLayer: \"water_name\",\n symbolizer: new protomapsL.CenteredTextSymbolizer({\n labelProps: ['name:latin', 'name:nonlatin'],\n fill: \"#0571ce\",\n stroke: \"#ffffff\",\n width: 1,\n font: \"400 10px sans-serif\"\n }),\n filter: (z, f) => {\n const kind = f.props.class ? f.props.class : \"\";\n return [\"bay\", \"river\"].includes(kind);\n }\n },\n {\n dataLayer: \"water_name\",\n symbolizer: new protomapsL.CenteredTextSymbolizer({\n labelProps: ['name:latin', 'name:nonlatin'],\n fill: \"#0571ce\",\n stroke: \"#ffffff\",\n width: 1,\n font: \"400 12px sans-serif\"\n }),\n filter: (z, f) => {\n const kind = f.props.class ? f.props.class : \"\";\n return [\"lake\", \"ocean\", \"sea\"].includes(kind);\n }\n },\n {\n dataLayer: \"transportation_name\",\n symbolizer: new protomapsL.LineLabelSymbolizer({\n labelProps: ['name:latin', 'name:nonlatin'],\n fill: \"#000000\",\n stroke: \"#ffffff\",\n width: 1,\n position: 2,\n font: \"400 12px sans-serif\"\n })\n },\n {\n dataLayer: \"transportation_name\",\n symbolizer: new protomapsL.ShieldSymbolizer({\n labelProps: (z, f) => {\n let index = f.props && f.props.ref ? f.props.ref.indexOf(';') : -1\n if (index > 0) {\n f.props['roadNum'] = f.props.ref.replaceAll(\";\", \" \")\n return ['roadNum']\n }\n return ['ref']\n },\n fill: \"#ffffff\",\n stroke: \"#ffffff\",\n background: \"#e70505\",\n padding: 2,\n width: 1,\n position: 2,\n font: \"600 12px sans-serif\"\n }),\n filter: (z, f) => {\n // Don't draw all of them\n let id = parseInt(f.props.id.substring(f.props.id.indexOf(\"/\")+1))\n if (id % 21 !== 0) return false;\n const kind = f.props.class ? f.props.class : \"\";\n return [\"motorway\", \"trunk\"].includes(kind);\n }\n },\n {\n dataLayer: \"transportation_name\",\n symbolizer: new protomapsL.ShieldSymbolizer({\n labelProps: (z, f) => {\n let index = f.props && f.props.ref ? f.props.ref.indexOf(';') : -1\n if (index > 0) {\n f.props['roadNum'] = f.props.ref.substring(0, index)\n return ['roadNum']\n }\n return ['ref']\n },\n fill: \"#000000\",\n stroke: \"#000000\",\n background: \"#ffffff\",\n padding: 2,\n width: 1,\n position: 2,\n font: \"600 12px sans-serif\"\n }),\n filter: (z, f) => {\n let id = parseInt(f.props.id.substring(f.props.id.indexOf(\"/\")+1))\n if (id % 11 !== 0) return false;\n const kind = f.props.class ? f.props.class : \"\";\n return [\"primary\"].includes(kind);\n }\n },\n {\n dataLayer: \"transportation_name\",\n symbolizer: new protomapsL.ShieldSymbolizer({\n labelProps: (z, f) => {\n let index = f.props && f.props.ref ? f.props.ref.indexOf(';') : -1\n if (index > 0) {\n f.props['roadNum'] = f.props.ref.substring(0, index)\n return ['roadNum']\n }\n return ['ref']\n },\n fill: \"#000000\",\n stroke: \"#000000\",\n background: \"#ffffff\",\n padding: 2,\n width: 1,\n position: 2,\n font: \"600 12px sans-serif\"\n }),\n filter: (z, f) => {\n let id = parseInt(f.props.id.substring(f.props.id.indexOf(\"/\")+1))\n if (id % 3 !== 0) return false;\n const kind = f.props.class ? f.props.class : \"\";\n return [\"secondary\"].includes(kind);\n }\n },\n ]\n }\n }\n}\n\n","
\n \n \n \n \n \n \n \n \n \n \n \n \n ![\"logo\"/](\"../../assets/routa_dark.jpg\"\n)
\n ![\"logo\"/](\"../../assets/routa_light_S.png\")
\n ![\"logo\"/](\"../assets/routa_light.png\")
\n