Part of my web application will allow users to click on a certain territory of a map and have it highlight that section in the Google Maps that I have on the page. This is pretty standard on a lot of websites, but I'm having a hard time with the amount of data that's there.
I'm trying to generate data from http://global.mapit.mysociety.org/, which provides me several output options for actual coordinates that I want to turn into polygons, but exporting the WKT, GeoJSON, or the KML is HUGE - 700-900 KB for EACH instance, and I don't understand how this website is able to incorporate these polygons without loading this data, (Chrome doesn't show any item over 50 KB being loaded.)
What I'm doing NOW:
I downloaded a few of the WKT files, then used PHP to translate that into a javascript string so :
var coordinates = [
new google.maps.LatLng(1.1, 1.2),
...
new google.maps.LatLng(1.1, 1.2)
];
I did this with about 10 locations, saved my file, and it was 9 MB - all from these super long coordinates strings...
How do I do this more efficiently, as this is obviously not the way to incorporate polygon data into a dynamic map load?
Don't translate it on serverside, the string new google.maps.LatLng will blow up your file.
When you use e.g. geoJSON you may load the polygon via loadGeoJson.
The linked page uses geoJSON to draw the polygons(e.g. http://global.mapit.mysociety.org/area/686972.html loads these data: http://global.mapit.mysociety.org/area/686972.geojson?simplify_tolerance=0.0001 ~100KB)
Another option would be to encode each single polygon(polyline) on serverside and reassemble/decode the polygons via JS.
See https://developers.google.com/maps/documentation/utilities/polylinealgorithm and https://developers.google.com/maps/documentation/javascript/reference#encoding for more details.
Related
I am building PCB Assembly website https://pcbmagic.com/pcb-quote.php. where I have to retrieve data from Gerber file and use them so is there any API or any other way to get their data.
there are so many websites that are using these features but I am not able to find the solution to how they are doing it.
https://www.nextpcb.com/quote-gerber
https://jlcpcb.com/
I'm working on a web based graph application which connects different nodes via lines. To do so the connection lines are created by the library Leader-Lines. These connections are svg elements, which consist out of different elements as masks, markers, rectangles, etc. (they consist out of many lines of code so I outsourced the code into this JSFiddle)
In case the user finishes the graph he should be able to export the graph as an image. My plan was to create any image format from the html elements of the graph and then pass the image as a base64 string to the back-end to process it further.
I tried the following libraries to achieve this:
html2canvas
domvas
dom-to-image
rasterizeHTML
For html2canvas this is how I used the library:
html2canvas(document.querySelector("#myGraphContainerDiv"),
{ allowTaint: true }).then(canvas => {
var graphAsbase64 = canvas.toDataURL("image/png");
//Some ajax call to send the string to the backend
});
The problem: None of them was able to convert the svg connection.
My next step was to try to convert the SVG to a canvasand then try to convert the graph. This method was suggested in many SO posts. For this I used the library canvg but this didn't work either. For this I used the code from this answer.
Another problem I faced with this method was that with a big number of connections the process took longer and longer (over 1 minute with 8 connections).
The question: Is there a way to achieve the conversion of these connections or is this simply not possible at the moment?
I'm ingesting a large geoJSON file in leaflet with somewhere near 19,000 features (points). This results in a massive amount of clutter on the map and is unmanageable.
The goal is to use geolocation to mark my location, draw a 5nm circle around it, and only display geoJSON features that reside within that geometry.
A condensed version of my project is:
https://jsfiddle.net/blintster/d2ucock2/3/
I've worked out finding my location and drawing the circle, but I'm not able to parse the geoJSON features on location. Ideally the output would function like this: https://esri.github.io/esri-leaflet/examples/spatial-queries.html However, that method only seems to apply to L.esri.FeatureLayer and this is a locally imported geoJSON.
The geoJSON layer in question is below where [airports] is the 19,000 entries:
var allairportsLayer = L.geoJson([airports], {
filter: airportFilter,
onEachFeature: function(feature, layer) {
layer.bindPopup(feature.properties.Type + " - " + feature.properties.FacilityName + "<br>Contact Info: " + feature.properties.Manager + "<br> Phone: " + feature.properties.ManagerPhone);
}
}).addTo(map);
function airportFilter(feature) {
if (feature.properties.State === "MD") return true
};
I was able to pair down the results slightly by using the filter method by state but that only allowed me to determine if an attribute meets a specified criteria.
I'v also tried the following method: https://www.mapbox.com/mapbox.js/example/v1.0.0/marker-radius-search/
with no luck.
Does anyone know of any additional methods I could try to parse the data so it only shows points that reside within a geometry?
However, that method only seems to apply to L.esri.FeatureLayer and this is a locally imported geoJSON.
esri-leaflet piggybacks off ArcGIS Server and ArcGIS Online services which provide a backend hosted database that supports spatial queries.
obviously Esri isn't the only option, but your use-case is a perfect example of a situation when it is beneficial not to fetch an entire dataset that you don't plan on displaying.
you could create a arcgis developer account and then sign into arcgis.com to upload your .geojson file as a new hosted service for free.
you could find another hosted service that provides comparable functionality
you could run your own server, install your own PostGIS database and hook up spatial web queries yourself.
you could continue to download all 19,000 features on page load and either:
a) simplify your search and test whether the relevant L.latLngBounds.contains() each point.
b) use something like turf to test the relationship with an actual circle. (one caveat worth mentioning here is that leaflet doesn't include any built in methods for generating actual L.circle geometry so you'd need more custom logic for that too. i wrote something similar here that you are welcome to ripoff).
Using Google Maps api v3, I am trying to reconstruct polylines (and other shapes) on a map when my (.jsf) page loads. The points of the polyline are stored in an Oracle database. I have tried passing both a XML and a JSON file to some javascript code that will generate the points on the map. However, Oracle ADF does not open the file but instead opens a 'loopback script'.
Is there a particular configuration that needs to be set in order to achieve this? Or am I going about this all wrong? Is there an alternative way to reconstruct the shapes on a map from the database using Oracle ADF?
I will be grateful for any guidance or direction.
you are using oracle adf's MAP component or google map,
see this ,hope it will help
https://blogs.oracle.com/middleware/entry/integrating_google_maps_with_adf
I want to create a territories map on Google Maps that follows zip code boundaries but have some of my territories include multiple zip codes. I was wondering if there is a way to do this by listing which of google's pre-mapped zip code boundaries (with the hope that Google has a zip code boundary list to pull from?) I would like to combine in each group.
For example:
Territory A:
84000,
84001,
84002,
etc.
Then have,
Territory B:
84108,
84101,
84115,
etc.
And so on covering the entire USA.
Any tips or advice would be great. I'm looking to use pre-defined boundaries so it will be easier to update and any zip code changes country-wide will automatically be accounted for.
Thanks!
Google's Zip Code Boundaries are not available through the API or for download or any other mechanism. That is solely a feature of maps.google.com. To do this, you would have to source the data yourself. There are a number of companies that do this, just search on zip code boundaries download. The US Census provides something called a Zip Code Tabulation Area, which is not the same but related and potentially useful.