Per 1 maart 2021 heeft PDOK haar TMS-webservice definitief uitgezet. Voor eerdere communicatie hierover, klik hier.
Ik ben Joan en helemaal nieuw hier.
Balen me topo kaarten doen het niet meer.
is het moeilijk om ze weer aan de gang te krijgen.
ik ben niet zo’n programmeur.
Alle hulp is Welkom.
Groeten Joan
Hoi @Joan,
Om je te kunnen helpen heb ik iets meer informatie nodig over wat het probleem is wat je ervaart en waarmee.
Aangezien je reageert onder de status update van TMS ga ik er vanuit dat het te maken heeft met topografische kaarten die je in een viewer gebruikt op basis van het TMS protocol.
Info die handig is om te vermelden:
- Met welke services ervaar je problemen
- Welke datasets gebruik je
- In welk type applicatie ervaar je een probleem (Webviewer, QGIS, iets anders)
- Als je gebruik maakt van een Webviewer, welk framework gebruik je hiervoor (Leaflet, OpenLayers, etc…)
- Als het publiek benaderbaar is, kan je een linkje mee sturen.
3 likes
Hoi @daneng ,
Jaren geleden een programma gemaakt dat posities omzette in een osm htm link , topo html link en een gpx bestand zodat er een track verschijnt met als achtergrond topo tiles
vaak zijn het een duizend posities maar om het wat duidelijker te maken in dit voorbeeld 2 posities zie: File upload and sharing. Large file transfers. Free online cloud storage.
osm werkt nog.
Het werkt met leaflet (wil de orginele auteur niet voor het hoofd stoten)
Ik hoop dat het een beetje duidelijk is.
Alvast bedankt voor de hulp.
Joan
Hoi @Joan,
Dank voor het delen. Het probleem in het voorbeeld wat je gestuurd hebt (na wat vertalingen naar leesbare javascript code in de bestanden) is dat er inderdaad TMS services gebruikt worden in de code, specifiek in de ‘function initTopoNL()’.
Een voorbeeld van een aantal services die aangeroepen worden zijn:
- http://geodata.nationaalgeoregister.nl/tiles/service/tms/1.0.0/brtachtergrondkaart/{z}/{x}/{y}.png
- http://geodata.nationaalgeoregister.nl/tiles/service/tms/1.0.0/top1000raster/EPSG:28992/{z}/{x}/{y}.png
- http://geodata.nationaalgeoregister.nl/tiles/service/tms/1.0.0/top500raster/EPSG:28992/{z}/{x}/{y}.png
- etc…
Dat verklaart en bevestigd inderdaad dat het uitschakelen van de TMS services ervoor zorgt dat je ‘testtopo’ variant geen kaartlagen meer toont.
Even een vraag m.b.t. de javascript code in je gedeelde voorbeeld, deze is ‘obfuscated/minder goed leesbaar gemaakt’. Heb ik eventueel jou toestemming om een stukje leesbare javascript code hiervan te posten waarin het probleem wordt opgelost?
Om alvast een klein stukje uit te leggen:
In de huidige functie initTopoNL() wordt er op deze manier een BRT-A TMS laag geladen:
nl_brt = L.tileLayer("http://geodata.nationaalgeoregister.nl/tiles/service/tms/1.0.0/brtachtergrondkaart/{z}/{x}/{y}.png", {
tms: true,
continuousWorld: true,
attribution: "Kaart © <a href=\"http://www.kadaster.nl\" target=\"_0\">Kadaster</a>"
});
als je deze code aanpast naar het volgende:
nl_brt = L.tileLayer("https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaartgrijs/EPSG:28992/{z}/{x}/{y}.png", {
tms: false,
continuousWorld: true,
tileSize: 256,
attribution: "Kaart © <a href=\"http://www.kadaster.nl\" target=\"_0\">Kadaster</a>"
});
Maak je gebruik van de BRT-A WMTS Restful laag waardoor de laag weer getoond kan worden.
Dit geldt dan uiteraard voor alle TMS lagen in de code.
Het verschil zit dus in het gebruikte service endpoint url:
- http://geodata.nationaalgeoregister.nl/tiles/service/tms/1.0.0/datasetnaam/projectie/{z}/{x}/{y}.png (TMS)
-
https://geodata.nationaalgeoregister.nl/tiles/service/wmts/datasetnaam/projectie/{z}/{x}/{y}.png (WMTS)
En een instelling in Leaflet, door aan te geven dat het geen TMS is. (tms: false).
Mocht je de gehele javascript code willen hebben kan ik deze met je delen.
@Joan Geen probleem 
De code van je initTopNL functie ziet er dan zo uit:
function initTopoNL() {
var b = L.CRS.proj4js("EPSG:28992", "+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +units=m +towgs84=565.2369,50.0087,465.658,-0.406857330322398,0.350732676542563,-1.8703473836068,4.0812 +no_defs", new L.Transformation(1, 285401.92, -1, 903401.9199999999));
b.scale = function(a) {
return 1 / (3440.64 / Math.pow(2, a))
};
nl_brt = L.tileLayer("https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaartgrijs/EPSG:28992/{z}/{x}/{y}.png", {
tms: false,
continuousWorld: true,
tileSize: 256,
attribution: "Kaart © <a href=\"http://www.kadaster.nl\" target=\"_0\">Kadaster</a>"
});
nl_top1000 = L.tileLayer("https://geodata.nationaalgeoregister.nl/tiles/service/wmts/top1000raster/EPSG:28992/{z}/{x}/{y}.png", {
tms: false,
continuousWorld: true,
tileSize: 256,
attribution: "Kaart © <a href=\"http://www.kadaster.nl\" target=\"_0\">Kadaster</a>"
});
nl_top500 = L.tileLayer("https://geodata.nationaalgeoregister.nl/tiles/service/wmts/top500raster/EPSG:28992/{z}/{x}/{y}.png", {
tms: false,
continuousWorld: true,
tileSize: 256,
attribution: "Kaart © <a href=\"http://www.kadaster.nl\" target=\"_0\">Kadaster</a>"
});
nl_top250 = L.tileLayer("https://geodata.nationaalgeoregister.nl/tiles/service/wmts/top250raster/EPSG:28992/{z}/{x}/{y}.png", {
tms: false,
continuousWorld: true,
tileSize: 256,
attribution: "Kaart © <a href=\"http://www.kadaster.nl\" target=\"_0\">Kadaster</a>"
});
nl_top100 = L.tileLayer("https://geodata.nationaalgeoregister.nl/tiles/service/wmts/top100raster/EPSG:28992/{z}/{x}/{y}.png", {
tms: false,
continuousWorld: true,
tileSize: 256,
attribution: "Kaart © <a href=\"http://www.kadaster.nl\" target=\"_0\">Kadaster</a>"
});
nl_top50 = L.tileLayer("https://geodata.nationaalgeoregister.nl/tiles/service/wmts/top50raster/EPSG:28992/{z}/{x}/{y}.png", {
tms: false,
continuousWorld: true,
tileSize: 256,
attribution: "Kaart © <a href=\"http://www.kadaster.nl\" target=\"_0\">Kadaster</a>"
});
nl_top25 = L.tileLayer("https://geodata.nationaalgeoregister.nl/tiles/service/wmts/top25raster/EPSG:28992/{z}/{x}/{y}.png", {
tms: false,
continuousWorld: true,
tileSize: 256,
attribution: "Kaart © <a href=\"http://www.kadaster.nl\" target=\"_0\">Kadaster</a>"
});
nl_top10 = L.tileLayer("https://geodata.nationaalgeoregister.nl/tiles/service/wmts/top10nlv2/EPSG:28992/{z}/{x}/{y}.png", {
tms: false,
continuousWorld: true,
tileSize: 256,
attribution: "Kaart © <a href=\"http://www.kadaster.nl\" target=\"_0\">Kadaster</a>"
});
map = L.map("map", {
crs: b,
center: [52, 5],
zoom: 10,
layers: [nl_top25],
minZoom: 0,
maxZoom: 14
});
map.on("zoomend", function() {
selectLayersNL()
})
}
Hieronder het gehele HTML document (groundtrack202103010506testtopo.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="JaVaWa" />
<title>groundtrack202103010506test</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@0.7.7/dist/leaflet.css" />
<style type="text/css">
.leaflet-popup-content-wrapper,
.leaflet-control-layers {
-webkit-border-radius: 4px;
border-radius: 4px;
}
.wptlabel {
text-align: center
}
.wptlabel span {
color: #000;
font-size: 12px;
background: #fff;
padding: 3px;
border-radius: 4px;
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4)
}
</style>
<script type="text/javascript" src="https://unpkg.com/leaflet@0.7.7/dist/leaflet.js"></script>
<script type="text/javascript" src="https://geo.javawa.nl/leaflet/0.7/proj4-compressed.js"></script>
<script type="text/javascript" src="https://geo.javawa.nl/leaflet/0.7/proj4leaflet.js"></script>
<script type="text/javascript">
/** Initial settings? */
var showVias = true, showLabels = false, showStartEnd = true, lineBorders = true, rteWidth = 3, trkWidth = 3;
/** Javascript code block 1 **/
var map, bounds, street, nl_brt, nl_top10, nl_top25, nl_top50, nl_top250, be_top10, be_top50, be_top100;
function getContrastColor(a) {
var b = parseInt(a.substr(1, 2), 16);
var c = parseInt(a.substr(3, 2), 16);
var d = parseInt(a.substr(5, 2), 16);
return (0.299 * b + 0.587 * c + 0.114 * d) < 64 ? "#fff" : "#000"
}
function getLength(a) {
var b = 0;
for (var c = 1; c < a.length; c++) {
b += a[c].distanceTo(a[c - 1])
}
return (b > 1500 ? (b / 1000).toFixed(1) + " km" : b.toFixed(0) + " m").replace(/\./, ",")
}
function startEnd(a, b) {
L.marker(a, {
clickable: false,
icon: L.icon({
iconUrl: "https://geo.javawa.nl/symbols/flag_green.png",
iconSize: [24, 27],
iconAnchor: [3, 28],
popupAnchor: [0, -5]
})
}).addTo(map);
L.marker(b, {
clickable: false,
icon: L.icon({
iconUrl: "https://geo.javawa.nl/symbols/flag_checker.png",
iconSize: [24, 28],
iconAnchor: [3, 27],
popupAnchor: [0, -5]
})
}).addTo(map)
}
function drawWpt(a) {
var b = L.marker([a[4], a[5]], {
zIndexOffset: 1000
});
if (a[3]) {
L.setOptions(b, {
icon: L.icon({
iconUrl: "https://geo.javawa.nl/symbols/" + a[3].replace(/\//, '-') + ".png",
iconSize: [24, 24],
iconAnchor: [12, 12],
popupAnchor: [0, -5]
})
})
}
var c = "<b>" + a[0] + "</b>";
if (a[1]) {
c += "<br />" + a[1]
}
if (a[2]) {
c += "<br /><a href=\"" + a[2] + "\" target=\"_0\">" + a[2] + "</a>"
}
if (showLabels) {
L.marker([a[4], a[5]], {
zIndexOffset: 1000,
icon: L.divIcon({
iconSize: [200, 24],
iconAnchor: [100, -20],
className: 'wptlabel',
html: '<span>' + a[0] + '</span>'
}),
clickable: false
}).addTo(map)
}
b.bindPopup(c).addTo(map);
bounds.extend(b.getLatLng())
}
function drawRte(a) {
var b, c = 0,
d = [];
for (b = 0; b < a[4].length; b++) {
d.push(L.latLng(a[4][b][2], a[4][b][3]));
if (a[4][b][1]) {
c += 1
}
}
if (lineBorders) {
L.polyline(d, {
color: getContrastColor(a[3]),
weight: rteWidth + 2,
opacity: 1
}).addTo(map)
}
var e = "Route: <b>" + a[0] + "</b>";
if (a[1]) {
e += "<br />" + a[1]
}
e += "<br />lengte: " + getLength(d) + ", aantal viapunten: " + c;
if (a[2]) {
e += "<br /><a href=\"" + a[2] + "\" target=\"_0\">" + a[2] + "</a>"
}
var f = L.polyline(d, {
color: a[3],
weight: rteWidth,
opacity: 1
}).bindPopup(e).addTo(map);
if (showStartEnd) {
startEnd(d[0], d[d.length - 1])
}
if (showVias) {
for (b = 0; b < a[4].length; b++) {
if (a[4][b][1]) {
L.circleMarker([a[4][b][2], a[4][b][3]], {
radius: 1 + (rteWidth / 2),
color: (a[4][b][1] == 1 ? "#000" : "#fff"),
fillColor: (a[4][b][1] == 1 ? "#fff" : "#000"),
fillOpacity: 1,
opacity: 1,
weight: 1
}).bindPopup("Viapunt: " + a[4][b][0] + (a[4][b][1] == 1 ? "<br /><i>(geen waarschuwing)</i>" : "")).addTo(map)
}
}
}
bounds.extend(f.getBounds())
}
function drawTrk(a) {
var b, c = [];
for (b = 0; b < a[4].length; b++) {
c.push(L.latLng(a[4][b][0], a[4][b][1]))
}
if (showStartEnd) {
startEnd(c[0], c[c.length - 1])
}
if (lineBorders) {
L.polyline(c, {
color: getContrastColor(a[3]),
weight: trkWidth + 2,
opacity: 1
}).addTo(map)
}
var d = "Track: <b>" + a[0] + "</b>";
if (a[1]) {
d += "<br />" + a[1]
}
d += "<br />lengte: " + getLength(c) + ", aantal trackpunten: " + c.length;
if (a[2]) {
d += "<br /><a href=\"" + a[2] + "\" target=\"_0\">" + a[2] + "</a>"
}
var e = L.polyline(c, {
color: a[3],
weight: trkWidth,
opacity: 1
}).bindPopup(d).addTo(map);
bounds.extend(e.getBounds())
}
function drawData() {
L.control.scale({
width: 100,
imperial: false
}).addTo(map);
map.on("contextmenu", function() {
return
});
bounds = new L.LatLngBounds();
for (i = 0; i < data.waypoints.length; i++) {
drawWpt(data.waypoints[i])
}
for (i = 0; i < data.routes.length; i++) {
drawRte(data.routes[i])
}
for (i = 0; i < data.tracks.length; i++) {
drawTrk(data.tracks[i])
}
map.fitBounds(bounds)
console.log("draaaawdededd");
}
/** Javascript code block 2 */
var map, bounds, street, nl_brt, nl_top10, nl_top25, nl_top50, nl_top100, nl_top250, nl_top500, nl_top1000, be_top10, be_top50, be_top100;
function getContrastColor(a) {
var b = parseInt(a.substr(1, 2), 16);
var c = parseInt(a.substr(3, 2), 16);
var d = parseInt(a.substr(5, 2), 16);
return (0.299 * b + 0.587 * c + 0.114 * d) < 64 ? "#fff" : "#000"
}
function getLength(a) {
var b = 0;
for (var c = 1; c < a.length; c++) {
b += a[c].distanceTo(a[c - 1])
}
return (b > 1500 ? (b / 1000).toFixed(1) + " km" : b.toFixed(0) + " m").replace(/\./, ",")
}
function startEnd(a, b) {
L.marker(a, {
clickable: false,
icon: L.icon({
iconUrl: "http://geo.javawa.nl/symbols/flag_green.png",
iconSize: [24, 27],
iconAnchor: [3, 28],
popupAnchor: [0, -5]
})
}).addTo(map);
L.marker(b, {
clickable: false,
icon: L.icon({
iconUrl: "http://geo.javawa.nl/symbols/flag_checker.png",
iconSize: [24, 28],
iconAnchor: [3, 27],
popupAnchor: [0, -5]
})
}).addTo(map)
}
function drawWpt(a) {
var b = L.marker([a[4], a[5]], {
zIndexOffset: 1000
});
if (a[3]) {
L.setOptions(b, {
icon: L.icon({
iconUrl: "http://geo.javawa.nl/symbols/" + a[3].replace(/\//, "-") + ".png",
iconSize: [24, 24],
iconAnchor: [12, 12],
popupAnchor: [0, -5]
})
})
}
var c = "<b>" + a[0] + "</b>";
if (a[1]) {
c += "<br />" + a[1]
}
if (a[2]) {
c += "<br /><a href=\"" + a[2] + "\" target=\"_0\">" + a[2] + "</a>"
}
if (showLabels) {
L.marker([a[4], a[5]], {
zIndexOffset: 1000,
icon: L.divIcon({
iconSize: [200, 24],
iconAnchor: [100, -20],
className: "wptlabel",
html: "<span>" + a[0] + "</span>"
}),
clickable: false
}).addTo(map)
}
b.bindPopup(c).addTo(map);
bounds.extend(b.getLatLng())
}
function drawRte(a) {
var b, c = 0,
d = [];
for (b = 0; b < a[4].length; b++) {
d.push(L.latLng(a[4][b][2], a[4][b][3]));
if (a[4][b][1]) {
c += 1
}
}
if (lineBorders) {
L.polyline(d, {
color: getContrastColor(a[3]),
weight: rteWidth + 2,
opacity: 1
}).addTo(map)
}
var e = "Route: <b>" + a[0] + "</b>";
if (a[1]) {
e += "<br />" + a[1]
}
e += "<br />lengte: " + getLength(d) + ", aantal viapunten: " + c;
if (a[2]) {
e += "<br /><a href=\"" + a[2] + "\" target=\"_0\">" + a[2] + "</a>"
}
var f = L.polyline(d, {
color: a[3],
weight: rteWidth,
opacity: 1
}).bindPopup(e).addTo(map);
if (showStartEnd) {
startEnd(d[0], d[d.length - 1])
}
if (showVias) {
for (b = 0; b < a[4].length; b++) {
if (a[4][b][1]) {
L.circleMarker([a[4][b][2], a[4][b][3]], {
radius: 1 + (rteWidth / 2),
color: (a[4][b][1] == 1 ? "#000" : "#fff"),
fillColor: (a[4][b][1] == 1 ? "#fff" : "#000"),
fillOpacity: 1,
opacity: 1,
weight: 1
}).bindPopup("Viapunt: " + a[4][b][0] + (a[4][b][1] == 1 ? "<br /><i>(geen waarschuwing)</i>" : "")).addTo(map)
}
}
}
bounds.extend(f.getBounds())
}
function drawTrk(a) {
var b, c = [];
for (b = 0; b < a[4].length; b++) {
c.push(L.latLng(a[4][b][0], a[4][b][1]))
}
if (showStartEnd) {
startEnd(c[0], c[c.length - 1])
}
if (lineBorders) {
L.polyline(c, {
color: getContrastColor(a[3]),
weight: trkWidth + 2,
opacity: 1
}).addTo(map)
}
var d = "Track: <b>" + a[0] + "</b>";
if (a[1]) {
d += "<br />" + a[1]
}
d += "<br />lengte: " + getLength(c) + ", aantal trackpunten: " + c.length;
if (a[2]) {
d += "<br /><a href=\"" + a[2] + "\" target=\"_0\">" + a[2] + "</a>"
}
var e = L.polyline(c, {
color: a[3],
weight: trkWidth,
opacity: 1
}).bindPopup(d).addTo(map);
bounds.extend(e.getBounds())
}
function drawData() {
L.control.scale({
width: 100,
imperial: false
}).addTo(map);
map.on("contextmenu", function() {
return
});
bounds = new L.LatLngBounds();
for (i = 0; i < data.waypoints.length; i++) {
drawWpt(data.waypoints[i])
}
for (i = 0; i < data.routes.length; i++) {
drawRte(data.routes[i])
}
for (i = 0; i < data.tracks.length; i++) {
drawTrk(data.tracks[i])
}
map.fitBounds(bounds)
}
function selectLayersNL() {
var a = map.getZoom();
if (map.hasLayer(nl_top10)) {
map.removeLayer(nl_top10)
}
if (map.hasLayer(nl_top25)) {
map.removeLayer(nl_top25)
}
if (map.hasLayer(nl_top50)) {
map.removeLayer(nl_top50)
}
if (map.hasLayer(nl_top100)) {
map.removeLayer(nl_top100)
}
if (map.hasLayer(nl_top250)) {
map.removeLayer(nl_top250)
}
if (map.hasLayer(nl_top500)) {
map.removeLayer(nl_top500)
}
if (map.hasLayer(nl_top1000)) {
map.removeLayer(nl_top1000)
}
if (map.hasLayer(nl_brt)) {
map.removeLayer(nl_brt)
}
if (a > 9 && !map.hasLayer(nl_top10)) {
nl_top10.addTo(map)
}
if (a == 9 && !map.hasLayer(nl_top25)) {
nl_top25.addTo(map)
}
if (a == 8 && !map.hasLayer(nl_top50)) {
nl_top50.addTo(map)
}
if (a == 7 && !map.hasLayer(nl_top100)) {
nl_top100.addTo(map)
}
if (a == 6 && !map.hasLayer(nl_top250)) {
nl_top250.addTo(map)
}
if (a == 5 && !map.hasLayer(nl_top500)) {
nl_top500.addTo(map)
}
if (a == 4 && !map.hasLayer(nl_top1000)) {
nl_top1000.addTo(map)
}
if (a < 4 && !map.hasLayer(nl_brt)) {
nl_brt.addTo(map)
}
}
function initTopoNL() {
var b = L.CRS.proj4js("EPSG:28992", "+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +units=m +towgs84=565.2369,50.0087,465.658,-0.406857330322398,0.350732676542563,-1.8703473836068,4.0812 +no_defs", new L.Transformation(1, 285401.92, -1, 903401.9199999999));
b.scale = function(a) {
return 1 / (3440.64 / Math.pow(2, a))
};
nl_brt = L.tileLayer("https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaartgrijs/EPSG:28992/{z}/{x}/{y}.png", {
tms: false,
continuousWorld: true,
tileSize: 256,
attribution: "Kaart © <a href=\"http://www.kadaster.nl\" target=\"_0\">Kadaster</a>"
});
nl_top1000 = L.tileLayer("https://geodata.nationaalgeoregister.nl/tiles/service/wmts/top1000raster/EPSG:28992/{z}/{x}/{y}.png", {
tms: false,
continuousWorld: true,
tileSize: 256,
attribution: "Kaart © <a href=\"http://www.kadaster.nl\" target=\"_0\">Kadaster</a>"
});
nl_top500 = L.tileLayer("https://geodata.nationaalgeoregister.nl/tiles/service/wmts/top500raster/EPSG:28992/{z}/{x}/{y}.png", {
tms: false,
continuousWorld: true,
tileSize: 256,
attribution: "Kaart © <a href=\"http://www.kadaster.nl\" target=\"_0\">Kadaster</a>"
});
nl_top250 = L.tileLayer("https://geodata.nationaalgeoregister.nl/tiles/service/wmts/top250raster/EPSG:28992/{z}/{x}/{y}.png", {
tms: false,
continuousWorld: true,
tileSize: 256,
attribution: "Kaart © <a href=\"http://www.kadaster.nl\" target=\"_0\">Kadaster</a>"
});
nl_top100 = L.tileLayer("https://geodata.nationaalgeoregister.nl/tiles/service/wmts/top100raster/EPSG:28992/{z}/{x}/{y}.png", {
tms: false,
continuousWorld: true,
tileSize: 256,
attribution: "Kaart © <a href=\"http://www.kadaster.nl\" target=\"_0\">Kadaster</a>"
});
nl_top50 = L.tileLayer("https://geodata.nationaalgeoregister.nl/tiles/service/wmts/top50raster/EPSG:28992/{z}/{x}/{y}.png", {
tms: false,
continuousWorld: true,
tileSize: 256,
attribution: "Kaart © <a href=\"http://www.kadaster.nl\" target=\"_0\">Kadaster</a>"
});
nl_top25 = L.tileLayer("https://geodata.nationaalgeoregister.nl/tiles/service/wmts/top25raster/EPSG:28992/{z}/{x}/{y}.png", {
tms: false,
continuousWorld: true,
tileSize: 256,
attribution: "Kaart © <a href=\"http://www.kadaster.nl\" target=\"_0\">Kadaster</a>"
});
nl_top10 = L.tileLayer("https://geodata.nationaalgeoregister.nl/tiles/service/wmts/top10nlv2/EPSG:28992/{z}/{x}/{y}.png", {
tms: false,
continuousWorld: true,
tileSize: 256,
attribution: "Kaart © <a href=\"http://www.kadaster.nl\" target=\"_0\">Kadaster</a>"
});
map = L.map("map", {
crs: b,
center: [52, 5],
zoom: 10,
layers: [nl_top25],
minZoom: 0,
maxZoom: 14
});
map.on("zoomend", function() {
selectLayersNL()
})
}
function selectLayersBE() {
var a = map.getZoom();
if (a < 16 && map.hasLayer(be_top10)) {
map.removeLayer(be_top10)
}
if ((a < 14 || a > 15) && map.hasLayer(be_top50)) {
map.removeLayer(be_top50)
}
if (a > 13 && map.hasLayer(be_top100)) {
map.removeLayer(be_top100)
}
if (a > 15 && !map.hasLayer(be_top10)) {
be_top10.addTo(map)
}
if ((a == 14 || a == 15) && !map.hasLayer(be_top50)) {
be_top50.addTo(map)
}
if (a < 14 && !map.hasLayer(be_top100)) {
be_top100.addTo(map)
}
}
function initTopoBE() {
be_top100 = L.tileLayer.wms("http://www.ngi.be/testbed/wms/top100r_l08_nl", {
layers: "0",
format: "image/jpeg",
attribution: "Kaart © <a href=\"http://www.ngi.be\" target=\"_0\">IGN/NGI</a>"
});
be_top50 = L.tileLayer.wms("http://www.ngi.be/testbed/wms/top50r_l08_nl", {
layers: "0",
format: "image/jpeg",
attribution: "Kaart © <a href=\"http://www.ngi.be\" target=\"_0\">IGN/NGI</a>"
});
be_top10 = L.tileLayer.wms("http://www.ngi.be/testbed/wms/top10r_l08_nl", {
layers: "0",
format: "image/jpeg",
attribution: "Kaart © <a href=\"http://www.ngi.be\" target=\"_0\">IGN/NGI</a>"
});
map = L.map("map", {
center: [50, 5],
zoom: 13,
layers: [be_top100],
minZoom: 8,
maxZoom: 17
});
map.on("zoomend", function() {
selectLayersBE()
})
}
function initOSM() {
var a = L.tileLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", {
attribution: "Kaart © Esri",
minZoom: 0,
maxZoom: 18
});
map = L.map("map", {
layers: [street]
});
L.control.layers({
"Kaart": street,
"Satelliet": a
}).addTo(map)
}
window.onload = function() {
initTopoNL();
drawData();
};
var data = {
"waypoints" : [],
"routes" : [],
"tracks" : [[" groundtrack202103010506test ", "", "", "#00ff00", [[51.90502, 5.24006], [51.90441, 5.23958]]]]
};
</script>
</head>
<body>
<div id="map" style="position:absolute;top:0;left:0;right:0;bottom:0"></div>
</body>
</html>
Deze inhoud kan je kopiëren en plakken in een HTML bestand en dan zou je geheel moeten zien werken.
5 likes
2 likes
Dit topic is 180 dagen na het laatste antwoord automatisch gesloten. Nieuwe antwoorden zijn niet meer toegestaan.