I have added WMS layer from Geoserver to show up on Leaflet. However, I would like to map automatically zoom and center to the specific feature or polygon. Does any one have any idea about this. The image attached is what I would like to do.
Here is my code:
<div style="width:400px; height:400px" id="map"></div>
<script>
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{ attribution: 'Map data © OpenStreetMap contributors' }
);
// Mapquest layer
var mapquest = new L.TileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', {
maxZoom: 18,
minZoom: 5,
attribution: "©<a href='http://openstreetmap.org/' target='_blank'>OpenStreetMap</a> contributors, Tiles Courtesy of <a href='http://open.mapquest.com' target='_blank'>MapQuest</a>",
subdomains: ['1','2','3','4']
});
//create map object
var map = new L.Map('map', {
center: [12.565679, 104.990963],
zoom: 8,
layers: [mapquest]
});
var myLayer = new L.GeoJSON().addTo(map);
function loadGeoJson(data) {myLayer.addData(data); }
var rootUrl = 'http://localhost:8181/geoserver/Land_Natural_Resources/wms';
var layer_name = 'Land_Natural_Resources:elc_government_data_complete';
var map_layer = L.tileLayer.wms(rootUrl, {
layers: layer_name,
format: 'image/png',
version: '1.1.0',
transparent: true,
attribution: "",
tiled:true,
featureID:'elc_government_data_complete.1'
}).addTo(map);
</script>
If you modify your loadGeoJson function like this:
function loadGeoJson(data) {
myLayer.addData(data);
map.fitBounds(myLayer.getBounds());
}
This line:
map.fitBounds(myLayer.getBounds());
will pan your map to the bounds of the GeoJSON feature using the maximum possible zoom level for that Polygon.
Related
I am using kml file to display the location on google map. i want to zoom in to that marker location while click the marker. Here is my kml layer code ,
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(11.024747, 76.898037),
zoom: 2,
mapTypeId: 'terrain'
});
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
kmlLayer.addListener('click', function(event) {
var content = event.featureData.infoWindowHtml;
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
});
}
Please Help me
you can zoom to clicked latLng using event.latLng and manually setting a zoom level.
kmlLayer.addListener('click', function(event) {
map.setCenter(event.latLng);
map.setZoom(20)
var content = event.featureData.infoWindowHtml;
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
});
Please find this fiddle -> https://jsfiddle.net/Rohith_KP/mcwzh4an/1/
I have to load KML file in browser.And I have load simple KML file it works perfectly but when I upload the KML file with multiple folder for images it is not loading properly.
Code of line used:-
<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false>"></script>
<script>
var mylocation = {
'latitude': -45.2427303,
'longitude': 115.0639984
};
var map;
function initialize()
{
var myLatlng = new google.maps.LatLng( mylocation.latitude, mylocation.longitude );
var mapOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var kmlPath = '<?php echo urldecode($file_name)?>';
var urlSuffix = (new Date).getTime().toString();
var layer = new google.maps.KmlLayer(kmlPath + '?' + urlSuffix );
layer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
KMLLayer generates map tiles in Google's server side. For the reason, multiple KMLLayer (and fusion tables layer also) do not work as you expected sometimes.
This is not described in the official document, but this comes from my experience.
I recommend you use GeoJSON with DataLayer.
DataLayer generates overlays (marker, polyline , etc...) in client side.
And you can modify the generated overlays easily.
Check it out.
https://developers.google.com/maps/documentation/javascript/datalayer#overview
I am trying to add geo-location to a custom public google map, I can't manage to get it to work. For example here is a custom public google map.
Lets say I wanted to add geo-targeting to that map. I have the following on the site which is directly off the google maps API website:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
as well as the following which I just changed '.getElementsById' to '.getElementsByClassName':
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementsByClassName('map-canvas'),
mapOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Location found using HTML5.'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Then I call for the map which is in a lightbox:
<h2 class="dis">Where can I<br />get Rumble?</h2>
It displays the map fine, and asks to geo-target but I assume the reason its not working on this map is because its not included in the API.
I was hoping someone had a solution for this.
This is not an API based map. You can display the KML from that map on an API based map
Then use your geolocation code to center the map (depending on the ordering, you might need to use the preserveViewport:true option on the KmlLayer). Relevant code below, see the documenation for more examples and information.
This is in your existing page (leave your version)
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(0,0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
Add this to display the data from your "custom map":
var kmlLayer = new google.maps.KmlLayer("https://maps.google.ca/maps/ms?ie=UTF8&msa=0&output=kml&msid=202458571791405992786.0004b9061a3fcd9461d42");
kmlLayer.setMap(map);
I would like to have a blank google map, without any basemap showing roadmap, terrain, hybrid or satellite data: just a white background to display my layer only.
Is that possible?
hexblot was correct with his suggestion to look at custom map types documentation. Here is what I did to have a blank map (white background) without any control.
function initialize(){
var styles = [{
stylers:[{ color: "#ffffff" }]
}
];
var styledMap = new google.maps.StyledMapType(styles);
var centerlatlng = new google.maps.LatLng(0, 0);
var myOptions = {
zoom: 3,
center: centerlatlng,
disableDefaultUI : true,
mapTypeControlOptions: {
mapTypeIds: ['map_style']
},
mapTypeId: 'map_style'
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
map.mapTypes.set('map_style', styledMap);
}
you're most probably interested in custom map types, you can reference Google Maps documentation for that here :
https://developers.google.com/maps/documentation/javascript/maptypes?hl=en#CustomMapTypes
I am using the Google Maps API V3 (so no embedding links) and I would like it so when the users click on one of my polygons (overlays) they don't see the white pop up balloon.
The contents of the balloon (as well as the co-ordinates) come from a KML file.
Here is what I am using to generate my map.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var paris = new google.maps.LatLng(48.8581,2.3827 );
var myOptions = {
zoom: 4,
center: paris,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var france = new google.maps.KmlLayer('france.kml?v=45', {preserveViewport:true});
var germany = new google.maps.KmlLayer('germany.kml?v=45', {preserveViewport:true});
france.setMap(map);
germany.setMap(map);
}
</script>
Change your vars that load the KML's to something that looks like this:
var kmlLayer;
var kmlURL = 'http://www.yourwebsite.com/mapFileName.kml';
var kmlOptions = {
clickable: 0, // polygon ignores mouse clicks
preserveViewport: 1
};
kmlLayer = new google.maps.KmlLayer(kmlURL, kmlOptions);
kmlLayer.setMap(map);