Skip to content

Instantly share code, notes, and snippets.

@hasanisaeed

hasanisaeed/map.html

Created June 6, 2022 08:00
Show Gist options
  • Save hasanisaeed/e3b9f2d9cdfe273c24f0eddf4bde42aa to your computer and use it in GitHub Desktop.
Save hasanisaeed/e3b9f2d9cdfe273c24f0eddf4bde42aa to your computer and use it in GitHub Desktop.
Download ZIP
Raw
map.html
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GPS Ryca Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://unpkg.com/leaflet@1.0.3/dist/leaflet.css'>
<link rel='stylesheet'
href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html, body, .full, #map {
margin: 0;
padding: 0;
height: 100%;
}
.leaflet-popup-content{
margin: 0
}
.custom-popup{
border: 1px solid aqua;
background:rgba(73,79,77,0.85);
}
h1{float:left; width:100%; color:#232323; margin-bottom:30px; font-size: 14px;}
h1 span{font-family: 'Libre Baskerville', serif; display:block; font-size:45px; text-transform:none; margin-bottom:20px; margin-top:30px; font-weight:700}
h1 a{color:#131313; font-weight:bold;}
/*Profile Card 3*/
.profile-card-3 {
font-family: 'Open Sans', Arial, sans-serif;
position: relative;
overflow: hidden;
width: 100%;
text-align: center;
height:368px;
border:none;
min-width: 320px;
}
.profile-card-3 .background-block {
width: 100%;
height: 200px;
overflow: hidden;
}
.profile-card-3 .background-block .background {
width:100%;
vertical-align: top;
opacity: 0.9;
-webkit-filter: blur(0.5px);
filter: blur(0.5px);
-webkit-transform: scale(1.8);
transform: scale(2.8);
}
.profile-card-3 .card-content {
width: 100%;
padding: 15px 25px;
color:#232323;
background:#efefef;
height:50%;
border-radius:0 0 5px 5px;
position: relative;
z-index: 9999;
}
.profile-card-3 .card-content::before {
content: '';
background: #efefef;
width: 120%;
height: 100%;
left: 11px;
bottom: 51px;
position: absolute;
z-index: -1;
transform: rotate(-13deg);
}
.profile-card-3 .profile {
border-radius: 50%;
position: absolute;
bottom: 50%;
right: 50%;
max-width: 100px;
opacity: 1;
box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5);
border: 2px solid rgba(255, 255, 255, 1);
-webkit-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
z-index:99999;
}
.profile-card-3 h2 {
margin: 0 0 5px;
font-weight: 600;
font-size:25px;
}
.profile-card-3 h2 small {
display: block;
font-size: 15px;
margin-top:10px;
}
.profile-card-3 i {
display: inline-block;
font-size: 16px;
color: #232323;
text-align: center;
border: 1px solid #232323;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
margin:0 5px;
}
.profile-card-3 .icon-block{
width:100%;
margin-top:15px;
}
.profile-card-3 .icon-block a{
text-decoration:none;
}
.profile-card-3 i:hover {
background-color:#232323;
color:#fff;
text-decoration:none;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="row full">
<div class="col col-sm-3 full" style="overflow: auto;">
<small >طراحی شده با ❤ در رایکا</small>
<p>Circle size : <input id="range" type="number" value='100' min='0' step="10" width="50px"/></p>
<table class="table table-bordered">
<thead>
<tr>
<th>Members(Descending order)</th>
</tr>
</thead>
<tbody id="t_points"></tbody>
<tfoot>
<th style="text-align: center">لبخند بزن :)</th>
<tr>
<td style="direction: rtl;color: #122b40">خوشبختی
همیشه داشتنِ چیزی نیست.
خوشبختی گاهی لذت عمیق
از نداشته‌هاست!
«یک نوع رهایی» که شبیه به هیچ چیز نیست؛ و گاهی ساده و غیرقابل تصور است.
</td>
</tr>
</tfoot>
</table>
</div>
<!--Profile Card 3-->
<div id="map" class="col col-sm-9 full">
</div>
</div>
<!-- partial -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
<script src="https://npmcdn.com/bootstrap@4.0.0-alpha.5/dist/js/bootstrap.min.js"></script>
<script src='https://unpkg.com/leaflet@1.0.3/dist/leaflet.js'></script>
<script src='https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.js'></script>
<script type="text/javascript">
var map = L.map('map').setView([36.38270986095043, 54.92424857923656], 15);
var OpenStreetMap_Mapnik = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="https://varef.ir">رایکا</a>'
}).addTo(map);
// ===========================================
// create custom popup
L.CustomPopup = L.Popup.extend({
_initLayout: function () {
var prefix = 'leaflet-popup',
container = this._container = L.DomUtil.create('div',
prefix + ' ' + (this.options.className || '') +
' leaflet-zoom-animated');
var wrapper = container;
this._contentNode = L.DomUtil.create('div', prefix + '-content', wrapper);
L.DomEvent
.disableClickPropagation(wrapper)
.disableScrollPropagation(this._contentNode)
.on(wrapper, 'contextmenu', L.DomEvent.stopPropagation);
},
});
// add bindCustomPopup
L.Layer.include({
// @method bindPopup(content: String|HTMLElement|Function|Popup, options?: Popup options): this
// Binds a popup to the layer with the passed `content` and sets up the
// neccessary event listeners. If a `Function` is passed it will receive
// the layer as the first argument and should return a `String` or `HTMLElement`.
bindCustomPopup: function (content, options) {
if (content instanceof L.Popup) {
L.setOptions(content, options);
this._popup = content;
content._source = this;
} else {
if (!this._popup || options) {
this._popup = new L.CustomPopup(options, this);
}
this._popup.setContent(content);
}
if (!this._popupHandlersAdded) {
this.on({
click: this._openPopup,
remove: this.closePopup,
move: this._movePopup
});
this._popupHandlersAdded = true;
}
return this;
}
});
// ===========================================
function addRowTable(code, coords) {
var tr = document.createElement("tr");
var td = document.createElement("td");
td.textContent = code;
tr.appendChild(td);
tr.onclick = function () {
map.flyTo(coords, 17);
};
document.getElementById("t_points").appendChild(tr);
}
var buffers = [];
function addMarker(code, lat, lng) {
let customIcon = {
iconUrl:"https://image.flaticon.com/icons/png/512/1397/1397898.png",
iconSize:[40,40]
}
let myIcon = L.icon(customIcon);
let iconOptions = {
title:"company name",
draggable:true,
icon:myIcon,
radius:10
}
var p = L.marker([lat, lng],iconOptions );
p.title = code;
p.alt = code;
p.bindPopup(code);
p.addTo(map);
addRowTable(code, [lat, lng]);
var c = L.circle([lat, lng], {
color: 'red',
fillColor: '#246505',
fillOpacity: 0.5,
radius: 0
}).addTo(map);
buffers.push(c);
var dialog = `
<div id="profile">
<div class="card profile-card-3">
<div class="background-block">
<img src="https://avatars.githubusercontent.com/u/86916568?v=4" alt="profile-sample1" class="background"/>
</div>
<div class="profile-thumb-block">
<img src="https://avatars.githubusercontent.com/u/86916568?v=4" alt="profile-image" class="profile"/>
</div>
<div class="card-content">
<h3>Mohsen Bagheri<br><small>Django Developer</small></h3>
<div class="icon-block"><a href="#"><i class="fa fa-facebook"></i></a><a href="#"> <i class="fa fa-twitter"></i></a><a href="#"> <i class="fa fa-google-plus"></i></a></div>
</div>
</div>
<p class="mt-3 w-100 float-left text-center"><strong>Ryca</strong></p>
</div>
`
p.bindCustomPopup(dialog).openPopup();
}
$(document).ready(function () {
var points = JSON.parse("{{markers}}".replace(new RegExp("&" + "#" + "x27;", "g"), "'").replace(/'/g, '"'));
for (var i = 0; i < points.length; i++) {
addMarker(points[i][0], points[i][1], points[i][2]);
}
});
L.control.scale({maxWidth: 240, metric: true, position: 'bottomleft'}).addTo(map);
L.control.polylineMeasure({
position: 'topleft',
imperial: false,
clearMeasurementsOnStop: false,
showMeasurementsClearControl: true
}).addTo(map);
$("#range").change(function (e) {
var radius = parseInt($(this).val())
buffers.forEach(function (e) {
e.setRadius(radius);
e.addTo(map);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment