Openlayers 4.3.1 is not showing my GeoJSON layer - gis

Please i want to display a layer from GeoJSON file with openlayers 4.3.1 but the result (the vectorLayer variable) show a blank page. What am i missing?
The GeoJSON file is here https://gist.githubusercontent.com/abdounasser202/5d830738ad29e6395743530545bd322b/raw/0c34d9a1ced1879432318b6860c1c21e8e88ef04/quartiers_yaounde.geojson
Here is my JS code
var styles = {
'Polygon': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'grey',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
}),
};
var styleFunction = function(feature) {
return styles[feature.getGeometry().getType()];
};
var geojsonObject = 'https://gist.githubusercontent.com/abdounasser202/5d830738ad29e6395743530545bd322b/raw/0c34d9a1ced1879432318b6860c1c21e8e88ef04/quartiers_yaounde.geojson';
console.log("geodata >>> ", geojsonObject);
var vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: geojsonObject
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleFunction
});
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
// var extent_degree = [11.4095, 3.71349, 11.5747, 3.9692];
var map = new ol.Map({
layers: [vectorLayer],
target: 'map',
view: new ol.View({
// projection: 'EPSG:4326',
center: ol.proj.fromLonLat([11.5021, 3.8480]),
zoom: 6
})
});
// ol.proj.get('EPSG:4326').setExtent(extent_degree)
var units = map.getView().getProjection().getUnits();
console.log("units >>> ", units);
var projections = map.getView().getProjection();
console.log("projections >>> ", projections);

According your code, you are styling Polygons, but no other geometry types. So you will see only Polygons on your map. Other geometry types will be invisible since they are not styled. The GeoJSON file does not contain Polygons, so indeed you won't see anything.
As far as I can see, the GeoJSON file contains only MultiPolygons. To make them visible, add a style for 'MultiPolygon' in the variable styles, or just change the string 'Polygon' in your code to 'MultiPolygon'.

Related

'addLayer' of undefined openlayers angular 4

i want add marker by clicking on the map in openlayers angular 6, i want to use addLayer in my function but it doesn't work?
this.map.on('click', function (e) {
console.log(e.coordinate);
var lonlat = e.coordinate;
console.log(lonlat);
var lon = lonlat[0];
var lat = lonlat[1];
this.startMarker = new Feature({
geometry: new Point(fromLonLat([lon, lat])),
});
this.vectorLayer = new VectorLayer({
source: new VectorSource({
features: [this.startMarker]
}),
});
this.map.addLayer(this.startMarker);
});
As well as the this binding and addlayer() parameter, the feature geometry needs to be in view coordinates. e.coordinate is already in view coordinates, so you can use it directly
this.map.on('click', function (e) {
this.startMarker = new Feature({
geometry: new Point(e.coordinate),
});
this.vectorLayer = new VectorLayer({
source: new VectorSource({
features: [this.startMarker]
}),
});
this.map.addLayer(this.vectorLayer);
}.bind(this));
Try the arrow function to keep the context of this.
Your code sample should look like this:
this.map.on('click', (e) => {
console.log('Keep the context of this.map: ', this.map);
console.log(e.coordinate);
var lonlat = e.coordinate;
console.log(lonlat);
var lon = lonlat[0];
var lat = lonlat[1];
this.startMarker = new Feature({
geometry: new Point(fromLonLat([lon, lat])),
});
this.vectorLayer = new VectorLayer({
source: new VectorSource({
features: [this.startMarker]
}),
});
this.map.addLayer(this.startMarker);
});

openlayers3 : center and zoom extent to KML limits

Basic script to display a kml file on a tiled background with openlayer; I just switched from version 2 to 4.65, how can I zoom to the limits of the kml geometry ("vector" here) ?
var wmsSource = new ol.source.TileWMS({
url: "https://sedac.ciesin.columbia.edu/geoserver/wms",
params: {"LAYERS": "other:wwf-terrestrial-biomes", "TILED": true},
serverType: "geoserver"
});
var wmsLayer = new ol.layer.Tile({
opacity: 0.15,
visible: true,
source: wmsSource
});
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
url: "kml_file.kml",
format: new ol.format.KML()
})
});
var map = new ol.Map({
target: "map-canvas",
layers: [wmsLayer, vector],
controls: ol.control.defaults().extend([
new ol.control.ScaleLine({units: "metric"}),
new ol.control.FullScreen()
]),
view: new ol.View({
center: ol.proj.transform([37.41, 8.82], "EPSG:4326", "EPSG:3857"),
zoom: 3
})
});
I'd like to replace the zoom: 3 and have the map centered and extended to the kml limits ?
Note : I used kmllayer.events.register("loadend", kmllayer, function(evt){map.zoomToExtent(kmllayer.getDataExtent())}); with OpenLayers2...
The following should do what you want
var vectorSource = vector.getSource();
vectorSource.once('change', function(e){
if (vectorSource.getState() === 'ready') {
var extent = vectorSource.getExtent();
map.getView().fit(extent);
}
});
Solution mainly adapted from How to get the extent of a GeoJSON vector source? (changed the variable name & removed second argument in map.getView().fit (required in the old time, now optional, not needed most of the time, like here)
OK, I need to declare the kml source as a separate new ol.source.Vectorvariable, here vectorSource, and read .getExtent() from this variable, not from the ol.layer.Vector :
var wmsSource = new ol.source.TileWMS({
url: "https://sedac.ciesin.columbia.edu/geoserver/wms",
params: {"LAYERS": "other:wwf-terrestrial-biomes", "TILED": true},
serverType: "geoserver"
});
var wmsLayer = new ol.layer.Tile({
opacity: 0.15,
visible: true,
source: wmsSource
});
var vectorSource = new ol.source.Vector({
url: "'.$kml_f.'",
format: new ol.format.KML()
});
var vector = new ol.layer.Vector({
source: vectorSource
});
var map = new ol.Map({
target: "map-canvas",
layers: [wmsLayer, vector],
controls: ol.control.defaults().extend([
new ol.control.ScaleLine({units: "metric"}),
new ol.control.FullScreen()
]),
view: new ol.View({
center: ol.proj.transform([37.41, 8.82], "EPSG:4326", "EPSG:3857"),
zoom: 4,
})
});
vector.once("change", function(e){
var extent = vectorSource.getExtent();
map.getView().fit(extent);
});
Thanks for your help !

OpenLayers 3 Style Function for dynamic feature font setting

I am using php and mySQL to generate javascript for the vector layers and features. All is functionally working except I need to be able to control the feature text with zoom, which from my searches requires the use of a style function.
My issue is how/where do I create a function to set what is currently fixed as "font: 140/10 + 'px arial' " tied to the map zoom setting ?
My current design uses a php loop using the database to create the features with unique location and properties:
1) create the feature
2) set the style
3) push into the array iconFeatures0
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([-0.163741,51.507847], 'EPSG:4326', 'EPSG:3857')),
p_title: 'Hyde Park Title',
p_line1: 'Hyde Park',
p_line2: 'Park information ...',
lat: 51.507847,
long: -0.163741,
});
iconFeature.setStyle(
new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 1.0],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
opacity: 0.85,
src: 'test_map/marker_0.png',
size: [52,64],
scale:0.5,
})),
text: new ol.style.Text({
text: 'Hyde Park',
offsetY: -37.5,
fill: new ol.style.Fill({
color: '#FF3300'
}),
font: 140/10 + 'px arial'
})
}),
);
iconFeatures0.push(iconFeature);
//On completion of the loop:
var vectorSource0 = new ol.source.Vector({
features: iconFeatures0
});
vectorLayer0 = new ol.layer.Vector({
source: vectorSource0
});
//setting up the map
var myOSMLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
// Create latitude and longitude and convert them to default projection
var myMapcentre = ol.proj.transform([-0.140180,51.501811], 'EPSG:4326', 'EPSG:3857'); //$long,$lat
var myMapView = new ol.View({
center: myMapcentre,
zoom: 14
})
var myMap = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.FullScreen()
]),
layers: [myOSMLayer, vectorLayer0],
loadTilesWhileInteracting: true,
target: document.getElementById('demoMap1'),
view: myMapView
});
Thanks in advance.
There are several ways to accomplish this, here is one of them.
First, it would be more efficient if you prepare the styles and simply apply them at different scale, so OpenLayers doesn't have to re-create the styles each time the zoom changes.
Then, instead of styling each feature individually, you would style the entire layer (you can still discriminate by feature "category" within the layer).
At last, you would benefit from the the option to consider the resolution when styling the layer:
vectorLayer0.setStyle(function(feature, resolution) {
return [new ol.style.Style({
text: new ol.style.Text({
font: resolution/1000+'px Calibri,sans-serif',
text: "test",
fill: fill
})
})];
});
You would remove the code iconFeature.setStyle( ... from your code and put the above code after having created vectorLayer0

Leaflet Draw - toGeoJSON

I am still new to Leaflet and have been teaching myself. I have made a map using the Leaflet Draw libraries which works well, and I would like to add a function that allows the user to save the drawn features to a GeoJSON file. I have tried using this guide but I am still not having any luck.
I am using a button for the export function:
<input type='button' id='export' value='Export Feature (.kml)' class='btn' />
With the following body:
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© OpenStreetMap ',
osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib }),
map = new L.Map('map', { center: new L.LatLng(-29.5, 24.85), zoom: 6 }),
drawnItems = L.featureGroup().addTo(map);
L.control.layers({
'Street': osm.addTo(map),
"Satellite": L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri</a>'
})
}, {'Survey Area': drawnItems }, { position: 'topleft', collapsed: false }).addTo(map);
map.addControl(new L.Control.Draw({
edit: {
featureGroup: drawnItems,
poly: {
allowIntersection: false
}
},
draw: {
polygon: {
allowIntersection: false,
showArea: true
}
}
}));
map.on(L.Draw.Event.CREATED, function (event) {
var layer = event.layer;
drawnItems.addLayer(layer);
});
document.getElementById('export').onclick = function(e) {
// Extract GeoJson from featureGroup
var data = featureGroup.toGeoJSON();
// Stringify the GeoJson
var convertedData = 'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data));
// Create export
document.getElementById('export').setAttribute('href', 'data:' + convertedData);
document.getElementById('export').setAttribute('download','data.geojson');
}
I think the issue is with featureGroup or drawnItems but I just can't figure it out.

Trying to display a GeoJSON on Openlayers 3

I am trying to display a geojson file on an openlayers map. The openlayers map is already working, however I cannot figure out how to display the features from the geojson file. The example on their website is unfortunately not very helpful, as it is simply the geojson object being written directly into the file and then accessed later. I wish to take the features from a separate geojson file and display them on the map.
This is what I have so far, copied directly from the example:
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleFunction
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayer
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** #type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
What I need to know is how do I "open" the file and get the features from the geojson file (currently located at the url ..\public\geojson\federal_ridings.geojson) in place of the variable geojsonObject which is already there?
To add GeoJSON layer from external file replace:
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});
with
var vectorSource = new ol.source.Vector({
url: '..\public\geojson\federal_ridings.geojson',
format: new ol.format.GeoJSON()
});
ol.format.GeoJSON documentation
Make sure federal_ridings.geojson is a valid JSON file
Demo