Openseamap on Google Maps - adding marine profile layer as default
6
I am trying to do some personal project which I am trying to add marine layer on google maps. So decided to go with free osm option.
I want to add marine profile and ais layers as default layer on seamark. So far semarks layer osm on google maps is ok.
How can I add other layers as default layer with seamark layer. I couldn't figure out how to add additional layers as default on map.
Thanks in advance!
My fiddle
and Snippet:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: {
lat: 44.5,
lng: 13.1
},
mapTypeControlOptions: {
mapTypeIds: ['roadmap']
}
});
var osmMapTypeOptions = {
getTileUrl: function(coord, zoom) {
console.log("getTileUrl("+coord.x+","+coord.y+","+zoom+")");
var z = zoom;
var limit = Math.pow(2, z);
if (coord.y < 0 || coord.y >= limit) {
return null;
} else {
coord.x = ((coord.x % limit) + limit) % limit;
url = "http://t1.openseamap.org/seamark/";
path = zoom + "/" + coord.x + "/" + coord.y + "." + "png";
console.log("getTileUrl:" + url + path);
return url + path;
}
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
maxZoom: 19,
minZoom: 0,
name: "OSM"
};
function getTileURL(bounds) {
var res = this.map.getResolution();
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
var z = this.map.getZoom();
var limit = Math.pow(2, z);
if (y < 0 || y >= limit) {
return null;
} else {
x = ((x % limit) + limit) % limit;
url = this.url;
path = z + "/" + x + "/" + y + "." + this.type;
if (url instanceof Array) {
url = this.selectUrl(path, url);
}
return url + path;
}
}
var osmMapType = new google.maps.ImageMapType(osmMapTypeOptions);
map.overlayMapTypes.insertAt(0,osmMapType);
map.overlayMapTypes.insertAt(1,osmMapType);
}
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?language=en&libraries=drawing,geometry"></script>
<div id="map"></div>javascript
google-maps openseamap add a comment |
6
I am trying to do some personal project which I am trying to add marine layer on google maps. So decided to go with free osm option.
I want to add marine profile and ais layers as default layer on seamark. So far semarks layer osm on google maps is ok.
How can I add other layers as default layer with seamark layer. I couldn't figure out how to add additional layers as default on map.
Thanks in advance!
My fiddle
and Snippet:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: {
lat: 44.5,
lng: 13.1
},
mapTypeControlOptions: {
mapTypeIds: ['roadmap']
}
});
var osmMapTypeOptions = {
getTileUrl: function(coord, zoom) {
console.log("getTileUrl("+coord.x+","+coord.y+","+zoom+")");
var z = zoom;
var limit = Math.pow(2, z);
if (coord.y < 0 || coord.y >= limit) {
return null;
} else {
coord.x = ((coord.x % limit) + limit) % limit;
url = "http://t1.openseamap.org/seamark/";
path = zoom + "/" + coord.x + "/" + coord.y + "." + "png";
console.log("getTileUrl:" + url + path);
return url + path;
}
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
maxZoom: 19,
minZoom: 0,
name: "OSM"
};
function getTileURL(bounds) {
var res = this.map.getResolution();
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
var z = this.map.getZoom();
var limit = Math.pow(2, z);
if (y < 0 || y >= limit) {
return null;
} else {
x = ((x % limit) + limit) % limit;
url = this.url;
path = z + "/" + x + "/" + y + "." + this.type;
if (url instanceof Array) {
url = this.selectUrl(path, url);
}
return url + path;
}
}
var osmMapType = new google.maps.ImageMapType(osmMapTypeOptions);
map.overlayMapTypes.insertAt(0,osmMapType);
map.overlayMapTypes.insertAt(1,osmMapType);
}
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?language=en&libraries=drawing,geometry"></script>
<div id="map"></div>javascript
google-maps openseamap add a comment |
6
6
6
I am trying to do some personal project which I am trying to add marine layer on google maps. So decided to go with free osm option.
I want to add marine profile and ais layers as default layer on seamark. So far semarks layer osm on google maps is ok.
How can I add other layers as default layer with seamark layer. I couldn't figure out how to add additional layers as default on map.
Thanks in advance!
My fiddle
and Snippet:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: {
lat: 44.5,
lng: 13.1
},
mapTypeControlOptions: {
mapTypeIds: ['roadmap']
}
});
var osmMapTypeOptions = {
getTileUrl: function(coord, zoom) {
console.log("getTileUrl("+coord.x+","+coord.y+","+zoom+")");
var z = zoom;
var limit = Math.pow(2, z);
if (coord.y < 0 || coord.y >= limit) {
return null;
} else {
coord.x = ((coord.x % limit) + limit) % limit;
url = "http://t1.openseamap.org/seamark/";
path = zoom + "/" + coord.x + "/" + coord.y + "." + "png";
console.log("getTileUrl:" + url + path);
return url + path;
}
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
maxZoom: 19,
minZoom: 0,
name: "OSM"
};
function getTileURL(bounds) {
var res = this.map.getResolution();
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
var z = this.map.getZoom();
var limit = Math.pow(2, z);
if (y < 0 || y >= limit) {
return null;
} else {
x = ((x % limit) + limit) % limit;
url = this.url;
path = z + "/" + x + "/" + y + "." + this.type;
if (url instanceof Array) {
url = this.selectUrl(path, url);
}
return url + path;
}
}
var osmMapType = new google.maps.ImageMapType(osmMapTypeOptions);
map.overlayMapTypes.insertAt(0,osmMapType);
map.overlayMapTypes.insertAt(1,osmMapType);
}
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?language=en&libraries=drawing,geometry"></script>
<div id="map"></div>javascript
google-maps openseamap I am trying to do some personal project which I am trying to add marine layer on google maps. So decided to go with free osm option.
I want to add marine profile and ais layers as default layer on seamark. So far semarks layer osm on google maps is ok.
How can I add other layers as default layer with seamark layer. I couldn't figure out how to add additional layers as default on map.
Thanks in advance!
My fiddle
and Snippet:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: {
lat: 44.5,
lng: 13.1
},
mapTypeControlOptions: {
mapTypeIds: ['roadmap']
}
});
var osmMapTypeOptions = {
getTileUrl: function(coord, zoom) {
console.log("getTileUrl("+coord.x+","+coord.y+","+zoom+")");
var z = zoom;
var limit = Math.pow(2, z);
if (coord.y < 0 || coord.y >= limit) {
return null;
} else {
coord.x = ((coord.x % limit) + limit) % limit;
url = "http://t1.openseamap.org/seamark/";
path = zoom + "/" + coord.x + "/" + coord.y + "." + "png";
console.log("getTileUrl:" + url + path);
return url + path;
}
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
maxZoom: 19,
minZoom: 0,
name: "OSM"
};
function getTileURL(bounds) {
var res = this.map.getResolution();
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
var z = this.map.getZoom();
var limit = Math.pow(2, z);
if (y < 0 || y >= limit) {
return null;
} else {
x = ((x % limit) + limit) % limit;
url = this.url;
path = z + "/" + x + "/" + y + "." + this.type;
if (url instanceof Array) {
url = this.selectUrl(path, url);
}
return url + path;
}
}
var osmMapType = new google.maps.ImageMapType(osmMapTypeOptions);
map.overlayMapTypes.insertAt(0,osmMapType);
map.overlayMapTypes.insertAt(1,osmMapType);
}
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?language=en&libraries=drawing,geometry"></script>
<div id="map"></div>var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: {
lat: 44.5,
lng: 13.1
},
mapTypeControlOptions: {
mapTypeIds: ['roadmap']
}
});
var osmMapTypeOptions = {
getTileUrl: function(coord, zoom) {
console.log("getTileUrl("+coord.x+","+coord.y+","+zoom+")");
var z = zoom;
var limit = Math.pow(2, z);
if (coord.y < 0 || coord.y >= limit) {
return null;
} else {
coord.x = ((coord.x % limit) + limit) % limit;
url = "http://t1.openseamap.org/seamark/";
path = zoom + "/" + coord.x + "/" + coord.y + "." + "png";
console.log("getTileUrl:" + url + path);
return url + path;
}
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
maxZoom: 19,
minZoom: 0,
name: "OSM"
};
function getTileURL(bounds) {
var res = this.map.getResolution();
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
var z = this.map.getZoom();
var limit = Math.pow(2, z);
if (y < 0 || y >= limit) {
return null;
} else {
x = ((x % limit) + limit) % limit;
url = this.url;
path = z + "/" + x + "/" + y + "." + this.type;
if (url instanceof Array) {
url = this.selectUrl(path, url);
}
return url + path;
}
}
var osmMapType = new google.maps.ImageMapType(osmMapTypeOptions);
map.overlayMapTypes.insertAt(0,osmMapType);
map.overlayMapTypes.insertAt(1,osmMapType);
}
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?language=en&libraries=drawing,geometry"></script>
<div id="map"></div>var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: {
lat: 44.5,
lng: 13.1
},
mapTypeControlOptions: {
mapTypeIds: ['roadmap']
}
});
var osmMapTypeOptions = {
getTileUrl: function(coord, zoom) {
console.log("getTileUrl("+coord.x+","+coord.y+","+zoom+")");
var z = zoom;
var limit = Math.pow(2, z);
if (coord.y < 0 || coord.y >= limit) {
return null;
} else {
coord.x = ((coord.x % limit) + limit) % limit;
url = "http://t1.openseamap.org/seamark/";
path = zoom + "/" + coord.x + "/" + coord.y + "." + "png";
console.log("getTileUrl:" + url + path);
return url + path;
}
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
maxZoom: 19,
minZoom: 0,
name: "OSM"
};
function getTileURL(bounds) {
var res = this.map.getResolution();
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
var z = this.map.getZoom();
var limit = Math.pow(2, z);
if (y < 0 || y >= limit) {
return null;
} else {
x = ((x % limit) + limit) % limit;
url = this.url;
path = z + "/" + x + "/" + y + "." + this.type;
if (url instanceof Array) {
url = this.selectUrl(path, url);
}
return url + path;
}
}
var osmMapType = new google.maps.ImageMapType(osmMapTypeOptions);
map.overlayMapTypes.insertAt(0,osmMapType);
map.overlayMapTypes.insertAt(1,osmMapType);
}
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?language=en&libraries=drawing,geometry"></script>
<div id="map"></div>javascript
google-maps openseamap javascript
google-maps openseamap asked Sep 14 '17 at 20:28
user8586307
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
4
+25
I've found an example of using several layers on a map:
https://developers.google.com/fusiontables/docs/samples/multiple_layers_per_map
<!DOCTYPE html>
<!--
Copyright 2011 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Fusion Tables Layer Example: Multiple Layers per Map</title>
<link href="/apis/fusiontables/docs/samples/style/default.css"
rel="stylesheet" type="text/css">
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(37.4, -122.1),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow();
// Initialize the first layer
var firstLayer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '196LqydLhOq1Wl9612hNhcGoh4vUmRjTaiFvDhA'
},
map: map,
suppressInfoWindows: true
});
google.maps.event.addListener(firstLayer, 'click', function(e) {
windowControl(e, infoWindow, map);
});
// Initialize the second layer
var secondLayer = new google.maps.FusionTablesLayer({
query: {
select: "'Full Address'",
from: '1tL67aacGcCyMfAg9PUo_-gp4qm74GDtFiCMtFg'
},
map: map,
suppressInfoWindows: true
});
google.maps.event.addListener(secondLayer, 'click', function(e) {
windowControl(e, infoWindow, map);
});
}
// Open the info window at the clicked location
function windowControl(e, infoWindow, map) {
infoWindow.setOptions({
content: e.infoWindowHtml,
position: e.latLng,
pixelOffset: e.pixelOffset
});
infoWindow.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Hope that helps.
edited Oct 20 '17 at 15:27
gnat
6,01693964
answered Oct 2 '17 at 18:19
Felipe Valdes
914314
Thank you for the answer, but it is really not specifically what I was looking for. I need openseamap marine profile layer.
– user8586307
Oct 3 '17 at 19:06
2
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
– R3tep
Oct 20 '17 at 9:22
add a comment |
0
try creating:
var osmMapTypeOptions2 = {...}
...
var osmMapType2 = new google.maps.ImageMapType(osmMapTypeOptions2);
...
and then:
map.overlayMapTypes.insertAt(0,osmMapType);
map.overlayMapTypes.insertAt(1,osmMapType);
map.overlayMapTypes.insertAt(2,osmMapType2);
map.overlayMapTypes.insertAt(3,osmMapType2);
answered Nov 20 at 21:57
vka
1
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f46227738%2fopenseamap-on-google-maps-adding-marine-profile-layer-as-default%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
4
+25
I've found an example of using several layers on a map:
https://developers.google.com/fusiontables/docs/samples/multiple_layers_per_map
<!DOCTYPE html>
<!--
Copyright 2011 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Fusion Tables Layer Example: Multiple Layers per Map</title>
<link href="/apis/fusiontables/docs/samples/style/default.css"
rel="stylesheet" type="text/css">
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(37.4, -122.1),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow();
// Initialize the first layer
var firstLayer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '196LqydLhOq1Wl9612hNhcGoh4vUmRjTaiFvDhA'
},
map: map,
suppressInfoWindows: true
});
google.maps.event.addListener(firstLayer, 'click', function(e) {
windowControl(e, infoWindow, map);
});
// Initialize the second layer
var secondLayer = new google.maps.FusionTablesLayer({
query: {
select: "'Full Address'",
from: '1tL67aacGcCyMfAg9PUo_-gp4qm74GDtFiCMtFg'
},
map: map,
suppressInfoWindows: true
});
google.maps.event.addListener(secondLayer, 'click', function(e) {
windowControl(e, infoWindow, map);
});
}
// Open the info window at the clicked location
function windowControl(e, infoWindow, map) {
infoWindow.setOptions({
content: e.infoWindowHtml,
position: e.latLng,
pixelOffset: e.pixelOffset
});
infoWindow.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Hope that helps.
edited Oct 20 '17 at 15:27
gnat
6,01693964
answered Oct 2 '17 at 18:19
Felipe Valdes
914314
Thank you for the answer, but it is really not specifically what I was looking for. I need openseamap marine profile layer.
– user8586307
Oct 3 '17 at 19:06
2
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
– R3tep
Oct 20 '17 at 9:22
add a comment |
4
+25
I've found an example of using several layers on a map:
https://developers.google.com/fusiontables/docs/samples/multiple_layers_per_map
<!DOCTYPE html>
<!--
Copyright 2011 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Fusion Tables Layer Example: Multiple Layers per Map</title>
<link href="/apis/fusiontables/docs/samples/style/default.css"
rel="stylesheet" type="text/css">
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(37.4, -122.1),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow();
// Initialize the first layer
var firstLayer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '196LqydLhOq1Wl9612hNhcGoh4vUmRjTaiFvDhA'
},
map: map,
suppressInfoWindows: true
});
google.maps.event.addListener(firstLayer, 'click', function(e) {
windowControl(e, infoWindow, map);
});
// Initialize the second layer
var secondLayer = new google.maps.FusionTablesLayer({
query: {
select: "'Full Address'",
from: '1tL67aacGcCyMfAg9PUo_-gp4qm74GDtFiCMtFg'
},
map: map,
suppressInfoWindows: true
});
google.maps.event.addListener(secondLayer, 'click', function(e) {
windowControl(e, infoWindow, map);
});
}
// Open the info window at the clicked location
function windowControl(e, infoWindow, map) {
infoWindow.setOptions({
content: e.infoWindowHtml,
position: e.latLng,
pixelOffset: e.pixelOffset
});
infoWindow.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Hope that helps.
edited Oct 20 '17 at 15:27
gnat
6,01693964
answered Oct 2 '17 at 18:19
Felipe Valdes
914314
Thank you for the answer, but it is really not specifically what I was looking for. I need openseamap marine profile layer.
– user8586307
Oct 3 '17 at 19:06
2
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
– R3tep
Oct 20 '17 at 9:22
add a comment |
4
+25
4
+25
4
+25
I've found an example of using several layers on a map:
https://developers.google.com/fusiontables/docs/samples/multiple_layers_per_map
<!DOCTYPE html>
<!--
Copyright 2011 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Fusion Tables Layer Example: Multiple Layers per Map</title>
<link href="/apis/fusiontables/docs/samples/style/default.css"
rel="stylesheet" type="text/css">
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(37.4, -122.1),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow();
// Initialize the first layer
var firstLayer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '196LqydLhOq1Wl9612hNhcGoh4vUmRjTaiFvDhA'
},
map: map,
suppressInfoWindows: true
});
google.maps.event.addListener(firstLayer, 'click', function(e) {
windowControl(e, infoWindow, map);
});
// Initialize the second layer
var secondLayer = new google.maps.FusionTablesLayer({
query: {
select: "'Full Address'",
from: '1tL67aacGcCyMfAg9PUo_-gp4qm74GDtFiCMtFg'
},
map: map,
suppressInfoWindows: true
});
google.maps.event.addListener(secondLayer, 'click', function(e) {
windowControl(e, infoWindow, map);
});
}
// Open the info window at the clicked location
function windowControl(e, infoWindow, map) {
infoWindow.setOptions({
content: e.infoWindowHtml,
position: e.latLng,
pixelOffset: e.pixelOffset
});
infoWindow.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Hope that helps.
edited Oct 20 '17 at 15:27
gnat
6,01693964
answered Oct 2 '17 at 18:19
Felipe Valdes
914314
I've found an example of using several layers on a map:
https://developers.google.com/fusiontables/docs/samples/multiple_layers_per_map
<!DOCTYPE html>
<!--
Copyright 2011 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Fusion Tables Layer Example: Multiple Layers per Map</title>
<link href="/apis/fusiontables/docs/samples/style/default.css"
rel="stylesheet" type="text/css">
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(37.4, -122.1),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow();
// Initialize the first layer
var firstLayer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '196LqydLhOq1Wl9612hNhcGoh4vUmRjTaiFvDhA'
},
map: map,
suppressInfoWindows: true
});
google.maps.event.addListener(firstLayer, 'click', function(e) {
windowControl(e, infoWindow, map);
});
// Initialize the second layer
var secondLayer = new google.maps.FusionTablesLayer({
query: {
select: "'Full Address'",
from: '1tL67aacGcCyMfAg9PUo_-gp4qm74GDtFiCMtFg'
},
map: map,
suppressInfoWindows: true
});
google.maps.event.addListener(secondLayer, 'click', function(e) {
windowControl(e, infoWindow, map);
});
}
// Open the info window at the clicked location
function windowControl(e, infoWindow, map) {
infoWindow.setOptions({
content: e.infoWindowHtml,
position: e.latLng,
pixelOffset: e.pixelOffset
});
infoWindow.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Hope that helps.
edited Oct 20 '17 at 15:27
gnat
6,01693964
answered Oct 2 '17 at 18:19
Felipe Valdes
914314
edited Oct 20 '17 at 15:27
gnat
6,01693964
edited Oct 20 '17 at 15:27
gnat
6,01693964
edited Oct 20 '17 at 15:27
gnat
6,01693964
6,01693964
answered Oct 2 '17 at 18:19
Felipe Valdes
914314
answered Oct 2 '17 at 18:19
Felipe Valdes
914314
answered Oct 2 '17 at 18:19
Felipe Valdes
914314
914314
Thank you for the answer, but it is really not specifically what I was looking for. I need openseamap marine profile layer.
– user8586307
Oct 3 '17 at 19:06
2
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
– R3tep
Oct 20 '17 at 9:22
add a comment |
Thank you for the answer, but it is really not specifically what I was looking for. I need openseamap marine profile layer.
– user8586307
Oct 3 '17 at 19:06
2
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
– R3tep
Oct 20 '17 at 9:22
Thank you for the answer, but it is really not specifically what I was looking for. I need openseamap marine profile layer.
– user8586307
Oct 3 '17 at 19:06
Thank you for the answer, but it is really not specifically what I was looking for. I need openseamap marine profile layer.
– user8586307
Oct 3 '17 at 19:06
2
2
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
– R3tep
Oct 20 '17 at 9:22
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
– R3tep
Oct 20 '17 at 9:22
add a comment |
0
try creating:
var osmMapTypeOptions2 = {...}
...
var osmMapType2 = new google.maps.ImageMapType(osmMapTypeOptions2);
...
and then:
map.overlayMapTypes.insertAt(0,osmMapType);
map.overlayMapTypes.insertAt(1,osmMapType);
map.overlayMapTypes.insertAt(2,osmMapType2);
map.overlayMapTypes.insertAt(3,osmMapType2);
answered Nov 20 at 21:57
vka
1
add a comment |
0
try creating:
var osmMapTypeOptions2 = {...}
...
var osmMapType2 = new google.maps.ImageMapType(osmMapTypeOptions2);
...
and then:
map.overlayMapTypes.insertAt(0,osmMapType);
map.overlayMapTypes.insertAt(1,osmMapType);
map.overlayMapTypes.insertAt(2,osmMapType2);
map.overlayMapTypes.insertAt(3,osmMapType2);
answered Nov 20 at 21:57
vka
1
add a comment |
0
0
0
try creating:
var osmMapTypeOptions2 = {...}
...
var osmMapType2 = new google.maps.ImageMapType(osmMapTypeOptions2);
...
and then:
map.overlayMapTypes.insertAt(0,osmMapType);
map.overlayMapTypes.insertAt(1,osmMapType);
map.overlayMapTypes.insertAt(2,osmMapType2);
map.overlayMapTypes.insertAt(3,osmMapType2);
answered Nov 20 at 21:57
vka
1
try creating:
var osmMapTypeOptions2 = {...}
...
var osmMapType2 = new google.maps.ImageMapType(osmMapTypeOptions2);
...
and then:
map.overlayMapTypes.insertAt(0,osmMapType);
map.overlayMapTypes.insertAt(1,osmMapType);
map.overlayMapTypes.insertAt(2,osmMapType2);
map.overlayMapTypes.insertAt(3,osmMapType2);
answered Nov 20 at 21:57
vka
1
answered Nov 20 at 21:57
vka
1
answered Nov 20 at 21:57
vka
1
answered Nov 20 at 21:57
vka
1
1
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f46227738%2fopenseamap-on-google-maps-adding-marine-profile-layer-as-default%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
