This question has already asked (see question "Google maps polygons"). But I have exactly the same problem and just wanted to encourage someone to take it on...
In short, how do you add multiple polygons to a map without a line appearing to join each polygon? In short, how do you "close" a polygon before drawing another?
My page is below. As you can see if you check it in the browser, a line appears between the two states (if you add more shapes, they too appear connected with a line) Is there some easy solution, or do you need complex JS code to detect intersections or something?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js? key=MY_VALID_KEY_HERE&sensor=false"></script>
<!--<script type="text/javascript" src="AAAA_State_Coordinates.js"></script>-->
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(46, -100);
var mapOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
var shape_ND = [
new google.maps.LatLng(45.9445, -104.0446),
new google.maps.LatLng(45.934, -96.5671),
new google.maps.LatLng(46.3242, -96.6028),
new google.maps.LatLng(46.6636, -96.7978),
new google.maps.LatLng(46.8602, -96.7896),
new google.maps.LatLng(46.9503, -96.7896),
new google.maps.LatLng(47.13, -96.8335),
new google.maps.LatLng(47.2345, -96.8335),
new google.maps.LatLng(47.4132, -96.8555),
new google.maps.LatLng(47.5469, -96.8555),
new google.maps.LatLng(47.6506, -96.8774),
new google.maps.LatLng(47.9918, -97.0601),
new google.maps.LatLng(48.1267, -97.126),
new google.maps.LatLng(48.2859, -97.1109),
new google.maps.LatLng(48.4301, -97.1233),
new google.maps.LatLng(48.553, -97.1425),
new google.maps.LatLng(48.6765, -97.0999),
new google.maps.LatLng(48.7326, -97.1356),
new google.maps.LatLng(48.7951, -97.1727),
new google.maps.LatLng(48.9081, -97.229),
new google.maps.LatLng(48.9982, -97.2331),
new google.maps.LatLng(48.9946, -104.0501)
];
var shape_WY = [
new google.maps.LatLng(48.9946, -104.0501),
new google.maps.LatLng(44.9949, -104.0584),
new google.maps.LatLng(44.9998, -111.0539),
new google.maps.LatLng(40.9986, -111.0457),
new google.maps.LatLng(41.0006, -104.0556)
];
ND = new google.maps.Polygon({paths: shape_ND,strokeColor: '#FF0000',strokeOpacity: 0.8,strokeWeight: 2,fillColor: '#FF0000',fillOpacity: 0.35});
ND.setMap(map);
WY = new google.maps.Polygon({paths: shape_WY,strokeColor: '#FF0000',strokeOpacity: 0.8,strokeWeight: 2,fillColor: '#FF0000',fillOpacity: 0.35});
WY.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:70%; height:70%"></div>
</body>
</html>
You've duplicated the last coordinate of ND in WY, so that point is part of both shapes. Use the following for WY:
var shape_WY = [
new google.maps.LatLng(44.9949, -104.0584),
new google.maps.LatLng(44.9998, -111.0539),
new google.maps.LatLng(40.9986, -111.0457),
new google.maps.LatLng(41.0006, -104.0556)
];
Related
I have a simple 2d map in open layer (5.2.0) that is comming from this url: https://services.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer. When I switch to ol-cesium, the map is not display anymore, I only see a black circle (the earth). Here is the code:
It works fine with OpenStreetMap, the problem is when i try to use the map from arcgisonline.com
<!doctype html>
<html lang="en">
<head>
<style>
.map {
height: 400px;
width: 400px;
}
</style>
<link type="text/css" rel="stylesheet" href="/csiaps/webjars/openlayers/5.2.0/ol.css" />
<link type="text/css" rel="stylesheet" href="/csiaps/js/olcesium/olcs.css" />
<script type="text/javascript" src="/csiaps/webjars/openlayers/5.2.0/ol.js"></script>
<script type="text/javascript" src="/csiaps/js/cesium/Build/CesiumUnminified/Cesium.js"></script>
<script type="text/javascript" src="/csiaps/js/olcesium/olcesium.js"></script>
<script>
var ol3d = null;
var baseLayerGroup;
function createArcGISCacheLayer(name, url, layerInfoParam) {
name = 'NatGeo_World_Map';
url = 'https://services.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer';
layerInfoParam = <NEVER MIND, not include for this post>;
var wrapDateLineOption = true;
var layer = new ol.layer.Image({
visible : true,
source : new ol.source.ImageArcGISRest({
url : url,
params : {
"layerInfo" : layerInfoParam,
"wrapDateLine" : wrapDateLineOption
}
})
});
layer.set('title', name);
return layer;
}
</script>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var layer = createArcGISCacheLayer(null, null, null);
var map = new ol.Map({
target : 'map',
layers : [ layer ],
view : new ol.View({
center : ol.proj.fromLonLat([ 37.41, 8.82 ]),
zoom : 4
})
});
function showHideMap() {
if (!ol3d || !ol3d.getEnabled()){
ol3d = new olcs.OLCesium({
map : map,
});
}
ol3d.setEnabled(!ol3d.getEnabled());
}
</script>
3d
</body>
</html>
I expect the ol-celium to format the already loaded 2d maps in 3d and show them instead of a black map
It's a tile layer
var layer = new ol.layer.Tile({
source: new ol.source.TileArcGISRest({
url: 'https://services.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer'
})
});
Since it's EPSG:3857 and uses a standard grid it will also work set as an XYZ source and will be quicker to open (note the x and y are reversed compared with most XYZ sources)
var layer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://services.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}'
})
});
I am trying to display and center a map for the users current location. Everything works fine if I manually enter a hard coded latitude and longitude, but these needs to be dynamic as one user often changes location.
I suspect I am making a basic mistake, but my logic seems like it is correct to me. Please check my work and let me know what I am doing wrong? The line that is remarked out with Latitude and Longitude is the line I want to use instead of the previous line with the hard coded values.
<!DOCTYPE html>
<html>
<head>
<title>W123</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
</head>
<body>
<div id='printoutPanel'></div>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
<script type='text/javascript'>
function showlocation() {
navigator.geolocation.getCurrentPosition(getLocation);
}
function getLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
}
function loadMapScenario() {
var mapOptions = {
credentials: 'My API key code goes here',
center: new Microsoft.Maps.Location(39.1887643719098, -92.8261546188403),
//center: new Microsoft.Maps.Location(latitude, longitude),
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 8
};
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), mapOptions);
var urlTemplate = 'http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-{timestamp}/{zoom}/{x}/{y}.png';
var timestamps = ['900913-m50m', '900913-m45m', '900913-m40m', '900913-m35m', '900913-m30m', '900913-m25m', '900913-m20m', '900913-m15m', '900913-m10m', '900913-m05m', '900913'];
var tileSources = [];
for (var i = 0; i < timestamps.length; i++) {
var tileSource = new Microsoft.Maps.TileSource({
uriConstructor: urlTemplate.replace('{timestamp}', timestamps[i])
});
tileSources.push(tileSource);
}
var animatedLayer = new Microsoft.Maps.AnimatedTileLayer({ mercator: tileSources, frameRate: 500 });
map.layers.insert(animatedLayer);
}
</script>
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental&callback=loadMapScenario' async defer></script>
</body>
</html>
You want to pass in the latitude and longitude into your loadMapScenario function as seen below
function loadMapScenario(latitude,longitude) {
....your code here....
}
Change your callback in the bing map include to a new function like "mapUserLocation" then have mapUserLocation perform the following tasks
function mapUserLocation() {
// code here to get the latitude and longitude from users position
loadMapScenario(latitude,longitude);
}
I've tried all possible solutions but the map just isn't showing. My webview just shows blank.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="theme.css">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript">
var map; " +
function initialize() {
var latitude = 0;
var longitude = 0;
if (window.android){
latitude = window.android.getLatitude();
longitude = window.android.getLongitude();
}
var myOptions = {
zoom: 20,
center: myLatLng
}
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}
function centerAt(latitude, longitude){
myLatlng = new google.maps.LatLng(latitude,longitude);
map.panTo(myLatLng);
}
</script>
<title>Insert title here</title>
</head>
<body>
<div id="map_canvas" style="height: 100px; width=100px;">This is the map canvas</div>
<script type="text/javascript">initialize();</script>
</body>
</html>
I've narrowed down to this line: map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
When this line is executed, it fails.
Any help is appreciated.
Thanks.
Regards,
Dexter
I can't see myLatLng definition other than in centerAt() function. You need to pass Google Maps LatLng object to the center attribute of myOptions:
var myLatlng = new google.maps.LatLng(latitude, longitude);
var myOptions = {
zoom: 20,
center: myLatLng
}
...
And there is also a strange thing which I can't understand:
var map; " +
^ ^
my bad, submitted the wrong code. Anyway, the major issue here is the connection. That took me a long time to realize it since i was just focusing on the codes.
Thanks.
Why does my marker not appear?
I also tried without the line "marker.show", but the marker just seems not to appear.
<html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Custom Control</title>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript" src="ZoomPanControl.js"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(47.3732589, 8.2382168),
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true }
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new google.maps.Marker({ position: google.maps.LatLng(47.3732589, 8.2382168), title: 'x', map:map});
marker.show;
};
</script></head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body></html>
This should do the trick:
var marker = new google.maps.Marker();
marker.setPosition(new google.maps.LatLng(47.3732589, 8.2382168));
marker.setMap(map);
You were close, but you forgot the new keyword when adding your position. It should look like this:
var marker = new google.maps.Marker({ position: new google.maps.LatLng(47.3732589, 8.2382168), title: 'x', map:map});
I'm brand new to perl and javascript and trying to get a javascript for loop to run through a perl array to insert markers into a google maps instance. The map is created and the for loop runs, but 5 of the same marker are inserted because the loop doesn't seem to be running correctly. Is there a better way to access this array in javascript?
#latlongarray = (0,0,20,20);
$length = #latlongarray;
{
print <<HTML;
<html>
<head>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?&sensor=true">
</script>
<script type="text/javascript">
var map ;
function initialize() {
var latlng = new google.maps.LatLng(0,0);
var myOptions = {
zoom: 2,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP // can be SATELLITE ,HYBRID, ROADMAP or TERRAIN
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
{
var i;
for (i=0;i<=8;i=i+2)
{
var marker = add_marker($latlongarray[i],$latlongarray[i]);
marker.setMap(map);
}
}
}
</script>
<script type="text/javascript">
function add_marker(lat,lng,title,box_html) {
var infowindow = new google.maps.InfoWindow({
content: box_html
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
title: title
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
return marker;
}
</script>
<title>Reverse IP Lookup & Locate</title>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:80%; height:80%"></div>
</body>
HTML
exit;
}
Perl is server side. It executes BEFORE your Javascript. Perl just outputs HTML and Javascript, once it does that HTML and Javascript has no knowledge of your Perl variables.
You can make a loop in Perl that outputs the appropriate add_marker() Javascript code or you can output a Javascript array and then use a Javascript loop like you are now. You will never be able to reference Perl's array index from the Javascript loop.
As Cfreak pointed you are mixing up your Perl and Javascript code. I recently answered a very similar question in this post