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
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',
I found the below code in the MapBox website, I am unable to find out how exactly the data is received to plot the data-driven circles on the map. There is a url "mapbox://examples.8fgz4egr" present in the 'source' but what kind of data is it ? is it json or what ? How do I change the source and put my own ?
https://www.mapbox.com/mapbox-gl-js/example/data-driven-circle-colors/
<script> mapboxgl.accessToken = 'ACCESS_TOKEN; var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
zoom: 12,
center: [-122.447303, 37.753574] });
map.on('load', function () {
map.addLayer({
'id': 'population',
'type': 'circle',
'source': {
type: 'vector',
url: 'mapbox://examples.8fgz4egr'
},
'source-layer': 'sf2010',
'paint': {
// make circles larger as the user zooms from z12 to z22
'circle-radius': {
'base': 1.75,
'stops': [[12, 2], [22, 180]]
},
// color circles by ethnicity, using data-driven styles
'circle-color': {
property: 'ethnicity',
type: 'categorical',
stops: [
['White', '#fbb03b'],
['Black', '#223b53'],
['Hispanic', '#e55e5e'],
['Asian', '#3bb2d0'],
['Other', '#ccc']]
}
}
}); }); </script>
It's vector tiles as you can see from the type value of the source property. Here is an in depth explanation on what vector tiles are and how they work: https://www.mapbox.com/vector-tiles/
Very roughly it's GeoJSON sliced into map tiles.
For simplicity's sake you can switch out the source for a geojson source and connect the circle layer to it:
map.addLayer({
type: 'circle',
id: 'my-layer',
source: {
type: 'geosjon'
data: /* url to GeoJSON or inlined FeaturedCollection */
}
})
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.
I am following this example to visualize data on a map using mapbox. I use the following code:
<script> mapboxgl.accessToken = 'ACCESS_TOKEN; var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
zoom: 12,
center: [-122.447303, 37.753574] });
map.on('load', function () {
map.addLayer({
'id': 'population',
'type': 'circle',
'source': {
type: 'vector',
url: 'mapbox://examples.8fgz4egr'
},
'source-layer': 'sf2010',
'paint': {
// make circles larger as the user zooms from z12 to z22
'circle-radius': {
'base': 1.75,
'stops': [[12, 2], [22, 180]]
},
// color circles by ethnicity, using data-driven styles
'circle-color': {
property: 'ethnicity',
type: 'categorical',
stops: [
['White', '#fbb03b'],
['Black', '#223b53'],
['Hispanic', '#e55e5e'],
['Asian', '#3bb2d0'],
['Other', '#ccc']]
}
}
}); }); </script>
My question is that I have a size-variable dataset, which is the result of user queries, and I would like to visualize my dataset.
How to use mapbox to obtain this behavior?
Thank you.
If the data is small enough, you simple load it all into the browser as a GeoJSON object, then display it with a geojson source. See this example.
If the data changes, you simple update the source object with .setData(newdata): example.