I have this piece of code :
let text = new ol.style.Text({
font: '14px Arial',
text: 'string'
});
let icon = new ol.style.Style({
image: new ol.style.Icon(/** #type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: './img/icon.png'
})),
text: text
});
why is this working ? :
text.setText("otherString");
icon.setText(text);
feature.setStyle(icon)
// the name of someFeature is changed to someOtherString as supposed to
but this is not working :
feature.setStyle(icon.setText(text.setText("anotherString")));
//name is not changed.
This is probably something about Javascript that I don't understand. Please help!
Thanks!
Probably because someText.setText() return type is not what is expected to be input type of someIcon.setText().
If you try to do like: someIcon.setText(someText);
You are passing a object someText and not the output of someText.setText("someOtherString").
That is the reason why someIcon.setText(someText); is working but someIcon.setText(someText.setText("someOtherString")) is not working.
Related
I have a basic map with openlayers 6.8.
I display markers from geojson.
Example of a geojson :
const geoMoscow = new ol.layer.Vector({
source: new ol.source.Vector({
url: './assets/moscow.geojson',
format: new ol.format.GeoJSON()
}),
visible: true,
title: 'geojson',
style: new ol.style.Style({
fill: fillStyle,
stroke: strokeStyle,
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: [245, 49, 5, 1]
}),
radius: 10,
}),
})
})
I want to get this geojson coordinates for further use.
I have been reading many code examples that uses geojson.getSource().getFeatures() that allows to acces the getCoordinates() method from each feature.
Unfortunetly geoMoscow.getSource().getFeatures() gives an empty array.
I am obviously missing something there about openlayers logic.
It seems totally doable because my geojson contains a feature object with the coordinates in it but I am unable to access it.
TLDR : How to access informations like coordinates from this geojson Vector.
You must wait until the source is loaded and parsed
geoMoscow.getSource().on('featuresloadend', function(){
console.log(geoMoscow.getSource().getFeatures());
});
The source will not load until it is added to a map.
I want to use a JSON file containing coordinates to plot points on a map with Mapbox and add markers at those locations. I've followed a few of their tutorials and searched elsewhere (stack overflow, Github etc) to see if I could find a solution but nothing seemed to work. I'm not getting any errors when I open the HTML file in the browser but the markers aren't appearing on the map at the JSON's coordinates and I'm not really sure how to get the JSON's coordinates to be read and then plotted on the map. I want the JSON to be used from the same folder as the project and not a URL so this didn't work for me either.
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoiam1hcHNkamFuZ28iLCJhIjoiY2tydzIwazc4MGNnODJvb2VhNHNhZDd5diJ9.iwGIdgMHrcjbNu1xJRAElQ';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
// style: 'mapbox://styles/mapbox/light-v10',
center: [-0.19346, 51.50405],
zoom: 9
});
map.on('load', () => {
map.addLayer({
id: 'restaurants',
type: 'Point',
source: {
type: 'geojson',
data: './restaurants.json' // replace this with the url of your own geojson
},
paint: {
'circle-radius': [
'interpolate',
['linear'],
['number', ['get', 'coordinates']],
0,
4,
5,
24
],
'circle-color': [
'interpolate',
['linear'],
['number', ['get', 'coordinates']],
0,
1,
2,
3,
4,
5,
],
'circle-opacity': 0.8
}
});
});
I don't know if this is your only error, but this line:
type: 'Point',
should be:
type: 'circle',
new VectorLayer({
source: new VectorSource(),
style: new Style({
stroke: new Stroke({ color: 'rgba(0, 0, 0, 0.9)', width: 2 }),
image: new Icon({src: '/images/crop.jpg',opacity:1,scale:1})
})
this suppose to make all features polygons filled with image located at /images/crop.jpg
but in real life it just draws transparent polygons.
is there something Im missing?
thanks!
I've been searching for a day about how to place a list (array) of markers on an OSM/OpenLayers, but unfortunately, the official example wouldn't work for me.
Can you please show me the best way to show the map and then add it an array of coordinates using a custom PNG marker icon?
I am using OpenLayers 5.
The simplest way to mark an array of coordinates is to use the array in a MultiPoint geometry. If the coordinates are LonLat the geometry will need to be transformed to map coordinates:
var iconFeature = new ol.Feature({
geometry: new ol.geom.MultiPoint([[-90, 0], [-45, 45], [0, 0], [45, -45], [90, 0]]).transform('EPSG:4326','EPSG:3857'),
name: 'Null Islands',
population: 4000,
rainfall: 500
});
Icons will by default be displayed at the natural size of the image, but you can change that by setting a scale option:
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** #type {module:ol/style/Icon~Options} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'https://openlayers.org/en/v5.3.0/examples/data/icon.png',
scale: 0.5
}))
});
http://mikenunn.16mb.com/demo/OL_5.3.0_multi-icon.html
I would like to have a mask over the whole page which does not get removed until the entire page has completely loaded. More specifically, I have a map created with OpenLayers and GeoExt and I am trying to use an ExtJS loadMask. However, I have not been able to find any other way of doing this other than using a manual setTimeout which I do not want to use. I'd much rather have the mask removed only if the page is completely loaded. I have tried to use the 'loadend' event on the openLayers map as well as windows.onload etc:
My map and loadMask config:
var mask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
mask.show();
Ext.onReady(function() {
var options = {
controls: [new OpenLayers.Control.Navigation()],
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
units: 'm',
allOverlays: false
}
var map = new OpenLayers.Map(options);
map.events.register("loadend", map , function() {
mask.hide(); alert('howdy');
});
var mapPanel = new GeoExt.MapPanel({
title: "Map",
map: map,
id: 'mapPanel',
layerStore: map.layers,
//Set the map to be centered at specified longitude/latitude, transform our layers (SRID=4326) to display properly on Google
//base layers (SRID=900913)
center: new OpenLayers.LonLat(95.20, 30.34).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")),
zoom: 7,
region: "center",
tbar: [measureLength, '-', measureArea, '-'],
bbar: [
{
xtype: "label",
text: "Scale = 1 : "
}
],
items: [{
xtype: "gx_zoomslider",
vertical: true,
height: 300,
aggressive: true,
x: 10,
y: 20,
plugins: new GeoExt.ZoomSliderTip()
}]
});
It seems this event never happens as I never get an alert message. I really really want to get this working, other attempts were:
window.onload = mask.hide();
after the Ext.onReady and at the end of the </body> tag, but then the mask is hidden way before the map is done loading. Could anyone share some insight, I'd really appreciate it!
Add the event 'onMapReady' just after the items like so:
onMapReady: function() {
Ext.getBody().unmask();
}