anyone got mapdeck working with OSGB vector tiles? - mapdeck

Trying to stretch my understanding of how mapdeck can plot maps and the new (new to me) Ordnance Survey Vector Tile API that can display 3D buildings
See
https://labs.os.uk/public/os-data-hub-examples/os-vector-tile-api/vts-example-3d-buildings
Has anyone any advice about how to reference the labs.os.uk data as a layer in mapdeck?

I suspect it is not possible to set a transformRequest function when using Mapbox via Mapdeck.
But you can probably do it by downloading the tile json from https://api.os.uk/maps/vector/v1/vts&key=your_os_api_key&srs=3857
Edit by appending &srs=3857 to the "tiles" url.
Save the edited tile json to your server.
Then download a copy of the 3d style json from https://github.com/OrdnanceSurvey/OS-Vector-Tile-API-Stylesheets/blob/master/OS_VTS_3857_3D.json
Edit by appending &key=your_os_api_key to the "sprite" and "glyphs" urls, and edit the "sources" "url" entry to point the tile json on your server.
Save the edited style json to your server.
Hopefully Mapdeck can then be used with style = parameter set to the url of the style json on your server.

Related

Pushing key/value pairs to GTM data layer from page URL

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

Dynamically generate source data for Mapbox-GL layer

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

Create custom Map for Highmaps using Shapefiles and QGIS

I try to create a custom Map with Highcharts – I need german job center districts. I've done it the way it is described here.
I imported the shapefiles to QGIS an created a highcharts map here. But on this way, all information like the name oft he district got lost. Is there a way to keep it? Because there are a lot of districts – I don't want to write all single names by my own.
I was able to generate GeoJSON from the provided shapefile (the one that you provided me with via email) and place it in the JSFiddle boilerplate (http://jsfiddle.net/highcharts/xbzxfx2L/). Empty map displayed without any problems. To add values to the regions and also to display data labels you need to add adequate data and link it to the mapData (more about it in the API link below). I have prepared an example for you. Simply, copy the content of created GeoJSON (generated from the shapefile using QGIS, as described here: https://www.highcharts.com/docs/maps/custom-geojson-maps) to the textarea and click run button. The map with the values should show up. Also, you could try to use map of Germany from our maps collection. It can be found here: http://code.highcharts.com/mapdata/.
API Reference:
https://api.highcharts.com/highmaps/series.map.joinBy
Example:
http://jsfiddle.net/w20e8vja/

Using JSON, display all images into UICollectionView from web directory

I'm new to iOS dev and need a UICollectionView to display all images in async within a folder on my webserver.
Let's say the folder is: www.website1.com/img/new/
I will have a JSON file that shows text and an image pertaining to that text. Something really basic like:
{"Items":[
{"URL":"URL.com/img1.jpg", "TEXT":"TEXT1"},
{"URL":"URL.com/img2.jpg", "TEXT":"TEXT2"},
{"URL":"URL.com/img3.jpg", "TEXT":"TEXT3"}]}
The code simply needs to parse the JSON and update accordingly. What would be the simplest way to achieve this?
Create object form your flux Json
Create and fill data source of your collection , this data source contain all objects
Custom your UICollectionViewCell (imageView)
Manage downloading image since CellView (use cache)
See this article for asynchrone download https://www.appcoda.com/ios-concurrency
hope it help.

Saving a picture from a browser canvas

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.

Resources