Usando mapas OpenLayers com SSL

Estou usando o mapa OpenLayers usando o JavaScript hospedado:

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

Mas meu cliente tem o SSL instalado e quando tento executar minha página de mapa, mostra:

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

Então, eu tentei https um e verifica-se que os openlayers não têm um

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

Depois, faço o download do Openstreet js e hospedado no servidor do cliente, mas todos os estilos e imagens relacionadas são perdidos. Embora ele mostre o mapa, basicamente vários avisos aparecem no console e eu tenho medo que isso possa ser rejeitado na loja de brinquedos ou algo assim. Estou desenvolvendo um aplicativo híbrido que roda no servidor também.

Avisos agora :

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

Eu tentei com cdn com SSL e ainda o mesmo problema:

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

Eu baixei o repositório inteiro do GitHub para o Openstreet pensando que isso resolverá o problema de imagem e CSS.

https://github.com/openlayers/openlayers

Embora o acima tenha resolvido os problemas de CSS , o mapa é mostrado carregando imagens de outro site externo tile.openstreet.com. Parece que eu tenho que cavar no openstreet js também .. :( ..

Importante : Estou usando o backbone.js.

Nota : Passei pelos problemas de autenticação básica do OpenLayers 2.12 e http e isso não me ajudou. Eu não tenho nenhum controle sobre a configuração do servidor. Eu só tenho acesso a uma pasta onde eu preciso configurar o site e tudo o resto funciona bem, mas esse SSL é problemático.

Endereço de site real alterado para evitar que o Google o vincule.

• OpenLayers.js: eu recomendaria que você baixe a lib e vincule-a ao seu servidor de aplicativos. Dessa forma, você pode ter controle total sobre seu URL e conteúdo.

• avisos de "conteúdo inseguro": isso também aconteceu comigo. No OpenLayers 2.13.1, quando você instancia um OpenLayers.Layer.OSM, ele é configurado por padrão para HTTP. No documento OpenLayers.Layer.OSM :

url {String} O esquema de URL do conjunto de peças. O padrão é http: // [a | b | c] .tile.openstreetmap.org / $ {z} / $ {x} / $ {y} .png

Em vez disso, usei valores explícitos para a matriz de esquemas de URL, contendo URLs independentes de protocolo

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);

• URLs independentes de protocolo: se você deseja que seu aplicativo seja executado em HTTP e HTTPS, use URLs independentes de protocolo: em vez de http://server.com/resource , use //server.com/resource : seu navegador considerará o protocolo em que está sendo executado.

Os servidores oficiais do OSM lado a lado não fornecem acesso via SSL. Eles são bens públicos compartilhados e não devem ser usados por aplicativos com tráfego intenso. Se você quiser usá-los de qualquer maneira, deverá aceitar a mensagem "algum conteúdo não está criptografado" nos navegadores.

Se você deseja ter criptografia completa, precisará pagar por CDNs de mapa comercial com SSL:

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

Você precisa substituir os formulários Widget. Exemplo:

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
    }

e mude a classe admin

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

Um exemplo de modelo

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

O campo de substituição de código forma widgets para novos itens de mídia. Isso remove o conteúdo http http://openlayers.org/api/2.13.1/OpenLayers.jsda mídia.