83 lines
2.8 KiB
HTML
83 lines
2.8 KiB
HTML
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
|
|
<meta charset="utf-8" />
|
|
<title>{% block title %}Карта{% endblock %}</title>
|
|
<link rel="icon" href="{% static 'favicon.ico' %}" type="image/x-icon">
|
|
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
|
|
<!-- Leaflet CSS -->
|
|
<link href="{% static 'leaflet/leaflet.css' %}" rel="stylesheet">
|
|
<link href="{% static 'leaflet-measure/leaflet-measure.css' %}" rel="stylesheet">
|
|
<link href="{% static 'leaflet-tree/L.Control.Layers.Tree.css' %}" rel="stylesheet">
|
|
|
|
<!-- Extra CSS -->
|
|
{% block extra_css %}{% endblock %}
|
|
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
#map {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="map"></div>
|
|
{% block content %}
|
|
{% endblock %}
|
|
<!-- Leaflet JavaScript -->
|
|
<script src="{% static 'leaflet/leaflet.js' %}"></script>
|
|
<script src="{% static 'leaflet-measure/leaflet-measure.ru.js' %}"></script>
|
|
<script src="{% static 'leaflet-tree/L.Control.Layers.Tree.js' %}"></script>
|
|
|
|
<script>
|
|
let map = L.map('map').setView([0, 0], 2);
|
|
L.control.scale({
|
|
imperial: false,
|
|
metric: true}).addTo(map);
|
|
map.attributionControl.setPrefix(false);
|
|
const street = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
});
|
|
street.addTo(map);
|
|
const satellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
|
attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
|
|
});
|
|
const street_local = L.tileLayer('/tiles/styles/basic-preview/512/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: 'Local Tiles'
|
|
});
|
|
street_local.addTo(map);
|
|
const baseLayers = {
|
|
"Улицы": street,
|
|
"Спутник": satellite,
|
|
"Локально": street_local
|
|
};
|
|
L.control.layers(baseLayers).addTo(map);
|
|
map.setMaxZoom(18);
|
|
map.setMinZoom(0);
|
|
L.control.measure({ primaryLengthUnit: 'kilometers' }).addTo(map);
|
|
|
|
{% comment %} let imageUrl = '{% static "mapsapp/assets/world_map.jpg" %}';
|
|
let imageBounds = [[-82, -180], [82, 180]];
|
|
|
|
L.imageOverlay(imageUrl, imageBounds).addTo(map); {% endcomment %}
|
|
|
|
</script>
|
|
|
|
{% block extra_js %}{% endblock %}
|
|
</body>
|
|
</html> |