I am using OpenLayers map by using the hosted JavaScript:

<script src="http://openlayers.org/api/2.13.1/OpenLayers.js"></script> 

But my client has SSL installed and when I try to run my map page it shows:

(2)[blocked] The page at https://domain.com/rwd/ ran insecure content 
   from http://openlayers.org/api/2.13.1/OpenLayers.js.

So I tried https one and it turns out openlayers doesn't have one

https://openlayers.org/api/2.13.1/OpenLayers.js

Then I download the Openstreet js and hosted in client server, but then all the styles and related images are lost. Although it does show the map, basically numerous warnings pop-up in the console and I'm afraid this might get rejected at play store or so. I'm developing a hybrid application which runs on server as well.

Warnings now :

The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://b.tile.openstreetmap.org/14/8743/5624.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://b.tile.openstreetmap.org/14/8742/5624.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://c.tile.openstreetmap.org/14/8743/5623.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://b.tile.openstreetmap.org/14/8743/5625.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://c.tile.openstreetmap.org/14/8744/5624.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://a.tile.openstreetmap.org/14/8742/5623.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://c.tile.openstreetmap.org/14/8742/5625.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://a.tile.openstreetmap.org/14/8744/5623.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://a.tile.openstreetmap.org/14/8744/5625.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://a.tile.openstreetmap.org/14/8743/5622.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://c.tile.openstreetmap.org/14/8742/5622.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://c.tile.openstreetmap.org/14/8745/5624.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://b.tile.openstreetmap.org/14/8744/5622.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://b.tile.openstreetmap.org/14/8745/5623.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://c.tile.openstreetmap.org/14/8745/5625.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://c.tile.openstreetmap.org/14/8745/5622.png.

GET https://domain.com/rwd/js/lib/theme/default/style.css 404 (Not Found) 
/*This the corresponding stylesheet that is loaded via Openstreet.js*/ 

Any help would be greatly appreciated.


Update 1 :

I tried with cdn with SSL and still same issue:

https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/OpenLayers.js

Update 2 :

I downloaded the entire GitHub repo for Openstreet thinking this will solve the image and CSS issue.

https://github.com/openlayers/openlayers

While the above solved the CSS issues, the map however is shown by loading out images from another external site tile.openstreet.com. Seems like I have to dig into openstreet js as well..:(..


Important : I am using backbone.js.

Note : I have gone through OpenLayers 2.12 and http basic authentication woes and that has not helped me. I do not have any control over the server configuration. I just have access to a folder where I need to set up the website an everything else works fine, but this SSL is killing me..:(

Changed real website address to avoid Google linking it..:)

  • 2
    Is there a reason why you don't host the .JS file on your own servers? That would allow pure SSL and avoid cross domain conflicts. – Mapper Jan 23 '14 at 6:46
  • @Mapper : I did that first, but then the script calls out some external resources like css, images etc.. See my 2nd update. Ive explained what is missing now.. I think this will remain an issue unless they add an ssl too.. – Roy M J Jan 23 '14 at 6:48
  • All assets etc are linked relative, so IMHO there is no problem. For example: on-i.de/map – Mapper Jan 23 '14 at 9:21
  • @Mapper : Yes i figured that out.. but however the tiles are the one that im stuck with by going this way.. It doesnt break my application, but shows a warning, lot of warnings actually.. Ill keep this open for a few days to search around and see whether there are any possible solutions to this... – Roy M J Jan 23 '14 at 9:26
  • You should always host those js files locally. Otherwise an OpenLayers update with an API modification might screw your site. – scai Jan 23 '14 at 9:58
  • OpenLayers.js: i would recommend you to download the lib and link it to your application server. This way you can have total control over its URL and content.

  • "insecure content" warnings: that happened to me too. In OpenLayers 2.13.1, when you instantiate an OpenLayers.Layer.OSM, it is configured by default for HTTP. From OpenLayers.Layer.OSM doc:

url {String} The tileset URL scheme. Defaults to http://[a|b|c].tile.openstreetmap.org/${z}/${x}/${y}.png

Instead of that, i used explicit values for the URL scheme array, containing protocol-independent URLs

layer = new OpenLayers.Layer.OSM(
    "OpenStreetMap", 
    // Official OSM tileset as protocol-independent URLs
    [
        '//a.tile.openstreetmap.org/${z}/${x}/${y}.png',
        '//b.tile.openstreetmap.org/${z}/${x}/${y}.png',
        '//c.tile.openstreetmap.org/${z}/${x}/${y}.png'
    ], 
    null);
  • protocol-independent URLs: if you want your app to run on both HTTP and HTTPS, use protocol-independent URLs: instead of http://server.com/resource, use //server.com/resource: your browser will consider the protocol it's currently running on.
  • In case anyone is wondering: You change this in OpenLayers.js source code. Even if it's already minified it's easy to find and change. – trainoasis Mar 13 at 7:09

The official OSM tile servers don't provide any access via SSL. They are shared public goods and shall not be used by apps with heavy traffic. If you want to use them anyway, you must be ok with the "some content isn't encrypted" message at the browsers.

If you want to have full encryption, you need to pay for commercial map CDNs with SSL:

You need override the forms Widget. Example:

from django.contrib import admin
from django.contrib.gis.db import models
from django.contrib.gis.forms.widgets import BaseGeometryWidget

class CustomOpenLayersWidget(BaseGeometryWidget):
    template_name = 'gis/openlayers.html'

    def __init__(self, attrs=None):
        super(CustomOpenLayersWidget, self).__init__(attrs)

    class Media:
        js = (
            'https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js',
            'gis/js/OLMapWidget.js',
        )


class CustomModelAdmin(admin.ModelAdmin):
    """Need to change default URL of OpenLayers"""
    formfield_overrides = {
        models.PointField: {"widget": CustomOpenLayersWidget},
        models.PointField: {"widget": CustomOpenLayersWidget},
        models.PolygonField: {"widget": CustomOpenLayersWidget},
        models.LineStringField: {"widget": CustomOpenLayersWidget},

        # Adding other models Fields if need
    }

and change the admin class

@admin.register(Position)
class PositionAdmin(CustomModelAdmin):
    pass

A example of model

class Position(models.Model):
    point = models.PointField(blank=False)

The code override field forms widgets to a new media itens. This remove http content http://openlayers.org/api/2.13.1/OpenLayers.js of media.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.