This is a static archive of our old OpenStreetMap Help Site. Please post any new questions and answers at community.osm.org.

How to mark / colorize street parts?

0

Hi,

after hours of searching for a HowTo or examples, i decided to ask you guys :) I try to mark/color special parts of streets and make those parts clickable.

For example:

let´s take the Strip in Las Vegas... i want to "cut" the Strip in different parts and colorize those in different colors. After that, they should be clickable. Is there a way to realize this with openLayers?? Maybe without an external Editor... just with Coordinates or something like that? I would prefer to use Leaflet if there is a way ;)

I think the best way to "show" you what i mean is this picture:

JOSM logo

I know, this is just a logo from JOSM, but this is exactly what i need :) :)

Thanks in advance

asked 15 Mar '16, 08:13

MSwarco's gravatar image

MSwarco
11113
accept rate: 0%

edited 17 Mar '16, 06:22

aseerel4c26's gravatar image

aseerel4c26 ♦
32.6k18248554


3 Answers:

0

So, after further searching i found a possible way to get the street coordinates... Web Feature Service (WFS). Now i just need a example WFS to try what kind of polylines and methods a WFS transmits.

In combination with Leaflet, it should be simple to draw the transmitted PolyLines as layer... well, i hope so :)

answered 15 Mar '16, 09:27

MSwarco's gravatar image

MSwarco
11113
accept rate: 0%

(15 Mar '16, 09:42) MSwarco

0

Still working at it... and yep, its not that simple as i thought before...

the demo-server is working fine. I tried the following featureType

<FeatureType>
<Name>og:roads</Name>
<Title>roads</Title>
<Abstract/>
<ows:Keywords><ows:Keyword>features</ows:Keyword><ows:Keyword>roads</ows:Keyword></ows:Keywords><DefaultCRS>urn:ogc:def:crs:EPSG::26713</DefaultCRS><ows:WGS84BoundingBox><ows:LowerCorner>-103.88034577292942 44.30742621244438</ows:LowerCorner><ows:UpperCorner>-103.62013461674628 44.567637368627516</ows:UpperCorner></ows:WGS84BoundingBox></FeatureType>

with the following code:

        map = new L.Map('map', {
        center: new L.LatLng(44.095475729465, -72.388916015626), 
        zoom: 7,
        layers: [mapquest],
        zoomControl: true
    });


    var owsrootUrl1 = 'http://demo.opengeo.org/geoserver/ows';
    var defaultParameters1 = {
        service : 'WFS',
        version : '2.0.0',
        request : 'GetFeature',
        typeName : 'og:roads',
        outputFormat: 'json'
    };

    var parameters1 = L.Util.extend(defaultParameters1);
    var URL1 = owsrootUrl1 + L.Util.getParamString(parameters1);
    alert(URL1);

    var ajax = $.ajax({
        url : URL1,
        dataType : 'jsonp',
        jsonpCallback : 'getJson',
        success : WFSLayer
    });


    function WFSLayer(data) {
        console.log(WFSLayer(data));
    L.geoJson(data, {
    style: function (feature) {
        return {color: 'black',
            fillColor: '#ff0000',
            fillOpacity: 0.10};
        }
    }).addTo(map);
    }

The alert(URL1) is working, this is the output: http://demo.opengeo.org/geoserver/ows?service=WFS&version=2.0.0&request=GetFeature&typeName=og:roads&outputFormat=json

So far so good... but what should happen next? There is no visible success. i thought the WFSLayer() function add a visible Layer to my USA-Map. Need HEEEELP !!!! :D

no, seriously... please help me THANKS in advance

ps: i´m from germany, so if you want to answer in german, no probs ;)

answered 15 Mar '16, 13:30

MSwarco's gravatar image

MSwarco
11113
accept rate: 0%

edited 15 Mar '16, 20:17

aseerel4c26's gravatar image

aseerel4c26 ♦
32.6k18248554

And sorry for the unformatted XML-Structure, but i don´t know how to format XML in this editor

(15 Mar '16, 15:43) MSwarco

meta: for formatting see http://daringfireball.net/projects/markdown/ and use the preview there, since the preview here is a bit "basic".

(15 Mar '16, 20:18) aseerel4c26 ♦

Thanks aseerel ;)

But does no one know how to solve my problem?! Maybe just an idea i could try :/ ?

(16 Mar '16, 06:53) MSwarco

0

Have a look at how the data layer of the osm.org homepage is realized (I guess it uses leaflet). If it is not pretty to look up in your browser's source code view, then look at https://wiki.openstreetmap.org/wiki/The_Rails_Port .

Hope this helps

answered 17 Mar '16, 06:21

aseerel4c26's gravatar image

aseerel4c26 ♦
32.6k18248554
accept rate: 18%

Source code available on GitHub .