How to use features from Geojson in openlayers3? - openlayers-3

I am using openlayers3 and i want to bring my features from feature.json, it seems when my map is loded I can get the feature file from network as xhr request but i am not able to see my polygons on map. Here below is my code
function showMap() {
var vector = new ol.layer.Vector({
projection: 'EPSG:5650',
source: new ol.source.Vector({
format: new ol.format.GeoJSON(),
projection: 'EPSG:5650',
url: 'feature.json'
})
});
var map = new ol.Map({
target: 'tilemap',
controls: ol.control.defaults({
attributionOptions: /** #type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
layers: [
new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'http://www.geodaten-mv.de/dienste/adv_dop',
crossOrigin: null,
projection: 'EPSG:5650',
params: {
VERSION: '1.3.0',
LAYERS: 'mv_dop',
FORMAT: 'image/jpeg',
CRS: 'EPSG:5650'
}
})
}),vector
],
view: new ol.View({
projection: 'EPSG:5650',
center: [33355494, 5983295],
zoom: 10
})
});
DisplayTilesServices.setMap(map);
}

I was using olderversion of openlayers and now instead of Using url in source, now I am using features and it works!! see the code below
$http.get('feature.geojson').then(function(res){
var format = new ol.format.GeoJSON();
source=new ol.source.Vector({
projection: 'EPSG:5650',
features:format.readFeatures(res.data)
});
var vectorLayer = new ol.layer.Vector({
source: source
});
map.addLayer(vectorLayer);
},function(){})

Related

GML3 features Openlayers not plotting

Latest Version of Openlayers 3.
var metSource = new ol.source.Vector({
url: "metobjectxml/2.xml",
format: new ol.format.GML3({
defaultDataProjection: 'EPSG:4326'
})
});
var metLayer = new ol.layer.Vector({
source: metSource
});
var mapView = new ol.View({
center: ol.proj.transform([-114.3035, 54.5800], 'EPSG:4326', 'EPSG:900913'),
zoom: 5,
projection: 'EPSG:900913'
});
var map = new ol.Map({
layers: [metLayer],
target: 'map',
view: mapView
});
```
Not plotting anything.
XML file: https://bpaste.net/show/56363886838f
Anyone know why?
This is not supported by OpenLayers. Only GML simple features profile is supported. What you have seems sensor web related.

OpenLayers 3 popup with external geojson

Trying to get a popup working with my geojson data. Error states $(element).popover is not a function. I'm thinking it has something to do with not being able to read the features, even though they display properly.
Using the latest version of OpenLayers and jquery:
http://openlayers.org/en/v3.12.1/build/ol.js
https://code.jquery.com/jquery-1.11.2.min.js
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'http://services5.arcgis.com/GfwWNkhOj9bNBqoJ/ArcGIS/rest/services/nyad/FeatureServer/0/query?where=1=1&outFields=*&outSR=4326&f=geojson',
format: new ol.format.GeoJSON()
}),
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
}),
vectorLayer
],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([-73.95, 40.7]),
zoom: 11
})
});
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false
});
map.addOverlay(popup);
// display popup on click
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
if (feature) {
popup.setPosition(evt.coordinate);
console.log(evt.coordinate);
$(element).popover({
'placement': 'top',
'html': true,
'content': feature.get('AssemDist')
});
$(element).popover('show');
} else {
$(element).popover('destroy');
}
});
You are add bootstrap
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

GeoJSON tiles regression in v3.5.0

My vector tiles were rendered correctly up to version 3.4, but nothing is displayed in 3.5. There are no errors in the JS console. I haven't found any related changes in the most recent API. Is it a bug?
var tileVectorSource = new ol.source.TileVector({
format: new ol.format.GeoJSON(),
tileGrid: new ol.tilegrid.XYZ({
maxZoom: 19
}),
url: 'data/{z}/{x}/{-y}.json'
});
var vectorLayer = new ol.layer.Vector({
source: tileVectorSource,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: '#9db9e8'
})
})
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayer
],
view: new ol.View({
center: [1877798, 6568203],
zoom: 6
})
});
You have run into a bug see also: https://github.com/openlayers/ol3/issues/3750
The fix (https://github.com/openlayers/ol3/pull/3747) will hopefully be in the upcoming 3.6 release

How to set zoom and center automatically based on GeoJSON features

I load some features from .json file, and would like to automatically set view wuth zoom to see all loaded features. I user OpenLayers version 3.
Here's what I have:
var gjsonFile = new ol.layer.Vector({
source: new ol.source.GeoJSON({
url: 'map.json',
projection: 'EPSG:3857'
})
})
});
var map = new ol.Map({
view: new ol.View({
center: ol.proj.transform([-77.0087,38.8691], 'EPSG:4326', 'EPSG:3857'),
zoom: 12
}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
gjsonFile
],
target: 'map1'
});
Vector sources have a #getExtent() method that gives you the extent of all features currently loaded in the source. To set the map's view to that extent as soon as the file is loaded, add the following code:
var source = gjsonFile.getSource();
var onChangeKey = source.on('change', function() {
if (source.getState() == 'ready') {
source.unByKey(onChangeKey);
map.getView().fitExtent(source.getExtent(), map.getSize());
}
});

OpenLayers setting position of overlay on a static image

I have created a map with OpenLayers 3 using static image. It uses fake projection so the map can use to properly display the layer as it's measured in pixels. This is the code:
var pixelProjection = new ol.proj.Projection({
code: 'pixel',
units: 'pixels',
extent: [0, 0, 1389, 1070]
});
var map = new ol.Map({
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'http://s25.postimg.org/4o15oqbmn/jdgf.jpg',
imageSize: [1389, 1070],
projection: pixelProjection,
imageExtent: pixelProjection.getExtent()
})
})
],
target: 'map',
view: new ol.View2D({
projection: pixelProjection,
center: ol.extent.getCenter(pixelProjection.getExtent()),
zoom: 2
})
});
I was trying to add marker overlays to add some more interactions however I'm struggling to specify position and the markers is outside the map rather then inside where I want to place it.
var marker = new ol.Overlay({
position: [200, 200],
element: document.getElementById('marker'),
stopEvent: false
});
I'm very novice to this so if anyone have an idea how to set position correctly I will be thankful.
Using this OpenLayers 3 map as an example, I was able to add a marker to the center of your static image with the following:
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point([700, 700])
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon({
src: 'http://ol3js.org/en/master/examples/data/icon.png'
})
});
iconFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});

Resources