Develop Reference

Leaflet map doesn't always load centered the same WMS Tile Layer

I'm developing an app using the Ionic framework with AngularJS and the LeafletJS library.
When I load the map for the first time it displays correctly centered.
But, when I change to another view of the app and return to the map view, the WMS Tile Layer displays displaced from the center, only a little bit of it on the top left corner of the map can be seen.
Here it is the snippet of code that creates the map and loads the WMS Tile Layer:
function crearPlano($scope, $http, infoService, sharedProperties, poisService, createModal) {
var building = localStorage.building,
floor = localStorage.planta,
floor_id = building + floor,
building_id = floor_id.replace(/\./g,"_").toLowerCase();
var parameters =
[
'proyecto/ows',
'service=WFS',
'version=1.0.0',
'request=GetFeature',
'typeName=proyecto:'+building_id,
'srsName=epsg:4326',
'outputFormat=application/json'
]
var url = APP_CONSTANTS.URI_Geoserver_1 + 'proyecto/ows?' + parameters.join('&');
$.ajax({
url : url,
type: 'GET',
dataType : 'json',
crossDomain: true,
headers: { 'Access-Control-Allow-Origin': '*' },
success: function(data) {
handleJson(data, sharedProperties, poisService, createModal, function(map){
sharedProperties.setMap(map);
});
}
});
function handleJson(data, floor_id, sharedProperties, poisService, createModal, callback) {
console.log("handleJson", data, floor_id);
var map = sharedProperties.getMap(),
coordinates = data.features[0].geometry.coordinates[0][0][0],
floorCoordinates = new L.latLng(coordinates[1], coordinates[0]);
//Remove previous plan layers
if(!(typeof map == 'undefined')) { map.remove(); }
var imageLayer = new L.tileLayer.wms(APP_CONSTANTS.URI_Geoserver_2 + "sigeuz/wms",
{
layers: 'sigeuz:vista_plantas',
maxZoom: 25,
zIndex: 5,
viewparams : 'PLANTA:'+floor_id,
format: 'image/png', transparent: true, attribution: floor_id
});
console.log("Before create map --> Center", JSON.stringify(floorCoordinates));
console.log("Before create map --> MaxBounds", JSON.stringify(L.geoJson(data).getBounds()));
map= new L.map('plan'
,{
crs: L.CRS.EPSG3857,
layers: [imageLayer]
}
).setView(floorCoordinates, 20);
console.log("After create map --> Center", JSON.stringify(plano.getCenter()));
console.log("After create map --> Bounds", JSON.stringify(plano.getBounds()));
callback(map);
}
}
Why is the map loading centered only the first time, but displaced after?
I've added some console logs to the code in order to debug data passed as parameters to the map's creation and map's data after its creation. This way I can compare if something has changed in both situations described earlier. This is the result:
Before create map --> Center {"lat":41.64063807836347,"lng":-0.90146666131869}
Before create map --> MaxBounds {"_southWest":{"lat":41.64061302810611,"lng":-0.9015017606364195},"_northEast":{"lat":41.64079735418267,"lng":-0.9012732012812255}}
After create map --> Center {"lat":41.6406381751715,"lng":-0.9014656782889374}
After create map --> Bounds {"_southWest":{"lat":41.64032848115259,"lng":-0.9017432869219788},"_northEast":{"lat":41.640947867702096,"lng":-0.9011880696558963}}
Before create map --> Center {"lat":41.64063807836347,"lng":-0.90146666131869}
Before create map --> MaxBounds {"_southWest":{"lat":41.64061302810611,"lng":-0.9015017606364195},"_northEast":{"lat":41.64079735418267,"lng":-0.9012732012812255}}
After create map --> Center {"lat":41.64063807836347,"lng":-0.90146666131869}
After create map --> Bounds {"_southWest":{"lat":41.640637639043334,"lng":-0.9014663100242616},"_northEast":{"lat":41.640637639043334,"lng":-0.9014663100242616}}
As can be seen, data passed as center point and max bounds to the map creation is the same in both cases, but once the map has been created, center of the map coordinates and bounds differ a little bit from the first situation to the second one.
I don't quite understand why it changes.

Run invalidateSize() every time the map container potentially changes size. This includes hiding/displaying it via jquery, ionic, and the like.

Google Maps - FusionTablesLayer to Polygon

I'm using Google Maps API and jquery-ui-maps (this questions has nothing to do with the plugin which is working great).
I've created a FusionTablesLayer with all countries except Mozambique. The user could place a marker and reposition it. I'm trying to find a way to block the drag (or alert the user, it doesn't matter now) if he tries to place the marker outside Mozambique (over the FusionTablesLayer).
After some research I discover this method: containsLocation(point:LatLng, polygon:Polygon), which computes whether the given point lies inside the specified polygon.
It should receive a Polygon and I've got a FusionTablesLayer. Any clue how to solve this?
Here's my code:FIDDLE
Try to place a marker and drag it...
//Initialize the map
var mapa = $('#map_canvas').gmap({'center': '-18.646245,35.815918'});
$('#map_canvas').gmap('option', 'zoom', 7);
//create the layer (all countries except Mozambique)
var world_geometry;
$('#map_canvas').gmap().bind('init', function(event, map) {
world_geometry = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk',
where: "ISO_2DIGIT NOT EQUAL TO 'MZ'"
},
styles: [{
polygonOptions: {
fillColor: "#333333",
fillOpacity: 0.3
}
}],
map: map,
suppressInfoWindows: true
});
});
$('#map_canvas').gmap().bind('init', function(event, map) {
$(map).click(function(event) {
$('#map_canvas').gmap('clear', 'markers');
$('#map_canvas').gmap('addMarker', {
'position': event.latLng,
'draggable': true,
'bounds': false
}, function(map, marker) {
}).dragend(function(event) {
//I need to check if the marker is over the FusionTablesLayer and block the drag.
//var test = google.maps.geometry.poly.containsLocation(event.latLng, world_geometry);
}).click(function() {
})
});
});

Since there is no containsLocation in FusionTablesLayer, and since no mouseevents but click is supported (that would have made it a lot easier) - there is no other way round than to check if there is being dragged outside the area itself, Mozambique - not into the FusionTablesLayer. The solution is to create an invisible polygon for Mozambique, and use that polygon to check for containsLocation when dragging is finished.
The polygon can be based on the KML from the row you are excluding, MZ. That can be done using google.visualization.Query.
1) include the Google API loader in your project :
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
2) initialize Visualization :
google.load('visualization', '1.0');
3) define a variable for the polygon holding the Mozambique borders :
var mozambique;
The following is a function that loads the geometry data for Mozambique, and then creates an invisible polygon on the map; google.visualization.Query is used instead of the automated FusionTablesLayer so we can extract the <coordinates> from the KML and use them as base for the polygon.
In basic, this is how to convert KML-data from a FusionTable to a polygon :
function initMozambique(map) {
//init the query string, select mozambique borders
var sql = encodeURIComponent("SELECT 'geometry' FROM 1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk WHERE ISO_2DIGIT ='MZ'");
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + sql);
query.send(function (response) {
var data = response.getDataTable().getValue(0, 0);
//create a XML parser
if (window.DOMParser) {
var parser = new DOMParser();
var kml = parser.parseFromString(data, "text/xml");
} else { // Internet Explorer
var kml = new ActiveXObject("Microsoft.XMLDOM");
kml.loadXML(data);
}
//get the coordinates of Mozambique
var latLngs = kml.getElementsByTagName("coordinates")[0].childNodes[0].nodeValue.split(' ');
//create an array of LatLngs
var mzLatLngs = [];
for (var i = 0; i < latLngs.length; i++) {
var latLng = latLngs[i].split(',');
//<coordinates> for this FusionTable comes in lng,lat format
mzLatLngs.push(new google.maps.LatLng(latLng[1], latLng[0]));
}
//initialize the mozambique polygon
mozambique = new google.maps.Polygon({
paths: mzLatLngs,
fillColor: 'transparent',
strokeColor : 'transparent',
map: map
});
//make the mozambique polygon "transparent" for clicks (pass clicks to map)
google.maps.event.addListener(mozambique, 'click', function(event) {
google.maps.event.trigger(map, 'click', event);
});
});
}
Call the above initMozambique function in your second gmap().bind('init'... :
$('#map_canvas').gmap().bind('init', function(event, map) {
initMozambique(map);
...
Now you can check the mozambique-polygon for containsLocation after dragging
...
}).dragend(function(event) {
if (!google.maps.geometry.poly.containsLocation(event.latLng, mozambique)) {
alert('You are not allowed to drag the marker outside Mozambique');
}
//I need to check if the marker is over the FusionTablesLayer and block the drag.
//var test = google.maps.geometry.poly.containsLocation(event.latLng, world_geometry);
}).click(function() {
})
...
See forked fiddle, working demo with the code above -> http://jsfiddle.net/yb5t6cw6/
Tested in Chrome, FF and IE, ubuntu and windows.

KML Layers rendering order google maps

I have noticed some different behavior with the following APIS
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
http://jsfiddle.net/x8dSP/2062/
Sometimes the polygon layer renders ontop of the balloon layer, and sometimes the opposite.
It seems like after the map is "cached?" in the browser it will render with the polygon layer ontop. Is there anyway to prevent this? Or to have one layer always be in the background? Unfortunately I cannot map these layers in one kml.

The layers get rendered in the order they are received from the server (which is not necessarily the order in which they appear in the code). You can force one to load after the other by waiting for the KmlLayer status_changed event before setting the map property of the second.
function initialize() {
var chicago = new google.maps.LatLng(-122.365662,37.826988);
var mapOptions = {
zoom: 11,
center: chicago
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'https://sites.google.com/site/gmaptest123/kml/nst.kml'
});
google.maps.event.addListener(ctaLayer, "status_changed", function() {
ctaLayer2.setMap(map);
});
ctaLayer.setMap(map);
var ctaLayer2 = new google.maps.KmlLayer({
url: 'https://sites.google.com/site/gmaptest123/kml/HelloKml6.kml'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
updated fiddle

I've got it working here
Add these two parameters to your markers layer:
pane: "floatPane",
preserveViewport: true
So it looks like this:
var ctaLayer2 = new google.maps.KmlLayer({
url: 'https://sites.google.com/site/gmaptest123/kml/HelloKml6.kml',
pane: "floatPane",
preserveViewport: true
});
The default is, I believe, mapPane, which has a lower z-index than floatPane.

There is an interesting method in this link. Here is the actual ordering code:
// BEGIN SEQUENTIAL KML LOADING CODE
// This ensures the layers are drawn in order: cone, warnings, track
// Draw coneLayer
coneLayer.setMap(map);
// Listen for when coneLayer is drawn
var listener1 = google.maps.event.addListener(coneLayer, 'metadata_changed', function() {
// When it's drawn (metadata changed), clear listener, draw warningsLayer ...
google.maps.event.clearListeners(coneLayer, 'metadata_changed');
warningsLayer.setMap(map);
// .. and listen for when warningsLayer is drawn
var listener2 = google.maps.event.addListener(warningsLayer, 'metadata_changed', function() {
// When it's drawn, clear listener, draw trackLayer ...
google.maps.event.clearListeners(warningsLayer, 'metadata_changed');
trackLayer.setMap(map);
// ... and listen for when trackLayer is drawn
var listener3 = google.maps.event.addListener(trackLayer, 'metadata_changed', function() {
// When it's drawn, clear listener and blank out the map-loading sign
google.maps.event.clearListeners(trackLayer, 'metadata_changed');
$('#loadingIndicator').html("");
});
});
});
// END SEQUENTIAL KML LOADING CODE

Dynamic rectangles in Google Maps

First I'm pretty new to Javascript, so sorry if my question comes across poorly.
I'm creating an application in Flash to help users calculate their electrical costs. Then I'm taking this figure and write it to an xml file.
Now I'm looking to open a webpage and show a google map, and there is a rectangle drawn over the map which is generated dynamically from the number generated earlier and stored in the xml file.
I'm completely lost as to places to turn on how to achieve this. I've gotten my map on to my page, and it scales 100% as I want it to, but I can't figure out the dynamic rectangle part at all. Any ideas or pointers in the right direction greatly appreciated.

In this latest version, the XML file
<countries>
<country name="USA" lat="40.0" lng="-100.0" width="30.0"/>
<country name="France" lat="46.6" lng="2.7" width="10"/>
<country name="Germany" lat="51.1" lng="10.1" width="20"/>
</countries>
is loaded as soon as the map tiles finish loading. I could not get the getProjection to be called correctly if I did not wait for tile loading to finish. The docs state that getting the projection needs the map to be initialized, and recommends listening for projection_changed. Both ways work yet I still feel listening to tiles_loaded is safer and if something goes wrong with the xml loading it will get called again if the map is zoomed or panned a noticeable amount.
var map;
var xmlLoaded = false;
function initialize() {
var mapOptions = { center: new google.maps.LatLng(30.0, 0.0), zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
google.maps.event.addListener(map, 'tilesloaded', loadData);
}
function loadData() {
if(!xmlLoaded) {
$.ajax({
type: "GET",
url: "co2data.xml",
dataType: "xml",
success: function(xml) {
var countries = xml.documentElement.getElementsByTagName("country");
for(var i = 0, country; country = countries[i]; i++) {
var name = country.getAttribute("name");
var lat = parseFloat(country.getAttribute("lat"));
var lng = parseFloat(country.getAttribute("lng"));
var point = map.getProjection().fromLatLngToPoint(new google.maps.LatLng(lat,lng));
// width is really an arbitrary unit, relative to CO2 tonnage.
// equals the side of the drawn square.
// it is measured in google maps points units.
var width = parseFloat(country.getAttribute("width"));
makeCO2Rect(name, point, width);
}
xmlLoaded = true;
}
});
}
}
The rectangle is defined by width in points (the whole world is 256x256 points), so some conversion is needed when assigning their centers to the more conventional LatLng.
function rectParamsToBounds(point, width) {
var ctrX = point.x;
var ctrY = point.y;
var swX = ctrX - (width/2);
var swY = ctrY - (width/2);
var neX = ctrX + (width/2);
var neY = ctrY + (width/2);
return new google.maps.LatLngBounds(
map.getProjection().fromPointToLatLng(new google.maps.Point(swX, swY)),
map.getProjection().fromPointToLatLng(new google.maps.Point(neX, neY)));
}
Finally, a rectangle is created with a country name that goes into a MarkerWithLabel (using v1.1.5 here, you can hotlink to http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/src/markerwithlabel_packed.js though I prefer saving a local copy)
Since dragging a rectangle appears impossible, a marker in its center works as a handle. When it's dragged, the associated rectangle moves with it.
function makeCO2Rect(name, point, width) {
var rect = new google.maps.Rectangle({
map: map,
bounds: rectParamsToBounds(point, width)
});
var marker = new MarkerWithLabel({
map: map,
position: map.getProjection().fromPointToLatLng(new google.maps.Point(point.x, point.y)),
draggable: true,
raiseOnDrag: false,
labelContent: name,
labelAnchor: new google.maps.Point(30, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 1.0}
});
google.maps.event.addListener(marker, 'drag', function(event) {
var newLatLng = event.latLng;
var newPoint = map.getProjection().fromLatLngToPoint(newLatLng);
rect.setBounds(rectParamsToBounds(newPoint, width));
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Styling the labels need to be done both in the .labels CSS class and the constructor, and rectangles have options like stroke color, thickness, opacity, and fill color.

If you just want to place a rectangular shape on the map, you can create a google.maps.Rectangleapi-doc. If you want to create a rectangular label on the map, you may be more interested in the InfoBox Utility Librarywiki-page.

how to integrate a pair of fusion tables with GroundOverlays from a KML file? Updated with my attempt to solve (unsuccessful)

Short version of my question:
How do I integrate a pair of Google Maps fusion tables (polygons and markers) with GroundOverlays from a KML file? Everything clickable.
Background:
I am working on an interactive history mapping project that uses 2 layers of fusion tables (one layer is polygons, the other is location markers).
I also want to overlay old maps via GroundOverlay -- which is not presently possible with fusion tables -- and so I have been experimenting with GroundOverlay in a KML file.
I've complicated it by adding listeners on both the pages to control click boxes.
I have two webpages:
1. the fusion tables and
2. the KML groundoverlays,
both working fine.
What I want to do is integrate them into a single page. I am not a programmer and don't understand JS well enough to make this happen.
The scripting used was all adapted from examples found online.
Here is my first working page:
http://wendysmithtoronto.com/mapping/townofyork-fusiontables2.html
You'll find a link to the second page there.
Your help would be greatly appreciated.
Thank you.
Wendy
Update:
Here's my effort to merge my two sets of data:
http://wendysmithtoronto.com/mapping/townofyork-merged.html
I tried to do this by adding bits of script from the kmlmaps page into the fusiontables page, but clearly I didn't put things in the right place. Or am missing bits of punctuation (or mixing up different types of scripting, or?)
The map appears, with the polygons and the markers both properly appearing. But now (1) the fusion table icons aren't clickable, and (2) the history maps don't appear. However, the fusion table checkboxes (in blue table) DO work.
I don't understand JS well enough to figure it out.
The two sets of controls from the two pages are both here (in the blue and grey boxes, just above the map). Each set of controls (listeners & click boxes) worked fine in its own wepage but now only the fusion tables controls work.
Eric, thanks for having a look at this! (I just now found your reply. I've been watching for a reply notification but wasn't checking the right place.)
Cheers,
Wendy

Your html file had significant errors in the javascript portions. You really should study up on same basic javascript and in particular using JS with the GMap API.
You created 2 global map objects. You did not encapsulate all your map and layer creations within you initialize function(). All map and layer creation must be done within the initialize (on body load) function. You must set globals outside your initialize function, e.g. the map, all the layers, etc. Finally you were failing to call layer.setMap(map) on 2 of your KML layers.
Despite all this I fixed your file, really just re-arranging things. This is just the section I had to fix. Moved everything into the initialize()
function showbuildings(buildingcheck) {
if (buildingcheck.checked == true)
{
campusmap.setMap(map);
} else {
campusmap.setMap(null);
}
}
function showphilpotts(philpottscheck) {
if (philpottscheck.checked == true)
{
philpotts.setMap(map);
} else {
philpotts.setMap(null);
}
}
function showbeartrail(beartrailcheck) {
if (beartrailcheck.checked == true)
{
beartrail.setMap(map);
} else {
beartrail.setMap(null);
}
}
var infoWindow = new google.maps.InfoWindow();
function openIW(FTevent) {
// infoWindow.setContent(FTevent.infoWindowHtml);
// infoWindow.setPosition(FTevent.latLng);
infoWindow.setOptions(
{
content: FTevent.infoWindowHtml,
position: FTevent.latLng,
pixelOffset: FTevent.pixelOffset
});
infoWindow.open(map);
}
// Globals
//Begin map parameters
var map;
var layer_2;
var layer_1;
var tableid_1 = 2920040; // polygons
var tableid_2 = 3189980; // houses
var zoom = 12;
var center = new google.maps.LatLng(43.652417455515476, -79.37926607055226);
var campusmap;
var philpotts;
var beartrail;
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: center,
zoom: zoom,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//End map parameters
campusmap = new google.maps.KmlLayer('http://wendysmithtoronto.com/mapping/1851mapshoreline.kml', {preserveViewport:true, suppressInfoWindows:true});
campusmap.setMap(map);
google.maps.event.addListener(campusmap, 'click', function(kmlEvent) {
document.getElementById('sidebarinfo').innerHTML = kmlEvent.featureData.description;
});
philpotts = new google.maps.KmlLayer('http://wendysmithtoronto.com/mapping/1818maplieutphilpottsd.kml', {preserveViewport:true, suppressInfoWindows:true});
google.maps.event.addListener(philpotts, 'click', function(kmlEvent) {
document.getElementById('sidebarinfo').innerHTML = kmlEvent.featureData.description;
});
philpotts.setMap(map);
beartrail = new google.maps.KmlLayer('http://wendysmithtoronto.com/mapping/1842map-jamescaneb.kml', {preserveViewport:true, suppressInfoWindows:true});
google.maps.event.addListener(beartrail, 'click', function(kmlEvent) {
document.getElementById('sidebarinfo').innerHTML = kmlEvent.featureData.description;
});
beartrail.setMap(map);
layer_2 = new google.maps.FusionTablesLayer({
suppressInfoWindows:true,
query: {
select: 'Location',
from: '3189980'
},
styles: [
{where: "'style' = 14", markerOptions:{ iconName:"star"}},
{where: "'style' = 13", markerOptions:{ iconName:"wht_pushpin"}},
{where: "'style' = 11", markerOptions:{iconName:"red_blank"}}, //town houses
{where: "'style' = 12", markerOptions:{ iconName:"orange_blank"}}, //country homes
{where: "'style' = 15", markerOptions:{ iconName:"target"}},
]});
layer_1 = new google.maps.FusionTablesLayer({
suppressInfoWindows:true,
query: {
select: 'Location',
from: '2920040'
}}),
google.maps.event.addListener(layer_1, "click", openIW);
google.maps.event.addListener(layer_2, "click", openIW);
google.maps.event.addListener(map, "click", function() { infoWindow.close();});
layer_1.setMap(map);
layer_2.setMap(map);
} // end initialize