Ik begrijp de wens maar dat gaat mij niet lukken. Ik heb geen verstand van javascript. Even wat achtergrond.
Ik heb met behulp van deze site wat geknutseld en toen mbv Lutz het e.e.a. verbeterd.
De broncode (html) van het kaartje is nu vrij beperkt (zie onder) en kan volgens mij door een ieder aangepast worden om bv andere OSM elementen te tonen en ook andere kleurtje voor de lijntjes weer te geven. Kwestie van andere OSM keys/values kiezen en het kleurtje aanpassen. Vele andere zaken worden geregeld door aparte javascript bestandjes ( .js) waar ik niet veel van begrijp. Die worden met 1 kort zinnetje aangeroepen vanuit het htlm bestand. De kleur van de letters is o.a. daarin geregeld. Ik kan denk ik wel de witte tekstekleur van de labels veranderen naar bv groen maar dat gaat dan voor alle labels dus daar schieten we niets mee op . Kortom: Mijn kennis schiet hier te kort. Als anderen weten hoe dat (eenvoudig) aan te passen is verneem ik het graag.
Voor de liefhebbers hier de code:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" lang="en"></meta>
<title>PeeWee Fietsoverlay in OSM via Open Layers</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script src="overpass.js"></script>
<script type="text/javascript">
var lat = 52.087
var lon = 5.094;
var zoom = 14;
var map;
function init(){
var ls = new OpenLayers.Control.LayerSwitcher();
map = new OpenLayers.Map ("map", {
controls:[
ls,
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.Attribution()],
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
maxResolution: 156543.0399,
numZoomLevels: 19,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
} );
ls.maximizeControl();
layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
map.addLayer(layerMapnik);
layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
map.addLayer(layerCycleMap);
var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
map.addLayers([
make_layer("http://overpass-api.de/api/interpreter?data=node[cycleway=lane](bbox);out+skel;(way[cycleway=lane](bbox);node(w););out+skel;", "purple", name="Cycleway=lane (paars)"),
make_layer("http://overpass-api.de/api/interpreter?data=node[cycleway=track](bbox);out+skel;(way[cycleway=track](bbox);node(w););out+skel;", "orange", name="Cycleway=track (oranje)"),
make_layer("http://overpass-api.de/api/interpreter?data=node[cycleway=opposite](bbox);out+skel;(way[cycleway=opposite](bbox);node(w););out+skel;", "blue", name="Cycleway=opposite (blauw)"),
make_layer("http://overpass-api.de/api/interpreter?data=node[cycleway=opposite_lane](bbox);out+skel;(way[cycleway=opposite_lane](bbox);node(w););out+skel;", "yellow", name="Cycleway=opposite_lane (geel)"),
make_layer("http://overpass-api.de/api/interpreter?data=node[bicycle=no](bbox);out+skel;(way[bicycle=no](bbox);node(w););out+skel;", "red", name="Bicycle=no (rood)"),
make_layer("http://overpass-api.de/api/interpreter?data=node[highway=cycleway](bbox);out+skel;(way[highway=cycleway](bbox);node(w););out+skel;", "#66FF14", name="Highway=cycleway (lichtgroen)"),
make_layer("http://overpass-api.de/api/interpreter?data=node[highway=cycleway][mofa=no](bbox);out+skel;(way[highway=cycleway][mofa=no](bbox);node(w););out+skel;", "green", name="Cycleway Mofa=no (groen)"),
make_layer("http://overpass-api.de/api/interpreter?data=node[highway=cycleway][moped=no](bbox);out+skel;(way[highway=cycleway][moped=no](bbox);node(w););out+skel;", "green", name="Cycleway Moped=no (groen)"),
make_layer("http://overpass-api.de/api/interpreter?data=node[highway=cycleway][moped=designated](bbox);out+skel;(way[highway=cycleway][moped=designated](bbox);node(w););out+skel;", "#5FFFFF", name="Cycleway Moped=designated (lichtblauw)"),
make_layer("http://overpass-api.de/api/interpreter?data=node[shop=bicycle](bbox);out+skel;(way[shop=bicycle](bbox);node(w););out+skel;", "black", name="shop=bicycle (zwart)")
]);
map.setCenter (lonLat, zoom);
var click = new OpenLayers.Control.Click(
"http://overpass-api.de/api/popup?data="
+ "[out:popup(\"\";[shop=bicycle];\"name\";)(\"\";[highway=cycleway];\"name\";)(\"\";[bicycle=no];\"name\";)(\"\";[cycleway=opposite_lane];\"name\";)(\"\";[cycleway=opposite];\"name\";)(\"\";[cycleway=track];\"name\";)(\"\";[cycleway=lane];\"name\";)];"
+ "(node(bbox);way(bbox););(._;<;);out;"
+ "&redirect=no&template=ids.popup", 0.000005, map);
map.addControl(click);
click.activate();
}
</script>
</head>
<body onload="init()">
<div id="statusline" style="font-size:24pt; font-weight:bold; font-family:sans-serif">No status set yet.</div>
<div id="map" class="smallmap"></div>
</body>
</html>
Je moet dan nog wel even dit bestandje in de zelfde map plaatsen waar ook het html bestand in staat. De andere javascript bestandjes worden vanaf het internet geplukt.