{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/coding/membuat-peta-dengan-custom-map-marker-menggunakan-openlayers/",
    "result": {"data":{"site":{"siteMetadata":{"title":"Regga Rantai","image":"images/regga-signature.png"}},"mdx":{"id":"66c7405c-4571-5a53-a341-cf2abf4fdc54","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Membuat peta dengan custom map marker menggunakan Openlayers\",\n  \"date\": \"2021-02-11T00:00:00.000Z\",\n  \"hijriah\": \"29 Jumadil Akhirah 1442\",\n  \"description\": \"Menampilkan peta sederhana pada website dengan map marker sendiri menggunakan Openlayers..\",\n  \"featuredImage\": \"regga-rantai-membuat-peta-dengan-custom-map-marker-menggunakan-openlayers.jpg\",\n  \"postType\": \"coding\",\n  \"tags\": [\"javascript\", \"map\", \"openlayers\"],\n  \"draft\": false\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", {\n    \"className\": \"blog-img blog-img-top\"\n  }, \"\\n  \", mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"640px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"50%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIDAQX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAAB7aU2Jjh//8QAFxABAAMAAAAAAAAAAAAAAAAAAQARIP/aAAgBAQABBQKDef/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABYQAAMAAAAAAAAAAAAAAAAAAAAgcf/aAAgBAQAGPwIi/wD/xAAaEAEAAgMBAAAAAAAAAAAAAAARAAEgIXGB/9oACAEBAAE/IZQxpG6j3zD/2gAMAwEAAgADAAAAEEgv/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAHBAAAgICAwAAAAAAAAAAAAAAAREAIUFREHGR/9oACAEBAAE/EKNhweYHLeDWtiMg09DjEwOp/9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Regga Rantai - Menampilkan peta sederhana pada website dengan map marker sendiri menggunakan Openlayers..\",\n    \"title\": \"Regga Rantai - Menampilkan peta sederhana pada website dengan map marker sendiri menggunakan Openlayers..\",\n    \"src\": \"/static/ee2b4810e182c7dfb19cd9a0a48b347a/312de/regga-rantai-membuat-peta-dengan-custom-map-marker-menggunakan-openlayers.jpg\",\n    \"srcSet\": [\"/static/ee2b4810e182c7dfb19cd9a0a48b347a/3bb43/regga-rantai-membuat-peta-dengan-custom-map-marker-menggunakan-openlayers.jpg 160w\", \"/static/ee2b4810e182c7dfb19cd9a0a48b347a/617b8/regga-rantai-membuat-peta-dengan-custom-map-marker-menggunakan-openlayers.jpg 320w\", \"/static/ee2b4810e182c7dfb19cd9a0a48b347a/312de/regga-rantai-membuat-peta-dengan-custom-map-marker-menggunakan-openlayers.jpg 640w\", \"/static/ee2b4810e182c7dfb19cd9a0a48b347a/41eff/regga-rantai-membuat-peta-dengan-custom-map-marker-menggunakan-openlayers.jpg 960w\", \"/static/ee2b4810e182c7dfb19cd9a0a48b347a/533d0/regga-rantai-membuat-peta-dengan-custom-map-marker-menggunakan-openlayers.jpg 1280w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\",\n    \"decoding\": \"async\"\n  }), \"\\n    \"), \"\\n\"), mdx(\"p\", null, \"Sebelum nya kita sering menggunakan google map api untuk menampilkan peta di website atau di aplikasi karena saat itu masih gratis tanpa key access..\"), mdx(\"p\", null, \"namun sudah sejak tahun sekian Google mengubah kebijakannya sehingga untuk menampilkan map secara public harus menggunakan API key.. masih dikasih gratis sih untuk 1000 API request per key kalo gak salah..\"), mdx(\"p\", null, \"Atau kalau mau sederhana, kita bisa menggunakan fitur embed saja.. namun terkadang kita membutuhkan kustomisasi.. minimal untuk menyesuaikan style dengan website/app theme kita..\"), mdx(\"p\", null, \"ada beberapa map API gratis (open source) yang bisa digunakan seperti Leaflet dll.. namun kali ini saya mencoba menggunakan Openlayers..\"), mdx(\"p\", null, \"Openlayers merupakan \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"lower level\"), \" API, memang kita akan lebih banyak menulis \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"codes\"), \" nya, namun bisa lebih leluasa untuk melakukan kustomisasi.. kita bisa gunakan nodejs atau dengan \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"platform\"), \" biasa.. dan saya disini ini hanya menggunakan \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"platform\"), \" pada umumnya saja.. Dan yang mau saya share adalah sebatas untuk menambah map marker sederhana pada peta..\"), mdx(\"p\", null, \"Pertama kita gunakan \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"library scripts\"), \" yang dibutuhkan seperti ini:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"html\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-html\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token doctype\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<!\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token doctype-tag\"\n  }, \"DOCTYPE\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token name\"\n  }, \"html\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"html\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"lang\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"en\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"dir\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"ltr\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"head\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"meta\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"charset\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"utf-8\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"title\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"Map marker menggunakan Openlayers\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"title\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"<!-- Pointer events polyfill untuk old browsers, lihat https://caniuse.com/#feat=pointer -->\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"script\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"src\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"https://unpkg.com/elm-pep\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token script\"\n  }), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"script\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"<!-- Hanya dibutuhkan untuk browser seperti Internet Explorer dan Android 4.x -->\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"script\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"src\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token script\"\n  }), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"script\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"<!-- Style Bootstrap 4.6 -->\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"link\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"rel\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"stylesheet\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"href\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"integrity\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"crossorigin\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"anonymous\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"<!-- css style bawaan dari openlayers -->\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"link\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"rel\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"stylesheet\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"href\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"type\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"text/css\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"/>\")), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"head\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"body\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"div\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"id\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"map\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token special-attr\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"style\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token value css language-css\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token property\"\n  }, \"width\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \":\"), \"100%\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \";\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token property\"\n  }, \"height\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \":\"), \"100%\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \";\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token property\"\n  }, \"position\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \":\"), \"fixed\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \";\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token property\"\n  }, \"top\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \":\"), \"0\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \";\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token property\"\n  }, \"left\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \":\"), \"0\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"))), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"div\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"id\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"popup\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"div\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"div\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"<!-- Script jQuery -->\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"script\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"src\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"https://code.jquery.com/jquery-3.5.1.slim.min.js\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"integrity\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"crossorigin\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"anonymous\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token script\"\n  }), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"script\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"<!-- Script Bootstrap 4.6 -->\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"script\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"src\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"integrity\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"crossorigin\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"anonymous\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token script\"\n  }), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"script\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"<!-- Script dari openlayers -->\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"script\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"src\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token script\"\n  }), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"script\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"script\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"src\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"assets/js/script.js\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token script\"\n  }), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"script\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"body\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"html\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\"))))), mdx(\"p\", null, \"Untuk membuat titik koordinat dengan map marker yang sesuai dengan keinginan:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-js\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"var\"), \" Icon \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" ol\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"style\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"Icon\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\nStyle \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" ol\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"style\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"Style\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// Untuk menentukan koordinat marker nya\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"var\"), \" iconFeature \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"new\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"ol\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"Feature\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"geometry\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"new\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"ol\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"geom\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"Point\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"\\n    ol\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"proj\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"fromLonLat\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"106.817208\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"-\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"6.239169\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"text\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'<b>@reggarantai</b><br>---<br>Tendean Square<br><small>Jakarta Selatan</small>'\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// Memilih & menampilkan marker yang diinginkan\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// anchor adalah posisi marker terhadap koordinat\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// disini anchorXUnits & anchorYUnits menggunakan satuan pixel\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"var\"), \" iconStyle \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"new\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"Style\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"image\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"new\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"Icon\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"anchor\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"40\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"40\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"anchorXUnits\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'pixels'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"anchorYUnits\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'pixels'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"//src: 'https:///contoh.com/uri/misal-gambar.png',\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"src\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'assets/images/marker.png'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// Memasang marker terhadap koordinat\"), \"\\niconFeature\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"setStyle\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"iconStyle\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\")))), mdx(\"p\", null, \"Kemudian kita buat layer berserta source nya.. utk layer kita gunakan vector dan source nya berupa features..\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"javascript\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-javascript\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// Membuat source untuk vector layer\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"var\"), \" vectorSource \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"new\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"ol\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"source\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"Vector\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"features\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), \"iconFeature\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// Membuat vector layer untuk dipasang pada peta\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"var\"), \" vectorLayer \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"new\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"ol\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"layer\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"Vector\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"source\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" vectorSource\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\")))), mdx(\"p\", null, \"Untuk peta dasar nya, disini menggunakan peta dasar dari map Esri:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"javascript\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-javascript\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// Membuat peta dasar dari Esri Map\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"var\"), \" baseMap \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"new\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"ol\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"layer\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"Tile\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"source\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"new\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"ol\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"source\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"XYZ\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"attributions\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'Tiles \\xC2\\xA9 <a href=\\\"https://services.arcgisonline.com/ArcGIS/'\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"+\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'rest/services/World_Topo_Map/MapServer\\\">ArcGIS</a>'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"url\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'https://server.arcgisonline.com/ArcGIS/rest/services/'\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"+\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\")))), mdx(\"p\", null, \"Setelah itu kita buat map nya.. Set koordinat tengah nya kemudian tambahkan layers (peta dasar & point) yang telah kita buat sebelumnya..\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-js\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// Membuat peta\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// target adalah id attribute dari html elemen\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// view adalah container untuk peta\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// center merupakan posisi tengah dari peta\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"var\"), \" map \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"new\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"ol\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"Map\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"target\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'map'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"layers\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), \"\\n    baseMap\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n    vectorLayer\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"view\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"new\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"ol\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"View\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"center\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" ol\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"proj\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"fromLonLat\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"106.817208\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"-\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"6.236569\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"zoom\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"15\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\")))), mdx(\"p\", null, \"Selanjutnya marker/icon/symbol tersebut bisa kita kasih keterangan tambahan dalam sebuah popup ketika di klik..\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-js\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// Untuk membuat popup info saat popup di klik\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"var\"), \" element \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" document\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"getElementById\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'popup'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"var\"), \" popup \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"new\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"ol\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"Overlay\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"element\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" element\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"positioning\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'bottom-center'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"stopEvent\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"false\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"offset\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"-\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"45\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\nmap\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"addOverlay\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"popup\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// display popup on click\"), \"\\nmap\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"on\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'click'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token parameter\"\n  }, \"evt\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"var\"), \" feature \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" map\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"forEachFeatureAtPixel\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"evt\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"pixel\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token parameter\"\n  }, \"feature\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"return\"), \" feature\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"if\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"feature\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"var\"), \" coordinates \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" feature\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"getGeometry\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"getCoordinates\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n    popup\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"setPosition\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"coordinates\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"$\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"element\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"popover\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"placement\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'top'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"html\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"true\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"content\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" feature\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"get\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'text'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"$\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"element\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"popover\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'show'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"else\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"$\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"element\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"popover\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'dispose'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\")))), mdx(\"p\", null, \"Atau kita juga bisa jadikan marker/icon/symbol nya sebagai tautan agar ketika di klik, maka akan ke url yang dikehendaki..\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-js\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// Untuk menjadikan marker sebagai tautan\"), \"\\nmap\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"on\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'click'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token parameter\"\n  }, \"evt\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"var\"), \" feature \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" map\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"forEachFeatureAtPixel\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"evt\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"pixel\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token parameter\"\n  }, \"feature\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"return\"), \" feature\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"if\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"feature\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"//window.open(\\\"https://contoh.com/uri/link-ke-sesuatu/\\\");\"), \"\\n    window\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"open\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"https://regga.id/coding/membuat-peta-dengan-custom-map-marker-menggunakan-openlayers/\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\")))), mdx(\"p\", null, \"Script dengan \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"map marker\"), \" sebagai tautan seperti ini yang saya pasang di \", mdx(\"a\", {\n    href: \"https://reggarantai.com/contact/\",\n    target: \"_blank\"\n  }, \"reggarantai.com/contact\")), mdx(\"p\", null, \"Ya ini hanya dasar saja yang paling sederhana, bisa dikembangkan lagi untuk kebutuhan lainnya.. Untuk melihat script utuhnya bisa cek di \", mdx(\"a\", {\n    href: \"https://github.com/reggarantai/map-marker-menggunakan-openlayers/\",\n    target: \"_blank\"\n  }, \"github.com/reggarantai/map-marker-menggunakan-openlayers\")), mdx(\"p\", null, \"Semoga ada manfaatnya ya..\", mdx(\"br\", null), \"\\nWassalaamu\\u2019alaikum..\"));\n}\n;\nMDXContent.isMDXComponent = true;","fields":{"slug":"/coding/membuat-peta-dengan-custom-map-marker-menggunakan-openlayers/"},"excerpt":"Sebelum nya kita sering menggunakan google map api untuk menampilkan peta di website atau di aplikasi karena saat itu masih gratis tanpa key access.. namun…","frontmatter":{"title":"Membuat peta dengan custom map marker menggunakan Openlayers","date":"11 February 2021","hijriah":"29 Jumadil Akhirah 1442","description":"Menampilkan peta sederhana pada website dengan map marker sendiri menggunakan Openlayers..","postType":"coding","tags":["javascript","map","openlayers"],"featuredImage":{"childImageSharp":{"resize":{"src":"/static/ee2b4810e182c7dfb19cd9a0a48b347a/cd2b2/regga-rantai-membuat-peta-dengan-custom-map-marker-menggunakan-openlayers.jpg","width":1280,"height":640},"gatsbyImageData":{"layout":"fixed","backgroundColor":"#f8f8f8","images":{"fallback":{"src":"/static/ee2b4810e182c7dfb19cd9a0a48b347a/5111d/regga-rantai-membuat-peta-dengan-custom-map-marker-menggunakan-openlayers.jpg","srcSet":"/static/ee2b4810e182c7dfb19cd9a0a48b347a/5111d/regga-rantai-membuat-peta-dengan-custom-map-marker-menggunakan-openlayers.jpg 20w,\n/static/ee2b4810e182c7dfb19cd9a0a48b347a/99651/regga-rantai-membuat-peta-dengan-custom-map-marker-menggunakan-openlayers.jpg 40w","sizes":"20px"},"sources":[{"srcSet":"/static/ee2b4810e182c7dfb19cd9a0a48b347a/4926b/regga-rantai-membuat-peta-dengan-custom-map-marker-menggunakan-openlayers.webp 20w,\n/static/ee2b4810e182c7dfb19cd9a0a48b347a/455ff/regga-rantai-membuat-peta-dengan-custom-map-marker-menggunakan-openlayers.webp 40w","type":"image/webp","sizes":"20px"}]},"width":20,"height":10}}}}},"previous":{"fields":{"slug":"/coding/membuat-kalkulator-indeks-massa-tubuh/"},"frontmatter":{"title":"Membuat kalkulator untuk menghitung indeks massa tubuh","hijriah":"29 Rajab 1442","featuredImage":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#e8e8e8","images":{"fallback":{"src":"/static/634232327b4cbc606f3dff478861d599/a171f/regga-rantai-membuat-kalkulator-bmi-menggunakan-jquery-o.jpg","srcSet":"/static/634232327b4cbc606f3dff478861d599/2122f/regga-rantai-membuat-kalkulator-bmi-menggunakan-jquery-o.jpg 160w,\n/static/634232327b4cbc606f3dff478861d599/3da3e/regga-rantai-membuat-kalkulator-bmi-menggunakan-jquery-o.jpg 320w,\n/static/634232327b4cbc606f3dff478861d599/a171f/regga-rantai-membuat-kalkulator-bmi-menggunakan-jquery-o.jpg 640w,\n/static/634232327b4cbc606f3dff478861d599/f2f1c/regga-rantai-membuat-kalkulator-bmi-menggunakan-jquery-o.jpg 1280w","sizes":"(min-width: 640px) 640px, 100vw"},"sources":[{"srcSet":"/static/634232327b4cbc606f3dff478861d599/960e3/regga-rantai-membuat-kalkulator-bmi-menggunakan-jquery-o.webp 160w,\n/static/634232327b4cbc606f3dff478861d599/aeec2/regga-rantai-membuat-kalkulator-bmi-menggunakan-jquery-o.webp 320w,\n/static/634232327b4cbc606f3dff478861d599/99f93/regga-rantai-membuat-kalkulator-bmi-menggunakan-jquery-o.webp 640w,\n/static/634232327b4cbc606f3dff478861d599/b584c/regga-rantai-membuat-kalkulator-bmi-menggunakan-jquery-o.webp 1280w","type":"image/webp","sizes":"(min-width: 640px) 640px, 100vw"}]},"width":640,"height":320}}}}},"next":{"fields":{"slug":"/coding/membuat-digital-promotion-card-tool-sederhana/"},"frontmatter":{"title":"Membuat digital promotion card tool sederhana","hijriah":"28 Rajab 1442","featuredImage":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#181818","images":{"fallback":{"src":"/static/b484803dac8f7e6712af513a2ba6bb87/a171f/regga-rantai-membuat-digital-promotion-tool-sederhana.jpg","srcSet":"/static/b484803dac8f7e6712af513a2ba6bb87/2122f/regga-rantai-membuat-digital-promotion-tool-sederhana.jpg 160w,\n/static/b484803dac8f7e6712af513a2ba6bb87/3da3e/regga-rantai-membuat-digital-promotion-tool-sederhana.jpg 320w,\n/static/b484803dac8f7e6712af513a2ba6bb87/a171f/regga-rantai-membuat-digital-promotion-tool-sederhana.jpg 640w,\n/static/b484803dac8f7e6712af513a2ba6bb87/f2f1c/regga-rantai-membuat-digital-promotion-tool-sederhana.jpg 1280w","sizes":"(min-width: 640px) 640px, 100vw"},"sources":[{"srcSet":"/static/b484803dac8f7e6712af513a2ba6bb87/960e3/regga-rantai-membuat-digital-promotion-tool-sederhana.webp 160w,\n/static/b484803dac8f7e6712af513a2ba6bb87/aeec2/regga-rantai-membuat-digital-promotion-tool-sederhana.webp 320w,\n/static/b484803dac8f7e6712af513a2ba6bb87/99f93/regga-rantai-membuat-digital-promotion-tool-sederhana.webp 640w,\n/static/b484803dac8f7e6712af513a2ba6bb87/b584c/regga-rantai-membuat-digital-promotion-tool-sederhana.webp 1280w","type":"image/webp","sizes":"(min-width: 640px) 640px, 100vw"}]},"width":640,"height":320}}}}},"quotes":{"edges":[{"node":{"fields":{"slug":"/kutipan/live-in-the-now/"},"frontmatter":{"title":"Live in the now","featuredImage":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#986848","images":{"fallback":{"src":"/static/a3361071e9752cc1d0ba79dc229d784c/e3115/regga-rantai-live-in-the-now.jpg","srcSet":"/static/a3361071e9752cc1d0ba79dc229d784c/1d851/regga-rantai-live-in-the-now.jpg 160w,\n/static/a3361071e9752cc1d0ba79dc229d784c/82d5c/regga-rantai-live-in-the-now.jpg 320w,\n/static/a3361071e9752cc1d0ba79dc229d784c/e3115/regga-rantai-live-in-the-now.jpg 640w,\n/static/a3361071e9752cc1d0ba79dc229d784c/4cdba/regga-rantai-live-in-the-now.jpg 1280w","sizes":"(min-width: 640px) 640px, 100vw"},"sources":[{"srcSet":"/static/a3361071e9752cc1d0ba79dc229d784c/3883e/regga-rantai-live-in-the-now.webp 160w,\n/static/a3361071e9752cc1d0ba79dc229d784c/202f5/regga-rantai-live-in-the-now.webp 320w,\n/static/a3361071e9752cc1d0ba79dc229d784c/8ffad/regga-rantai-live-in-the-now.webp 640w,\n/static/a3361071e9752cc1d0ba79dc229d784c/0bd36/regga-rantai-live-in-the-now.webp 1280w","type":"image/webp","sizes":"(min-width: 640px) 640px, 100vw"}]},"width":640,"height":800}}}}}},{"node":{"fields":{"slug":"/kutipan/bersemangatlah-dalam-hal-yang-bermanfaat/"},"frontmatter":{"title":"Bersemangatlah dalam hal-hal yang bermanfaat","featuredImage":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#f8f8f8","images":{"fallback":{"src":"/static/25d9c371a73ba4a440d44c95eec79114/e3115/regga-rantai-bersemangatlah-dalam-hal-yang-bermanfaat.jpg","srcSet":"/static/25d9c371a73ba4a440d44c95eec79114/1d851/regga-rantai-bersemangatlah-dalam-hal-yang-bermanfaat.jpg 160w,\n/static/25d9c371a73ba4a440d44c95eec79114/82d5c/regga-rantai-bersemangatlah-dalam-hal-yang-bermanfaat.jpg 320w,\n/static/25d9c371a73ba4a440d44c95eec79114/e3115/regga-rantai-bersemangatlah-dalam-hal-yang-bermanfaat.jpg 640w,\n/static/25d9c371a73ba4a440d44c95eec79114/4cdba/regga-rantai-bersemangatlah-dalam-hal-yang-bermanfaat.jpg 1280w","sizes":"(min-width: 640px) 640px, 100vw"},"sources":[{"srcSet":"/static/25d9c371a73ba4a440d44c95eec79114/3883e/regga-rantai-bersemangatlah-dalam-hal-yang-bermanfaat.webp 160w,\n/static/25d9c371a73ba4a440d44c95eec79114/202f5/regga-rantai-bersemangatlah-dalam-hal-yang-bermanfaat.webp 320w,\n/static/25d9c371a73ba4a440d44c95eec79114/8ffad/regga-rantai-bersemangatlah-dalam-hal-yang-bermanfaat.webp 640w,\n/static/25d9c371a73ba4a440d44c95eec79114/0bd36/regga-rantai-bersemangatlah-dalam-hal-yang-bermanfaat.webp 1280w","type":"image/webp","sizes":"(min-width: 640px) 640px, 100vw"}]},"width":640,"height":800}}}}}},{"node":{"fields":{"slug":"/kutipan/ilmu-adalah-cahaya/"},"frontmatter":{"title":"Ilmu adalah cahaya","featuredImage":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#080808","images":{"fallback":{"src":"/static/43a28fe66cae5811fc4802578ce82e59/e3115/regga-rantai-ilmu-adalah-cahaya.jpg","srcSet":"/static/43a28fe66cae5811fc4802578ce82e59/1d851/regga-rantai-ilmu-adalah-cahaya.jpg 160w,\n/static/43a28fe66cae5811fc4802578ce82e59/82d5c/regga-rantai-ilmu-adalah-cahaya.jpg 320w,\n/static/43a28fe66cae5811fc4802578ce82e59/e3115/regga-rantai-ilmu-adalah-cahaya.jpg 640w,\n/static/43a28fe66cae5811fc4802578ce82e59/4cdba/regga-rantai-ilmu-adalah-cahaya.jpg 1280w","sizes":"(min-width: 640px) 640px, 100vw"},"sources":[{"srcSet":"/static/43a28fe66cae5811fc4802578ce82e59/3883e/regga-rantai-ilmu-adalah-cahaya.webp 160w,\n/static/43a28fe66cae5811fc4802578ce82e59/202f5/regga-rantai-ilmu-adalah-cahaya.webp 320w,\n/static/43a28fe66cae5811fc4802578ce82e59/8ffad/regga-rantai-ilmu-adalah-cahaya.webp 640w,\n/static/43a28fe66cae5811fc4802578ce82e59/0bd36/regga-rantai-ilmu-adalah-cahaya.webp 1280w","type":"image/webp","sizes":"(min-width: 640px) 640px, 100vw"}]},"width":640,"height":800}}}}}}]},"defImg":{"childImageSharp":{"resize":{"src":"/static/f3c4f36e532cd4010b93d2d301151ca2/70c1e/regga-coffee.jpg"}}}},"pageContext":{"slug":"/coding/membuat-peta-dengan-custom-map-marker-menggunakan-openlayers/","previousPostId":"eb600f3c-1d44-52c7-abf8-d9bb75e837da","nextPostId":"ff88a6b6-7ea5-5eb9-bf2f-b10fb138ea0b"}},
    "staticQueryHashes": ["2996832855","3245940048","3343187749"]}