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 !
Related
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);
});
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
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'.
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
I'm trying to display an embeded Google Map based on the location of an Event object.
This is the basic app:
App = Em.Application.create();
App.Event = Em.Object.extend({
lat: -33.8665433,
lng: 151.1956316
});
App.EventController = Ember.ObjectController.extend();
App.ApplicationController = Ember.ObjectController.extend();
App.EventView = Ember.View.extend({
templateName: 'event'
});
App.ApplicationView = Ember.View.extend({
templateName: 'application'
});
App.Router = Ember.Router.extend({
enableLogging: true,
root: Ember.Route.extend({
event: Ember.Route.extend({
route: '/',
connectOutlets: function (router) {
router.get('eventController').set('content', App.Event.create());
router.get('applicationController').connectOutlet('event');
}
})
})
});
App.initialize();
With the following templates:
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="event">
{{lat}} {{lng}}
// Embeded Google Map
</script>
Where would I initialize the map? Additionally, if lat/lang change, how would I catch it and redraw the map?
Working View Code (Modified from sabithpocker's answer)
App.EventView = Ember.View.extend({
templateName: 'event',
map: null,
latitudeBinding: 'controller.content.lat',
longitudeBinding: 'controller.content.lng',
didInsertElement: function () {
var mapOptions = {
center: new google.maps.LatLng(this.get('latitude'), this.get('longitude')),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(this.$().get(0), mapOptions);
this.set('map', map); //save for future updations
this.$().css({ width: "400px", height: "400px" });
},
reRenderMap: function () {
if (this.get('map')) {
var newLoc = new google.maps.LatLng(this.get('latitude'), this.get('longitude'));
this.get('map').setCenter(newLoc);
}
}.observes('latitude', 'longitude') //these are bound to lat/lng of Event
});
Here is a quick idea, not following ember app structure, just an idea.
App.EventView = Ember.View.extend({
templateName: 'event',
map : null,
latitudeBinding : 'App.Event.lat',
longitudeBinding : 'App.Evet.lng',
didInsertElement : function(){
var mapOptions = {
center: new google.maps.LatLng(this.get('latitude'), this.get('longitude')),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(this.$().get(0),mapOptions);
this.set('map',map); //save for future updations
},
reRenderMap : function(){
var newLoc = new google.maps.LatLng(this.get('latitude'), this.get('longitude'));
this.get('map').setCenter(newLoc)
}.observes('latitude','longitude') //these are bound to lat/lng of Event
});
Also I think App.Event should be:
App.Event = Em.Object.extend({
lat: null,
lng: null,
init : function(){
this.set('lat', -33.8665433);
this.set('lng', 151.1956316);
}
});
to avoid the so-called chromosomal mutation in Ember