We are currently building an asset tracking widget using Mapbox-GL.
When zoomed in, we show the actual assets, and this works fine.
But, when zooming out, we would like to switch to a cluster view to get a proper overview of how many assets are where.
From my understanding, such layer needs to have a predefined datasource. eg. GeoJson.
Is there any way to feed Mapbox-GL data from live JS data?
The assets themselves are markers, an afaik there is no way to switch from makers to something else.
So I assume we would have to generate the datasource from the data that makes up the markers somehow?
The sources seems to be using URL's for getting the actual data so I'm at loss here,
Can I transform a set of geo points into something that MapboxGL can use as a data source?
It's rather confusing what you are asking, but in general, there is no problem with updating data live.
Create the data source:
map.addSource('assets', { type: 'geojson', data: { type: 'FeatureCollection', features: [] }})
Then update it:
map.getSource('assets').setData({ ... })
I didn't understand what you mean by:
such layer needs to have a predefined datasource. eg. GeoJson.
or
The assets themselves are markers,
or
an afaik there is no way to switch from makers to something else
Related
I'm ne to the related platforms but trying to solve for pushing the data in "?key=key&value=value" when appended to a URL into the GTM data layer.
I've read through the conventional guidance, created URL variables in GTM and Data Layer variables linked to these.
The point where I am struggling is that I currently have this:
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({'dlkey': 'dvalue'});
As in place to push the variables to the data layer, but in the preview I see I am getting nonsense:
Data layer after preview
I am using a stock website to play around with.
This is what the Variables output looks like:
enter image description here
Based on this query parameter: ?key=animal&value=donkey
would really appreciate a nudge in the right direction
Display the points at which they merge , I was not able to find any library .....
Displaying any form of charts in iOS can be done in 2 ways.
Using webView to load a html string with the javascript files imported into it.
Using stringByAppendingFormat you can change the data points and refresh the webview.
http://www.fusioncharts.com/blog/2012/02/create-charts-for-iphone-and-ipad-apps-using-fusioncharts-xt/
Using a library to display them Natively. Something like Charts by Daniel Iohen Gindi. It is a bit extensive so just use the line Charts in your case and ignore the others.
https://github.com/danielgindi/Charts
Using the 2nd method (native) will always perform better, but the simplicity of html5 charts make it very easy to implement
To obtain points when lines meet is basically saying when 2 data has the same value. So you can just add an if statement and print the value out or store it as a variable.
I am trying to exclude certain features from being clustered, by using the geometryfunction as described in the API here:
http://openlayers.org/en/latest/apidoc/ol.source.Cluster.html
It is recommended to return null, when the feature should not be considered for clustering. I would expect that to mean, that the feature would still be shown, but not included in clusters. What i see is, that the feature is not shown at all. Is this to be expected?
IconLayer.clusterSource = new ol.source.Cluster({
distance: 40,
geometryFunction: this.clusterFunction,
source: mySource,
});
private clusterFunction(icon: Icon) {
return icon.geo.isMoving ? null : icon.getGeometry();
}
Seems like it cant be done that way. See this answer on github:
https://github.com/openlayers/ol3/pull/4917#issuecomment-224875452
As describe in the above link, a possible solution is to create a 2nd vector layer and show the non clustered features there.
EDIT: For the record i ended up creating two vector layers. But instead of using geometryFunction to disable rendering on the first layer, i simply removed the feature in question from the source of the first layer and added it to the second.
I'm currently struggling with the problem of multilingualism in an SPA.
I've come up with several solutions, like building a wrapper for the resources resx files, or saving all labels in the database, but I am wondering if any of you have found some solution which automates these steps.
Are there any practices which are specific for this problem?
For a reasonable amount of literals, I suggest to save the resources in the DB or in a .RESX file in the server. When the user logs in or you detect the language that will be used, the literals are requested by the application and saved either in a collection of your translation module or in the LocalStorage of the browser (this could be a good approach for large data).
Then this module could have some methods to retrieve the messages, probably passing a key.
Using this solution you could inject this module in the viewmodels that need to show translated literals and acces them through the view:
<p data-bind="text: resourceManager.get('M01')"></a>
For large applications that would require huge localization data to be transfered, maybe some kind of modularity could be applied and only load the resources really needed for each module/section.
I don't think making recurrent requests to the server to get the translated literals is a good practise. SPA's should provide a good user experience and loading the translated literals from the server could be a blocking issue. Text is not like an image, you can render a page without all the images loaded, imagine rendering a page without the text :o
Anyway, I think the best solution would be to keep the server as repository and create a custom JS module that takes care to get data in one or multiple loads and is able to store it somewhere in the client.
I've solved my own problem, using a custom binding and i18next.
First, I've implemented i18next for translation of my labels/buttons and other resources.
Secondly, I've added a custom Knockout bindingHandler:
ko.bindingHandlers.i18n = {
init: function (element, valueAccessor) {
var translateKey = valueAccessor();
ko.utils.setTextContent(element, $.t(translateKey));
}
};
Finally you can add the following code to your views:
<span data-bind="i18n : 'buttons.cancel'"></span>
This will automatically get the correct resource, and Knockout will handle the bindings.
Hopefully this will help others struggling with the same problem.
I'm currently developing a website in ASP .NET MVC and I require functionality for a user to be able to draw a picture on a canvas which can be saved in a database. What is the best method for doing this? preferably a very lightweight solution. I was thinking flash would be the most accessible platform and there may be some good free solutions.
Thanks
Flash can do it pretty easily, though you'll have to get your back-end set up to enable it. Basically you can draw anything on your stage to a bytearray of pixel data, then encode that bytearray to comply with for instance the .PNG specification. Then you send the whole package over to your back end as a byte array and make sure that your server-side scripts know to write it as a .png file to your server, then save the location in your database. Does that make sense?
A broad example can be found here on the Flex Cookbook: http://cookbooks.adobe.com/post_Creating_a__png_file_from_a_webcam_image-12732.html
You can do this in DotNet using the canvas.
canvas.SaveAs(dstfile, "Quality=high");
Here is the tutorial: http://www.websupergoo.com/helpig6net/source/3-examples/1-drawimage.htm
No need to use Flash.
An excellent way of saving an image is to use the native toDataURL method.
var element = document.getElementById('drawingCanvas');
var data = element.toDataURL();
// data holds the base64 encoded image of the canvas
From there you can post it asynchronously to the server
$.ajax({
'type': 'post',
'dataType': 'json',
'data': {'image': data},
'url': '/json/image_converter.php'
});
and convert it to an image using ImageMagick:
list($header, $data) = explode(',', $_POST['image']);
$image = base64_decode($data);
$magick = new Imagick();
$magick->setFormat('png');
$magick->readImageBlob($image);
$magick->writeImage('/home/dude/imagefile.png');
Edit: Oh, and of course I forgot to say that IE doesn't support canvas, hence no toDataURL method. Even with explorer canvas workaround.
You should be able to do something like this in Silverlight... Silverlight should be able to, without difficulty, translate the mouse movements into line strokes. I don't know if there is a pure JavaScript solution too.
User MouseUp,mouseDown and MouceMove events along with LintTo,MoveTO events of canvas (all javascript) to draw a picture and then use canvas.toDataURL() to save this picture in a base64 string in yr database.