I am modifying features from layer and would like to use similar to "setData()" to a vector layer? From googling some places i read that its not possible to use that setData function to vectors and only to geojsons.
What i am doing is first i get the feature properties from layer
let features = this.map.queryRenderedFeatures({layers:["maakunta-fills"]}).map(item=>{
const copied = {...item}
copied.properties.modified = "some_modified_value"
return copied;
});
and then my wish is i can do something like : this.map.getSource("sourcename").setData(features)
But mapbox will throw error by saying setData is not function (i assume because this "sourcename" is a vector tile. Which looks like this:
this.map.addSource("maakunta", {
type: "vector",
tiles: [tileServiceURL + "base.maakunta/{z}/{x}/{y}.pbf"],
promoteId: "id"
});
The best way to do this is by using setFeatureState. It will not change the vector data but you can change the style and intercept any click events and push the updated data. This of course is limited to the current client session. Ideally you would be updating the source data in a database for example so that when a new user views a new db tile request they will have access to the new data.
I have this:
var map = new mapboxgl.Map
({
container: 'map',
style: 'mapbox://styles/mapbox/satellite-streets-v11',
});
It works. But I also want elevation/fog added to it. Reading the manual for many hours, it seems to me that you either have to specify a URL, like I have done, to a "pre-made style", OR specify an absolutely massive style object full of cryptic and incomprehensible sub-objects such as specific layers and stuff.
There doesn't seem to be a way to simply use that style "template" URL, and add elevation/fog on top of it. I really hope that I'm wrong about this.
Downloading the JSON object representing their "pre-made style", I was presented with a massive ocean of data, impossible to manage in any sensible manner. They cannot possibly mean that you should try to edit/adapt/extend that.
I must be missing something. Is there really no way to do what I do now, but enable the "terrain" and "fog" features?
https://docs.mapbox.com/mapbox-gl-js/style-spec/terrain/
https://docs.mapbox.com/mapbox-gl-js/style-spec/fog/
Naturally, I tried adding them to the Map object at first, assuming this was how it was done, but it was just ignored.
Again, if I were to make my own style object, it would be required to contain all sorts of scary and incomprehensible stuff: https://docs.mapbox.com/mapbox-gl-js/style-spec/root/
To be frank, I have no idea who would ever want a 3D map which can support elevation/height differences and realistic fog/lights, yet not use those features. To me, this seems like it would be a simple boolean setting that you turn on/off, and which is enabled by default.
I have not tried this, but you should be able to set fog dynamically like this:
var map = new mapboxgl.Map
({
container: 'map',
style: 'mapbox://styles/mapbox/satellite-streets-v11',
});
map.on('load', () => {
map.setStyle({
...map.getStyle(),
"fog": {
"range": [-0.5, 3],
"color": "white",
"horizon-blend": 0.1
}
})
});
See the documentation here.
I need to display a map on a web page with hundreds of interactive individual layers. I add each layer to the map using a .kml file with JavaScript like this:
customLayer1 = L.geoJson(null, {
style: function(feature) {
return { color: 'rgba(255,0,0,0.99)' };
}
});
runLayer1 = omnivore.kml('LINK TO KML FILE #1', null, customLayer1);
runLayer1.addTo(map);
This will result in hundreds of network requests to load each .kml file individually. If there is a way to create a layer using the existing text inside a JavaScript variable (instead of loading it from a Url) I can combine all my .kml files into one and fetch it in one request and then explode it on the client side to be added as different layers to the map. Can I do that? Or do you suggest any other solution?
I have in the OpenLayers 2 project this construct:
var pois = new OpenLayers.Layer.Text( "Románské kostely", {
location:"./kostely.tsv",
projection: map.displayProjection
});
map.addLayer(pois);
Actually, the ease with which I can create a new layer from just TSV file was one of the reasons why I started to play OpenLayers in the first place.
I have now this as a port to OpenLayers 3:
new ol.layer.Vector({
title: "Románské kostely",
source: ol.source.Vector({
format: new ol.format.TextTSV(),
url: "kostely.tsv"
}),
style: new ol.style.Style({
image: new ol.style.Icon({
src: "Ol_icon_blue.png"
})
})
})
Except, obviously, there is no ol.format.TextTSV(). The best what I can find in API are a way more complicated constructs like GeoJSON etc.
Did anybody created an equivalent function for the OpenLayers 3 API? Or is there a convertor somewhere from the old TSV file to some supported format?
It should work by using csv2geojson library provided by MapBox (to convert CSV/TSV to GeoJSON), combined with a ol.source.Vector using ol.format.GeoJSON.
I produced an example to illustrate this use case (more complicated than the solution you expected). I didn't bother with the style for the demo and I also use only Vanilla JS (it means "pure JavaScript", no third party library) for Ajax calls.
If you really need a new ol.format.TextTSV(), you will need to make your own extension to the core library. You can also ask on the mailing list if it's on the project roadmap.
Have you tried it in WKT format
var format = new ol.format.WKT();
http://openlayers.org/en/v3.4.0/apidoc/ol.format.WKT.html
I am trying to use Google charts to embed images of charts in the emails. So Each user will have a unique graph.
Can we use the API and embed a unique URL that will render the Charts and deliver an Image to the email Client.
You can get a PNG version of your chart using chart.getImageURI() like following:
Needs to be after the chart is drawn, so in the ready event!
var my_div = document.getElementById('my_div');
var my_chart = new google.visualization.ChartType(chart_div);
google.visualization.events.addListener(my_chart, 'ready', function () {
my_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
});
my_chart.draw(data);
It is possible to generate a url that will render an image of a chart using the Google Chart Wizard. However, that service recently (April I believe) because deprecated. It still works fine, but for a long term solution, you may have to come up with another method.
Edit
Another method would be to generate the image and save it to your server before sending the email. You can do this by having a page on your server dedicated to generating the chart by parsing a given slug, and when the chart is loaded send a POST request with the image data. You can access the data URI by using a hidden canvas (HTML5 is required) and the canvg javascript plugin:
chart_area = document.getElementById("chart_div").getElementsByTagName('iframe')[0].contentDocument.getElementById("chartArea");
svg = chart_area.innerHTML;
canvas = document.getElementById("hidden_canvas");
canvas.setAttribute('width', chart_area.offsetWidth);
canvas.setAttribute('height', chart_area.offsetHeight);
canvg(canvas, svg);
image_data_uri = canvas.toDataURL("image/png");
I had the same issue not so long ago and found out your question on SA. ince Google Image Charts is deprecated since 2012, I built https://image-charts.com to be a replacement of Google Image Charts in order to embed charts and graphs into emails (right click on the images bellow and checkout the URL):
https://image-charts.com/chart?chs=700x300&chxt=x,y&chl=2018|2017|2015&chd=t:60,40,20&cht=pa&chdl=Image|Charts|Rocks&chf=ps0-0,lg,45,ffeb3b,0.2,f443367C,1|ps0-1,lg,45,8bc34a,0.2,0096887C,1|ps0-2,lg,45,EA469E,0.2,03A9F47C,1&chan
https://image-charts.com/chart?cht=lc&chs=700x300&chd=t:10,25,30,40,12,48,100,20,47,29,84,30,27,50,70&chxt=x,y&chxl=0:|Jun|Jul|Aug|Sep|Oct|Nov|Dec|Jan|1:||50|100&chm=B,FCECF4,0,0,0&chco=E4061C&chdl=Coffee consumed&chma=0,0,20,10&chl=||||||such a very big project!
https://image-charts.com/chart?chs=700x300&cht=gv&chl=digraph {a -> b[label="0.2",weight="0.2"];a -> c[label="0.4",weight="0.4"];c -> b[label="0.6",weight="0.6"];c -> e[label="0.6",weight="0.6"];e -> e[label="0.1",weight="0.1"];e -> b[label="0.7",weight="0.7"];}
A little late to the party, but we just built https://ChartURL.com for this exact need because despite this question being almost 3.5 years old, the best solution out there until ChartURL was the deprecated Google Image Charts API :)
Hope this helps someone out!
To render Google Charts as an image, you can use Google Charts Node, an open-source project that uses Puppeteer to render the charts.
google-charts-node is available as an NPM library and can be used like so:
const GoogleChartsNode = require('google-charts-node');
function drawChart() {
const data = google.visualization.arrayToDataTable([
['City', '2010 Population',],
['New York City, NY', 8175000],
['Los Angeles, CA', 3792000],
['Chicago, IL', 2695000],
['Houston, TX', 2099000],
['Philadelphia, PA', 1526000]
]);
const options = {
title: 'Population of Largest U.S. Cities',
chartArea: {width: '50%'},
hAxis: {
title: 'Total Population',
minValue: 0
},
vAxis: {
title: 'City'
}
};
const chart = new google.visualization.BarChart(container);
chart.draw(data, options);
}
// Render the chart to image
const image = await GoogleChartsNode.render(drawChart);
Now you can save the image buffer as a file or return it as an HTTP response, etc. It looks like this:
The Google Charts node renderer is also available as a web service, as described here, so you can use it in any language besides JS.
If you're interested in using a more universal open-source chart format, you can also use QuickChart, a Chart.js render API.