Custom Javascript and CSS style not showing on Webpage

Frappe Framework Website
1

Hi,

I have added an openstreetmap on one of the webpage via custom javascript and a custom css but now its not showing on the webpage, can someone help me find out the issue or is it just an issue with some of the recent updated in frappe.

Below code is inserted into the Javascript

<script src="http://openlayers.org/en/v3.16.0/build/ol.js" type="text/javascript"></script>
<script type="text/javascript">
  var map = new ol.Map({
	target: 'map',
	layers: [
	  new ol.layer.Tile({
		source: new ol.source.OSM({layer: 'sat'})
	  })
	],
	view: new ol.View({
	  center: ol.proj.fromLonLat([77.08907, 28.66297]),
	  zoom: 16
	})
  });
</script>

The below code is inserted into the custom CSS, the surprising thing is that it was working earlier but not now

<head>
<link rel="stylesheet" href="http://openlayers.org/en/v3.16.0/css/ol.css" type="text/css">
<style>
  .map {
	height: 80%;
	width: 100%;
  }
</style>
<script src="http://openlayers.org/en/v3.16.0/build/ol.js" type="text/javascript"></script>
<title>Sunder Vihar Map</title>
</head>
2

@adityaduggal Worked for me. I think you are missing <div id="map"></div> in your HTML section.

3

Sorry for my zilch programming knowledge, I am still not able to get it going.

4

On your webpage click on <> symbol:

Screen Shot 2016-09-10 at 1.10.40 AM.png1134×470 15.4 KB

There type <div id="map"></div> and hit update.

Screen Shot 2016-09-10 at 1.12.10 AM.png1268×396 19.8 KB

Reload your webpage.

5

Well in that case that is already available in my html see the below code:

<ul>
    <li>Zoom In to See House Numbers</li>
    <ul>
        <li>You can zoom with Mouse Scroll Wheel or</li>
        <li>On Mobile Devices you can Pinch to Zoom</li>
    </ul>
</ul>
<div class="map" id="map"></div>

Btw this page is live at https://www.sundervihar.in/map-of-sunder-vihar#map

6

You can view the problem in the console.

Here lies the problem:

Screen Shot 2016-09-10 at 12.59.14 PM.png1280×393 46.7 KB

7

Basically you are calling HTTP over HTTPS. Your website is on HTTPS and these links on HTTP. Try using these links instead.

https://cdnjs.cloudflare.com/ajax/libs/ol3/3.18.2/ol.css

https://cdnjs.cloudflare.com/ajax/libs/ol3/3.18.2/ol.js

2 Likes