2024-01-18 07:50:00 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Leaflet Fullscreen Map</title>
|
|
|
|
|
<style>
|
|
|
|
|
body, html {
|
|
|
|
|
height: 100%;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#map {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
|
|
|
|
|
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
|
|
|
|
|
<script src="https://unpkg.com/osmtogeojson"></script>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geometryutil/0.9.0/leaflet.geometryutil.js"></script>
|
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
|
|
|
|
|
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
|
|
|
|
|
<link rel="stylesheet" href="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.css"/>
|
|
|
|
|
<script src="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.js"></script>
|
|
|
|
|
<!-- Include the Leaflet Panel Layers plugin -->
|
|
|
|
|
<link rel="stylesheet" href="https://opengeo.tech/maps/leaflet-panel-layers/dist/leaflet-panel-layers.src.css"/>
|
|
|
|
|
<script src="https://opengeo.tech/maps/leaflet-panel-layers/dist/leaflet-panel-layers.src.js"></script>
|
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
|
|
|
|
|
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<button id="select-linear-features">Linear Features</button>
|
|
|
|
|
<div id="map"></div>
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function addMeasurementLabel(layer, text) {
|
|
|
|
|
var label = new L.Label();
|
|
|
|
|
label.setContent(text);
|
|
|
|
|
label.setLatLng(layer.getBounds().getCenter());
|
|
|
|
|
map.showLabel(label);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//////////////////////////////////////////
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (typeof osmtogeojson !== 'function') {
|
|
|
|
|
console.error('osmtogeojson is not loaded properly');
|
|
|
|
|
} else {
|
|
|
|
|
console.log('osmtogeojson is loaded properly');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var streets = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
|
|
|
maxZoom: 19,
|
|
|
|
|
attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var satellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
|
|
|
|
maxZoom: 19,
|
|
|
|
|
attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var fintopo = L.tileLayer('https://wmts.mapant.fi/wmts_EPSG3857.php?z={z}&x={x}&y={y}', {
|
|
|
|
|
maxZoom: 19,
|
|
|
|
|
attribution: ''
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var strava = L.tileLayer('https://proxy.nakarte.me/https/heatmap-external-a.strava.com/tiles-auth/all/purple/{z}/{x}/{y}.png?px=256', {
|
|
|
|
|
maxZoom: 19,
|
|
|
|
|
attribution: ''
|
|
|
|
|
});
|
|
|
|
|
|
2024-02-29 07:18:04 +00:00
|
|
|
var wms_maastotie_Layer = L.tileLayer.wms('https://fsc-map.arbonaut.com/basemap_fsc_map?', {
|
|
|
|
|
layers: 'Maastotietokanta_basemap',
|
|
|
|
|
format: 'image/png',
|
|
|
|
|
version: '1.1.0',
|
|
|
|
|
srs: 'EPSG:3067',
|
|
|
|
|
units: 'm',
|
|
|
|
|
token: '68f6f2fa8160e34e9d66bdef0254898f',
|
|
|
|
|
transparent: true,
|
|
|
|
|
attribution: 'Map data © <a href="YourDataSourceURL">DataSourceName</a>'
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
2024-01-18 07:50:00 +00:00
|
|
|
var map = L.map('map', {
|
|
|
|
|
center: [61.49, 23.76],
|
|
|
|
|
zoom: 13,
|
|
|
|
|
layers: [streets] //default layer
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Define the base layers using the plugin's syntax
|
|
|
|
|
var baseLayers = [
|
|
|
|
|
{
|
|
|
|
|
name: "OSM",
|
|
|
|
|
layer: streets
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "ERSI Sattelite",
|
|
|
|
|
layer: satellite
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "Suomi Topo",
|
|
|
|
|
layer: fintopo
|
2024-02-29 07:18:04 +00:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "Maastotie baselayer",
|
|
|
|
|
layer: wms_maastotie_Layer
|
2024-01-18 07:50:00 +00:00
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
var overLayers = [
|
|
|
|
|
{
|
|
|
|
|
name: "Strava",
|
|
|
|
|
layer: strava
|
|
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
// Add the panel layers control to the map
|
|
|
|
|
var panelLayers = new L.Control.PanelLayers(baseLayers, overLayers, {
|
|
|
|
|
collapsibleGroups: true,
|
|
|
|
|
collapsed: true,
|
|
|
|
|
position: 'topright'
|
|
|
|
|
});
|
|
|
|
|
map.addControl(panelLayers);
|
|
|
|
|
|
|
|
|
|
// Adding geocoder
|
|
|
|
|
$.ajax({
|
|
|
|
|
url: '/api_key',
|
|
|
|
|
type: 'GET',
|
|
|
|
|
success: function (response) {
|
|
|
|
|
var geocoder = L.Control.geocoder({
|
|
|
|
|
geocoder: L.Control.Geocoder.google({apiKey: response.apiKey}),
|
|
|
|
|
position: 'topleft'
|
|
|
|
|
}).addTo(map);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Adding scale
|
|
|
|
|
L.control.scale({metric: true, imperial: false}).addTo(map); //Adding scale
|
|
|
|
|
// Initialize the FeatureGroup to store editable layers
|
|
|
|
|
var drawnItems = new L.FeatureGroup();
|
|
|
|
|
map.addLayer(drawnItems);
|
|
|
|
|
|
|
|
|
|
// Initialize the draw control and pass it the FeatureGroup of editable layers
|
|
|
|
|
var drawControl = new L.Control.Draw({
|
|
|
|
|
draw: {
|
|
|
|
|
polyline: {
|
|
|
|
|
metric: true, // Use metric measurements
|
|
|
|
|
showLength: true // Show length of the polyline
|
|
|
|
|
},
|
|
|
|
|
polygon: {
|
|
|
|
|
showArea: true, // Show area of the polygon
|
|
|
|
|
metric: true
|
|
|
|
|
},
|
|
|
|
|
circle: {
|
|
|
|
|
metric: true,
|
|
|
|
|
showRadius: true // Show radius for circles
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
rectangle: false,
|
|
|
|
|
circlemarker: false
|
|
|
|
|
},
|
|
|
|
|
edit: {
|
|
|
|
|
featureGroup: drawnItems
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
map.addControl(drawControl);
|
|
|
|
|
|
|
|
|
|
map.on(L.Draw.Event.CREATED, function (event) {
|
|
|
|
|
var layer = event.layer;
|
|
|
|
|
drawnItems.addLayer(layer);
|
|
|
|
|
|
|
|
|
|
var shape = layer.toGeoJSON();
|
|
|
|
|
var shape_for_db = JSON.stringify(shape);
|
|
|
|
|
|
|
|
|
|
var measurementText;
|
|
|
|
|
|
|
|
|
|
if (event.layerType === 'polygon') {
|
|
|
|
|
var area = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
|
|
|
|
|
measurementText = "Area: " + area.toFixed(2) + " sqm";
|
|
|
|
|
} else if (event.layerType === 'polyline') {
|
|
|
|
|
var length = L.GeometryUtil.length(layer);
|
|
|
|
|
measurementText = "Length: " + length.toFixed(2) + " m";
|
|
|
|
|
} else if (event.layerType === 'circle') {
|
|
|
|
|
var radius = layer.getRadius();
|
|
|
|
|
var area = Math.PI * radius * radius;
|
|
|
|
|
measurementText = "Area: " + area.toFixed(2) + " sqm";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (measurementText) {
|
|
|
|
|
addMeasurementLabel(layer, measurementText);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Example AJAX call to send data to Flask
|
|
|
|
|
$.ajax({
|
|
|
|
|
type: "POST",
|
|
|
|
|
url: "/save_shape",
|
|
|
|
|
data: shape_for_db,
|
|
|
|
|
contentType: "application/json",
|
|
|
|
|
dataType: "json",
|
|
|
|
|
success: function (response) {
|
|
|
|
|
console.log(response);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Adding polyline measure control
|
|
|
|
|
L.control.polylineMeasure({
|
|
|
|
|
position: 'topleft',
|
|
|
|
|
unit: 'metres',
|
|
|
|
|
showBearings: true,
|
|
|
|
|
clearMeasurementsOnStop: false,
|
|
|
|
|
showClearControl: true,
|
|
|
|
|
showUnitControl: false
|
|
|
|
|
}).addTo(map);
|
|
|
|
|
|
|
|
|
|
// Adding linear features
|
|
|
|
|
document.getElementById('select-linear-features').addEventListener('click', function () {
|
|
|
|
|
var overpassUrl = "https://overpass-api.de/api/interpreter";
|
|
|
|
|
var query = `
|
|
|
|
|
[out:json];
|
|
|
|
|
(
|
|
|
|
|
way["highway"](around:5000,61.49,23.76);
|
|
|
|
|
way["waterway"](around:5000,61.49,23.76);
|
|
|
|
|
);
|
|
|
|
|
out body;
|
|
|
|
|
>;
|
|
|
|
|
out skel qt;
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
url: overpassUrl,
|
|
|
|
|
type: 'GET',
|
|
|
|
|
data: {
|
|
|
|
|
data: query
|
|
|
|
|
},
|
|
|
|
|
success: function (response) {
|
|
|
|
|
var geojson = osmtogeojson(response);
|
|
|
|
|
L.geoJSON(geojson).addTo(map);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
