b4a5703e2751da61952b by ThomasG77

index.html

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Románské kostely v Česku</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.css" type="text/css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.js"></script>
    </head>
    <body>
        <div id="mapdiv"></div>
        <script>
            var vectorLayer = new ol.layer.Vector({
                title: "Románské kostely",
                source: new ol.source.Vector({
                    format: new ol.format.GeoJSON(),
                    url: 'kostely.geojson'
                }),
                style: new ol.style.Style({
                    image: new ol.style.Icon({
                        src: "Ol_icon_blue.png"
                    })
                })
            });
            var map = new ol.Map({
              target: "mapdiv",
              projection: "EPSG:4326",
              controls: [
                new ol.control.OverviewMap()
              ],
              loadTilesWhileAnimating: true,
              loadTilesWhileInteracting: true,
              layers: [
                new ol.layer.Tile({
                  title: "OSM Map",
                  source: new ol.source.OSM()
                }),
                
                // to be filled in later
                vectorLayer 
              ],
              view: new ol.View({
                //Village Čihošť is the geographical center of Czechia
                center: ol.proj.fromLonLat([15.338611, 49.743889]),
                zoom: 8
              })
            });
    </script>
</body></html>