[GIS] Converting wkt to geojson with OpenLayers

geojsonopenlayers-2well-known-text

I am trying to convert wkt to geojson wiht OpenLayers. I wrote my code based on this question (geojson to wkt).

That's what I have so far, but it is not working. Any ideas?

var = 'GEOMETRYCOLLECTION(MULTIPOLYGON(((-0.12072212703174 51.51899157882951,-0.128597092699465 51.51191439062526,-0.129004788469729 51.51260880491084,-0.129584145616946 51.51374388239237,-0.130120587419924 51.51494569831,-0.130614113878664 51.51653471734371,-0.125507187914309 51.51718900318654,-0.121001076769289 51.519178508517115,-0.12072212703174 51.51899157882951))))';
var geojson_options = {};
var wkt_format = new OpenLayers.Format.WKT();
var testFeature = wkt_format.read(val);
var geojson_format = new OpenLayers.Format.GeoJSON(wkt_options);
var out = geojson.write(testFeature);

alert(out);

Try it in action: http://jsfiddle.net/Pp5FF/

Best Answer

The OpenLayers part itself it correct, but your snippet is not valid JavaScript. The problems are:

the fiddle doesn't import OpenLayers (use "External Resources" for that)
the WKT string variable is missing name
wkt_options not defined
geojson_format vs geojson

Hint: open your browser's Developer Console to see the errors reported one by one. And here's your fixed fiddle

Related Solutions

[GIS] OpenLayers: ALL image layers are out of place on google maps v3 and OSM base layers

Hayley,

2nd UPDATE: Played around some more and got the radar overlay to work with OpenLayers. What I and a few others have referred to holds true here. The Ridge Radar gifs are really meant to go into Google Earth (though they might also play nice in Google Maps too). However, in OpenLayers, one does have to ensure that raster images are transformed to spherical mercator in order to display in Google Maps and Open Street Maps via OpenLayers. In order to do that, you have to geo-reference the raster to ESPG 4326 and then transform it to spherical mercator. Now I used GDAL to do the geo-referencing and also warping to spherical mercator. Here are the commands I used:

gdal_translate -of PNG -a_srs EPSG:4326 -a_ullr -127.62 50.41 -66.42 21.61 radar.gif radartemp1.png

gdalwarp -t_srs '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs' radartemp1.png radartemp2.png

gdal_translate -of PNG -outsize 80% 80% radartemp2.png radartemp3.png

The first line geo-references the image to EPSG 4326 and also converts to a PNG. Just used to doing that but you should be able to keep GIFs (-of GIF).

The second line converts the image to EPSG 900913 via the proj.4 commands in single quotes. I had tried using 900913 and also 3785/3857 in gdalwarp but my version of GDAL didn't like those. Found the proj.4 commands worked. Key to this was the +nadgrids=@null option. I found that in our geo-referencing things worked fine with the transformation that we were using for our initial GM prototype. However, our images were "squished" when we tried to use them for OL. Discovered after a search and also in the reference that snapwire_org indicated that this is critical to getting the grid transformed into spherical mercator.

Now I found that in order to work with EPSG 900913 in OL, I had to use meters for the projection instead of the lat lon bounds and just transform everything between the two:

Declaring the map:

map = new OpenLayers.Map("map", {

    projection: new OpenLayers.Projection("EPSG:900913"),
    units: "m",
    maxResolution: 156543.0339,
    maxExtent: new OpenLayers.Bounds(
        -20037508, -20037508, 20037508, 20037508.34),
    displayProjection: new OpenLayers.Projection("EPSG:4326"),
    controls: [
        new OpenLayers.Control.Navigation(),
        new OpenLayers.Control.KeyboardDefaults(),
        new OpenLayers.Control.PanZoomBar(),
        new OpenLayers.Control.Scale(),
        new OpenLayers.Control.Attribution()
    ]

});

Now for the image overlay:

// create spherical mercator base layers

var googleLayer = new OpenLayers.Layer.Google("Google Physical", {type: google.maps.MapTypeId.TERRAIN, visibility: true});
var gstr = new OpenLayers.Layer.Google("Google Streets", {type: google.maps.MapTypeId.ROAD, visibility: true});
var osmLayer = new OpenLayers.Layer.OSM("OpenStreetMap");

NOW I've entered the correct numbers here after the 3rd GDAL transformation step above for your use in the new OpenLayers.Bounds line below

// create overlay with first image (GMoverlay is a global);

GMoverlay= new OpenLayers.Layer.Image("Radar Overlay","radartemp3.png",
     new OpenLayers.Bounds(-14206593.415,2465071.940,-7394741.764,6517585.728),   
     new OpenLayers.Size(847,484),
     {isBaseLayer: false, opacity: 0.4,
      projection: new OpenLayers.Projection("EPSG:900913")});

//add layers to map

map.addLayers([googleLayer, gstr,osmLayer, GMoverlay]);

Again, you can see in the Bounds, we're using meters:

new OpenLayers.Bounds(-14206593.415,2465071.940,-7394741.764,6517585.728)

You would get that info by running

gdalinfo radartemp3.png

The lower left and upper right coordinates of the transformed image are displayed in this command's output and then entered in the part above when declaring the new OL Image.

In going back and forth between meters and standard Lat/Lon, you have to use OL transforms like this one for setting the initial center:

map.setCenter(new OpenLayers.LonLat(-80, 40).transform(
        new OpenLayers.Projection("EPSG:4326"),
        map.getProjectionObject()),5);

You need to be careful here using transform on geometries as I discovered when grabbing a point on the map. This is also discussed in that link on spherical mercator and here's the relevant statement:

"Because all transforms are in place, once you have added a geometry to a layer, you should not call transform on the geometry directly: instead, you should transform a clone of the geometry:"

The referenced link that snapwire_org mentioned has a good deal of what I refer to here.

Also note that the size of the image is about a quarter the size of radartemp3.png. That's because you have to reduce the size number the farther out you zoom. So, you can't use 3700 x 1600 of the original image.

This really should be the answer you're looking for. I checked it myself in a test OL app with much of the pieces above and it projected spot on to what was being displayed at weather.gov. You still will have to do the geo-referencing and transformations. But GDAL is also open source and easy to install.

Tell you, it took a while to find that proj.4 option for our transformations. Then I pieced together several references which set up the map and image overlay in meters (including the one from snapwire_org) and then did transformations for points between 4326 and 900913. Worked like a charm then.

Good luck!

[GIS] OpenLayers – is it possible for a feature to have both a single click and double click event

Did you look at OpenLayers.Handler.Click?

The select control takes an handler as option, and the above one has a boolean that should tell you if is single or double click.

Example

Not exactly what you asked (select on dblClick; deselect on click) but should be easy to change

// Simple WFS layer
wfs = new OpenLayers.Layer.Vector(
    "WFS",
    {
        strategies: [new OpenLayers.Strategy.BBOX()],
        protocol: new OpenLayers.Protocol.WFS(
        {
            url:  "/optima/geoserver/wfs",
            featureType: "node",
            featureNS: "http://piemonte.optima.sistemaits.com",
            geometryName: 'poin'
        })
});
map.addLayer(wfs);

// Add a select control (note: this control is added to the map, but is disabled)
var select = new OpenLayers.Control.SelectFeature(
    wfs,
    {
        multiple: false,
        clickout: true,             // Will be ignored (aka, you have to deselect a feature when no feature is found onClick)
        onSelect: function(feature)
        {
            // ...
        },
        onUnselect: function(feature)
        {
            // ...
        }
    }
);

map.addControl(select);

// Handler to intercept click.
handler = new OpenLayers.Handler.Click(
    select,  // The select control
    {
        click: function(evt)
        {
            console.warn(this); // OpenLayers.Control.SelectFeature
            var feature = this.layer.getFeatureFromEvent(evt);
            
            // clickout
            if(this.layer.selectedFeatures){
                this.unselect(this.layer.selectedFeatures[0]);
            }
        },
        dblclick: function(evt)
        {
            console.info(this); // OpenLayers.Control.SelectFeature
            var feat = this.layer.getFeatureFromEvent(evt);
            // Select a feature
            if(feat){
                this.select(feat);
            }

        }
    },
    {
        single: true,
        double: true,
        stopDouble: true,
        stopSingle: true
    }
);

// select.activate();  // The select control must NOT be active
handler.activate();    // The handler will handles the click events for the select control

Best Answer

Related Solutions

[GIS] OpenLayers: ALL image layers are out of place on google maps v3 and OSM base layers

[GIS] OpenLayers – is it possible for a feature to have both a single click and double click event

Example

Related Question