D3 JS Exported Maps Image Quality Issue - d3.js

We are using d3.js to create the maps in our application via reading .csv file that has latitude and longitude to plot the location but sue to huge data (~200k latitudes and longitudes in the .csv file) the maps creation is taking around 1 minute.
To avoid this much of delay we are exporting the maps into an image using SaveSvgAsPng.js library and once the image is created we are displaying the image on the app instead of creating the map every time the user logs into to the application (below is the code snippet from saveSvgAspng.js library)
Now with this approach we are seeing each time the image is exporting differently and there is drop in the image quality of the map (attached the image)
Raising this here to get some help in fixing this issue or if someone has faced this before as this is being the show stopper for our application. Happy to add more details if these are not sufficient.

Related

Add markers to image similar to what the mapping apps do - Xamarin.Forms

I am currently using Xamarin.Forms and I would like to import an image and be able to add markers to it. Similar to what the mapping apps do, but want to be able to do it from an uploaded image or from taking a photo. I would also Like to be able to set a scale on it after the image was uploaded by placing two or more markers and then entering a measurement between those markers.
When displaying an image/photo I would like to place markers on them that would have more info about the pinned location on the image. These pins must be saved in a database so that the next time it's opened the markers will be in the correct location as they were placed the first time.
If anyone knows how I can get started on this, or know of any libraries that allow you to this, it would really be appreciated.
.
Update
Loading the image from file, camera or url is simple enough.
Zooming in and out after the image is loaded was simple enough too. Altering the scale size of the Image by making use of the PinchGesture.
Moving the image around ended up being simple too, and it was achieved by using the PanGesture and altering the TranslationX and TranslationY.
.
.......Still searching for a working and reliable solution for adding Pins/Markers at a location on the image and the markers need to have a click or tap event attached to it.

Using ONS maps with D3

I'm sorry this is probably a very basic issue, but I just can't seem to figure it out.
I wanted to map some data using D3.js and the map shape I wanted to use is provided by the UK's Office for National Statistics. I managed to get their geojson data to display, but as soon as I try to do anything with scaling, transforms, topojson, I've been a complete failure.
I've been through many, many, different approaches and I think it's something about the map data that is causing the issue. If I open the shape files in Mapshaper it looks perfect. If I export as geo or topojson and re-import, it looks perfect. If I try to run geo2svg on the geojson export it produces a lot of data, but nothing visible. If I try to import the original shape file into mapstarter.com it produces a flat line. And if I put the topojson into the D3 v4 bounding example I end up with a load of random triangles.
So, can someone show me how do you get ONS mapping data such as http://geoportal.statistics.gov.uk/datasets/1bc1e6a77cdd4b3a9a0458b64af1ade4_3 to display in a d3 example such as https://bl.ocks.org/iamkevinv/0a24e9126cd2fa6b283c6f2d774b69a2?
Thanks
The data that you have linked to is projected. Mapshaper supports projected data, but using d3.geoProjection with projected data will result in no data being displayed in most situations. You need to ensure your data is in lat long pairs for proper display with a d3.geoProjection.
Luckily, in Mapshaper you can reproject your data. Copy all the files of the shapefile into mapshaper, and in the console change the projection to wgs84 (unprojecting your data):
proj wgs84
This data is now easily displayed and manipulated using a d3.geoProjection. Here is an example using the data that you referenced. Also a screenshot:
Lastly: It is possible to display projected data as well, but this is much less common.

Chart from d3.js to file without displaying on a page first

I am new to d3 but I am hoping that it possible to create a chart in d3 and output the chart to a file without displaying it on a page first. Is it? I would like to include various charts in a pdf document using fpdf and import into the pdf a chart or two.
I have been searching around for a solution to this for some time now. While I can see that you can:
Use d3 (chart.js etc) to generate a chart and display it on screen in a page
Export the image to file on the server
And then create the pdf importing the saved image
But I want to avoid any on screen display and for the image of the chart to be saved to the server directly so that fpdf can import it in.
This seems to me something that would be required frequently but I can't seem to find a solution.
An option seems to be to use something like phantomjs as an interim step but I think that this needs to be running on my host. It would be great if it could be exported to file driectly from d3. Is this possible?

Import kml file as a layer in Polymaps

I have a kml file I want to display using polymaps. The data is from NREL Solar Resource Map.
As a kmz file it shows up quite nicely in google maps and earth respectively, however I am having trouble loading it into my polymaps/d3 environment. Does anyone know how exactly to go about this?
I can post more details if necessary

Mosaicking PDF documents?

I have (or, rather, will soon have) a number of maps created in ArcGIS 10.0 and exported as PDF documents. The maps all show contiguous areas, being rather like the pages in a map book. There will also be a smaller-scale map depicting the entire area (let's call it the "study area"), but with less detail, rather like that page of a map atlas that shows what page depicts what area.
I wonder if there is any way to create thumbnails of the larger-scale maps and mosaic them such as to create an index map of the study area. A user would then be able to see, for a particular point on the smaller-scale map, which of the larger-scale maps depicts that part of the study area. (And perhaps see that map by clicking on the larger map?) Does anyone have any ideas I can implement this? I would prefer exporting the maps in PDF format, but, if I can't do all of the above with PDF, then any other format to which a map can be exported from ArcGIS, such as JPG or TIF, will work.
You should be able to create a PDF which does this.
What you need to do is render each page to a small image.
Then collect each of these images and add them as a mosaic to an index page.
Then put links from each small image back to the original PDF page.
If the hierarchy was more than one level deep you could repeat the process.
You need a PDF component to do this. What you want in terms of features is something which does decent PDF rendering. It's an easy thing to do badly and a difficult thing to do well.
ABCpdf .NET does good quality rendering so it's what I would suggest, but then I would because I work on it. :-)

Resources