এসএসএল সহ ওপেনলায়ার্স মানচিত্র ব্যবহার করা

Question

আমি হোস্টেড জাভাস্ক্রিপ্ট ব্যবহার করে ওপেনলায়ার্স মানচিত্রটি ব্যবহার করছি:

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

তবে আমার ক্লায়েন্টের এসএসএল ইনস্টল রয়েছে এবং যখন আমি আমার মানচিত্রের পৃষ্ঠাটি চালানোর চেষ্টা করি তখন তা দেখায়:

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

সুতরাং আমি https এক চেষ্টা করেছি এবং এটি ওপেনলেয়ারগুলির কাছে নেই

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

তারপরে আমি ওপেনস্ট্রিট জেএস ডাউনলোড করে ক্লায়েন্ট সার্ভারে হোস্ট করেছি তবে তারপরে সমস্ত স্টাইল এবং সম্পর্কিত চিত্রগুলি হারিয়ে যায়। যদিও এটি মানচিত্রটি দেখায় না, মূলত কনসোলে অসংখ্য সতর্কতা পপ-আপ হয় এবং আমার ভয় হয় যে এটি প্লে স্টোর বা অন্যথায় প্রত্যাখ্যান হতে পারে। আমি একটি হাইব্রিড অ্যাপ্লিকেশন বিকাশ করছি যা সার্ভারেও চালিত হয়।

সতর্কতা এখন :

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

---

আমি সিএসএন দিয়ে সিএসএন দিয়ে চেষ্টা করেছি এবং এখনও একই সমস্যা:

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

---

আমি ওপেনস্ট্রিটের জন্য পুরো গিটহাব রেপো ডাউনলোড করে ভেবেছি এটি চিত্র এবং সিএসএস সমস্যার সমাধান করবে।

https://github.com/openlayers/openlayers

উপরের সিএসএস সমস্যাগুলি সমাধান করার সময় , মানচিত্রটি অন্য বাহ্যিক সাইট থেকে চিত্রগুলি লোড করে দেখানো হবে tile.openstreet.com। মনে হচ্ছে আমাকে ওপেন স্ট্রিট জেএসেও খনন করতে হবে .. :( ..

---

গুরুত্বপূর্ণ : আমি ব্যাকবোন.জেএস ব্যবহার করছি।

দ্রষ্টব্য : আমি ওপেনলায়ার্স 2.12 এবং HTTP বেসিক প্রমাণীকরণের দুর্ঘটনার মধ্যে দিয়েছি এবং এটি আমাকে সাহায্য করে না। সার্ভার কনফিগারেশনের উপর আমার কোনও নিয়ন্ত্রণ নেই। আমার কেবলমাত্র একটি ফোল্ডারে অ্যাক্সেস রয়েছে যেখানে আমার ওয়েবসাইট সেট আপ করা দরকার যা অন্য কিছু ঠিকঠাক কাজ করে তবে এই এসএসএলটি সমস্যাজনক।

গুগল এর লিঙ্ক এড়ানোর জন্য বাস্তব ওয়েবসাইটের ঠিকানা পরিবর্তিত হয়েছে।

Comments

আপনি নিজের সার্ভারে .JS ফাইলটি হোস্ট না করার কোনও কারণ আছে? এটি খাঁটি এসএসএলকে অনুমতি দেবে এবং ক্রস ডোমেন বিরোধগুলি এড়াতে পারবে।

— ম্যাপার

@ ম্যাপার: আমি প্রথমে এটি করেছিলাম তবে তারপরে স্ক্রিপ্টে কিছু বাহ্যিক সংস্থান যেমন সিএসএস, চিত্রগুলি ইত্যাদি কল করে my আমার দ্বিতীয় আপডেটটি দেখুন। Ive এখন কী অনুপস্থিত তা ব্যাখ্যা করেছে .. আমি মনে করি তারা যদি এসএসএল না যোগ করে তবে এটি একটি সমস্যা থেকে যাবে ..

— রায় এমজে

সমস্ত সম্পদ ইত্যাদি সম্পর্কিত হয়, তাই আইএমএইচও কোনও সমস্যা নেই। উদাহরণস্বরূপ: on-i.de/map

— ম্যাপার

@ ম্যাপার: হ্যাঁ আমি এটি বুঝতে পেরেছি .. তবে টাইলসটি হ'ল আমি এই পথে চলার সাথে আটকেছি .. এটি আমার অ্যাপ্লিকেশনটি ভেঙে দেয় না, তবে একটি সতর্কতা দেখায়, আসলে অনেক সতর্কবাণী দেখায় ... আমি এটিকে খোলা রাখব আশেপাশে অনুসন্ধান করতে এবং এর কোনও সম্ভাব্য সমাধান আছে কিনা তা দেখার জন্য কয়েক দিন ...

— রায় এমজে

আপনার সবসময় স্থানীয়ভাবে এই জেএস ফাইলগুলি হোস্ট করা উচিত। অন্যথায় একটি এপিআই মডিফিকেশন সহ একটি ওপেনলায়ার্স আপডেট আপনার সাইটটিকে স্ক্রু করতে পারে।

— স্কাই

Answer 1

• ওপেনলায়ার্স.জেএস: আমি আপনাকে লাইবটি ডাউনলোড করতে এবং এটি আপনার অ্যাপ্লিকেশন সার্ভারের সাথে লিঙ্ক করার পরামর্শ দিচ্ছি। এইভাবে এর ইউআরএল এবং সামগ্রীতে আপনার সম্পূর্ণ নিয়ন্ত্রণ থাকতে পারে।

• "অনিরাপদ বিষয়বস্তু" সতর্কতা: আমার ক্ষেত্রেও তা ঘটেছে। ওপেনলায়ার্স ২.১.1.১-এ, যখন আপনি একটি ওপেনলায়ার্স.লায়ার.ওএসএম ইনস্ট্যান্ট করেন, এটি HTTP- র জন্য ডিফল্টরূপে কনফিগার করা হয়। ওপেনলায়ার্স.লায়ার.ওএসএম ডক থেকে :

url {স্ট্রিং} টাইলসেট ইউআরএল স্কিম। Http: // [a | b | c] .til.openstreetmap.org / $ {z} / $ {x} / $ {y} .png- এ ডিফল্ট

এর পরিবর্তে, আমি প্রোটোকল-স্বতন্ত্র ইউআরএল সমন্বিত ইউআরএল স্কিম অ্যারের জন্য সুস্পষ্ট মানগুলি ব্যবহার করেছি

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

• প্রোটোকল-স্বতন্ত্র ইউআরএল: আপনি যদি নিজের অ্যাপ্লিকেশনটি এইচটিটিপি এবং এইচটিটিপিএস উভয়টিতে চালিত করতে চান তবে প্রোটোকল-স্বতন্ত্র ইউআরএলগুলি ব্যবহার করুন : http://server.com/resource এর পরিবর্তে //server.com/resource ব্যবহার করুন : আপনার ব্রাউজারটি বিবেচনা করবে প্রোটোকলটি বর্তমানে চলছে।

Comments

যদি কেউ ভাবছেন: আপনি ওপেনলায়ার্স.জেএস উত্স কোডে এটি পরিবর্তন করুন। এটি ইতিমধ্যে সংক্ষিপ্ত করা হলেও এটি সন্ধান এবং পরিবর্তন করা সহজ।

— ট্রেইনোসিস

Answer 2

অফিসিয়াল ওএসএম টাইল সার্ভারগুলি এসএসএলের মাধ্যমে কোনও অ্যাক্সেস সরবরাহ করে না। এগুলি সর্বজনীন পণ্য হিসাবে ভাগ করা হয় এবং ভারী ট্র্যাফিক সহ অ্যাপ্লিকেশন দ্বারা ব্যবহৃত হবে না । আপনি যদি সে যাইহোক সেগুলি ব্যবহার করতে চান তবে আপনার অবশ্যই ব্রাউজারগুলিতে "কিছু সামগ্রী এনক্রিপ্ট করা নেই" বার্তাটি দিয়ে ঠিক থাকতে হবে।

আপনি যদি পুরো এনক্রিপশন পেতে চান তবে আপনাকে SSL সহ বাণিজ্যিক মানচিত্র সিডিএনগুলির জন্য অর্থ প্রদান করতে হবে:

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

Comments

এই তথ্য দৃশ্যত পুরানো। ওপেনস্ট্রিটম্যাপ এখন https সমর্থন করে; পরীক্ষা openstreetmap.org । আরও দেখুন github.com/openstreetmap/openstreetmap-website/issues/1033

— ক্রিস্টোফাইড

Answer 3

আপনার ফর্মগুলি ওভাররাইড করা দরকার Widget। উদাহরণ:

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
    }

এবং প্রশাসক শ্রেণি পরিবর্তন করুন

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

মডেল একটি উদাহরণ

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

কোড ওভাররাইড ফিল্ডটি একটি নতুন মিডিয়া আইটেনের জন্য উইজেট তৈরি করে। এটি http://openlayers.org/api/2.13.1/OpenLayers.jsমিডিয়ার HTTP সামগ্রী সরিয়ে দেয় ।