How can I show a centered on the map progress bar (with %) while waiting that a layer is rendered on the map?
Here is my code:
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<script type='text/javascript' src="http://makinacorpus.github.io/Leaflet.Spin/leaflet.spin.js"></script>
<script type='text/javascript' src="http://makinacorpus.github.io/Leaflet.Spin/spin.js/dist/spin.min.js"></script>
</head>
<body>
TF.Landscape |TF.Outdoors
<div id="map" style="width: 640px; height: 480px"></div>
<progress value="0" max="100"></progress>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"> </script>
<script>
var map;
var tileLayer;
function showMap (layerURL) {
if(!map) {
map = L.map('map').setView([19.5, -73], 7);
}
tileLayer = L.tileLayer(layerURL, {
attribution: 'Map data © OpenStreetMap',
maxZoom: 18
});
//map.addLayer(tileLayer);
map.spin(true);
setTimeout(function () {
map.addLayer(tileLayer);
map.spin(false);
}, 3000);
}
</script>
Thanks!
There is not built- or plugged-in solution for this yet.
So
if the progress-bar and % are not that important and you mainly want to tell the user that something's loading you might want to have a look at Leaflet.Spin which is a plugin for showing a spinning icon on your map.
if you really want a progress-bar a good starting point might be the markercluster-plugin. The 50k example has such a progress bar.
Related
I have a geojson file that I'm trying to add to a map but for some reason, they are misaligned.
I have made this simplified version of the page, removing all my markers and all other HTML to try to isolate the problem but with no joy.
I've tried
Loading the Geojson on the page in <script> tags like the leaflet JS tutorial shows
Saving the Geojson in a folder on my site and calling it to load with JavaScript
And with the link, you see below I've used fetch to get the API
http://codeyeti.co.uk/ActiveCommuters/map_dev.php
They all return this same misaligned result.
the Geojson file can be viewed on Maptiler where it displays perfectly
https://cloud.maptiler.com/data/b92719af-8d5b-4006-9631-3d8b13eaa1c6/#9.19/53.2826/-4.3682
here is my code
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js" crossorigin=""></script>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([53.309242,-4.626208], 10);
L.tileLayer('https://api.maptiler.com/maps/openstreetmap/{z}/{x}/{y}.jpg?key=g9ErshPDnj0LYYtEd10o', {
attribution: '© MapTiler © OpenStreetMap contributors',
}).addTo(map);
fetch('https://api.maptiler.com/data/b92719af-8d5b-4006-9631-3d8b13eaa1c6/features.json?key=g9ErshPDnj0LYYtEd10o')
.then(function (responce) {
return responce.json();
})
.then(function (data) {
L.geoJSON(data).addTo(map);
});
</script>
</body>
</html>
Has anyone had trouble like this?
misaligned result by style.css line 271 :
img {
margin: 10px 0px;
}
you can check it
Map of leaflet is a group images
I was searching for free maps as an alternative to google maps to use in my website. As I searched I found leaflet. Referring the tutorial I tried creating a simple map in my localhost. But its loading blank. I am using leaflet for the first time. Is there anything I am missing out in my code? Can anyone help me..? Thanks in advance.
Here is my code:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style>
#map{ height: 100% }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map',{
center: [43.64701, -79.39425],
zoom: 15
});
</script>
</body>
</html>
You need to add a tile layer to your map and try using one of the latest leaflet versions, such as 1.3.3. Moreover set a height like this:
#map{ height: 500px }
Try this
var map = L.map('map').setView([43.64701, -79.39425], 15);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
#map {
height: 500px
}
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet#1.3.3/dist/leaflet.css">
<script src='https://unpkg.com/leaflet#1.3.3/dist/leaflet.js
'></script>
<div id="map"></div>
I am using JQuery mobile with the Google Map API.
The map is not displayed properly unless I refresh the page and I don't understand why.
here is my map.html file:
<div data-role="page" id="map-page">
<div data-role="content" id="canvas-map" style="background-color:red"></div>
<script src="js/map.js"></script>
<script type="text/javascript">
var $canvasMap = $('#canvas-map');
$('#canvas-map').on('pagebeforeshow', initMap());
</script>
</div>
and my map.js file:
function initMap() {
"use strict";
google.maps.visualRefresh = true;
var marker, map,
myLocation = {lat:50, lon:-80},
mapOptions = {
zoom: 5,
center: new google.maps.LatLng(myLocation.lat, myLocation.lon),
mapTypeId: google.maps.MapTypeId.PLAN,
disableDefaultUI: true
};
$('#canvas-map').css("height", "200px").css("padding", "0px");
map = new google.maps.Map(document.getElementById('canvas-map'), mapOptions);
/** MyPosition **/
marker = new google.maps.Marker({
map: map,
draggable: false,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(myLocation.lat, myLocation.lon),
});
}
If I navigate from another page to the above page, I get the following result:
And then when I refresh, I get the expected result:
It is obviously not a problem with the canvas, since it is displayed (in red). Plus,if I navigate trhough the map, I can see the marker displayed at the right position.
These screenshots were made using Google Chrome, I tried with Firefox and the canvas is here completely red, no map at all.
PS: this is a simple version of my original code, but the behavior is the same.
EDIT:
See Gajotres' answer for details, but basically, within the link to access map.html page, adding target="_blank" solved the issue. Note that target="_self" seems to work as well, strange since it is supposed to be the default value. Details on target here.
There's a trick how google maps v3 framework can be easily implemented with jQuery Mobile.
Lets talk about the problems here. your content div has a height and width problem, mainly because only time page dimensions can be calculated correctly is during the pageshow event. But even then content div will not cover full page.
Your problem can be solved with a little bit of CSS :
#content {
padding: 0 !important;
position : absolute !important;
top : 40px !important;
right : 0 !important;
left : 0 !important;
height: 200px !important;
}
Basically you are forcing your content to cover available space.
Working example: http://jsfiddle.net/RFNPt/2/
Final solution :
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<title>MyTitle</title>
</head>
<body>
<div data-role="page" class="page">
<div data-role="content" id="index-content">
<div id="menu">
Map
</div>
</div>
</div>
</body>
</html>
map.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<title>MyTitle</title>
</head>
<body>
<div data-role="page" id="map-page">
<div data-role="content" id="content">
<div id="canvas-map" style="height:100%"/>
</div>
<style>
#content {
padding: 0 !important;
position : absolute !important;
top : 0 !important;
right : 0 !important;
bottom : 40px !important;
left : 0 !important;
}
</style>
<script type="text/javascript">
$(document).on('pageshow', '#map-page', function(e, data) {
var marker, map,
myLocation = {
lat: 50,
lon: -80
},
mapOptions = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.PLAN,
center: new google.maps.LatLng(myLocation.lat, myLocation.lon)
};
$('#canvas-map').css("height", "200px").css("padding", "0px");
map = new google.maps.Map(document.getElementById('canvas-map'), mapOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(myLocation.lat, myLocation.lon),
});
});
</script>
</div>
</body>
</html>
If you take a look at this ARTICLE you will find much more information regarding this topic plus examples.
Try to add following code...
$('#canvas-map').on('pageshow', function(){
google.maps.event.trigger(canvas-map, "resize");
});
this will fire resize event and reload the map on your page.
Just for completeness: The action of drawing the map should be performed after the page loads, that is when the page has actual values for width and height and you can initialize it as follows:
var map; //declared as global so you can access the map object and add markers dynamically
$("#canvas-map").on( "pageshow", function() {
var mapProp = {
center:new google.maps.LatLng(53.6721226, -10.547924),
zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
});
No refresh needed
I am using Google Maps JavaScript API to load map inside my mobile website. When I navigate from the previous page map won't load but if I refresh the page map load as expected. If I use the JavaScript inside the body even the page is not loading. I can't figure out the problem. Is it something with the previous page code ?
Here is my code in Head tag.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.1.0.min.css" />
<link href="css/site.css" rel="stylesheet" type="text/css" />
<script src="./js/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=xxxxxxxx&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(<?php echo $longtitude ?>, <?php echo $latitude ?>);
var mapOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Location'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).delegate('#content', 'pageinit', function () {
navigator.geolocation.getCurrentPosition(initialize);
});
</script>
</head>
Here is my Body Tag
<body >
<div id="wrapper">
<div class="header">
<img src="images/logo-small.png" alt="logo"/>
</div>
<div class="back">
<a data-rel="back"><img src="images/back.png"/></a>
</div>
<div id="content">
<div class="list">
<div class="list-items" id="info">
<?php echo "<h3>$sa1<span>$postcode<span>$sa2</span></span></h3><h2>$price</h2>";?>
<br class="clear" />
<br class="clear" />
</div>
</div>
<br class="clear" />
<div id="map-canvas">
</div>
</div>
</div>
</body>
I refer question This and This but it's not working with my code.
Problems
First of all, why are you using jQuery Mobile? I don't see the point in your current example.
In this case jQuery Mobile is the main problem. Because jQuery Mobile is used everything will be loaded into the DOM. When you "navigate from the previous page" page is not refreshed and this line:
google.maps.event.addDomListener(window, 'load', initialize);
can't trigger. It will trigger only if you manually refresh the page.
Second thing, you cant use jQuery Mobile page events without having any page what so ever. In your code you have this part:
$(document).delegate('#content', 'pageinit', function () {
navigator.geolocation.getCurrentPosition(initialize);
});
For it to initialize successfully div with an id content MUST have another attribute called data-role="page", like this:
<div id="content" data-role="page">
</div>
Third thing. Lets assume everything else is ok. Pageinit will not trigger from the HEAD. When jQuery Mobile loads pages it loads them into the DOM and only BODY part will be loaded. So for your map to work you need to move our javascript to the BODY (including a css). In you first example it didnt worked because you were triggering page even on a non-page div container.
And last thing, if you want to use jQuery Mobile properly you will need to take care correct version of jQuery is used with a correct version of jQuery Mobile. If you want to be safe use jQ 1.8.3 with jQM 1.2
Solution
Here's a working solution:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<style>
#map-canvas {
width: 300px;
height: 300px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(33.89342, -84.30715);
var mapOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Location'
});
}
//google.maps.event.addDomListener(window, 'load', initialize);
$(document).on('pageshow', '#wrapper', function(e, data){
initialize();
});
</script>
<div id="wrapper" data-role="page">
<div class="header">
<h3>Test</h3>
<img src="images/logo-small.png" alt="logo"/>
</div>
<div id="content">
<div id="map-canvas"></div>
</div>
</div>
</body>
</html>
Working examples and much more information regarding this topic can be found in this ARTICLE.
just add: data-ajax="false" to the link tag which redirects to the page that contains your map. for example, if map.aspx contains your map, you can link to it like this:
<a href="map.aspx" data-ajax="false">
I was having same problem but I have no any jquery-mobile libraray or any other which would conflict the map. Struggling a hard time, I found a solution for my project:
Doesn't work:
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer>
</script>
Works (Removing async and defer attributes):
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
Hope! This helps someone if the other solutions doesn't work. Try this only if none of other solution work because it is not good suggestion as we know google page speed guide or google map api guide says to use it.
I have also same problem with
google.maps.event.addDomListener(window, 'load', initialize); where initialize is my method .
I just add few line of code before google.maps.event.addDomListener(window, 'load', initialize);
Code is
$(document).ready( function () {
initialize();
});
and this code is working for me
You should use the pageloadevent to load everything. This way everything is loaded once jquery Mobile has done all the DOM changes it needs. I've had this same problem and that's what helped.
$(document).on('pageload', function() {
initialize();
});
It's in the docs: http://api.jquerymobile.com/pageload/
EDIT: Sometimes it also helps to load the markers in a separate function than the one loading the map.
I'm dabbling a bit with google maps and data presentation and was wondering if it is possible to create a button on the map page to drop the markers.
I have no programming experience (I deal with SQL mainly) so any help appreciated - I have the following code taken from varying webistes:
<!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 type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
// Standard google maps function
function initialize() {
var myLatlng = new google.maps.LatLng(52.469397,-3.208008);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
TestMarker();
}
// Function for adding a marker to the page.
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map,
animation: google.maps.Animation.DROP
});
}
// Testing the addMarker function
function TestMarker() {
Marker1=new google.maps.LatLng(52.268000,-3.043000); addMarker(Marker1);
Marker23=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker23);
Marker24=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker24);
Marker25=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker25);
Marker26=new google.maps.LatLng(51.524243,-3.193911); addMarker(Marker26);
Marker584=new google.maps.LatLng(51.747777,-3.500599); addMarker(Marker584);
Marker585=new google.maps.LatLng(51.608871,-3.647570); addMarker(Marker585);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="border: 1px solid black; width: 500px; height: 400px;">map div</div>
<p style="margin-top: 5px">
<button id="drop">Drop</button>
</p>
</body>
</html>
Now this creates a button, but I can't for the life of me work out how to link this back to my markers. I have found something here that I should be able to adapt but I just don't have the knowhow.
My markers are defined by a sql query, but for now I would like to be able to simply feed in a list and get a drop button to drop them when I click on it.
Any help massively appreciated :)
Remove the call to TestMarker from your initialize function. Then just add an onclick attribute to your button:
<button id="drop" onclick="TestMarker()">Drop</button>