galadrielmap_sk
Version:
a server-based chartplotter navigation software for pleasure crafts, motorhomes, and off-road cars. It's can be used on tablets and smartphones without install any app. Only browser need.
187 lines (175 loc) • 3.46 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>Leaflet-polycolor</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.0/dist/leaflet.js"></script>
<script src="../polycolorRenderer.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 98vh;"></div>
<script type="text/javascript">
var map = L.map('map', {
center: [45.1834782, 5.7831946],
zoom: 13,
});
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{}).addTo(map);
/*// Base example. Colored Polyline
var latLngs = [
[45.187273, 5.758124],
[45.182772, 5.758516],
[45.185767, 5.747106],
[45.176569, 5.752082],
[45.171863, 5.757120],
[45.168354, 5.755178]
];
var colors = [
'rgb(20, 200, 100)',
'rgb(200, 100, 20)',
null,
null,
'rgb(20, 200, 100)',
'rgb(0, 0, 0)'
];
/// Colored MultiPolyline
var latLngs = [
[
[45.187273, 5.758124],
[45.182772, 5.758516],
[45.185767, 5.747106],
[45.176569, 5.752082]
],
[
[45.176569, 5.752082],
[45.171863, 5.757120],
[45.168354, 5.755178]
]
];
var colors = [
[
'rgb(20, 200, 100)',
'rgb(200, 100, 20)',
'rgb(0, 0, 0)',
null
],
[
null,
'rgb(20, 200, 100)',
'rgb(0, 0, 0)'
]
];
var weights = [ // for each segment, not point
[
5,
5,
null
],
[
null,
5
]
];
var polyline = L.polyline(latLngs, {
renderer: new polycolorRenderer(),
colors: colors,
useGradient: true,
color: 'rgba(255, 255, 255, 0.75)',
weights: weights
}).addTo(map);
*/// GeoJSON LineString example. The Leaflet creates the Polyline from LineString.
var colors = [
'rgb(20, 200, 100)',
'rgb(200, 100, 20)',
null,
null,
'rgb(20, 200, 100)',
'rgb(0, 0, 0)'
];
var geoJSONline = {
"type": "FeatureCollection",
"features": [
{"type": "Feature",
"properties": {
},
"geometry": {
"type": "LineString",
"coordinates": [
[5.758124,45.187273],
[5.758516,45.182772],
[5.747106,45.185767],
[5.752082,45.176569],
[5.757120,45.171863],
[5.755178,45.168354]
]
}
}
]
};
/*// GeoJSON MultiLineString example. The Leaflet creates the MultiPolyline from MultiLineString.
var colors = [
[
'rgb(20, 200, 100)',
'rgb(200, 100, 20)',
null
],
[
null,
'rgb(20, 200, 100)',
'rgb(0, 0, 0)'
]
];
var weights = [ // for each segment, not point
[
5,
null
],
[
null,
5
]
];
var geoJSONline = {
"type": "FeatureCollection",
"features": [
{"type": "Feature",
"properties": {
},
"geometry": {
"type": "MultiLineString",
"coordinates": [
[
[5.758124,45.187273],
[5.758516,45.182772],
[5.747106,45.185767]
],
[
[5.752082,45.176569],
[5.757120,45.171863],
[5.755178,45.168354]
]
]
}
}
]
};
*///
var polyline = L.geoJSON(geoJSONline,{
style: function(feature){
return {
renderer: new polycolorRenderer(),
colors: colors,
useGradient: true,
//weights: weights,
}
}
}).addTo(map);
///
//console.log(polyline);
document.addEventListener('DOMContentLoaded', function() {
let fack = document.querySelector('a[href="https://leafletjs.com"]');
if(fack && fack.innerHTML.includes('leaflet-attribution-flag')) fack.innerHTML = '🖕' + fack.innerHTML
});
</script>
</body>