Can't get my openlayers map to appear on a web page

Question

I have made an openlayers map in jsfiddle and I want to get it hosted on my domain. This is the jsfiddle. I copied over the html, js and css to my domain and it should be visible here.

As you can see, it is not working as intended. I am confused as to what I need to change in between using jsfiddle and actually hosting it, as I feel there are shortcuts being done that I am not aware of.

This is the code being used for each (I have modified it already a bit to try to make it work on a regular domain instead of jsfiddle) (I should also note that the html, js and css are all stored in the same folder as main.html, map.js and style_1.css):

HTML:

Popup










  

  

    

    
      
      Popup Title
    

    
      
        
          
            
              
                Attribute
                Value
              
            
            
              
                Attribute 1
                Value 1
              
              
                Attribute 2
                Value 2
              
              
                Attribute 4
                Value 4
              
              
                Attribute 5
                Value 5
              
              
                Attribute 6
                Value 6
              
              
                Attribute 7
                Value 7
              
            
          
        
        
          
        
      
    

    
      some more text

JS:

/**
 * Elements that make up the popup.
 */
var container = document.getElementById('popup');
var content = document.getElementById('popup-content-description');
var closer = document.getElementById('popup-closer');


/**
 * Create an overlay to anchor the popup to the map.
 */
var overlay = new ol.Overlay( /** @type {olx.OverlayOptions} */ ({
  element: container,
  autoPan: true,
  autoPanAnimation: {
    duration: 250
  }
}));


/**
 * Add a click handler to hide the popup.
 * @return {boolean} Don't follow the href.
 */
closer.onclick = function() {
  overlay.setPosition(undefined);
  closer.blur();
  return false;
};


/**
 * Create the map.
 */
var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.BingMaps({
        key: 'Ajcgz_4tZ9Erlpa9a76T_xE-gUBsxbI-YqvcIP-L9pje_QEM9koyLnXDyDYBchb4',
        imagerySet: 'Aerial'
      })
    })
  ],
  overlays: [overlay],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});


/**
 * Add a click handler to the map to render the popup.
 */
map.on('singleclick', function(evt) {
  var coordinate = evt.coordinate;
  var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
    coordinate, 'EPSG:3857', 'EPSG:4326'));

  content.innerHTML = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur dictum tellus eu fermentum. Vestibulum eget rhoncus lacus, nec commodo mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et leo vitae nisi ultricies commodo in id ligula. Donec euismod sollicitudin nisl, a suscipit nulla imperdiet vel. Vivamus feugiat, ex id tempus aliquam, tellus dui porttitor felis, nec malesuada tortor neque ultricies elit. In auctor, lorem id placerat luctus, dolor nibh pretium dui, tincidunt bibendum arcu tellus placerat lectus. Nullam id massa gravida, lacinia est sed, porta tortor. Nunc lacinia sit amet justo a feugiat. Integer libero nulla, gravida in dolor eu, pharetra iaculis neque. In pellentesque molestie turpis, eget cursus augue pulvinar vitae. Curabitur porttitor porta consectetur. Donec convallis fringilla augue a faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. ';
  overlay.setPosition(coordinate);
});

CSS:

.map {
  width: 800px;
  height: 600px;
}

.ol-popup {
  position: absolute;
  background: linear-gradient(rgb(255, 155, 38), white, white, white);
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 5px 5px 5px 5px;
  border-radius: 20px;
  border: 5px solid rgb(255, 155, 38);
  bottom: 12px;
  left: -50px;
  width: 600px;
  height: 325px;
  font-size: x-small;
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

.ol-popup-closer:after {
  content: "?";
}

header {
  border-bottom: 3px solid rgb(215, 25, 35);
  height: 75px;
  overflow: auto;
}

#ol-popup-header-img {
  float: left;
  width: 60px;
  height: 60px;
  margin: 5px;
}

#ol-popup-title-text {
  float: left;
  margin: 15px 0px 15px 5px;
  text-overflow: ellipsis;
  overflow: hidden;
}

section {
  padding: 10px
}

table {
  border: 2px solid white;
  width: 100%;
}

table th {
  background-color: rgb(215, 15, 35);
  border: 2px solid white;
  color: white;
  width: 50%;
  padding: 3px;
  text-align: left;
}

table td {
  background-color: rgb(255, 155, 38);
  border: 2px solid white;
  color: white;
  width: 50%;
  padding: 3px;
  text-align: left;
}

#popup-content-table: {
  border: 1px solid black;
  height: 150px;
  text-overflow: clip;
  overflow-y: scroll;
}

#popup-content-description {
  float: right;
  height: 150px;
  text-overflow: clip;
  overflow-y: scroll;
}

footer {
  border-top: 3px solid rgb(215, 25, 35);
  height: 200px;
  overflow: auto;
}

#ol-popup-footer-text {
  float: left;
  margin: 5px;
}

#ol-popup-footer-img {
  float: right;
  margin: 5px;
}

.ol .ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}

Can't get my openlayers map to appear on a web page

Answers (1)

Related Questions

Can&#39;t get my openlayers map to appear on a web page

Answers (1)

Related Questions

Can't get my openlayers map to appear on a web page