Google Maps - Get coordinates for UK Counties - javascript

I was wondering whether anyone could please advise how I can get the coordinates for UK counties to be able to add a polygon to google maps using the google maps API?
I have looked at using https://nominatim.openstreetmap.org/details.php?place_id=198164455 to retrieve the OSM relation to be able to use http://polygons.openstreetmap.fr/
For example: Leicestershire OSM = 189890
http://polygons.openstreetmap.fr/index.py?id=189890
I have used the coordinates for the area however I believe these are incorrect since the polygon appears in the middle of the sea rather than over the county.
Can anyone please advise how I can get the coordinates for the UK counties to be able to add the polygon? I wasn't sure whether there are any tools that would generate these for you?
My code:
( var leicestershire should have the coordinates of the county )
function initialize() {
var pin = new google.maps.LatLng(52.374490, -0.713289);
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 5,
//minZoom: 15,
//maxZoom: 15,
center: pin,
mapTypeId: google.maps.MapTypeId.ROADMAP,
overviewMapControl:true,
mapTypeControl:false,
zoomControl: true,
streetViewControl: false,
draggable: true
});
var marker = new google.maps.Marker({
position: pin,
map: map
});
var leicestershire = [];
var leicestershirePoly = [];
leicestershire.forEach(function(coordinate) {
var latlng = coordinate.split(",");
var lat = parseFloat(latlng[0]);
var lng = parseFloat(latlng[1]);
if(!isNaN(lat) && !isNaN(lng)) {
leicestershirePoly.push({lat: lat, lng: lng});
}else{
console.log(coordinate);
}
});
var leicesterRegion = new google.maps.Polygon({
paths: leicestershirePoly,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
leicesterRegion.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

Leicestershire resolves to 52.772571, -1.2052126 in Google Maps. The first line of coordinates in your example polygon is -1.5975472, 52.7004047 so obviously, latitude and longitude are inverted.
In your forEach loop, replace
var lat = parseFloat(latlng[0]);
var lng = parseFloat(latlng[1]);
by
var lat = parseFloat(latlng[1]);
var lng = parseFloat(latlng[0]);
That should be enough to fix the issue if the rest of your code is working.

Related

How to draw a line and a box on gmaps?

I've seen this tool which let you draw a line on gmaps and it generates the js code for you
So the JS is:
var myCoordinates = [
new google.maps.LatLng(48.955410,10.034749),
new google.maps.LatLng(59.648652,29.898030)
];
var polyOptions = {
path: myCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 3
}
var it = new google.maps.Polyline(polyOptions);
it.setMap(map);
What I would like to do is to start the line from a pin I receive and not a pin I set when I click as per that tool and then I would to draw a infobox at the end of that line (so not where it starts form the pin).
What I am aiming for is to draw a line form a starting point and have an infobox such as per this image below, see the lines on the map
Therefore I can pass the coords here:
new google.maps.LatLng(48.955410,10.034749),
new google.maps.LatLng(59.648652,29.898030)
But how would I target the end of the line and place text there?
With this answer I can define a start and end, but how to draw a box at the end point?
I think you can do it using a marker at the end point of the line, then attaching, for example an infoWindow, at the end and finally hiding the marker.
function initMap() {
var coordinates = {
lat: 40.785845,
lng: -74.020496
};
var coordinates2 = {
lat: 40.805845,
lng: -74.130496
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: coordinates,
scrollwheel: false
});
var marker = new google.maps.Marker({
position: coordinates,
map: map
});
var infoMarker = new google.maps.Marker({
position: coordinates2,
map: map
});
var infowWindow = new google.maps.InfoWindow();
var line = new google.maps.Polyline({
path: [
marker.position,
infoMarker.position
],
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 3
});
line.setMap(map);
infowWindow.setContent("<b>Hello world!</b>");
infowWindow.open(map, infoMarker);
infoMarker.setVisible(false);
}
google.maps.event.addDomListener(window, "load", initMap);
Check it working on this jsfiddle

how to get an image to point in a certain direction in a visualisation map

So I am using JavaScript to plot a position of a flight and its flight path on a visualisation map. I am getting the data from a node server that I have created. I have looked at similar question on stack over flow but I haven't been able to get them working.
I am currently struggling with the positioning of the flight icon, as I want it to point in the same direction as the flight path or even put a marker at the top of the image so it can point to a certain latitude and longitude. At the minute the flight icon only faces north.
Here is a screenshot of my code. I tried using the anchor in the Google maps API but I couldn't get it working so I commented it out.
var flightCord = [];
for (var i = 0; i < data.flight.length; i++) {
var lat = data.flight[0].lat1;
var lng = data.flight[0].lng1;
// Co-ordinates for Dublin Airport 53.421379, -6.27
var image = new google.maps.MarkerImage("plane3.png"
//new google.maps.Size(25,25),
//null, null,
//new google.maps.Point(53.4213879,-6.27)
//new google.maps.Point(0, 50)
);
var latLng = new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: image
});
var flightCord = [
{lat:data.flight[0].lat1, lng: data.flight[0].lng1},
{lat:data.flight[i].lat1, lng:data.flight[i].lng1}];
}
var flightPath = new google.maps.Polyline({
path: flightCord,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 1
});

google maps infinite line / increase length or lat lng calculation

Hey there i´m trying to find a way to just increase the length of a line without changing the orientation
i tried this with Polyline
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 37.4419, lng: -122.1419},
zoom: 8
});
var line = new google.maps.Polyline({
path: [new google.maps.LatLng(37.4419, -122.1419), new google.maps.LatLng(37.4519, -122.1519)],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 10,
geodesic: true,
map: map
});
}
and it works as expected
but i rather want it like
or
i only have the two coordinates from first example
it should be geodesic and theoreticaly idealy arround the globe back at same start so it will be like endless
i also tried to find out a way to calculate the some more far coordinates but searching is a mess because everboidy want to be found for caluclating distances.
so having two coordinates following the "line-through orientation" of but have high distance like some thousand kilometers pls let me know
You can use the Google Maps Javascript API Geometry library to compute the heading of the line and extend it an arbitrarily long distance along that heading.
code snippet::
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 37.4419,
lng: -122.1419
},
zoom: 8
});
var line = new google.maps.Polyline({
path: [new google.maps.LatLng(37.4419, -122.1419), new google.maps.LatLng(37.4519, -122.1519)],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 10,
geodesic: true,
map: map
});
// extend line from each end along its existing heading
// pick 20e6 meters as an arbitrary length
var lineHeading = google.maps.geometry.spherical.computeHeading(line.getPath().getAt(0), line.getPath().getAt(1));
var newPt0 = google.maps.geometry.spherical.computeOffset(line.getPath().getAt(0), 20000000, lineHeading);
line.getPath().insertAt(0, newPt0);
var newPt1 = google.maps.geometry.spherical.computeOffset(line.getPath().getAt(1), 20000000, lineHeading + 180);
line.getPath().push(newPt1);
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map"></div>

Cant zoom in and out of google map

I am trying to implement a google map on the site I'm working on. I copied a example from the google maps api site where you can overlay circles. The map loads fine but non of the controls work being: zooming in and out, panning the map as such. Does anyone know what may be causing this> Below is my code:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
// This example creates circles on the map, representing
// populations in North America.
// First, create an object containing LatLng and population for each city.
var citymap = {};
citymap['chicago'] = {
center: new google.maps.LatLng(41.878113, -87.629798),
population: 2714856
};
citymap['newyork'] = {
center: new google.maps.LatLng(40.714352, -74.005973),
population: 8405837
};
citymap['losangeles'] = {
center: new google.maps.LatLng(34.052234, -118.243684),
population: 3857799
};
citymap['vancouver'] = {
center: new google.maps.LatLng(49.25, -123.1),
population: 603502
};
var cityCircle;
function initialize() {
// Create the map.
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(37.09024, -95.712891),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 100
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Here is a link to the site where its going wrong: http://surftoursouthafrica.com/map
Your code is fine.
On your webpage you have much more stuff that interfere with the map.
Remove col-xs-12 class from the div that surrounds map-canvas and it will work:
<div class="content">
<div id="map-canvas"></div>
</div>

Google maps - add road directions, circle, postal code areas

I got a basic map running using google maps v3
Next features that I would like to add include:
draw line as road directions instead of direct point to point polyline
draw a circle 75 km circle around from a specific point
highlight the postal code of a specific point.
I Would appreciate people's thoughts on these topics
var geocoder;
var map;
function fnPresentMap()
{
geocoder = new google.maps.Geocoder();
var locationArray = new Array();
locationArray[0] = new Array();
locationArray[1] = new Array();
locationArray[0][0] = document.getElementById('LAT_OUT_1').innerHTML;
locationArray[0][1] = document.getElementById('LON_OUT_1').innerHTML;
locationArray[1][0] = document.getElementById('LAT_OUT_2').innerHTML;
locationArray[1][1] = document.getElementById('LON_OUT_2').innerHTML;
var latlng = new google.maps.LatLng(44, -75);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var myLatlng;
var image_name;
for (var count = 0; count < locationArray.length; ++count){
image_name = "img/marker_"+(count+1)+".png";
myLatlng = new google.maps.LatLng(locationArray[count][0],locationArray[count][1]);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image_name
});
}
// re-center
var centerLocation = new google.maps.LatLng(locationArray[0][0],locationArray[0][1]);
map.setCenter(centerLocation);
// show line
var points = [
new google.maps.LatLng(locationArray[0][0],locationArray[0][1]),
new google.maps.LatLng(locationArray[1][0],locationArray[1][1])
];
var line = new google.maps.Polyline({
map: map,
path: points,
strokeColor: "#FF0000",
strokeWeight: 2,
strokeOpacity: 1.0
});
}
To render road directions between two specific points, you need to use the Google Maps API directions service. If you check out the documentation you will find pretty straightforward examples to make a directions request and render the results on a map as a line between the two points.
I think the best approach for drawing a circle around a point is to draw a polygon with enough points to approximate a circle. You can find a good example of this here.
To highlight the postcode at a specific point, I suggest you use the Google Maps API reverse geocoding service (convert from a latitude/longitude to a human readable address). You can extract the postcode from the JSON response you get back and then display it on the map using a infoWindow or some other kind of overlay.

Categories

Resources