map.html 5.1 KB

123456789101112131415
  1. <!DOCTYPE html lang="en">
  2. <head>
  3. <meta charset="utf-8" />
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  5. <title>OpenStreepMap layer using OpenLayers</title>
  6. <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwCAYAAAA+VemSAAAABmJLR0QA/wD/AP+gvaeTAAANhUlEQVR4nO3dW6xeRRnG8f+mFFosIgZoKRQJBloLCJWgEDmUkEYIAkYFFCJGIRATD/FCxXjDJYYLI3hDQI2iQCLxhFEixoYKiNBiRBNoEYGUFlrUFii0lNbtxXwbetjHb6/5nnlnnl/yJlyUzMxa8+5v1rvWmjWERbQ/cBywsBeLgXnAwb04aIz/b3MvNgEvAE8Aq4EngaeAN7L22jo3pO6ATcoi4BxgKXAKcDQwo+M2dgLPAKuA5b1Y03EbZk04FLgK+AmwDhgWxTrgduDzwCFZR2wW3IHANcADpF9DVdKOFTt7fbum11czA04HbiNdm6qTdLKxCbgVOC3D8TAr3hBwCfBX9Mk43XisNxbXU6x6M4ArgcfRJ17X8bfe2LourpkV4cOkXyt1ouWOR/HS2iqyALgHfWINOu4Bjuzg+JlJ7AdcD2xBn0yq2Ax8Bdh3eofSbLDeAzyEPoFKiQeAo6Z1RM0G5NPAK+iTprR4GbhsGsfVLKsDgB+jT5TS4xbSs9xmxVgAPIw+OaLEg8ARfR1ps44tIb3Zo06KaPECcHIfx9usM8uAV9EnQ9TYBJw15aNu1oFLgW3okyB6bCM9imk2MFcAb6Kf/LXEduBTUzoDZn26hDJf94seO4BPTOE8mE3ZMtK2M+rJXmtsBc6c9Nkwm4IlpIcR1JO89tiMq9PWsQXAWvSTu5V4Dt8nto7MJr3rqp7UrcWj+ImtCfnl64l9F/iouhMNmk/ae+tedUcsrivQ/xK1Hh+f8CyZjWIRfsqqhNgEHDPBuTLbzT7An9FPXkeKP/XOie3B18Cj+zJwtboT9pajgI2kwpbtwluB7u0I0jeDvHl5WV4hXda8oO5ISfwLvLdbSN8fsrLsT/rkzC/VHSmJf4F3dzbpo16Rjss20mYCK3n7S4PrSY8lbuv9m1mk+9nzSb9iC4FTSdu/RrrXOgycQdpvzGw3Q8R5YGMjcBPpi4WzpjHm2cC5wM3ASwWMazKxklh/YG1APoZ+ck4UK4CLgJkZxj8TuJi0g6R6nBPFBRnGb8E9gn5ijhXLGezOFUtJfyzU4x4rHsw2cgvpfPSTcrR4Grgw47gnciHwr1H6VUIsyzhuC2Y5+gm5Z9wOzMk56Ek6ELgD/fHYM+7LOWiL4zT0k3HX2ApclXXE/bmW8vYAOzXriC2EH6CfiCOxkbIn5Qcpq1p9a97hWulmk3aAUE/EYdK92xPzDrcTJ1HOPtj/JdZ9bOvY5egn4TCwATg281i7tBj4D/rjNkza3tca9Rv0EzDqRm5LKeOa+BeZx2mFOpy0lal6An4290Azuhr98XsTmJt7oFaea9BPvruyjzK/u9EfxxKr9pbZnWgn3TrgoOyjzO9d6ItaP8s+SivKEOmWjXLS1fQVgsvQHsuXyfN8uBXqeLQT7g/5hzhQQ8D9aI/ph7KPskCt7jOkfI52GPi6sP0choFviPvQ5GdKW01g5cn+I/CYsP1cHib9CqucLmzbBuxZdEu98/IPT+YCdMf16QGMzwowB/gfmkm2lrpXPTPQVaR3kh6NbUrNk2ksx6LbkuVO0h+PWu1Ed297H2I9jtqJFhP4OGHbvxa2PSjKMSrPrUSLCbxI1O6rpEJP7R4EXhO1rTq3Mi0msGqZ9RDp2evabUf3h8q/wA1QfTi6pc+CPCJqd76oXZkWE/gQUburRe0qqMaqOrcyLSbwu0XtrhG1q6Aaq+rcyrSYwO8QtfuiqF0F1VhL2MVzoFpM4P1E7W4Rtavwqqjd5vbHcgIPjhM4PydwA4bVHbBsan7KbVQtJvBWUbstfTD8naJ2Xxe1K9NiAqtOcksJrBqrE7gBql/geaJ2FQ4XtesEboCqmLRQ1K6CaqwtFQqBNhN4najdlh60VyWw6tzKOIEHZ4moXYVTRO06gRuwVtTumbRxn3I2cIaobdW5lWkxgZ8XtXsAZX86tCunoftDpTq3Mi0m8BPCtj8pbHtQlGNUnlsbkDmkvZsUG69toO4vCOyH7rOjO9C9qCLT4i/wFuAZUduHAeeK2h6EZehe6fsnuq18ZFpMYNBurH6dsO3cviVsu8bN8ifUagIrt7c5mzq/InAm2nG1tGVR85aguU4bCX/crPt4f/ZRWjGG0H/T9jPZRzk4n0N7LNej26zfRO5CO+n8ge/u4qfZR1moVq+BAX4nbn8+cIu4D124Df2bVveK2zeBA0mvnyl/OYaBL+YeaEZfRX/8XqPBzews+RX6CbiVVMGNZimwDf3x+3nmcVrBLkM/AYeBV9C9wdOP00m/fOrjNkwbj6faGOaQkkc9CYdJldQT8w63EyehL1qNxGbSSyLWsO+gn4gjsQX4SN7hTsv5pD6qj9NI3Jh3uBbBItJ2pOrJOBJbgauyjrg/11LGNe9I7KTBD3rb6H6PfkLuGbdTRnX1QOAO9Mdjz/htzkFbLOehn5CjxVrg0ozjHs8QcDnpJXn1cRgtluUbukX0APpJOVYsB87KN/S9LAVWdDyGLuP+bCO3sJain5gTxQrgIvJsCjATuJiy/5CNRMT75jYA96GfnJOJjcBNwDnArGmMdzZpg4GbgZcKGNdkQv0IbFH8BsfuTgZWAjPUHZmCbcDDpH6vBp4kvSixGdjU+zcHk146OIJUdV9I2mBPuQFdP3YAHwD+ru6IletG9L8yjtHj2+Octyb5F3hvc0i7Gx6p7ojt5lngeBr8/tF4Wn6dcCxbgK+pO2F7uQ4nr03Bj9AvGR0pfjjBuTLbyxxgDfrJ23qspsH9nq0bpwLb0U/iVmM7sV6zHLhIt0sU1pNuXdS8GXvJvgncre6Exfd99L9GrcWtkzozZpMwC/gL+kndSqyg7m9ImcBRpLeD1JO79ngO34O3TN5Lui5WT/JaYx1wzKTPhlkfTkD3Cc2a49+kJ63MsjsDeBn9pK8lNlHnB9+sYIspd7eKSLEWeN8Uj71ZJ44GnkKfBFFjTe8YmsksIL2Lq06GaPEorjZbIfYFbkCfFFHiht4xMyvKl/Cz0+PFG8AX+j66ZgOwGFiFPllKi5W4WGVBzASuJ70IoU4cdezoHQsvmS2cpcA/0CeRKh5nsPtZm3VuH+BKYAP6hBpUvNgbs/dcs2ocBnyPVMhRJ1iu2Ebar/rQjo6ZWXEOJd1GeR19wnUVr/fG5MS1ZpyIPvG6ihM6PjZmIdTwLPXazo+KTZr3hdZape5AB2oYQ1hOYK0aJn8NYwjLCay1Ut2BDtQwhrB8n05rLumeaWRzSZ87NQH/AmttIO0DFdXzOHmlnMB6ka8hI/e9Ck5gvchJELnvVXAC60VOgsh9N+vEXPQPY/Qbh2U4HjYF/gXWi1rIcgGrAE7gMkRcikbsc3WcwGWImAwR+1wdJ3AZIiZDxD6bZRGxkOUCltkuIr1a6FcIC+EldDkiLUkj9bVqTuByREqKSH2tmhO4HJGSIlJfzQYiUiFrbqZjYBZahEKWC1gF8RK6LBGWphH62AwncFkiJEeEPjbDCVyWCMkRoY9mEhEKWS5gmY2j5EKWC1iF8RK6PCUvUUvuW5OcwOUpOUlK7luTnMDlKTlJSu6bWRFKLmS5gGU2CSUWslzAKpCX0GUqcalaYp+a5wQuU4nJUmKfmucELlOJyVJin8yKVGIhywUssykoqZDlAlahvIQuV0lL1pL6YrtwAperpKQpqS+2CydwuUpKmpL6YhZCSYUsF7DM+rAOffI+n32U1jcvocu2Ut0ByuiDjcEJXLYSrj1L6IONwQlcthKSp4Q+mIVUQiHLBSyzaVAWslzAKpyX0OVTLmG9fC6cE7h8TmAbkxO4fMrbOL6FZDZNykKWC1hmHVAUslzACsBL6BgU16K+/g3ACRyDE9hG5QSOQVFMcgHLrCOKQpYLWGYdGmQhywWsILyEjmOQ16S+/g3CCRyHE9j24gSOwwlsFtggC1kuYJllMIhClgtYgXgJHcsglrZePgfiBI7FCWy7cQLH4gQ2C2wQhSwXsMwyylnIcgErGC+h48m5xPXyORgncDxOYHuLEzgeJ7BZYPNwAcsstByFLBewAvISOqYcS10vnwNyAsfkBDbACRyVE9gssByFLBewzAaoy0KWC1hBeQkdV5dLXi+fg3ICx+UENidwYE5gs8AOxwUss9C6KGS5gBWYl9CxdbH09fI5MCdwbE7gxjmBY3MCmwXWRSHLBSwzofX0n7zrBP21DnkJHd90PsTtj3gH5wSObzrXsL7+Dc4JHJ8T2Cyw6RSyXMAyK0A/hSwXsCrgJXQd+ilGuYBVASdwHfq5lvX1bwWcwHVwApsF1k8hywUss4JMpZDlAlYlvISux1SWxF4+V8IJXA8ncIOcwPWYym0h30IyK8xUClkuYJkVaDKFLBewKuIldF0mc23r69+KOIHr4gRujBO4LpMpTrmAZVaoyRSyXMAyK9h4hSwXsCrjJXR9xrvG9fVvZZzA9XECN8QJXB8nsFlg4xWyXMAyC2C0QpYLWBXyErpOoy2VvXyukBO4Tk7gRjiB6+QENgtstEKWC1hmgexayHIBq1JeQtdr1Rj/bRVxAtfLCdwAJ3C9nMBmgc3n7WvgeeK+mFkf1uMCVtX2VXfAslpF+gW2SjmB6+YErpwTuG5O4MrNUHfAstpCug7eou6I5fF/vHbSxLeHmIAAAAAASUVORK5CYII=" />
  7. </head>
  8. <body>
  9. <div id="map"></div>
  10. <!-- OSM -->
  11. <script src="https://openlayers.org/api/OpenLayers.js"></script>
  12. <!-- Custom ES6 script-->
  13. <script src="main.js"></script>
  14. </body>
  15. </html>