Utilizzo di mappe OpenLayers con SSL

Sto usando la mappa OpenLayers usando il JavaScript ospitato:

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

Ma il mio client ha installato SSL e quando provo ad eseguire la mia pagina della mappa mostra:

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

Quindi ho provato https one e risulta che gli openlayer non ne hanno uno

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

Quindi scarico js Openstreet e ospitato nel server client, ma poi tutti gli stili e le immagini correlate vengono persi. Sebbene mostri la mappa, nella console compaiono in genere numerosi avvisi e temo che questo potrebbe essere rifiutato nel Play Store o giù di lì. Sto sviluppando un'applicazione ibrida che funziona anche su server.

Avvisi ora :

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

Ho provato con cdn con SSL e ancora lo stesso problema:

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

Ho scaricato l'intero repository GitHub per Openstreet pensando che questo risolverà l'immagine e il problema CSS.

https://github.com/openlayers/openlayers

Mentre quanto sopra risolto i problemi CSS , la mappa viene comunque mostrata caricando le immagini da un altro sito esterno tile.openstreet.com. Sembra che anche io debba scavare in js openstreet .. :( ..

Importante : sto usando backbone.js.

Nota : ho superato OpenLayers 2.12 e i problemi di autenticazione di base http e questo non mi ha aiutato. Non ho alcun controllo sulla configurazione del server. Ho solo accesso a una cartella in cui devo configurare il sito Web e tutto il resto funziona bene, ma questo SSL è problematico.

Indirizzo reale del sito web modificato per evitare che Google lo colleghi.

• OpenLayers.js: ti consiglio di scaricare la lib e collegarla al tuo server delle applicazioni. In questo modo puoi avere il controllo totale sul suo URL e contenuto.

• avvertimenti "contenuto insicuro": è successo anche a me. In OpenLayers 2.13.1, quando si crea un'istanza di OpenLayers.Layer.OSM, è configurato per impostazione predefinita per HTTP. Dal documento OpenLayers.Layer.OSM :

url {String} Lo schema URL del tileset. Il valore predefinito è http: // [a | b | c] .tile.openstreetmap.org / $ {z} / $ {x} / $ {y} .png

Invece, ho usato valori espliciti per l'array di schemi URL, contenente URL indipendenti dal protocollo

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

• URL indipendenti dal protocollo: se vuoi che la tua app sia eseguita su HTTP e HTTPS, utilizza URL indipendenti dal protocollo: anziché http://server.com/resource , usa //server.com/resource : il tuo browser considererà il protocollo attualmente in esecuzione.

I server di tessere OSM ufficiali non forniscono alcun accesso tramite SSL. Sono beni pubblici condivisi e non devono essere utilizzati da app con traffico intenso. Se vuoi usarli comunque, devi essere d'accordo con il messaggio "alcuni contenuti non sono crittografati" nei browser.

Se si desidera disporre della crittografia completa, è necessario pagare i CDN delle mappe commerciali con SSL:

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

È necessario sostituire i moduli Widget. Esempio:

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 cambia la classe admin

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

Un esempio di modello

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

Il campo di override del codice forma i widget per i nuovi media. Questo rimuove il contenuto http http://openlayers.org/api/2.13.1/OpenLayers.jsdei media.