All I want to show the two satellite map images like this:
I have the image bounds, 4 parameters that define a tile (square):
21.00997925,42.72179487,21.00860596,42.72078596
22.00997925,43.72179487,22.00860596,43.72078596
or I can use the center of the square for example :
21.00997925,42.72179487
Here map is initialized:
<div class="row">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
<script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>
<div class="col-xs-12">
<h1>MAP</h1>
<div style="width:500px; height:500px" id="map"></div>
</div>
</div>
<script type="text/javascript">
(function() {
var map = new L.Map('map', {center: new L.LatLng(51.51, -0.11), zoom: 9});
var googleLayer = new L.Google('SATELLITE');
map.addLayer(googleLayer);
})();
</script>
based on this link I can do this:
var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);
Here I created a JS Fiddle
Please, can somebody help me, how to display two satellite images based on latitude and longitude?
If you want to display two maps, you need to create two separate maps.
var map = new L.Map('map', {
center: new L.LatLng(51.51, -0.11),
zoom: 9
});
var googleLayer = new L.Google('SATELLITE');
map.addLayer(googleLayer);
var map2 = new L.Map('map2', {
center: new L.LatLng(51.51, -0.11),
zoom: 15
});
var googleLayer = new L.Google('SATELLITE');
map2.addLayer(googleLayer);
html {
height: 90%;
width: 90%
}
body {
margin: 10px;
height: 100%;
}
#map,
#map2 {
height: 50%;
width: 100%;
border: 1px black solid;
}
<link href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" rel="stylesheet" />
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>
<div id="map"></div>
<div id="map2"></div>
Related
I am trying to show a circle around the marker which will tell user the range of that marker. I have tried so far following code. I am not being able to show the circle.
I want something like this.
var map = L.map('map').setView([42.35, -71.08], 13);
var userLocation = new L.LatLng(42.237, -71.96);
L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png', {
attribution: 'Tiles by MAPC, Data by MassGIS',
maxZoom: 17,
minZoom: 9
}).addTo(map);
var marker = L.marker(userLocation).addTo(map);
var circle = L.circle(userLocation, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(map);
.container {
width: 800px;
margin: 20px auto;
}
#map {
width: 800px;
height: 450px;
border: 1px solid #AAA;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js'></script>
<div class="container">
<h1>Maps:</h1>
<div id="map"></div>
</div>
The circle is drawn but the coordinates at which you place it are way beyond the viewport.
Zoom out 3 steps and see it located between Spencer and Leicester (follow the I-90 from Boston in SW direction).
Set the user location first in your code and use it for viewport definition, marker and circle placement.
var userLocation = new L.LatLng(42.35, -71.08);
var map = L.map('map').setView(userLocation, 13);
//...
var marker = L.marker(userLocation).addTo(map);
//...
var circle = L.circle(userLocation, {
//...
Standalone code:
var userLocation = new L.LatLng(42.35, -71.08);
var map = L.map('map').setView(userLocation, 13);
L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
{
attribution: 'Tiles by MAPC, Data by MassGIS',
maxZoom: 17,
minZoom: 9
}).addTo(map);
var marker = L.marker(userLocation).addTo(map);
var circle = L.circle(userLocation, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(map);
Demo
See this JSFiddle
Update
The Q references an outdated leaflet version and CDNs that seem to have some problems with the current release.
With the following resource urls, everything works fine:
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.3.0/MarkerCluster.css" />
<script src="https://unpkg.com/leaflet#1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.3.0/leaflet.markercluster.js'></script>
Messing around with the Google Maps API in a browser, however I'm having a bit of trouble putting in a user input for the variables. Essentially, I want to be able to put in a new lat/long from pressing a button on the page and have the map move onto that.
It doesn't work for the actual input variables, but when I use the commented out section it works perfectly fine.
<body>
<form id = "input" method = "get">
<input type = "text" placeholder = "Latitude" name = "user_lat">
<input type = "text" placeholder = "Longitude" name = "user_lng"><br>
<button type = "submit">Mark on Map</button>
</form>
<div id = "map"></div>
<script>
var lat_in = parseFloat($('#user_lat').val());
var lng_in = parseFloat($('#user_lng').val());
/*var lat_in = 37.697948;
var lng_in = -97.314835;*/
function initMap() {
var location = {lat: lat_in, lng: lng_in};
/*var location = {lat: 37.697948, lng: -97.314835};*/
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: location
});
var marker = new google.maps.Marker({
position: location,
map: map
});
}
</script>
<script async defer
src="link with the API key here">
</script>
I suspect it might have something to do how I actual use the submit button and the way I interact with it, but I'm not 100% sure. I've looked up different things, but I'm still a bit new at this. I just started to dabble in javascript, so I'm sure there are better methods to do this, but I just want to get this working to get an understanding of it.
You can do it like this, Add change listener and on change pan to that location by clicking enter
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Directions service</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="floating-panel">
<b>Start: </b>
<input id="start" type="text"
placeholder="Enter lat">
<b>End: </b>
<input id="end" type="text"
placeholder="Enter lng">
</div>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 0, lng: 0}
});
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: {lat: 0, lng: 0}
});
var onChangeHandler = function() {
DisplayPoint(map);
};
//document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', onChangeHandler);
function DisplayPoint(map) {
var lat = document.getElementById('start').value;
var lng = document.getElementById('end').value;
var latLng = new google.maps.LatLng(lat, lng);
marker.setPosition(latLng);
map.panTo(latLng);
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=initMap">
</script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(18.511325, 73.820176),
mapTypeId: 'roadmap'
});
var iconBase = '';
var icons = {
info: {
icon: iconBase + 'map.png'
}
};
var features = [
{
position: new google.maps.LatLng(18.511325, 73.820176),
type: 'info'
}
];
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
});
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDeuMlx32V1fYT3wRAa1wEjjtQuAI6wATM&callback=initMap">
</script>
<div class="container-fluid">
<div class="row">
<div id="map" style="width: 100%; height:100%"></div>
</div>
</div>
Google map with custom marker
hello i am using Google map inside my website.i want to add my logo.png instead of Google marker.i have generated key from Google page & added it inside the script tag. i have followed all the steps given on the Google page i have written the following code for it.but when i use the following code it shows nothing.i want to design same layout as shown in image.
Remove all the outer divs. just remove and try your code works.
refer this question : Google Maps doesn't work when inside a div
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(18.511325, 73.820176),
mapTypeId: 'roadmap'
});
var iconBase = '';
var icons = {
info: {
icon: iconBase + 'map.png'
}
};
var features = [
{
position: new google.maps.LatLng(18.511325, 73.820176),
type: 'info'
}
];
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDeuMlx32V1fYT3wRAa1wEjjtQuAI6wATM&callback=initMap">
</script>
<div class="row" style="width: 100%; height:100%">
<div id="map"></div>
</div>
you should set a size to your div#map like so:
#map1 {
height: 100%;
width: 100%;
}
Adjust according your needs of course.
The crux of your problem goes to integrating google map with bootstrap.In details, you should set the css height style of map tag's parent div(.container-fluid) to 100%;
In order to make the following demo run normally,you should provide your google map api key and your picture file for the marker.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body,
.container-fluid {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="container-fluid">
<div id="map"></div>
</div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 26.880,
lng: 112.644
},
zoom: 8
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(26.880, 112.644),
map: map,
draggable: true,
icon: '/images/github-youtube.jpg'// your image file path
});
marker.setMap(map);
}
</script>
<!-- your google map api key : xxxx-->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>
</html>
PS: this is the first time I used google maps,so maybe some code is weird.I have tried as the following procedure.
1.see google maps getting started page.
2.add customized marker.
3.integrate with bootstrap.
Hope it can help you.
I'm starting with jQueryMobile and wanted to display a map using OpenLayers. However I'm having a weird issue. Here is the almost working code. Sorry I couldn't make a fiddle, however you can test it easily with copy/paste on notepad or whatever.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<style type="text/css">
html ,body {
margin: 0;
padding: 0;
height: 100%;
}
.ui-content {
padding: 0;
}
#pageone, #pageone .ui-content, #basicMap {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<div id="basicMap"></div>
</div>
</div>
<script>
function init() {
map = new OpenLayers.Map("basicMap", {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.ArgParser(),
new OpenLayers.Control.Attribution()
]
});
var mapnik = new OpenLayers.Layer.OSM();
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var position = new OpenLayers.LonLat(7.55785346031189,50.3625329673905).transform( fromProjection, toProjection);
var zoom = 3;
map.addLayer(mapnik);
map.setCenter(position, zoom );
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
var marker = new OpenLayers.Marker(position);
marker.events.register("click", map , function(e){ alert("click");
});
markers.addMarker(marker);
}
$(document).on("pagecreate","#pageone",init());
</script>
</body>
</html>
This code doesn't show the map.
Now if you take off the following line :
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
You can see that the map is showing.
Any idea on how can I solve this ? because I think it can be solved easily but can't see how.
Thank you.
I knew it was stupid, if it can interest someone , the css should be like :
#pageone, #pageone .ui-content, #basicMap {
width: 100%;
height: 100%;
display : block;
}
And call JS :
$(document).ready(init());
Don't know however why this works.
I have an external json which I am trying to overlay on a google map. The overall plumbing works fine.
The map gets generated. Data gets iterated, and markers are placed by reading the coordinates. But the when i look at the map the coordinates are way off on the map. The data set can not be wrong, i can give my word on that. Is there some adjustment I need to make to get this thing map to each other. Here is my code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.748433, -73.985655),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
<script type="text/javascript">
$(document).ready(function() {
var image = 'http://soumghosh.com/otherProjects/doitt/images/marker.png';
$.getJSON("http://data.cityofnewyork.us/resource/jfzu-yy6n.json", function(json1) {
$.each(json1, function(key, data) {
var latLng = new google.maps.LatLng(data.facility_address.latitude, data.facility_address.longitude);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
title: data.title,
icon:image
});
marker.setMap(map);
});
});
});
</script>
</body>
</html>