I am learning OpenLayers 3 and I ran into a problem while trying to pull in basemaps to the browser using a JS Bin online editor.
If I write the exact same code in a local text editor (Notepad++) everything works as it should. But not when I am using JS Bin.
Here is the link with the code:
https://jsbin.com/wijoha/edit?html,css,console,output
Can you help me figure out what is wrong with it? I've already spent a couple of hours trying to solve the issue but can't get my head around it...
Looking at the console on the JSBin you have added (the browser window's one, rather than the JSBin one), the CSS is not being loaded as you are attempting to put a HTTP resource into a HTTPS page. The error message reads:
Mixed Content: The page at 'https://null.jsbin.com/runner' was loaded over HTTPS, but requested an insecure stylesheet 'http://openlayers.org/en/v3.10.1/css/ol.css'. This request has been blocked; the content must be served over HTTPS.
Additionally, your JS file ol.js is not loading at all, as openlayers.org does not seem to be accepting serving the file over HTTPS (for me at least, in Chrome).
Instead, try serving everything over HTTP (including the URL of JSBin itself), here is a working example: