Map Data in JSON format. Easily edit a selection of vertices - gis

I have the Spanish provinces polygons in a JSON file. For one province, the schema looks like this:
{
"geometry":
{
"type": "MultiPolygon",
"coordinates":
[[[
[-7702,-4944],
[-7678,-4979],
[...,...],
[-5967,-4077],
[-5982,-4097]
]]]
},
"type": "Feature",
"properties":
{
"labelrank": 20,
"code_hasc": "ES.CN",
...
"type": "Comunidad Autónoma",
"id": "ES.CN"
}
}
I would like to move the vertices of some provinces as described in the image below. The reason for that is that the visualization looks terrible if I project as it is defined in the JSON (half of the map is just empty space).
Using mapshaper.org I was able to identify the coordinates where I should send the most northern vertex. From here it just a matter of addition to each vertex in all polygons. Before I create a script in Python to do that, I would like to ask the community if there is a software or tool that allows me to select all desired vertices and move them to the desired position, something like moving a selection of nodes using Adobe Illustrator or AutoCad.

Ian Turton kindly recommended using QGis for that purpose. The use of the tool is quite straightforward for doing this kind of batch polygon displacements:
Open the json file with your geodata
In the Attributes toolbar,
click on "Select features"
Select the features that you want to move:
In the Vector Toolbar, click on "Toogle editing"
Eventually you may need to display the Advanced Digitizing Toolbar. Right click on any toolbar and select "Advanced Digitizing Toolbar" under Toolbars
With your feature still selected, click on the "Move Feature" icon
Click on your selected features and move to your desired location
Because I just wanted the new polygon coordinates for the Canary Islands, I exported the features as GeoJson and replaced accordingly.

Related

How to place Google maps street view panorama in tunnel with bridge

Is there a way to tell google maps street view you want to be above/under another road? I have a path that takes someone around a cloverleaf and back out the other way, but when I set the location on the bridge it always sets them to on top of the bridge.
current code
lineClickEventHandler(latLng: google.maps.LatLng) {
this.panoramaMap.setPosition(latLng)
this.drivingData.heading = Math.round(this.routeService.getCurrentHeading(latLng, this.polyLine))
this.panoramaMap.setPov({
heading: this.drivingData.heading,
pitch: 0
})
Afaik there is no way to select a level for a set of coordinates.
If you are following a Street View "path" on the below level and don't want the API to "move" you to the top road, you could use the returned links of the current panorama you are on.
As stated in the documentation each panorama has links to adjacent panoramas in the form of a collection of StreetViewLink objects.
The getLinks() method of the StreetViewPanorama class will return the same collection.
For example:
0: {description: "", heading: 97.73429107666016, pano: "zVIPHTGA5Pu4os139DS5sw"}
1: {description: "", heading: 277.2002563476562, pano: "wSLR0N4qAw-_Ib2Q69HvTw"}
If you know your heading (more or less) or say, the direction you are currently intending to move, you could compare it with the heading contained in the links and load the corresponding adjacent pano by its id.
Hope this helps.
Edit:
I did a small proof of concept to see if I could follow that road automatically based on a base heading and the provided StreetViewLink objects but unfortunately that seems buggy...
For some reason — and although Street View imagery is available to continue "straight ahead" on the same road — the adjacent links somehow start referencing the top road at some point. I don't know why this happens.
Here is my fiddle. Watch your javascript console and the map while it moves along the road.
It would be interesting to test that in other places and figure out if this is a local issue or if it happens in other places as well... My guess is that it will happen in other places too.

Google Maps Mystery Unit -- ca?

I'm working on understanding user events in Google Maps. Here's my sample code:
var listener = google.maps.event.addListener(map, 'rightclick', function(e){
console.log(JSON.stringify(e, null, 4));
});
The console returns:
{
"latLng": {
"lat": 36.29330392714158,
"lng": -115.24877548232325
},
"pixel": {
"x": 581.5555419921875,
"y": 374.7916578363487
},
"ca": {
"x": 46.04531521257013,
"y": 100.26925500235961
}
}
So I understand Latitude and Longitude.
The Pixel coordinates seems to represent the display on my webpage (with html canvas like output) When I move the cursor to the upper left corner of the visible map element in my web page, and right click, the console shows nearly 0,0 . Lower right hand corner matches to the pixel height / width of my display. So I can deduce that the Pixel feedback represents the display on my webpage.
I don't understand the context for a 'ca'? In fact what is a 'ca'? Anybody know? Is that an abbreviation for something? I can see that the 'ca' value barely changes when I right click on different areas of the visible map. I have no clue where 'ca' 0,0 ends up. How would you use a 'ca' element, what is it for? Anybody have an official reference? Many thanks.
The ca is an undocumented property of the object created by the closure compiler.
It will (or at least can) change with every release of the API so should not be used.
Related questions:
Google.Maps.Event settings - Va versus Xa
Google Places coordinates changing keys
Google Map Api Uncaught TypeError: Cannot read property '0' of null
Google Maps API V3 - only showing a blank map when using the geocoder
-Google maps - Weird geometry.location attributes (G, K)
Google maps api: what are xa and pa in get bounds?
item.geometry.location.kb & item.geometry.location.jb returning undefined

As of 2015, is there a way to get the boundaries of an italian post code using Google Maps APIs?

I looked at many SO questions referring to a similar topic:
Google Maps API V3: How to get region border coordinates (polyline) data?
Google has started highlighting search areas in Pink color. Is this feature available in Google Maps API 3?
Add "Search Area" outline onto google maps result
Where do Google and Twitter source political boundaries of cities, regions and states?
And searched for online tools and tools within my country and too:
https://market.mashape.com/vanitysoft/boundaries-io/overview
https://market.mashape.com/vanitysoft/boundaries-io
http://mapit.openpolis.it/postcode/00188.html
But no one of them fits with the task I need to complete (and I tell you why right after explaining the task I have to do):
Basically all I want is, for each Italian post code (called CAP in Italy) (as of 2015, they are 8709 and I have them all stored in a database's table), find its area coordinates (therefore something like an array with the following structure (it can be a JSON, KML, XML, it doesn't matter as long as the coords are truthful and I can somehow parse them):
[
[ [lat, lng], [lat, lng], [lat, lng], ... ], // Polygon 1
/*
* This additional arrays may be here in the case
* where a CAP (Italian postal code) is made up of many areas,
* therefore each area is a polygon.
*
* For example here -> https://www.google.it/maps/place/84020+SA/#40.605482,15.1783416,10.32z/data=!4m2!3m1!1s0x13396999456508e7:0x1c09e123127ecbc0
*
*/
[ [lat, lng], [lat, lng], ... ], // Optional Polygon 2
...
[ [lat, lng], [lat, lng], ... ] // Optional Polygon n
];
So that I can draw them with a google.maps.Polygon or a custom overlay extending the google.maps.OverlayView class on a map. The coordinates of the areas I need are shown by Google here:
https://www.google.it/maps/place/20122+Milano/#45.4628212,9.1931976,13z/data=!4m2!3m1!1s0x4786c6af4dceb2f5:0x1c0678057ae1afc0
Or here:
https://www.google.it/maps/place/84020+SA/#40.605482,15.1783416,10.32z/data=!4m2!3m1!1s0x13396999456508e7:0x1c09e123127ecbc0
But I can't find a way to get them in my application and I didn't find such a guide on their site at https://developers.google.com/maps/documentation/. Also, in the SO questions I linked the answers say that Google doesn't provide this data, but, as of 2015, maybe they have changed something?
Now, why no one of the features I have found suits my needs:
They all address to United States' zip codes only;
The local Italian site I have found (mapit.openpolis.it) doesn't return the coords for the polygon area but just the a single pair of lat and lng which points to the center of the postal code and also doesn't return anything for some postal codes (CAPs).
What could I do? Is there a way to contact a responsible of the Google Maps API team and ask him what should I do in such a case? (And I am pretty serious so don't laugh at me...).
Thanks for the attention.
You can check out the postal boundaries from open street map.

Polymaps - Polygon with label inside from geoJSON

I have a map using Polymaps (http://polymaps.org/) and am able to draw polygons based on a geoJSON file. How can I add the name to the polygon.
For example: Here is a bit of my geoJSON
"properties": {
"name": "NH",
I want to draw the polygon with the text NH inside of it.
Looking at the current version code, that feature is not implemented on polymaps. You may want to fork polymaps so you can have <text> items near each graphic item.

Is it possible to add a Polygon layer to a google map v3 without using fusion tables

The question is pretty descriptive.
I am working on a website that provides locations for filming.
All the data in the site is currently stored in a MySQL database including geocode data for google maps.
I need to show polygon areas for the different london boroughs that has locations.
I have all the data as kml files, idealy i would like to store this in the MySQL database.
I have had success using fusion tables to display this data, but it seems silly to me to have to have this data duplicated on google just to use a fusion map layer, can i simply use a kml layer to render this data rather than having to create a fusion table and rendering it from that?
If so, is there a resource someone could point me to for more information?
UPDATE:
Thank you for the responses so far, i thought i would update the question with a little more info .
I eventually want to have all the areas displayed at the same time on my map and then when an area is clicked on ideally it would take you to another page on the website showing locations for that specific area.
I had initially tried using KML layers but i was getting errors saying my KML was invalid.
The KML was initially stored in a field in my database table, i think probably the errors were due to me not understanding exactly how google read in the KML data.
Using polygons would be far simpler to implement as i can get this data via JSON and then render the polygons from that.
I know now its not possible to have info windows with polygons, but i would just prefer to jump directly to another website page with info for that particular area using a click handler rather than show an info window.
Alternatively as suggested showing a tool-tip with a brief description of the area and a link to the page would be better, how the tooltip itself, is it possible to render on top the map?
I am slightly worried that I will reach the layer limit for the KML.
Is it possible to have multiple polygons rendered with KML on one layer, or do i need a separate layer for each clickable area?
The Google Maps API provides a pretty straightforward method to draw polygons.
Basic Example:
var polygon = new google.maps.Polygon({
map: your_google_map_instance,
paths: array_of_latlng_points,
fillColor: "#336699",
fillOpacity: .5,
})
EDIT: For this approach, you would need to parse your KML files (sorry, must've missed that when I first read it). You can import the KML files to a KML layer
You can overlay Polygons using KmlLayer, FusionTablesLayer (as you know), or native google.maps.Polygon objects.
KmlLayer and FusionTablesLayer render them as tiles, so for lots of Polygons (if you only need click events) will be more efficient. There are limitations on the number of KmlLayers that can be displayed on the map at one time and on FusionTablesLayer (but those don't seem to be causing you problems).
There are also third party parsers available for KML (geoxml3, geoxml-v3) which will take your KML and render it as native google.maps.Polygon objects. For lots of Polygons, this will be less efficient than tile based rendering, but it does allow mouseover/mouseout, and changing the properties of the Polygons dynamically.
You could also try data layers what have lots of events so you can display tooltips, info window, status text on various mouse events.
See samples in documentation:
https://developers.google.com/maps/documentation/javascript/datalayer
If you have many polygons (where the actual value of many depends on multiple factors, can be anywhere between 100 and 1,000) the best is to use a built in layer type. The fastest are the ones rendered on server, e.g. kml layer because this doesn't create hundreds of DOM elements in browser but still exposes click events so infoboxes can be displayed for each item.
In the worst case you can implement your own rendering with an image map, obviously by using an existing library like mapnik.
https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes