Using OpenLayers maps with SSL

Question

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*/ 

---

I tried with cdn with SSL and still same issue:

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

---

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 troublesome.

Changed real website address to avoid Google linking it.

Answer 1

• 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.

Answer 2

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:

• http://wiki.openstreetmap.org/wiki/Tiles
• http://wiki.openstreetmap.org/wiki/Commercial_OSM_Software_and_Services

Answer 3

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.