OpenStreetMap Forum

The Free Wiki World Map

You are not logged in.

#1 2012-10-26 15:09:59

PeeWee32
Member
From: Leusden, NL
Registered: 2010-11-28
Posts: 1,102
Website

Openlayers javascript help needed

I’ve made a map for horse riding with 6 overlays based on some examples I found on the internet. It uses openlayers and overpass api. The map basicaly does what it should but I am having trouble changing some of the lay-out. This is because making these maps goes beyond my knowledge and capabilities but I have the feeling I am almost there so a little help is very much appreciated. Currentely some of the code in the page is not used/does not work as I hoped.

The overlays show:
1.    ways that are tagged : highway=bridleway (green)
2.    ways thar are tagged highway=track, horse=designated (green)
3.    ways thar are tagged highway=track, horse=designated (green)
4.    ways thar are part of a routerelation that is tagged route=horse(yellow)
5.    ways and nodes that are tagged Sport=equestrian (blue)
6.    nodes that are tagged rhn_ref=* (orange)(Ruiterknooppunten)

the map can be found here.

What I would like to see changed is this:
1.    When you click the + in the top right corner the box shows these 6 elements. Unfortunately I can only change the name of number 6 (Ruiterknooppunten). If I change any of the other five into a more meaningfull name (and not a colour reference) it does not render at all. I would like to have a more meaningfull name and also a possibility to change the color (in the page code not in the user interface).
2.    How can I change the color and size of the node of number 5 and 6

Any suggestion is much appreciated.

Edit: Site. does not seem to work with IE9 but OK with FF 16.0.1 or Chrome.

Last edited by PeeWee32 (2012-10-26 17:01:15)

Offline

#2 2012-10-27 19:59:44

lutz
Member
Registered: 2007-08-18
Posts: 1,537
Website

Re: Openlayers javascript help needed

hallo,

speichere die overpass.js lokal ab,
ändere darin zeile 137

      var layer = new OpenLayers.Layer.Vector(color, {

in

       var layer = new OpenLayers.Layer.Vector(name, {

und zeile 152

    function make_layer(data_url, color ) {

in

function make_layer(data_url, color, name) {

anschließend in der

ruiterpadenOSM3.html folgende änderungen:
zeile 7
<script src="http://overpass-api.de/overpass.js"></script>

in

<script src="overpass.js"></script>

zeile 50

make_layer("http://overpass-api.de/api/interpreter?data=node[highway=bridleway](bbox);out+skel;(way[highway=bridleway](bbox);node(w););out+skel;", "#66FF14"),

in

make_layer("http://overpass-api.de/api/interpreter?data=node[highway=bridleway](bbox);out+skel;(way[highway=bridleway](bbox);node(w););out+skel;", "#66FF14", name="dein_name"),

dasselbe mit den zeilen 51-55

grüße von lutz

Offline

#3 2012-10-28 09:18:08

PeeWee32
Member
From: Leusden, NL
Registered: 2010-11-28
Posts: 1,102
Website

Re: Openlayers javascript help needed

Vielen Dank Lutz

Fortunately my German is not as bad as I thought wink

I've made a new map following your instructions.

This looks a lot better. Is there any way that I can have the options on the top right corner extended by default. This way users don't have to click the + sign which I think is better.

Thanks again. Grusse PeeWee32

Offline

#4 2012-10-28 12:20:08

lutz
Member
Registered: 2007-08-18
Posts: 1,537
Website

Re: Openlayers javascript help needed

hallo,

wenn ich dich richtig verstehe suchst du sowas:

ändere zeile 15-38 in:


  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")
          } );
              var layer = new OpenLayers.Layer.Vector("Ruiterknooppunten", {
              strategies: [new OpenLayers.Strategy.Fixed()],
              protocol: new OpenLayers.Protocol.HTTP({
                  url: data_url,
                  format: new OpenLayers.Format.OSM()
              }),
              styleMap: styleMap,
              projection: new OpenLayers.Projection("EPSG:4326")
          });
            ls.maximizeControl();


grüße von lutz

Offline

#5 2012-10-28 14:40:53

PeeWee32
Member
From: Leusden, NL
Registered: 2010-11-28
Posts: 1,102
Website

Re: Openlayers javascript help needed

Vielen dank Lutz. Du hast es richtig verstanden. Perfect.

Die neue karte ist hier an zu sehen.

Thanks again.

PeeWee

Offline

Board footer

Powered by FluxBB