مقدمه‌ای بر افزودن نقشه به وب سایت با استفاده از نقشه های osm و کتابخانه‌ی OpenLayers
با توجه به اینکه گوگل مپ علاوه بر تحریم کردن ایرانی‌ها مدتی است پولی شده است لذا در یکی از پروژه‌های طراحی سایت نیاز به نقشه داشتم که منابع مالی محدودی نیز داشتند بعد از کلی تحقیق و بررسی به نقشه OpenStreetMap رسیدم که کتابخانه ها و API ها متفاوت و گسترده‌ای براش ارائه شده که اغلب آنها اپن سورس می‌باشند و از قانون نرم افزار آزاد پی‌روی می‌کنند از بین این کتابخانه‌ها، کتابخانه‌ی OpenLayers را برای کار با جاوااسکریپت انتخاب کردم که هم اپن سورس می‌باشد و هم پشتیبانی نسبت خوبی دارد و از تکنولوژی های جدید جاوا اسکریپت پشتیبانی می‌کند.این کتابخانه برای باندل کردن اپلیکشن وب از parcel استفاده می‌کند که بنچ مارکش به مراتب بهتر از سایر باندلرها (browserify,webpak) می‌باشد.
برای شروع کار با openLayers و افزودن نقشه به صفحات وب سایت ابتدا باید با استفاده از nmp و دستور زیر کتابخانه‌ی openLayers را به پروژه خود اضافه کنید.
nmp install ol
افزودن نقشه به وب سایت و فایل index.html
بهترین نقطه برای شروع فایل index.js می‌باشد قطعه کد زیر را به فایل جاوا اسکریپت خود اضافه کنید:
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
center: [0, 0],
zoom: 0
})
});
ضمنا شما به یک فایل اچ تی ام ال نیاز دارید که در این مثال آن را index.html می‌نامیم کدهای زیر را به فایل html اضافه کنید:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Using Parcel with OpenLayers</title>
<style>
#map {
width: 400px;
height: 250px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="./index.js"></script>
</body>
</html>
ایجاد یک باند برای فایل html , js:
با اضافه کردن یک اسکریپت ساده به فایل package.json و اجرای دستور nmp run build برای ساخت فایل نهایی و استفاده در پروژه و nmp start برای تست و اجرای موقت روی لوکال به راحتی می‌توانید فایلهای نرمافزار خود را باندل کنید.
با توجه به توضیحات مذکور اسکریپت زیر را به فایل package.json اضافه کنید:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel index.html",
"build": "parcel build --public-url . index.html"
}
حال با استفاده از دستور nmp start می‌توانید پروژه را روی لوکال به آدرس http://localhost:1234 روی مرورگر خود مشاهده نمائید.توجه کنید در صورتی کدهای html , javascript را تغییر دهید نرمافزار به صورت خودکار از نو بارگذاری می‌شود و نیاز به بارگذاری دوباره نیست.
برای ایجاد محصول نهایی از نرم افزار و استفاده در پروژه نهایی دستور nmp run build را اجرا نمائید و پوشه‌ی dist/ را روی سرور کپی نمائید.