API Nominatim - Draw the Polygon

Question

I'm using OL3 with the searching API Nominatim. I have a search bar and I execute this :

http://nominatim.openstreetmap.org/search/"+string+"? format=json&addressdetails=1&limit=1&polygon_XXX=1

The API give multiple POLYGON format :

1. polygon_geojson=1 : Output geometry of results in geojson format.
2. polygon_kml=1 : Output geometry of results in kml format.
3. polygon_svg=1 : Output geometry of results in svg format.
4. polygon_text=1 : Output geometry of results as a WKT.

My aim : Draw a polygon, the city borders.

My problem : I didn't find an example to use these types of result, can I have help please ? I think I have to create a new layer to add to the map but I don't know how to create the layer with the resource.

Answer 1

Unfortunately this isn't a complete answer as I'll explain further in but if the result from a Nominatim search is an array of JSON objects, one of which (for the search term 'Paris') looks like this:

{ "place_id": "143540975",
  "licence": "Data © OpenStreetMap contributors,
              ODbL 1.0. http:\/\/www.openstreetmap.org\/copyright",
  "osm_type": "relation",
  "osm_id": "71525",
  "boundingbox": ["48.8155755", "48.902156", "2.224122", "2.4697602"],
  "lat": "48.85881005",
  "lon": "2.32003101155031",
  "display_name": "Paris, Ile-de-France, Metropolitan France, France",
  "class": "boundary",
  "type": "administrative",
  "importance": 1.0689345993219,
  "icon": "url/poi_boundary_administrative.p.20.png",
  "geojson": { "type": "Polygon", "coordinates": [[[2.224122, 48.854199], [2.224158, 48.854615], [2.224257, 48.855241], [2.224317, 48.85555], [2.224371, 48.85581], [2.224466, 48.856232], [2.224579, 48.856632], [2.224789, 48.857329], [2.224877, 48.857605], [2.225001, 48.85798], [2.225056, 48.858124], [2.225116, 48.858268], [2.22523, 48.858519], [2.225286, 48.858627], [2.22543, 48.858914], [2.225689, 48.859437], [2.225761, 48.8597272], etc,]] } 
}

You will need to create a new GeoJSON source and loop through and parse this data into features which Openlayers can understand, adding these to the source.

Next you will create a new vector layer which uses this source. You might also want to create a style definition for this layer to display the shapes as you prefer but if you don't, default styling will be used.

Finally you will add this layer to your map. Optionally you could get the extent of all of these features and instruct your map to zoom to these.

Sample code is below but it doesn't quite work:

function parseAreaJSON(data) {
var features = new ol.Collection();
for (var i = 0; i < data.length; i++) {
    console.info(data[i].geojson.coordinates[0].length);
    var coords = data[i].geojson.coordinates[0];
    var coords3857 = [];
    for (var j = 0; j < coords.length; j++) {
        var coordTrans = ol.proj.transform(coords[j], 'EPSG:4326', 'EPSG:3857');
        console.log(coordTrans);
        coords3857.push(coordTrans);
    }
    var feature = new ol.Feature({
        type: data[i].type,
        geometry: new ol.geom.Polygon(coords3857),
        'class': data[i].class,              
        'Display Name': data[i].display_name,
        'Longitude': data[i].lon,
        'Latitude': data[i].lat,
        'OSMId': data[i].osm_id
    });
    console.log(feature);
    features.push(feature);
}

// create a vector source that loads GeoJSON features
var vectorSource = new ol.source.Vector({
    projection: 'EPSG:3857',
    format: new ol.format.GeoJSON(),
    features: features
});

// a vector layer to render the GeoJSON source
var shapeLayer = new ol.layer.Vector({
    title: 'GeoJSON Shape',
    type: 'overlay',
    id: nameGen(new Date().getTime()),
    visible: true,
    source: vectorSource,
    style: defaultShape
});

session.map.addLayer(shapeLayer);
}

You'll notice the for loop which gets the geojson object which is nested inside each object. This has to iterate over the contained coordinates and change the projection from EPSG:4326 to EPSG:3857 of each.

Hopefully some of this is self-explanatory but as I said unfortunately it doesn't quite work. I get an error stating 'Unsupported stride' which means it doesn't understand the pattern of the coordinates it's being passed and I'm not sure why.

Hopefully someone else will contribute and I might get to understand where I'm going wrong built this should help you on your way.