ওপেনস্ট্রিটম্যাপ: ওয়েবপৃষ্ঠায় মানচিত্র এম্বেড করা (গুগল মানচিত্রের মতো)

Question

আপনার পৃষ্ঠায় ওপেনস্ট্রিটম্যাপ এম্বেড / ম্যাসআপ করার কোনও উপায় আছে ( গুগল ম্যাপস এপিআইয়ের মতো কাজ করে)?

আমার কয়েকটি পৃষ্ঠার চিহ্ন সহ আমার পৃষ্ঠাগুলির ভিতরে একটি মানচিত্র দেখাতে হবে এবং চারদিকে টানা / জুম করার অনুমতি দেওয়া হয়েছে, সম্ভবত রাউটিং। আমি সন্দেহ করি এর জন্য কিছু জাভাস্ক্রিপ্ট এপিআই থাকবে তবে আমি এটি খুঁজে পাচ্ছি না।

অনুসন্ধান আমাকে কাঁচা মানচিত্রের ডেটাতে অ্যাক্সেসের জন্য একটি এপিআই পেয়েছে , তবে এটি মানচিত্র সম্পাদনার জন্য আরও বেশি বলে মনে হচ্ছে; তদ্ব্যতীত, এটির সাথে কাজ করা এজেএক্সের জন্য একটি ভারী কাজ হবে।

Answer 1

আপনার মানচিত্রটি দেখানোর জন্য আপনাকে কিছু জাভাস্ক্রিপ্ট স্টাফ ব্যবহার করতে হবে। ওপেনলায়ার্স এটির জন্য এক নম্বর পছন্দ।

Http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example এ আরও একটি উদাহরণ রয়েছে এবং এতে আরও উন্নত

http://wiki.openstreetmap.org/wiki/OpenLayers_Marker

এবং

http://wiki.openstreetmap.org/wiki/Openlayers_POI_layer_example

Answer 2

এখন এছাড়াও লিফলেট , যা মনের মধ্যে মোবাইল ডিভাইসের সঙ্গে নির্মিত হয়।

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

একটি সাধারণ মানচিত্রের জন্য, ওপেনলায়ার্সের চেয়ে সেটআপ করা আইএমএইচও সহজ এবং দ্রুত, তবে আরও জটিল ব্যবহারের জন্য সম্পূর্ণরূপে কনফিগারযোগ্য এবং টুইটযোগ্য ak

Answer 3

সাধারণ ওএসএম স্লিপি ম্যাপ ডেমো / উদাহরণ

একটি এম্বেড থাকা ওপেন স্ট্রিটম্যাপ পিচ্ছিল মানচিত্রটিতে একটি মার্কার সহ দেখতে "রান কোড স্নিপেট" এ ক্লিক করুন। লিফলেট দিয়ে এটি তৈরি করা হয়েছিল ।

কোড

// Where you want to render the map.
var element = document.getElementById('osm-map');

// Height has to be set. You can do this in CSS too.
element.style = 'height:300px;';

// Create Leaflet map on map element.
var map = L.map(element);

// Add OSM tile leayer to the Leaflet map.
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// Target's GPS coordinates.
var target = L.latLng('47.50737', '19.04611');

// Set map's center to target with zoom 14.
map.setView(target, 14);

// Place a marker on the same location.
L.marker(target).addTo(map);

<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" rel="stylesheet"/>
<div id="osm-map"></div>

চশমা

• ওপেনস্ট্রিটম্যাপগুলি ব্যবহার করে।
• লক্ষ্যযুক্ত জিপিএসে মানচিত্রকে কেন্দ্র করে।
• লক্ষ্য জিপিএসে একটি চিহ্নিতকারী স্থাপন করে।
• নির্ভরশীলতা হিসাবে লিফলেটটি কেবল ব্যবহার করে।

বিঃদ্রঃ:

আমি এখানে লিফলেটটির সিডিএন সংস্করণ ব্যবহার করেছি তবে আপনি ফাইলগুলি ডাউনলোড করতে পারেন যাতে আপনি সেগুলি পরিবেশন করতে পারেন এবং সেগুলি নিজের হোস্ট থেকে অন্তর্ভুক্ত করতে পারেন।

Comments

আমি জাভাস্ক্রিপ্ট ফাংশনে আপনার কোড ব্যবহার করেছি এবং এটি একটি কবজির মতো কাজ করে। তবে আবার, সেই ক্রিয়াকলাপটি ট্রিগার করে ওএসএম মানচিত্রকে প্রসারিত করে এবং সমস্ত কিছু ধ্বংস করে দেয়। কোন সমাধান?

— 0x48 পিরাজ

@ 0x48 পিরাজ দয়া করে সমস্যাটি দেখানোর জন্য একটি jsfiddle তৈরি করুন , বা আরও ভাল: আপনার কোড সহ একটি নতুন প্রশ্ন জিজ্ঞাসা করুন যা কী ভুল দেখায়।

— টটিমেডলি

এটা সুন্দর. অনেক ধন্যবাদ! যদিও একটি প্রশ্ন: var target = L.latLng()আপনি পরিষ্কারভাবে স্থানাঙ্কগুলি সংজ্ঞায়িত করুন। জেএসওএন কাঠামোর ভিতরে বেশ কয়েকটি বিন্দুর জন্য স্থানাঙ্কগুলি সংরক্ষণ করা হয় সেই ক্ষেত্রে কীভাবে প্রয়োগ করা যায় তার কোনও সম্ভাবনা? ধন্যবাদ!

— লুকাস আইমারেটো

এটি কেবল সেই দর্শনের জন্য ব্যবহৃত হবে যেখানে মানচিত্রের কেন্দ্রটি অবস্থিত হওয়া উচিত। আপনার সাথে মার্কার যোগ L.marker(target).addTo(map);আপনার গঠন শুধু লুপ এবং অনেক হিসাবে তৈরি L.latLng()হিসাবে আপনি প্রয়োজন s এবং সেই পাস L.marker()।

— টটিমেডলি

Answer 4

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

Comments

তাদের ওয়েবসাইটটি ডাউন বলে মনে হচ্ছে।

— মাদ্রাসাগ0n

এটি কাজ করে, তবে কেবল "www" সাবডোমেন ছাড়াই : mapstration.com .. ঠিক যা আমি অনুসন্ধান করেছি, তার জন্য ধন্যবাদ!

— ডেভিড

ম্যাপস্ট্রাকশন এখন প্রায় 10 বছর ধরে রক্ষণ করা যায় না :)

— জুলিয়ান এফ ওয়েইনার্ট

Answer 5

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

Answer 6

আপনি ওপেনলায়ার্স (মানচিত্রের জন্য জেএসআই এপিআই) ব্যবহার করতে পারেন।

ওএসএম টাইলস এম্বেড করার পদ্ধতিতে তাদের পৃষ্ঠায় একটি উদাহরণ রয়েছে।

সম্পাদনা করুন: ওপেনলায়ারগুলির উদাহরণগুলিতে নতুন লিঙ্ক

Comments

এটাই আমি খুঁজছিলাম, অনেক অনেক ধন্যবাদ। আমি যদিও কেবল একটি উত্তর গ্রহণ করতে পারি, তাই এটি আরও বিশদ উত্তরটিতে যায়।

— পিসকভোর

লিঙ্কটি মারা গেছে।

— টটিমেডলি

Answer 7

আপনি যদি কেবল কোনও ওয়েবপৃষ্ঠায় কোনও ওএসএম মানচিত্র এম্বেড করতে চান তবে সবচেয়ে সহজ উপায় হ'ল ওএসএম ওয়েবসাইট থেকে সরাসরি iframe কোড পাওয়া:

1. মানচিত্র আপনার উপর চান নেভিগেট https://www.openstreetmap.org
2. ডানদিকে, "ভাগ করুন" আইকনটি ক্লিক করুন, তারপরে "এইচটিএমএল" ক্লিক করুন
3. ফলস্বরূপ iframe কোডটি সরাসরি আপনার ওয়েবপৃষ্ঠায় অনুলিপি করুন। এটিকে ঐটির মত দেখতে হবে:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
src="https://www.openstreetmap.org/export/embed.html?bbox=-62.04673002474011%2C16.95487694424327%2C-61.60521696321666%2C17.196751341562923&amp;layer=mapnik" 
style="border: 1px solid black"></iframe>
<br/><small><a href="https://www.openstreetmap.org/#map=12/17.0759/-61.8260">View Larger Map</a></small>

যদি আপনি আরও বিস্তৃত কিছু করতে চান তবে ওএসএম উইকিটি " আপনার নিজের স্লিপী মানচিত্র স্থাপন করা " দেখুন see

Answer 8

আপনি জাভাস্ক্রিপ্টকে ভয় পেলে এটি করার সহজ উপায় আছে ... আমি এখনও শিখছি। ওপেন স্ট্রিট একটি সাধারণ ওয়ার্ডপ্রেস প্লাগইন তৈরি করে যা আপনি কাস্টমাইজ করতে পারেন। ওএসএম উইজেট প্লাগইন যুক্ত করুন।

সেন্সাস ব্যুরো থেকে কভার্টার টিআইজিআর লাইন ফাইলগুলি ব্যবহার করে আমার পাইথন জাভা কনকনশনটি সনাক্ত না করা পর্যন্ত এটি ফিলার হবে be

Comments

আমি, আমি জেএসের চেয়ে ওয়ার্ডপ্রেস সম্পর্কে অনেক বেশি চিন্তিত, তবে এটি মতামতের বিষয়। আপনাকে ধন্যবাদ :)

— পিসকভোর

বিটিডব্লিউ টাইগার কেবলমাত্র মার্কিন যুক্তরাষ্ট্রে।

— পিসকভোর