I'm trying to run this example about how to use Flask-Admin displaying maps: https://github.com/flask-admin/flask-admin/tree/master/examples/geo_alchemy.
In README.rst, there's this instruction:
You will notice that the maps are not rendered. To see them, you will have to register for a free account at Mapbox and set the MAPBOX_MAP_ID and MAPBOX_ACCESS_TOKEN config variables accordingly.
I already have a valid MAPBOX_ACCESS_TOKEN, and I went to MapBox to look for a MAPBOX_MAP_ID. There I read that MAP_ID was deprecated, and now I'll have to obtain a tileset ID, and it's described as a label composed by <my_mapbox_user_name>.the_tileset_ID itself.
So I located the code as they described in the instructions (in my case, mapbox-streets-v8) and fulfilled the config.py parameters:
MAPBOX_MAP_ID = '<my_mapbox_user_name>.mapbox-streets-v8'
MAPBOX_ACCESS_TOKEN = 'pk.eyJ1...'
However, I couldn't see any map displayed or any error message.
How can I fix it?
I think there is a small bug in file Lib\site-packages\flask_admin\static\admin\js\form.js. The original URL generated to get a tile is:
https://api.mapbox.com/styles/v1/mapbox/<MAPBOX_MAP_ID parameter>/tiles/12/2258/2457?access_token=<MAPBOX_ACCESS_TOKEN parameter>
However, the correct one is:
https://api.mapbox.com/styles/v1/<MAPBOX_MAP_ID parameter>/tiles/12/2258/2457?access_token=<MAPBOX_ACCESS_TOKEN parameter>
That is, I had to remove the mapbox word from the URL.
To do that I made some changes in form.js file:
//var mapboxUrl = 'https://api.mapbox.com/styles/v1/mapbox/'+window.MAPBOX_MAP_ID+'/tiles/{z}/{x}/{y}?access_token='+window.MAPBOX_ACCESS_TOKEN
var mapboxUrl = 'https://api.mapbox.com/styles/v1/'+window.MAPBOX_MAP_ID+'/tiles/{z}/{x}/{y}?access_token='+window.MAPBOX_ACCESS_TOKEN
Then, it's working now:
We are building a series of tests using TestCafe. How do we test if a point or path in a leaflet control is rendered correctly? To be more specific we are trying to test the lat-lon data of a circle marker in the map. But, we do not have any leaflet map/marker object available in the scope of testcafe scripts.
References:
Unit testing leaflet maps
I created a simple example of an assertion for a path element in a leaflet control on the getting started demo page https://leafletjs.com/examples/quick-start/
import { Selector } from 'testcafe';
fixture `fixture`
.page `https://leafletjs.com/examples/quick-start/`;
test('test', async t => {
await t
.switchToIframe('iframe')
.expect(Selector('path').withAttribute('stroke', 'red').getAttribute('d')).eql('M141.20355555554852,171.94704600190744a42,42 0 1,0 84,0 a42,42 0 1,0 -84,0 ');
});
Please provide us with an example of your testing page so we will be able to offer you something more specific for your scenario.
I have created a Mapbox style using Mapbox Studio and set it to be used over WMTS. The URL of the style is:
https://api.mapbox.com/styles/v1/username/styleId/wmts?access_token=token
where styleId, username and token are variable fields.
When I try to create a WMTS layer in OpenLayers using the url above, the tileGrid is created successfully using createFromCapabilitiesMatrixSet but I get a response error Invalid query param layer from Mapbox.
After some investigation, I noticed that:
The response error persists for all query parameters that are appended from OpenLayers when creating the tile load function. It looks like that Mapbox does not recognise them properly.
OpenLayers website and Mapbox also give examples on using XYZ layers for integration between them.
So, is this some kind of unsupported feature of OpenLayers or do I need to configure anything additional when creating the WMTS OpenLayers?
It's much simpler to set up as a standard OpenLayers XYZ layer using
url: 'https://api.mapbox.com/styles/v1/username/styleId/tiles/{z}/{x}/{y}?access_token=token'
as in the examples.
Mapbox provides WMTS support for compatibility with some other systems. It can also be used in OpenLayers, the setup would be
var parser = new ol.format.WMTSCapabilities();
fetch('https://api.mapbox.com/styles/v1/username/styleId/wmts?access_token=token').then(function(response) {
return response.text();
}).then(function(text) {
var layer = new ol.layer.Tile({
source: new ol.source.WMTS(
ol.source.WMTS.optionsFromCapabilities(parser.read(text), {
layer: 'styleId',
matrixSet: 'EPSG:3857'
})
)
});
....
....
....
....
});
Both methods will ultimately load the same tile urls, so there's no advantage in using WMTS where XYZ is supported.
I'm learning how to use Leaflet to make online interactive maps for public health purposes (experienced ArcGIS user, Mapbox TileMill). I'm taking it slow so I understand each piece of code, and I'm working from the Leaflet choropleth example as I want to make choropleth maps. The current task I'm stuck on is how to correctly add topoJSON data to a Leaflet map. I've tried the following code to convert the us states geoJSON to topoJSON, but it hasn't worked. Any suggestions?
var geojson;
var test = topojson.feature(us-states-topo, us-states-topo.objects.layer1 );
geojson = L.geoJson(test, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
I've reviewed the topoJSON API reference, but I'm sure I must be making a simple error as I am a beginner to JavaScript in general. Thank you all for your help!
Best
Eli
I'd recommend using your browser debug tools to start through debugging this.
var test = topojson.feature(us-states-topo, us-states-topo.objects.layer1 );
This is not valid JavaScript: us-states-topo is not a valid variable name, since -s are not permitted.
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.