I had a map which overlays Google street map plus some WMSs. It was working till yesterday, but, suddenly today I can see the map, but zoom button is missed! I am using Google map API v2, Openlayaers and Geoext APIs. My code is:
Ext.onReady(function () {
var options = {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
numZoomLevels: 18,
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34)
};
var map = new OpenLayers.Map(options);
var gmap = new OpenLayers.Layer.Google(
"Google Streets",
{ isBaseLayer: true, numZoomLevels: 20, sphericalMercator: true }
);
map.addLayer(gmap);
var gsat = new OpenLayers.Layer.Google(
"Google Satellite",
{ type: G_SATELLITE_MAP, 'sphericalMercator': true, numZoomLevels: 20 }
);
map.addLayer(gsat);
var mappanel = new GeoExt.MapPanel({
region: "center",
map: map,
title: 'Map Layers on Google'
});
var layerList = new GeoExt.tree.LayerContainer({
text: 'Map Layers',
layerStroe: mappanel.layers,
leaf: false,
expanded: true
});
var layerTree = new Ext.tree.TreePanel({
title: 'Map Layers',
maxWidth: 500,
Width: 300,
region: "west",
collapsible: true,
collapsed: true,
root: layerList,
split:true
});
var descriptionPanel = new Ext.Panel({
title: 'Metadata Description',
Width: 400,
region: "east",
contentEl: "description",
collapsible: true,
collapsed: false,
split:true
});
var mainPanel = new Ext.Panel({
height: 800,
renderTo: "mainpanel",
layout: "border",
items: [mappanel, layerTree, descriptionPanel]
});
Is there anybody here who could let me know what happened when everything was working!
By the way, I received an email by google couple of days ago that google map v2 is has expired and will be down next month! Maybe they shutdown it earlier!
Cheers,
I think this is related to Google Map API v2. As soon as I switched to using v3, this problem solved.
Here in Openlayers example, the same problem is observable.
http://openlayers.org/dev/examples/google.html
I've the same problem. Nobody knows what has changed on API v2? With V3 it's all OK http://openlayers.org/dev/examples/google-v3.html
Related
I have tryied to used Google Maps strictbounds parameter to restrict autocomplete results to an specific area. My current code is:
var autocomplete = new google.maps.places.Autocomplete(spaceAddress, { types: [ 'geocode' ], strictbounds: {location: "-23.544085,-46.7125434", radius: "12000"}, language: "pt-BR" });
Althoug it doesn't break my application, it also doesn't restrict the results to the selected area. Alternatively, I used the country restriction below, but the customer doesn't like it!
Here's the complete code in use by now:
document.addEventListener("DOMContentLoaded", function() {
var spaceAddress = document.getElementById('space_address');
if (spaceAddress) {
var autocomplete = new google.maps.places.Autocomplete(spaceAddress, { types: [ 'geocode' ], strictbounds: {location: "-23.544085,-46.7125434", radius: "12000"}, language: "pt-BR" });
google.maps.event.addDomListener(spaceAddress, 'keydown', function(e) {
if (e.key === "Enter") {
e.preventDefault();
const spaceAddress = document.getElementById('space_address').value;
if (spaceAddress != '' && spaceAddress != null) {
codeAddress(spaceAddress);
}
}
});
}
Could someone please enlighten me?!
You need to create a google.maps.Circle class first and then use that object to get the bounds via getBounds(). Also as mentioned already strictbounds is a boolean
https://developers.google.com/maps/documentation/javascript/reference/places-widget#Autocomplete
var circle = new google.maps.Circle({ center: new google.maps.LatLng(-23.544085, -46.7125434), radius: 12000 })
var autocomplete = new google.maps.places.Autocomplete(spaceAddress, { types: [ 'geocode' ], bounds: circle.getBounds(), strictbounds: true });
Unfortunately I can't comment yet, so a new answer. The answer from danbeggan works, but there is a tiny error in his code. The attribute is called strictBounds, here is the correct code:
var circle = new google.maps.Circle({ center: new google.maps.LatLng(-23.544085, -46.7125434), radius: 12000 })
var autocomplete = new google.maps.places.Autocomplete(spaceAddress, { types: [ 'geocode' ], bounds: circle.getBounds(), strictBounds: true });
Note: radius is in meter
Basic script to display a kml file on a tiled background with openlayer; I just switched from version 2 to 4.65, how can I zoom to the limits of the kml geometry ("vector" here) ?
var wmsSource = new ol.source.TileWMS({
url: "https://sedac.ciesin.columbia.edu/geoserver/wms",
params: {"LAYERS": "other:wwf-terrestrial-biomes", "TILED": true},
serverType: "geoserver"
});
var wmsLayer = new ol.layer.Tile({
opacity: 0.15,
visible: true,
source: wmsSource
});
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
url: "kml_file.kml",
format: new ol.format.KML()
})
});
var map = new ol.Map({
target: "map-canvas",
layers: [wmsLayer, vector],
controls: ol.control.defaults().extend([
new ol.control.ScaleLine({units: "metric"}),
new ol.control.FullScreen()
]),
view: new ol.View({
center: ol.proj.transform([37.41, 8.82], "EPSG:4326", "EPSG:3857"),
zoom: 3
})
});
I'd like to replace the zoom: 3 and have the map centered and extended to the kml limits ?
Note : I used kmllayer.events.register("loadend", kmllayer, function(evt){map.zoomToExtent(kmllayer.getDataExtent())}); with OpenLayers2...
The following should do what you want
var vectorSource = vector.getSource();
vectorSource.once('change', function(e){
if (vectorSource.getState() === 'ready') {
var extent = vectorSource.getExtent();
map.getView().fit(extent);
}
});
Solution mainly adapted from How to get the extent of a GeoJSON vector source? (changed the variable name & removed second argument in map.getView().fit (required in the old time, now optional, not needed most of the time, like here)
OK, I need to declare the kml source as a separate new ol.source.Vectorvariable, here vectorSource, and read .getExtent() from this variable, not from the ol.layer.Vector :
var wmsSource = new ol.source.TileWMS({
url: "https://sedac.ciesin.columbia.edu/geoserver/wms",
params: {"LAYERS": "other:wwf-terrestrial-biomes", "TILED": true},
serverType: "geoserver"
});
var wmsLayer = new ol.layer.Tile({
opacity: 0.15,
visible: true,
source: wmsSource
});
var vectorSource = new ol.source.Vector({
url: "'.$kml_f.'",
format: new ol.format.KML()
});
var vector = new ol.layer.Vector({
source: vectorSource
});
var map = new ol.Map({
target: "map-canvas",
layers: [wmsLayer, vector],
controls: ol.control.defaults().extend([
new ol.control.ScaleLine({units: "metric"}),
new ol.control.FullScreen()
]),
view: new ol.View({
center: ol.proj.transform([37.41, 8.82], "EPSG:4326", "EPSG:3857"),
zoom: 4,
})
});
vector.once("change", function(e){
var extent = vectorSource.getExtent();
map.getView().fit(extent);
});
Thanks for your help !
var layout = Ext.create('Ext.panel.Panel', {
//renderTo: 'layout',
width: window.innerWidth,
height: window.innerHeight,
//title: 'Border Layout', //no title will be blank
layout: 'border',
items: [{
title: 'Message List',
region: 'south', // position for region
xtype: 'panel',
height: 100,
split: true, // enable resizing
collapsible: true,
margins: '0 5 5 5',
collapsed: true
},tree,{
xtype: 'gmappanel',
region: 'center',
id : 'mygooglemap',
center: new google.maps.LatLng(3.951941, 102.052002),
mapOptions: {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
}],
renderTo: Ext.getBody() //get the body and display Layout at there
});
});
function addInfoWindow(lat,lng) {
var map123 = Ext.getCmp('mygooglemap');
var latLng = new google.maps.LatLng(lat, lng);
map123.SetCenter(latLng);
}
how come i can't set the map to center of the coordinate?
Firebug with this error
TypeError: map123.setCenter is not a function
[Break On This Error]
map123.setCenter(latLng);
EDITED
where is my GMapPanel.js download from https://raw.github.com/VinylFox/ExtJS.ux.GMapPanel/master/src/GMapPanel3.js
then i put it in my localhost/ux/GMapPanel3.js
and this is my config before use the GMapPanel
Ext.Loader.setPath('Ext.ux', 'ux/');
Ext.require([
'Ext.tree.*',
'Ext.data.*',
'Ext.window.MessageBox',
'Ext.window.*',
'Ext.ux.GMapPanel'
]);
but fail to set Center , why?
I am assuming that you are using the plugin from here: https://github.com/VinylFox/ExtJS.ux.GMapPanel
Assuming that is true, from looking at the code it looks like you need to use getMap() on your gmappanel before calling setCenter():
map123.getMap().setCenter(latLng);
Or, you can specify the setCenter property when configuring the gmappanel:
{
xtype: 'gmappanel',
region: 'center',
id : 'mygooglemap',
setCenter: {
lat: 3.951941,
long: 102.052002
},
mapOptions: {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
}
One of the great things about ExtJS/Javascript is that you have access to the code of all of your libraries. When you see errors like "xxx is not a function", it should be pretty self-explanatory: the function you are trying to use is not available on the object on which you are calling it.
I have been struggling with this all day. I have made new buttons to actually go on my map that match the Google Maps buttons sit on the map better. I have been trying to get them to work with the current buttons above the map so I can remove those but I can't seem to get them to work. What am I missing.
Here is a link to the page so you can see. The buttons above the map work and I am going to remove them. The buttons on the map don't work which I am trying to get to work.
DEMO LINK
Here is the code. The var radarButton and var satButton is the new ones. The ones below that is to the current buttons.
jQuery(document).ready(function($) {
var mapTypeId = wundermap.getMapTypeId("hyb");
var googlemap = new google.maps.Map($("#map")[0], {
center: new google.maps.LatLng(32.782878, -96.609862),
panControl: false,
zoom: 6,
mapTypeId: mapTypeId,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_TOP
},
});
var radarOptions = {
gmap: googlemap,
name: 'Radar',
position: google.maps.ControlPosition.TOP_RIGHT,
action: function(){
if (wundermap.map.overlayMapTypes.length==0) {
wundermap.map.overlayMapTypes.push(null); // create empty overlay entry
wundermap.map.overlayMapTypes.setAt("1",Radar);
}
else {
wundermap.map.overlayMapTypes.clear();
}
}
}
var radarButton = new buttonControl(radarOptions);
var satOptions = {
gmap: googlemap,
name: 'Satellite',
position: google.maps.ControlPosition.TOP_RIGHT,
action: function(){
if (wundermap.map.overlayMapTypes.length==0) {
wundermap.map.overlayMapTypes.push(null); // create empty overlay entry
wundermap.map.overlayMapTypes.setAt("1",Satellite);
}
else {
wundermap.map.overlayMapTypes.clear();
}
}
}
var satButton = new buttonControl(satOptions);
wundermap.setOptions({
map: googlemap,
refreshPeriod: 60000,
units: "english",
debug: 0,
source: "wxmap",
StreetsOverlay: true,
layers: [
{
layer: "Radar",
active: "on",
opacity: 70,
type: "N0R",
type2: "",
animation: {
num: 6,
max: 10,
delay: 25
},
stormtracks: "off",
smooth: "on",
subdomain: "radblast-aws"
},
{
layer: "Satellite",
defaultUI: 0,
opacity: "85",
source: "",
active: "off",
animation: {
num: 1,
max: 8,
delay: 25
}
},
],
});
wundermap.initialize();
});
Here is the link to the code for the actual layer. The code is to long to post but the overlay is called Radar.
RADAR CODE
The place to start is the JavaScript console. The error messages there tell you what the problems are.
First, when the page is loaded you have an error on line 286 of wxgr3radar.php:
<body onload="initialize()">
Where is your initialize() function defined? I don't see it in your code.
Then, when I click the Satellite button it stops on line 41 of imap.js because map.overlayMapTypes is undefined:
if (map.overlayMapTypes.length==0) {
Here you're expecting map to be a Maps API object, but map is not what you think it is. Look at it in the debugger. It's a DOM element, not a Maps API map. Your Maps API map is in a variable called googlemap, which you create in line 3 of imap.js.
I'm learning sencha touch and trying put markers on the google map. I've looked at most of the examples online but I'm unable to get the marker and the infoWindow to work. Below is my code:
myApp.views.MapCard = Ext.extend(Ext.Panel, {
id: "mapcard",
layout: 'card',
initComponent: function() {
this.map = new Ext.Map({
useCurrentLocation: true,
mapOptions: {
zoom: 12,
},
});
this.panel = new Ext.Panel({
layout: 'fit',
items: this.map,
});
this.items = this.panel;
myApp.views.MapCard.superclass.initComponent.call(this);
refresh = function(theMap) {
var geoTag = {
lat: '47.584863',
longi: '-122.147026',
text: 'Hello World',
}
addMarker(geoTag, theMap);
}
addMarker = function(geoTag, theMap) {
var latLng = new google.maps.LatLng(geoTag.lat, geoTag.longi);
var marker = new google.maps.Marker({
map: theMap.map,
position: latLng
});
google.maps.event.addListener(marker, "click", function() {
geoTagBubble.setContent(tweet.text);
geoTagBubble.open(theMap.map, marker);
});
};
geoTagBubble = new google.maps.InfoWindow();
refresh(this.map);
},
});
Ext.reg('mapcard', myApp.views.MapCard);
I'm also unable to get the current location of the user, I'm pretty sure that the map is not loaded during the initComponent. I would be calling a json service to pull the lat/lon and loop through later. If there is a better implementation, please let me know!
Thanks a ton!
Here's a pretty minimal example application that demonstrates this:
http://septa.mobi
You can find the source code under view-source or on GitHub:
https://github.com/mjumbewu/Septnuts/
Here's panel where marker are added to a map:
https://github.com/mjumbewu/Septnuts/blob/master/src/Septnuts/MapPanel.js
WARNING: there is a bug in Sencha Touch 1.x that prevents embedded Google Maps from receiving ANY click events
You need to include this patch after including sencha-touch.js in order for any click listener on the map to work:
https://github.com/mjumbewu/Septnuts/blob/master/src/sencha-maptouch-patch.js