Why not ask your question on the new OpenStreetMap Community Forum?


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

accept rate: 0%

edited 17 Mar '16, 06:22

aseerel4c26's gravatar image

aseerel4c26 ♦

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 :)

permanent link

answered 15 Mar '16, 09:27

MSwarco's gravatar image

accept rate: 0%

(15 Mar '16, 09:42) MSwarco

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

<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);

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

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

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 ;)

permanent link

answered 15 Mar '16, 13:30

MSwarco's gravatar image

accept rate: 0%

edited 15 Mar '16, 20:17

aseerel4c26's gravatar image

aseerel4c26 ♦

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

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

permanent link

answered 17 Mar '16, 06:21

aseerel4c26's gravatar image

aseerel4c26 ♦
accept rate: 18%

Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here



Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Question tags:


question asked: 15 Mar '16, 08:13

question was seen: 3,944 times

last updated: 17 Mar '16, 06:22

powered by OSQA