I'm use gmap 3 in my website, but i want satellite map
here's my gmap 3 activation..
$('.map')
.gmap3({
center:[37.7638886, -122.4563572],
zoom:14,
scrollwheel: false,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: "shadeOfGrey", // to select it directly
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, "shadeOfGrey"]
}
})
You should use the value of satellite as the mapTypeId field in your MapOptions object:
$('.map')
.gmap3({
center:[37.7638886, -122.4563572],
zoom:14,
scrollwheel: false,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: "satellite"
})
Documentation
its work for me
// satellite map active
$('.map_se')
.gmap3({
center:[40.748817, -73.985428],
zoom:3,
scrollwheel: false,
mapTypeControl: true,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.SATELLITE
})
.marker([
{address:"46000, Canada", icon: "assets/img/map-icon.png"}
])
Related
I'm trying to test the panning action in open layers but I can't get the map to move.
The versions I am using are these:
OpenLayers: 6.10.0
Cypress: 9.7.0
This is the code I have:
When('I pan the map to a different area', () => {
cy.wait(3000)
cy.get('.ol-layer canvas').trigger('pointerdown', {
clientX: 900,
clientY: 300,
force: true,
pointerId: 1,
})
cy.get('.ol-layer canvas').trigger('pointermove', {
x: 600,
y: 200,
force: true,
pointerId: 2,
})
cy.get('.ol-layer canvas').trigger('pointermove', {
x: 300,
y: 100,
force: true,
pointerId: 1,
})
cy.wait(2000)
cy.get('.ol-layer canvas').trigger('pointerup', { force: true, pointerId: 1 })
})
$scope.dataTableOpt = {
"aLengthMenu": [[10, 50, 100, -1], [10, 50, 100, 'All']],
"searching": false,
"paging": true,
"info": false,
"lengthChange": false
};
https://i.stack.imgur.com/T92Ep.png
$scope.dataTableOpt = {
//custom datatable options
// or load data through ajax call also
"aLengthMenu": [[10, 50, 100, -1], [10, 50, 100, 'All']],
"searching": false,
"paging": (listCount > 10 ? true : false),
"info": false,
"lengthChange": false
};
Add this to your options object:
"enablePaginationControls": false
If that doesn't work, you might also want to remove the "paging": true
I wonder it is any chance to fill different color between circles, so in the code below I have used code for cities but work for my purpose as well. Anyway I have 4 circles from the same center point, 4,6,8,11 miles and they are marked by strokecolor. However I wonder can I have different fill between 4-6, 6-8, 8-11 miles??
var distancemap = {
fourmiles: {
center: {lat: 53.3555367, lng: -6.2748774},
distance: 6437.38
},
sixmiles: {
center: {lat: 53.3555367, lng: -6.2748774},
distance: 9656.064
},
eightmiles: {
center: {lat: 53.3555367, lng: -6.2748774},
distance: 12874.8
},
elevenmiles: {
center: {lat: 53.3555367, lng: -6.2748774},
distance: 17702.8
}
};
function initAutocomplete() {
// Create the map.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: 53.3555367, lng: -6.2748774},
mapTypeId: 'roadmap'
});
// Construct the circle for each value in distancemap.
// Note: We scale the area of the circle based on the distance.
for (var city in distancemap) {
// Add the circle for this city to the map.
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#000000',
fillOpacity: 0.005,
map: map,
center: distancemap[city].center,
radius: Math.abs(distancemap[city].distance) * 1
});
You can't make "holes" in a google.maps.Circle. But you can make circular google.maps.Polygons with holes in them. See this related question:
Draw ring (not circle) in Google Maps API
// Add the circle for this city to the map.
var paths;
if (i==0) {
// innermost circle, no "hole"
paths = [drawCircle(distanceArray[0].center, Math.abs(distanceArray[0].distance) * 1, 1)];
} else {
// every other circle has a "hole" the size of the inner/next smallest circle
paths = [
drawCircle(distanceArray[i-1].center, Math.abs(distanceArray[i-1].distance) * 1, -1),
drawCircle(distanceArray[i].center, Math.abs(distanceArray[i].distance) * 1, 1)
];
}
var cityCircle = new google.maps.Polygon({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: distanceArray[i].color,
fillOpacity: 0.5,
map: map,
paths: paths
});
proof of concept fiddle
code snippet:
function initAutocomplete() {
// Create the map.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {
lat: 53.3555367,
lng: -6.2748774
},
mapTypeId: 'roadmap'
});
for (var i = 0; i < distanceArray.length; i++) {
// Add the circle for this city to the map.
var paths;
if (i == 0) {
paths = [drawCircle(distanceArray[0].center, Math.abs(distanceArray[0].distance) * 1, 1)];
} else {
paths = [drawCircle(distanceArray[i - 1].center, Math.abs(distanceArray[i - 1].distance) * 1, -1),
drawCircle(distanceArray[i].center, Math.abs(distanceArray[i].distance) * 1, 1)
];
}
var cityCircle = new google.maps.Polygon({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: distanceArray[i].color,
fillOpacity: 0.5,
map: map,
paths: paths
});
}
}
google.maps.event.addDomListener(window, "load", initAutocomplete);
function drawCircle(point, radius, dir) {
if (typeof point.lat !== "function") {
point = new google.maps.LatLng(point.lat, point.lng);
}
var d2r = Math.PI / 180; // degrees to radians
var r2d = 180 / Math.PI; // radians to degrees
var earthsradius = 6378137.0; // 6378137.0 is the radius of the earth in meters
var points = 32;
// find the raidus in lat/lon
var rlat = (radius / earthsradius) * r2d;
var rlng = rlat / Math.cos(point.lat() * d2r);
var extp = new Array();
if (dir == 1) {
var start = 0;
var end = points + 1;
} // one extra here makes sure we connect the ends
else {
var start = points + 1;
var end = 0;
}
for (var i = start;
(dir == 1 ? i < end : i > end); i = i + dir) {
var theta = Math.PI * (i / (points / 2));
ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta)
ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta)
extp.push(new google.maps.LatLng(ex, ey));
// bounds.extend(extp[extp.length - 1]);
}
return extp;
}
var distancemap = {
fourmiles: {
center: {
lat: 53.3555367,
lng: -6.2748774
},
distance: 6437.38,
color: "#FF0000"
},
sixmiles: {
center: {
lat: 53.3555367,
lng: -6.2748774
},
distance: 9656.064,
color: "#00FF00"
},
eightmiles: {
center: {
lat: 53.3555367,
lng: -6.2748774
},
distance: 12874.8,
color: "#0000FF"
},
elevenmiles: {
center: {
lat: 53.3555367,
lng: -6.2748774
},
distance: 17702.8,
color: "#FFFF00"
}
};
var distanceArray = [
distancemap.fourmiles,
distancemap.sixmiles,
distancemap.eightmiles,
distancemap.elevenmiles
]
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>
I am trying to draw an airline flight map using Google Map APIs. But I got some issues in generating polylines between every two points. So far, it only returns one polyline of the very first two points. I could not find any error so far. Is there anything wrong with the last for loop? Any comments and help will be highly appreciated!
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 41.871314, lng: -99.869580},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var Lat = [42.365843,37.756066,47.450431,28.431450,38.898793,34.040667];
var Lng = [-71.009625,-122.440175,-122.308806,-81.308094,-77.037227,-118.289537];
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
var Poly = new Array();
for (var i = 0; i<Lat.length; i++) {
var pos = new google.maps.LatLng(Lat[i],Lng[i]);
Poly.push(pos);
};
for (var j = 0; j<Poly.length; j++) {
if (j%2 == 0){
var poly = new Array();
poly = Poly.slice(j,j+2);
var flowline = new google.maps.Polyline({
path: poly,
geodesic: true,
strokeColor: "#DC143C",
strokeOpacity: .8,
strokeWeight: 2,
icons: [{
icon: lineSymbol,
offset: '100%'
}],
});
}
};
flowline.setMap(map);
}
You are only setting the map property of the last polyline. This is outside of the loop that creates the polylines:
flowline.setMap(map);
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {
lat: 41.871314,
lng: -99.869580
},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var Poly = new Array();
for (var i = 0; i < Lat.length; i++) {
var pos = new google.maps.LatLng(Lat[i], Lng[i]);
Poly.push(pos);
}
var flowlineNonGeodesic = new google.maps.Polyline({
path: Poly,
geodesic: false,
strokeColor: "#00FF00",
strokeOpacity: .8,
strokeWeight: 2,
map: map
});
for (var j = 0; j < Poly.length; j++) {
if (j % 2 == 0) {
var poly = Poly.slice(j, j + 2);
var flowline = new google.maps.Polyline({
path: poly,
geodesic: true,
strokeColor: "#DC143C",
strokeOpacity: .8,
strokeWeight: 2,
icons: [{
icon: lineSymbol,
offset: '100%'
}],
});
flowline.setMap(map);
}
}
}
google.maps.event.addDomListener(window, "load", initMap);
var Lat = [42.365843, 37.756066, 47.450431, 28.431450, 38.898793, 34.040667];
var Lng = [-71.009625, -122.440175, -122.308806, -81.308094, -77.037227, -118.289537];
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
I'm trying to leave of the mode drawing after draw circle, I want to hide the controls drawingmanager and can edit the circle but I don't know how to do that after to draw the circle enter in mode, don't draw and can edit the circle
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(4.705, -74.113),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
//google.maps.drawing.OverlayType.MARKER,
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
//google.maps.drawing.OverlayType.POLYLINE,
//google.maps.drawing.OverlayType.RECTANGLE
]
},
//markerOptions: {icon: 'Images/marker_sprite.png'},
circleOptions: {
strokeColor: '#FF0000',
fillColor: '#DF0101',
fillOpacity: 0.3,
strokeWeight: 2,
editable:true
},
rectangleOptions: {
strokeColor: "#FF0000",
strokeWeight: 2,
fillColor: '#DF0101',
fillOpacity: 0.35,
editable:true
},
polygonOptions: {
strokeColor: "#FF0000",
strokeWeight: 2,
fillColor: '#DF0101',
fillOpacity: 0.35,
editable:true
}
});// Cierre variable drawingManager
drawingManager.setMap(map);
// event handler for drawingManager shapes
function setClickEvent(shape) {
google.maps.event.addListener(shape, 'click', function(){
//Colocar mensaje en Formato Dialgo UI
if(confirm('Desea Eliminar El Punto de Control')){
shape.setMap(null);
drawingManager.setOptions({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON
]
}
});
}
});
}
google.maps.event.addListener(drawingManager,'circlecomplete', function(circle){
radius = circle.getRadius();
centro = circle.getCenter();
document.getElementById("posicion").innerHTML=centro;
document.getElementById("radio").innerHTML=radius;
drawingManager.setOptions({
drawingControl: false
});
google.maps.event.addListener(circle, 'radius_changed', function(){
radius = circle.getRadius();
document.getElementById("radio").innerHTML=radius;
});
google.maps.event.addListener(circle, 'center_changed', function(){
centro = circle.getCenter();
document.getElementById("posicion").innerHTML=centro;
});
//drawingManager.setOptions({ drawingControl: false });
setClickEvent(circle);
});
/*
google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(Rectangle) {
var vertices = Rectangle.getBounds();
document.getElementById("posicion").innerHTML=vertices;
setClickEvent(Rectangle);
});
*/
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(Polygon) {
var vertices = Polygon.getPath();
var pocision="";
for (var i=0; i < vertices.length; i++){
var xy=vertices.getAt(i);
pocision += "<br>"+ xy.lng() +" , " + xy.lat();
document.getElementById("posicion").innerHTML=pocision;
}
google.maps.event.addListener(Polygon, 'mousedown', function() {
google.maps.event.addListener(Polygon.getPath(), 'set_at', function() {
console.log('editando');
vertices=Polygon.getPath();
pocision="";
for (var i=0; i < vertices.length; i++){
var xy=vertices.getAt(i);
pocision += "<br>"+ xy.lng() +" , " + xy.lat();
document.getElementById("posicion_Final").innerHTML=pocision;
}
});
});
});
}/* cierra inittalize() */
google.maps.event.addDomListener(window, 'load', initialize);
</script>
To make the circle so it can't be edited, set the editable option to false:
google.maps.event.addListener(drawingManager,'circlecomplete', function(circle){
radius = circle.getRadius();
centro = circle.getCenter();
document.getElementById("posicion").innerHTML=centro;
document.getElementById("radio").innerHTML=radius;
circle.setOptions({editable:false}); // <-- **** add this line
drawingManager.setOptions({
drawingControl: false
});
google.maps.event.addListener(circle, 'radius_changed', function(){
radius = circle.getRadius();
document.getElementById("radio").innerHTML=radius;
});
google.maps.event.addListener(circle, 'center_changed', function(){
centro = circle.getCenter();
document.getElementById("posicion").innerHTML=centro;
});
setClickEvent(circle);
});