I am have a vuejs/nuxtjs application using the gmap-vue package which is a fork of vue-google-maps. I have followed the drawing manager with slot example which is working as shown on the document, good times!
But...
I would like to do two more things
Save the data that I added to the map, how do I access it?
How to load geojson onto the map and then edit it.
Examle below:
More information from further investigation.
I am trying to build up data in the form of geojson
let shapes = [];
for(let shape in this.shapes){
let tmp = {
"type": "Feature",
"properties": {
"id": this.shapes[shape].id || null,
"zIndex": this.shapes[shape].zIndex || null
},
"geometry": {
"type": this.shapes[shape].type,
"coordinates": // where to find shape coordinates?
}
};
shapes.push(tmp)
}
console.log(JSON.stringify(shapes));
displays the following in the console.log
[
{
"type":"Feature",
"properties":{
"id":null,
"zIndex":null
},
"geometry":{
"type":"polygon",
"coordinates": // where to find coordinates?
}
}
]
console.log[this.shapes[shape]];
returns
{__ob__: Observer}
overlay: (...)
type: (...)
How can I access the coordinates?
For anyone else looking for an answer, I hope this helps you out.
const newShapes = [];
this.shapes.forEach((shape) => {
const coords = [];
shape.overlay.latLngs.getArray().forEach((latLng) => {
coords.push([latLng.lat, latLng.lng]);
});
newShapes.push({
type: 'Feature',
geometry: {
type: shape.type,
coordinates: coords,
},
});
});
As shown here: https://diegoazh.github.io/gmap-vue/#getting-a-map-reference
this.$refs.mapRef.$mapPromise.then((map) => {
map.panTo({lat: 1.38, lng: 103.80})
})
is working pretty great.
<gmap-drawing-manager ref="drawingRef">
and
<gmap-drawing-manager :shapes="shapes" ref="drawingRef">
allows to access the same information with this.shapes!
Problem:
I am working on project where I use node.js server that communicate with my spatial DB in PG and my client uses mapbox to vizualize map on his side. After hitting a button, the request is send to server, server to psql, psql to server as result query and then through socket.io back to client, where I want to put my geoJSON / new geometry as new layer on his map after that client buttonclick occurs. Map on client side in HTML is well working and I can interact with it. I use JS inside of HTML page of my client. From there I need to update mapbox map with new geometry after button click.
Code sample:
But I tried this code, but this do nothing after button click and will show no errors in devTool Chrome console:
<script>
mapboxgl.accessToken = 'secretToken-I-have-just-for-ilustr--this-is-working';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v10',
center: [17.10, 48.14], // starting position on Bratislava
zoom: 11 // starting zoom
});
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());
// later SOCKET PROCESSING
$(document).ready(function(){
$('#buttonRun').click(function(e){
map.on('load', function () {
alert("got HERE") // this is working, alert shows itself
map.addLayer({
"id": "route",
"type": "line",
"source": {
"type": "geojson",
"data": {
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[-122.48369693756104, 37.83381888486939],
[-122.48348236083984, 37.83317489144141],
[-122.48339653015138, 37.83270036637107],
[-122.48356819152832, 37.832056363179625],
[-122.48404026031496, 37.83114119107971],
[-122.48404026031496, 37.83049717427869],
[-122.48348236083984, 37.829920943955045],
[-122.48356819152832, 37.82954808664175],
[-122.48507022857666, 37.82944639795659],
[-122.48610019683838, 37.82880236636284],
[-122.48695850372314, 37.82931081282506],
[-122.48700141906738, 37.83080223556934],
[-122.48751640319824, 37.83168351665737],
[-122.48803138732912, 37.832158048267786],
[-122.48888969421387, 37.83297152392784],
[-122.48987674713133, 37.83263257682617],
[-122.49043464660643, 37.832937629287755],
[-122.49125003814696, 37.832429207817725],
[-122.49163627624512, 37.832564787218985],
[-122.49223709106445, 37.83337825839438],
[-122.49378204345702, 37.83368330777276]
]
}
}
},
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#888",
"line-width": 8
}
});
});
});
});
</script>
Even this is not working - even if I set data in click function in a static way, but this data will later change dynamically. If I add that layer out of click event function scope, it is working and layer loads on client map.
Settings / versions:
Windows10 Pro - 64-bit
Google Chrome - Version 69.0.3497.100 (Official Build) (64-bit)
Node.js - v10.11.0
mapbox-gl.js v0.49.0
Q:
Is there any way how to add layer to mapbox map dynamically, please? And later to remove without page refresh? (I still not found answer, even here)
Solution
Okay, I found something I before did not see, concretely this.
I better read documentation, and it is impossible to setup new layers dynamically, but now it is working as follows / you need to:
Out of all scopes define your variables, for example geoJson1, and geoJson2 that you can later edit / fill with function
Setup your layer in advance on map with your ID (as in code below) and fill it for example with goeJson1 or with empty []
In your on click listener function call this: map.getSource('data-update').setData(geojson2);
You just can setup as many layers in advance as you need, and later you can update them.
Code result:
<script>
mapboxgl.accessToken = 'token-from-your-registered-account';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v10',
center: [17.10, 48.14], // starting position on Bratislava
zoom: 11 // starting zoom
});
var geojson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-122.48369693756104, 37.83381888486939],
[-122.48348236083984, 37.83317489144141],
[-122.48339653015138, 37.83270036637107],
[-122.48356819152832, 37.832056363179625],
[-122.48404026031496, 37.83114119107971]
]
}
}]
};
var geojson2 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-122.48369693756104, 37.83381888486939],
[-122.48348236083984, 37.83317489144141],
[-122.48339653015138, 37.83270036637107],
[-122.48356819152832, 37.832056363179625],
[-122.48404026031496, 37.83114119107971],
[-122.48404026031496, 37.83049717427869],
[-122.48348236083984, 37.829920943955045],
[-122.48356819152832, 37.82954808664175],
[-122.48507022857666, 37.82944639795659],
[-122.48610019683838, 37.82880236636284],
[-122.48695850372314, 37.82931081282506],
[-122.48700141906738, 37.83080223556934],
[-122.48751640319824, 37.83168351665737],
[-122.48803138732912, 37.832158048267786],
[-122.48888969421387, 37.83297152392784],
[-122.48987674713133, 37.83263257682617],
[-122.49043464660643, 37.832937629287755],
[-122.49125003814696, 37.832429207817725],
[-122.49163627624512, 37.832564787218985],
[-122.49223709106445, 37.83337825839438],
[-122.49378204345702, 37.83368330777276]
]
}
}]
};
map.on('load', function () {
map.addLayer({
"id": "data-update",
"type": "line",
"source": {
"type": "geojson",
"data": geojson // your previously defined variable
},
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#888",
"line-width": 8
}
});
});
$(document).ready(function(){
$('#buttonRun').click(function(e){
map.getSource('data-update').setData(geojson2);
});
});
</script>
I'm working on an interactive map showing the history of rail transport in a city using Leaflet and some GeoJSON data. My GeoJSON data looks like this:
var lines = [
{
"type": "FeatureCollection",
"name": "stadtmitte_gerresheim",
"startYear": "1902",
"endYear": "2019",
"lineColor": "#DD0000",
"trainID": "001",
"features": [
{
"type": "Feature",
"properties": {
"lineName": "U73",
"station1": "Universität Ost/Botanischer Garten",
"station2": "Gerresheim S",
"startYear": "2016",
"endYear": "2019",
"lineColor": "#DD0000",
},
"geometry": {
"type": "GeometryCollection",
"geometries": [
{
"type": "LineString",
"lineID": "001",
"lineDescription": "Schleife am S-Bahnhof Gerresheim",
"coordinates": [...
]
},
{
"type": "LineString",
"lineID": "002",
"lineDescription": "Gerresheim S bis Ecke Schönaustraße/Heyestraße",
"coordinates": [...
]
}
....
I'm working with several FeatureCollections, that consist of some Features. As you can see the geometry of each feature is defined by a GeometryCollection (that mostly comprises LineStrings).
I'd like to use Leaflet to style each single geometry (the LineStrings from the GeometryCollections) according to its members. At the moment I only manage to style the whole GeometryCollection via the Feature:
L.geoJSON(route, {
filter: function(feature) {
if (checkYear(feature)) {
return true;
} else {
return false;
}
},
style: function(feature) {
switch (feature.properties.tunnel) {
case 'yes': return {color: "#ff0000", dashArray: "1,6"};
default: return {color: "#ff0000"}
}
},
pointToLayer: function (feature, latlng) {
getIconSize();
switch (feature.properties.underground) {
case 'yes': return L.marker(latlng, {icon: stadtbahnIcon});
default: return L.marker(latlng, {icon: strassenbahnIcon});
}
}
}).addTo(mymap);
}
My question: Is it possible to hand individual style functions to different Geometries of the same Feature instead of handing the same style function to all Geometries in this Feature? And if so, how? I guess it should be possible, as Leaflet creates a single path for every Geometry.
Cheers
Is it possible to hand individual style functions to different Geometries of the same Feature?
No.
Leaflet creates one instance of L.Layer per Feature in the GeoJSON, right over here; and the application of the style callback function just loops over the L.Layers corresponding to each feature, it doesn't drill down on nested L.LayerGroups (also, the L.Polylines and L.Polygons created as the result of a GeometryCollection don't have a reference to the original GeoJSON feature nor its properties).
I guess you'll want to use TurfJS' geomEach (or something similar) in order to preprocess your features&geometries.
I am running into some difficulties to remove a geojon polygon from a layer with mapboxGL.
Here the following code to add my geoson polygons where
array_geo is a polygon geometry. Adding the polygon works like a charm,
but I still did not find how to delete my polygons. The only trick I found is to use the removeLayer(id) function which delete the entire layer.
var id="mylayer";
itemObj = {
type:"Feature",
properties: {
description: description,
type: 23
},
geometry: {
type: "Polygon",
coordinates: array_geo
},
};
mpolygons.push(itemObj);
map.addSource(id,{
"type":"geojson",
"data":{
"type":"FeatureCollection",
"features":mypolygons
}
self.map.addLayer({
"id": id,
"source":id,
"type":"fill",
"layout": {'visibility':'visible'},
"paint": {
'fill-color': '#088',
//'fill-opacity': 0.8
}
})
Thanks !
When loading a geoJSON file into a Google Map as a data layer, how does one access the properties of the data layer itself?
I know how to access the individual properties, like posts_here in the below example. What I'm looking to get is the properties for the layer itself- in this example, maxPosts.
$.getJSON("http://example.com/posts/grid.json" + location.search, function (data) {
grid = map_canvas.data.addGeoJson(data);
map_canvas.data.setStyle(function(feature) {
return /** #type {google.maps.Data.StyleOptions} */({
strokeWeight: Math.log(feature.getProperty('posts_here')),
});
})
});
Example of the grid.json I'm loading:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-58,-35],
[-58,-34],
[-57,-34],
[-57,-35],
[-58,-35]
]
]
},
"properties": {
"posts_here": "177"
}
}
],
"properties": {
"maxPosts": "177"
}
}
The API does only parse the features-array of a FeatureCollection, when you want to access additional properties you must implement it on your own.
Based on the given code it isn't complicated, because the geoJson is accessible as object via data inside the $.getJSON-callback, you may simply access the property via
data.properties.maxPosts
I believe you should be able to use getFeatureById(id:number|string) to access information you've added from your geoJSON.