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.
Related
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 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 found a sample script on Google Code about : Google Maps Javascript API V3 Overlays - http://code.google.com/apis/maps/documentation/javascript/overlays.html#OverlaysOverview
And I want to apply this code to other countries (France, spain...) but I don't know where/how to find the Geometry code like in this script (see commented line)
Here is the code:
var australia = new google.maps.LatLng(-25, 133);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: australia,
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '815230' // This one
},
styles: [{
polygonOptions: {
fillColor: "#00FF00",
fillOpacity: 0.3
}
}, {
where: "birds > 300",
polygonOptions: {
fillColor: "#0000FF"
}
}, {
where: "population > 5",
polygonOptions: {
fillOpacity: 1.0
}
}]
});
layer.setMap(map);
P.S. I tried to change the google.maps.LatLng(-25, 133) to France Lat&Long but this is used only to center the map on that position.
Thank you for your help
The example you've posted makes use of a FusionTables layer. FusionTables are basically something like a small database or spreadsheet which containt the actual data. The ID that you've commented in the code (815230) is not a coordinate, but the ID of the FusionTable. In fact, you can see the data behind this ID in this link.
You can read more on how to use FusionTables in your maps application in the link that you provided yourself, specifically here. I would recommend reading the article about how to work with FusionTables in general, if you decide to fetch your data from them. You can find a longer article here.