How do I convert geojson into mbtiles automatically? - javascript

I would like to convert geojson into mbtiles either in the client or server side to be loaded in leaflet. I have data that will be inserted into postgesql everyday and I want to turn that into mbtiles when a user views the map. I have used tippecanoe and mbutils to convert it into the format that I need but I need it to have most up to date data.
I have also tried to use the mapbox dataset API but I couldn't get that to work the way I need it to.
My problem is that I have dynamic data that will be updated regularly and I want to convert that to mbtiles, then to vector tiles. One possible solution is to have the server run this every morning to convert the geojson to have fresh tiles everyday. I just cannot find a way to do this properly.
EDIT:
geojsonvt looks like something that could work for me but I can not figure out how to draw this into leaflet 1.0.3.

Related

Google map static api url length is exceeding 2048 char is there any solution ? aim is to save as image

so far I used google map api in javascript as well as in php, I had no problem in creating thousands of markers using these api, but my final aim is to save them as image, so finally I came to know that I have to use static make api, in order to save it as image., so tried static map api with few markers, I could able to save, but when tried with 1000's of markers I did not succeed, through many search on this forum I came to know that url limit is exceeding 2048 char, yes that is true.
So is there any alternate way to save map with thousands of markers ? in case of googlemap api in javascript/php I can see all markers, but nowhere I found solution for how to save them locally ?
whether anyone here found solution to save ? something like screen shot or you can say writing a content of map division to png / jpeg/ gif file ?
Please someone help me.
Thanks.
OK first let's talk TOS. As a couple commenters have pointed out you're not allowed to save maps offline. The specific section 10.1.1(h) which forbids you from using static maps outside of a web based app except in a couple specific situations. Print is not one of those - just in case. Section 10.1.3 also says "No Pre-Fetching, Caching, or Storage of Content" which means you can't take a map and just store it somewhere for later use. Caching for performance reasons is fine.
Now assuming you're OK with both of those things, the static Maps Image API is useful but not really useful for your specific use case. While you can encode polylines using the special encoding function, you can't put on a bunch of markers like you're intending.
One thing you could do is to download the static maps API image without markers. You know the physical dimensions of the image and the bounding box in lat/long. It's trivial to convert that to degrees/pixel. You could use an the PHP image functions to convert the lat/lng to x/y pixels and manually place the markers on the image.
As long as you use the subsequent image output back in your webpage and only cache the image for a specific short period of time (a.k.a performance reasons) you should have no problems with the Maps TOS.
Please note that now (September 2016) the URL limit has been changed to 8192 characters in size.
https://developers.google.com/maps/documentation/static-maps/intro#url-size-restriction
Here is the corresponding feature request.

Choropleth with fixed polygons and updateable region values

I'm trying to make a choropleth map visualization with fixed polygon regions, but variable data for each region that depends on a query. Currently I have the polygon coordinates in KML and SHP format, and I could convert it to GeoJSON if needed.
Basically what I want it to do is to load a map with those regions once, and be able to update the values + fill colors of those regions whenever new data is requested / received through an AJAX callback. The most important is it doesn't unnecessarily reload the region polygons, i.e. I could just supply a JSON object of region id's and their new values).
I already tried using the Google Maps API, but I can't seem to bypass generating an entire new KML file each time I want to load new values. This forces me to unnecessarily reload the region shapes as well, although they never change. I tried caching the KML clientside in a JS object, updating it's values each time new data is received and then re-setting the map (using geoxml3), but this seems to perform rather slow (since the entire KML is being iterated and since it's a pretty large file including all the region coordinates). FusionTables didn't work for me either because I need to fetch the data from my own database, and from what I understand using FusionTables you can only query a FT table.
As far as I know the Gmaps API probably isn't going to work for me. Which other solution could suit my needs best?
Google just added GeoJSON support to the Maps API. This example does something similar to what is described above:
https://developers.google.com/maps/articles/combining-data

How to plot an array of numbers as an image using Javascript?

I would like to plot an array of numbers (int/float/binary/..) as an image using Javascript and I don't know exactly how to do it..
The system is composed of a CORE part done in C++ and a GUI part done in jQuery, and I have to show results calculated by the CORE in the GUI side. I can pass them in any format such as binary files, XML files,... but I don't know how the GUI might plot an array of numbers and show them as an image to the user.. Also It may be useful to have an scale of colours..
any suggestion on doing that? any available library for that purpose? every idea is welcome!
thanks in advance!
cheers
Have a look at d3.js. This library provides plenty of possible visualizations and is quite easy to customize.
Here is a list of plot libs in js:
http://javascript.open-libraries.com/utilities/chart/20-best-javascript-charting-and-plotting-libraries/
You need to format your data in json to get it work. if the data set is very big, better to plot is on server side and send a image file to client.

Easiest way to edit a huge geoJSON?

I'm sitting here with a huge geoJSON that I got from an Open Street Map shape-file. However, most of the polygons are unnecessary. These could, in theory, easily be singled out based on certain properties.
But how do I query the geoJSON file to remove certain elements (features)? Or would it be easier to save the shape-file in another format (working in QGIS)?
Link to sample of json-file: http://dl.dropbox.com/u/15955488/hki_test_sample.json (240 kB)
When you say "query the geoJSON," are you talking about having the source where you get the geoJSON give you a subset of data? There is no widely-implemented standard for "querying" JSON like this, but each site you retrieve from may have its own parameters to reduce the size of data you get.
If you're talking about paring down the data in client-side code, simply looping through the structure and removing properties (with delete) and array items is what you'd have to do.
Shapefile beats GeoJSON for large (not mega) data. It supports random access to features. To get at the GeoJSON features in a collection you have to read and deserialize the entire file.
Depending on how you want to edit it and what software is available you have a few options. If you have access to Safe FME this is by far the best geographic feature manipuluation software and will give you tons of options (it can read / write (and convert between) just about any geographic format). If you're just looking for a text editor that can handle the volume of data I would look at Notepad++ - it can hold a lot of text and you can do find / replace using regular expressions. Safe FME can be a little pricy, but you might be able to get a trial
As Jacob says, just iterate and remove the elements you don't want. I like http://documentcloud.github.com/underscore/#reject for convenience.
If you are going to permanently remove fields just convert it to a shapefile, remove the fields you don't want, and re-export it as GeoJSON.
I realize this question is old, but if anyone comes across this now, I'd recommend TopoJSON.
Convert it to TopoJSON.
By default TopoJSON removes all attributes, but you can flag those you'd like to keep like this:
topojson -o output.topojson -p fieldToKeep,anotherFieldToKeep input.geojson
More info in the TopoJSON command line reference

Embedding an image in an AJAX response

Is it possible (and supported cross-browser) to embed an image into the XML of an AJAX response, and then load that image using JavaScript?
I have a system that does some calculations based on the number of sessions running through it. The results are then graphed, and returned in two parts:
1) XML containing information about the graph, totals, and Image map data allowing the user to click on relevant areas.
2) The graph image.
As the data can change between the two requests (and could be expensive to calculate), I'd prefer to do it in a single request (return the image with the XML). The current implementation caches the stats for a small period so that the results of multiple requests will still match. As the amount of data that needs to be cached is going to be increasing (from ~2.5K to ~1.2MB), I would like to try an alternative method.
NOTE: I do not want to use inline b64 PNG images as they are not supported in IE.
Can you not store the image on the server and send the URL to the client?
As this seems like more work that it's worth, I've decided that a simpler solution would be:
1) Send XML data to the client with the details of what is to be graphed.
2) Client sends a request for the image, including the data to graph (similar to the Google Chart API).
This decouples the chart rendering from the data, and then it can be used in the future to generate generic charts for other data sets. The other benefit is that it doesn't require any caching server-side since only 1 request is used.
You might want to check this link to see if this concept will work. This link maybe useful.
I think trying to combine both set of data in the XML would be interesting.
Have you considered using Google's Chart API?
Well actually you can but it's probably not going to be worth it. It seems like a vector based method such as canvas and the VML alternatives for IE would be a better alternative for rendering graphs. Then you only have to pass the graph data to the browser.
If storing is not an option. Create image in memory and flush the binary image data to response from a script, like a php file. Just use the correct header:
Content-type: image/png
The image gets regenerated every time.
To be absolutely sure the image does not get cached, append some random parameter to the querystring.
You could return the image to the ajax-client, and then include the XML data in a X-HTTP-Header for the image.
But you need to find out if it is possible to read the X-header from the ajax-client though.

Categories